在Html中使用Requirejs进行模块化开发实例详解
在前端模块化的时候，不仅仅是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进行模块化开发的相关知识就给大家介绍这么多，希望对大家有所帮助！
-
本文向大家介绍使用RequireJS库加载JavaScript模块的实例教程，包括了使用RequireJS库加载JavaScript模块的实例教程的使用技巧和注意事项，需要的朋友参考一下 js通过script标签的默认加载方式是同步的，即第一个script标签内的js加载完成后，才开始加载第二个，以此类推，直至js文件全部加载完毕。且js的依赖关系必须通过script的顺序才能确保；而在js加载期
-
本文向大家介绍Python hashlib模块实例使用详解，包括了Python hashlib模块实例使用详解的使用技巧和注意事项，需要的朋友参考一下 这篇文章主要介绍了Python hashlib模块实例使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 hashlib模块主要的作用： 加密保护消息安全，常用的加密算法如MD5，SHA1等。
-
如果一个页面只是一个按钮点击事件或者一个function的话，是没有必要进行模块化处理的。 而如果一个页面有两个按钮或者两个function的话，是需要进行考虑模块化处理了。 模块化不是必须的，它是业务膨胀的必然结果。 比如一个常见的表单提交： 表单验证 => 数据包装 => ajax提交 => 响应处理 => 显示对话框 无论上述的哪一个步骤，都不是一个function可以解决的， 将上述每一
-
Introduction When we say an application is modular, we generally mean it’s composed of a set of highly decoupled, distinct pieces of functionality stored in modules. As you probably know, loose coupli
-
本文向大家介绍requireJS模块化实现返回顶部功能的方法详解，包括了requireJS模块化实现返回顶部功能的方法详解的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了requireJS模块化实现返回顶部功能的方法。分享给大家供大家参考，具体如下： 引用requireJs html部分 新建main.js 创建backtop模块 backtop.js backtop 依赖 scrollT
-
本文向大家介绍AngularJS 模块化详解及实例代码，包括了AngularJS 模块化详解及实例代码的使用技巧和注意事项，需要的朋友参考一下 AngularJS有几大特性，比如： 1 MVC 2 模块化 3 指令系统 4 双向数据绑定 那么本篇就来看看AngularJS的模块化。 首先先说一下为什么要实现模块化： 1 增加了模块的可重用性 2 通过定义模块，实现加载顺
-
本文向大家介绍Vuex 模块化使用详解，包括了Vuex 模块化使用详解的使用技巧和注意事项，需要的朋友参考一下 前言 上回我们说了一下 vuex 的简单使用，最后面的时候有说了，由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的
-
本文向大家介绍Android 开发中使用Linux Shell实例详解，包括了Android 开发中使用Linux Shell实例详解的使用技巧和注意事项，需要的朋友参考一下 Android 开发中使用Linux Shell实例详解 引言 Android系统是基于Linux内核运行的，而做为一名Linux粉，不在Android上面运行一下Linux Shell怎么行呢？ 最近发现了一个很好的And