|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//以前载入插件，通过载入的先后顺序实现依赖<script src="jquery.min.js"></script><script src="jquery.cookie.js"></script>//使用sea.js，要将cookie插件制作成模块：define(function(require, exports, module){ return function($){ // 放置插件的源代码 }});//在其他模块里使用该插件的方法：define(function(require, exports, module){ //先要载入jQuery的模块 var $ = require(‘jquery‘); //然后将jQuery对象传给插件模块 require(‘./cookie‘)($); //开始使用 $.cookie方法}); |
这种方法的思路是将插件作为一个返回函数，放置在define里，伪装成模块。使用该插件时，用reuqire方法将其载入，这时载入的会是一个函数，然后将jQuery对象作为参数传进去，就可以实现在jquery对象上绑定新的插件方法。这种思路非常有效，基本上，任何脚本都可以用这种思路实现模块化。
Bootstrap模块化
Bootstrap的js实际上也是在jQuery对象上扩展新的方法，可以视为jQuery的插件，所以模块化的方法也是按照插件的思路来实现：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
define(function(require, exports, module){ return function($){ //bootstrap.js的源代码 !(function($){ …. })($) /* 注意： bootstrap.js的源代码是由若干!(function($){...})(window.jQuery)段落组成的 需要将最后传入的参数改成 $ */ }}); |
Highcharts模块化
Highcharts是非常强大的图表绘制类库，它也需要依赖jQuery，但并不是在jQuery对象上扩展新方法，而是单独创建一个Highcharts对象。但是，Highcharts对象在源码中就是强制创建在全局对象window上的，所以一样不需要exports，使用插件模块化的方法就可以了。只需注意将源码中调用jQuery对象的地方，改成传入的$对象就可以了。
