在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进行模块化开发的更多相关文章
- Angular 结合RequireJs实现模块化开发
angular的指令是模块化很好的一个体现,下面我将只使用指令(不用控制器),结合requirejs,实现模块化开发. 模块化关系图:
- 使用requireJs进行模块化开发
requireJs使用 requireJs 使用require.js的第一步,是先去官方网站下载最新版本. 下载后,假定把它放在js子目录下面,就可以加载了. <script src=" ...
- Javascript模块化开发，使用模块化脚本加载工具RequireJS，提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式
描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
- 模块化开发RequireJS之shim配置
一.shim requirejs使用AMD规范开发,若开发过程中加载非AMD规范js,需要使用requirejs的shim进行配置. shim配置语法为: //配置文件 requirejs.confi ...
- 使用requirejs模块化开发多页面一个入口js的使用方式
描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
- 模块化开发(requireJS)
模块化 在前端使用模块化开发,可以将代码根据功能实施模块的划分,每个模块功能(职责)单一,在需要更改对应的功能的时候,只需要对指定的模块进行修改,其他模块不受任何影响. 为什么要进行前端模块化? 达到 ...
- 【模块化开发】------requireJS的基本使用------【巷子】
前言 为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了.,下面是某个网站的js引用情况 虽然代码的复用度提升了,但是缺点也体现了出来 缺点: ...
- JS模块化开发：使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
随机推荐
- APK动态加载框架（DL）解析
转载请注明出处:http://blog.csdn.net/singwhatiwanna/article/details/39937639 (来自singwhatiwanna的csdn博客) 前言 好久 ...
- javascript 网页运行代码效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- hdu 5666 (大数乘法) Segment
题目:这里 题意:在线段x+y=q与坐标轴围成的三角形中,求有多少个坐标为整数的点,答案模上p. 很容易就想到最后答案就是((q-1)*(q-2))/2然后模上p就是了,但是这个数字比较大,相乘会爆l ...
- 在unity3d中使用opencv
1.首先下载opencv2.4.10,解压缩后放在合适的地方,然后根据自己的电脑(32位或64位)选择X86或X64,我的是32位,将“opencv存放路径\build\x86\vc12\bin”加入 ...
- 多媒体技术基础之---Come on！来点儿音乐吧
其实要说在Linux系统下播放音乐,确实是一件让人非常抓狂的事情,抛开各种音频格式的商业授权不说,即使提供给你相应的解码库,能玩儿得转的人那又是少之又少.可能有些盆友说ubuntu这方面确实做得不错, ...
- __slots__ 属性绑定
s = Student() # 创建新的实例 s.name = 'Michael' # 绑定属性'name' s.age = 25 # 绑定属性'age' s.score = 99 # 绑定属性'sc ...
- QEMU中smp,socket,cores,threads几个参数的理解
在用QEMU创建KVM guest的时候,为了指定guest cpu资源,用到了-smp, -sockets, -cores, -threads几个参数, #/usr/bin/qemu-system- ...
- js 页面值变动监听
1.初始化值map对象 var compareMap = {}:// 定义全局变量 function initCompareMap(context){//context 为指定要初始化的区域,即上下文 ...
- ios 上架需要注意的问题
前段时间上架产品的时候,因为定位提示问题被拒绝了,而且集成了融云及时聊天的key,没有从测试环境升级到生产环境,所以记录一下APP上架所需要注意的事项. 1.程序没有崩溃性BUG 2.程序不存在逻辑性 ...
- Big Number--hdu1018(数学)
http://acm.hdu.edu.cn/showproblem.php?pid=1018 题目大意 : 求一个数的阶乘的位数 公式log10(n!)=log10(1)+log10(2)+log1 ...