在Html中使用Requirejs进行模块化开发实例详解


Posted in Javascript onApril 15, 2016

在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发。

如何使用requirejs加载html

Reuqirejs有一个text的插件,它可以读取指定文件的内容,读取到的内容就是文本。

如何下载text插件

第一种方法,可以通过npm下载:

npm install requirejs/text

第二种方法,也可以直接去官方github上面直接下载。

直接拷贝内容到text.js中即可。

如何安装text插件

在requirejs的main.js中配置text插件的依赖即可,跟jquery差不多,只要保证能通过正常的加载方式加载到它就行。

requirejs.config({
baseUrl: './',
paths: {
'text':path+'/require/text',
...
},
shim: {
...
}
});

也可以直接放在baseUrl里面。

如何使用text

在目标模块中,按照下面的语法即可:

define(function(require){
var html = require("text!html/test.html");
console.log(html);
});

或者

define(["text!html/test.html"],function(html){
console.log(html);
});

如何进行html的模块化开发?

看过上面你已经会使用text了,但是仍然不知道怎么组织前端代码。

举个栗子:

博客园的网站页面会根据上方的导航跳转到不同的页面。如果是在单页面中,很容易想到原始的做法是,导航的按钮对应不同的div,点击那个按钮,就显示与之对应的div;其他的div则隐藏掉。

那么,前端的代码可能会这样:

<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>
<div style="display:block">按钮1对应的页面</div>
<div style="display:none">按钮2对应的页面</div>
<div style="display:none">按钮3对应的页面</div>
</body>
</html>

这样的代码会很杂乱...而且前端Html会很长...不利于维护。

那么有了reuqirejs的text插件以后,就可以这样了:

<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>
<div id="target"></div>
</body>
</html>

然后在对应的模块中:

$('#target').html(require("text!目标按钮对应的页面.html"));

这样就随性多了吧!前端代码也可以跟着模块一起有效的管理了!

不过需要注意的是:这种方式会导致Jquery绑定的事件失效——所以一定要在html()方法后面,重新绑定下事件。

关于在Html中使用Requirejs进行模块化开发的相关知识就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
jquery 学习之一 对象访问
Nov 23 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
DWR中各种java方法的调用
May 04 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
微信小程序签到功能
Oct 31 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 #Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 #Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 #Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 #Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 #Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 #Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 #Javascript
You might like
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
详解微信小程序中组件通讯
2018/10/30 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
pytyon 带有重复的全排列
2013/08/13 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
Python socket聊天脚本代码实例
2020/01/02 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
公司请假条范文
2014/04/11 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
神秘岛读书笔记
2015/07/01 职场文书
党员公开承诺书2016
2016/03/24 职场文书