码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-09-24 19:22:11      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

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

标签:

原文地址:http://www.cnblogs.com/gaowx/p/4836072.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!