将其他js类库制作成seajs模块-优快云博客

本文介绍如何使用Sea.js实现前端模块化，包括jQuery插件、Bootstrap和Highcharts等库的模块化改造方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
             //以前载入插件，通过载入的先后顺序实现依赖
            
             <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的插件，所以模块化的方法也是按照插件的思路来实现：

 
             define(
             function
             (require, exports, module){
            
             return 
             function
             ($){
            
             //bootstrap.js的源代码
            
             !(
             function
             ($){
            
             ….
            
             })($)
            
             /*
            
             注意：
            
             bootstrap.js的源代码是由若干!(function($){...})(window.jQuery)段落组成的
            
             需要将最后传入的参数改成 $
            
             */
            
             }
            
             });

Highcharts模块化

Highcharts是非常强大的图表绘制类库，它也需要依赖jQuery，但并不是在jQuery对象上扩展新方法，而是单独创建一个Highcharts对象。但是，Highcharts对象在源码中就是强制创建在全局对象window上的，所以一样不需要exports，使用插件模块化的方法就可以了。只需注意将源码中调用jQuery对象的地方，改成传入的$对象就可以了。