js中模块化开发(require.js)
来源:互联网 发布:mysql里获取当前时间 编辑:程序博客网 时间:2024/05/16 10:18
require.js
1.关于什么是模块化?
这里不妨我们可以下个定义:模块化就是将js按照功能划分出来,拆分成一个一个的小块,每一个小块负责单独的功能,想要什么功能就可以去加载什么模块。
2.模块化有什么好处?
模块化是按需求划分的,代码的复用性高
代码模块化之后不在依赖文件的加载顺序,解决了js文件的彼此依赖问题
可以解决命名冲突
代码模块化之后性能更好
3.模块的定义和使用?
- 这里分两种方式去定义模块,并给出相应使用方法:
方法一://使用require.js定义模块(该模块保存为a.js和b.js文件)以下js文件均保存在js目录下define(function(require,exports,module){ exports.a=5; //exports为输出变量a=5})define(function(require,exports,module){ exports.b=10;})//定义另一个模块,并引入a.js b.js (该模块保存为sum.js)define(function(require,exports,module){ var mod1 = require('a.js');//引用 将a.js保定到模型mod1上 var mod2 = require('b.js'); exports.sum=function(){ return mod1.a+mod2.a };})//将模块统一并输出(该模块保存为init.js)require(['sum.js'],function(mod){ alert(mod.sum());})//在页面中调用<script src="js/require.js" data-main="js/init.js"></script>
方法二://使用require.js定义模块(该模块保存为a.js和b.js文件)以下js文件均保存在js目录下define(function(){ var a=5; return a;})define(function(){ var b=10; return b;})//定义另一个模块,并引入a.js b.js (该模块保存为sum.js)define(function(require){ var mod1 = require('a.js');//mod1代表a=5; var mod2 = require('b.js'); return mod1+mod2;})//将模块统一并输出(该模块保存为init.js)require(['sum.js'],function(mod){ alert(mod);})//在页面中调用<script src="js/require.js" data-main="js/init.js"></script>
4.require.js注意事项
方法一:
a.三个参数必不可少,外部需要用到的函数,变量需用exports.name来输出。
b.引用模块时,要注意引用过来的相当于挂在model上的一个方法或者属性,不可直接使用其本身。
方法二:
a.定义模块时,函数和变量等需要return 出去。
b.引用模块时,直接引用过来的是其本身,不是挂在model上的方法或属性。
页面引用require.js时,data-main=”js/init.js”表示在众多的JS文件中的主要入口文件是哪个。
1 0
- js中模块化开发(require.js)
- 前端模块化 require js
- JS 模块化使用 [Require JS]
- js模块化编程 : require.js
- js模块化之require.js
- JS模块化编程 Require.JS
- javascript高级模块化--require.js
- javascript 模块化编程 require.js
- Javascript模块化编程 require.js
- js模块化编程require.js学习摘记
- JS模块化编程require.js简介
- angular js----javascript 模块化require.js
- 转:javascript模块化编程(require.js)
- Javascript模块化编程:require.js的用法
- Javascript模块化编程:require.js的用法
- Javascript模块化编程--require.js(上)
- Javascript模块化编程--require.js(下)
- Javascript模块化编程:require.js的用法
- 编程需要的数学思维
- 弗罗莱(Fleury)算法 欧拉(Euler)通路/回路
- 单机版Solr6.0+整合Tomcat与中文分词器IKAnalyzer
- 简单的关于java的伪泛型的一个小例子
- 2017年------我要做哪些事?
- js中模块化开发(require.js)
- 总结2016
- Plesk 更改数据库的文件路径
- 用VC++创建自定义向导程序
- 创建桌面快捷图标
- HTML 音频(Audio)
- wampserver环境下修改mysql密码
- 初步学习java---简单画图板(注:画板还没完善,后期逐步完善)
- RHCE练习题 5. 自定义用户环境