js中模块化开发(require.js)

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文件中的主要入口文件是哪个。

---