将其他js类库制作成seajs模块

转载自 http://xbingoz.com/423.html

通过seajs实现前端模块化的过程中，必然需要将原有脚本改成seajs的模块。如果是一段相对独立的脚本，实现模块化的方法会比较简单，只要用define函数将原来的代码包裹起来，然后将主函数或对象用exports输出就可以了。而相比之下，将一些类库制作成模块会稍微复杂一点。比如jQuery的各种插件，实际上是依赖jQuery的，所以在模块化的时候，也必须依赖jQuery的模块。玉伯在博客里介绍了jQuery插件的模块化的方法，例如：

 

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对象的地方，改成传入的$对象就可以了。