seajs学习笔记

最新推荐文章于 2024-11-02 15:48:17 发布

weixin_30596735

最新推荐文章于 2024-11-02 15:48:17 发布

阅读量112

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/ljzforever/archive/2012/05/08/2490932.html

版权

现在公司开发的项目大量用到了JS,由于项目模块要求不同,编程人员的开发水平也不同,前端的JS写的非常的乱,最近一段时间也在思索着如何才能以最小的成本,在不大幅提高编程难度的前提下最大化的规范前端编程.前几天看了一篇文章:使用SeaJS实现模块化JavaScript开发,然后又仔细研究了关天,感觉很不错,现将研究心得分享如下.

一.模块化

JS的模块化编程思路其实来源于一系列编程规范(如CommonJS)和此规范的一些实现(如Nodejs),虽然我对以上提到的这些东东没有什以研究,但是以我在改别人前端代码的痛苦经历和就"模块化"这三个字的字面意思来讲,还是能够理解它想表达的意思.所谓"模块化",就是以分治法为依据,把一个大的问题分解成若干个高内聚,低耦合的小的问题.最后通过一系列依赖关系明确的相互调用,最后共同解决那个大问题.这里的两个关键是高内聚与明确的低的耦合.seajs解决的正是后面一个关键.

二.seajs概述

大部分情况下,引入一个新的内容都会增加旧有内容的复杂性.既然它的目标是降低复杂性,那么它本身就应该保持足够的简单.seajs非常好的遵守了KISS原则.SeaJS仅向全局公开了两个标识符:seajs与define.

seajs对象有两个方法use和config.下面是define方法的结构图

可以看到,define的第一个参数与module的属性都有一个叫id的.其实他们是一回事,如果传入id,module则用它,如果不传入,则使用一个默认的规则生成每个模块的id.

define的第二个参数dependencies与module的属性dependencies也是有关系的.module的属性dependencies是传入的dependencies集合并上使用require方法获取的依赖的集合.

define是个重要的方法,它有三个参数:require,exports与module.这个方法的构造完全附合CommonJS下面的Modules/Wrappings规范:使用require获取“依赖”，使用exports导出“接口”,而module则代表被定义的模块本身.

seajs对象与define方法的具体使用方法可以参考官方的文档进行学习.从一般使用顺序来讲,首先通过seajs.config进行全局配置,然后通过define定义各个模块,最后通过seajs.use方法使用各模块.如果能按照这个方法去理解,应该就能够很快的掌握这个框架.

下面来谈谈我对使用seajs框架的理解

一.代码组织

如果一个网站的JS全部是由seajs组织的,你就会发现所有的js只会出现在两个地方:define里与seajs.use里.在define里,因为这里是模块定义的位置;在seajs.use里,因为这里是唯一能够使用由define定义的模块的地方.通过define定义模块,所有的功能都被封装成一个个js对象,且这些对象是闭包的,只有通过seajs.use方法的第二个参数----一个回调函数的参数才能使用这些定义的对象.

二.顺序加载

由于seajs仅仅是一个模块加载器而不是文件加载器,它不能保证脚本一定是按代码的书写顺序进行加载.为了应付这种情况,seajs推荐使用LABjs配合seajs进行使用.

Labjs的使用也比较简单,使用script方法加载脚本,使用wait方法执行脚本.更加具体的说明请参照其官方文档.

三.循环引用

参见下面三段代码:

//a.js
define(function(require, exports, module) {
    var b = require("b");
    alert(b);
    return b + 1;
})

//b.js
define(function(require, exports, module) {
    var a = require("a");
    alert(a);
    return a + 2;
})

//html
seajs.use(["a.js"], function(result) {
    alert(result);
})

请问发现了什么问题.答案是a模块与b模块发生了循环引用.这个问题如果在seajs早期的版本里,貌似会报异常,但是现在不会了.当html页面请求a模块时,a模块发现其依赖于b模块,于是执行b模块.但是此时发现其又依赖a模块.seajs现在的处理是直接返回一个空对象{},所以先是弹出[object Object],然后弹出[object Object]2,最后弹出[object Object]21.

四.脚本改写

现有其它类库是不能直接被seajs引用的,而是需要根据SeaJS的的模块定义规则对现有库进行一个封装.以官方封装的jquery1.7.1为例:

(function(factory) {

  if (typeof define === 'function') {
    define('#jquery/1.7.1/jquery', [], factory);
  }
  else {
    factory();
  }

})(function(require) {
  //jquery原生代码
  if (require) return $.noConflict(true);
});