seaJS 浅析(一)

一、初识seaJs

sea.js是一个加载器，是淘宝前端攻城师玉伯所著，他是根据commonjs规范的一种表现。何为commonJS？commonJs可以理解成一个组织，他们中的所有人都致力于提高javascript程序的可移植性以及可交互性。这种可移植性以及可交互性不仅仅局限于浏览器端，而且也包括了服务器端的javascript.

那seaJS到底是什么呢？seaJS就是根据commonJS组织规范写的一个加载器。其内部可API并不多主要有以下几个：alias，config，use，define。主要就这四个API。seaJS主要就是根据这四个API对其环境中的javascript进行管理的。那么seaJS是如何对其环境中的代码管理的？

在先前的页面中，不管前端程序员还是后端程序员，在他们需要某一个js的时候，有人可能会直接写行内js，而有些人则习惯于从外部引入js文件。项目后期维护的时候，杂乱的页面不仅加大了维护的成本，而且维护起来也很不方便。这个时候就可以用seaJS来维护我们的这杂乱无序的js文件。

seaJS的利是远大于弊的，这个至少在大项目中可以体现。在比较小的项目中seajs还是舍弃比较好啊，可能会出现适得其反的效果。大家在使用之前一定要做好前期评估。

那到底如何使用seaJS呢？

二、使用seaJs

在使用seaJS之前难免一定要先引入它，就如我们使用jquery一样。

1、seaJS环境中javascript的写法——模块化

模块化？何为模块化？在seaJS中的所有javascript都必须要依据模块化的书写格式。这又是什么意思？其实，seaJS在管理文件的过程中是根据javascript（这里我们先讨论seaJS对javascript的管理，对于CSS的管理我们后面再做讨论）的文件名进行管理的，这个文件名就相当于我们平时所说的命名空间。在调用文件的时候我们可以直接写文件名而不需要写它的后缀。但是也是有特殊情况的：

a.加载css的时候一定要加后缀的

b.路径中有”？“的时候javascript文件的后缀不能省略

c.路径中是以“#”号结尾的文件也不可以省去后缀

到底如何模块化一个javascript？这个时候就要用到我们seaJS提供的几个接口了，模块化使用define函数，如下：

define(id,deps,factory)

id：模块id，可以自己赋值，如果不赋值默认就是该函数的相对路径，各位可以调试看看

deps：当前模块所依赖的模块，这里关键就是按需加载了，将你需要的js文件引入

factory：模块工厂函数，这个函数是重点，主要是模块的逻辑实现

2、模块化案例

说了这么多，肯定还是有人是云里雾里，那么我们就给出一个具体例子：

moduleA.js：

define(function(require,exports,module){     //这里开始，你可以随意书写你的js代码，声明变量，定义函数，做任何你想做的事 }) 

define(function(require,exports,module){    

//这里开始，你可以随意书写你的js代码，声明变量，定义函数，做任何你想做的事

}) 

不是说模块化后就能按需加载么？按需加载后，我怎么去调用模块化后文件内的方法呢？是的，这个问题就牵涉到了我们define函数的参数——内部工厂函数

function（require，exports，module）{}，这个函数的三个参数在书写的时候不能写错，不能改变这三个参数的任意一个字母（强制性）。但是这三个参数中的require和module是可以省略的，这个不是我们本期讨论的话题。言归正传：

moduleB.js：

define(function(require,exports,module){ //这里开始代码var a="hello world!"     exports.getA=function(){return a;}

}) 

现在我们拿上面的moduleB和moduleA进行简单的seajs的模块化管理：

如果moduleA也需要拥有moduleB中一样的getA方法。以前大家都是直接在moduleA中也加一个方法getA，这样明显在重复“造轮子”，为什么我们不去拿别人先前已经写好了的呢？所以，我们在seajs的环境中可以进行下面的操作

moduleA：

define(function(require,exports,module){

    var moduleb=require("moduleB")

    //这样后就要可以调用moduleB.js中的getA方法了

    moduleb.getA();//"hello world!"

}) 

seajs管理代码模块基本就是这种流程，对于define内的工厂函数，我们在写模块的时候一定要注意一下几点：

1、require，exports，module这三个参数不能写错

2、require：是用来引入相关模块的，就如按需加载，需要哪一个模块就require进来，然后就可以利用这个模块中的方法了，前提是如果要使用require进来的模块中的代码那么这个模块中的公用函数就必须要定义在exports中

3、exports：用来定义包含外部公用的一些内容，包括变量，函数等。这个也可以理解成与其他模块的接口。

4、module：模块的元数据，他本身是一个对象，拥有对象的一切特性（原型对象等）

这样的描述是对seaJS的一个小规模的使用方法，其实seaJS内部包含了很强大的用处，各位可以查看seaJS官网文档：http://www.seajs.com

后面我将逐步开始分析如何使用seaJS以及在使用的注意点

文章来源：im-ux.com/archives/833 转载请注明出处链接。

标签： seaJS 前端优化 交互设计 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。