现在的位置: 首页 > 综合 > 正文

使用SeaJS实现模块化JavaScript开发

2014年01月16日 ⁄ 综合 ⁄ 共 1339字 ⁄ 字号小中大 ⁄ 评论关闭

转自：http://www.cnblogs.com/leoo2sk/archive/2011/06/27/write-javascript-with-seajs.html

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。

SeaJS的作者是淘宝前端工程师玉伯。

SeaJS本身遵循KISS（Keep It Simple, Stupid）理念进行开发，其本身仅有个位数的API，因此学习起来毫无压力。在学习SeaJS的过程中，处处能感受到KISS原则的精髓——仅做一件事，做好一件事。

本文首先通过一个例子直观对比传统JavaScript编程和使用SeaJS的模块化JavaScript编程，然后详细讨论SeaJS的使用方法，最后给出一些与SeaJS相关的资料。

传统模式 vs SeaJS模块化

假设我们现在正在开发一个Web应用TinyApp，我们决定在TinyApp中使用jQuery框架。TinyApp的首页会用到module1.js，module1.js依赖module2.js和module3.js，同时module3.js依赖module4.js。

传统开发

使用传统的开发方法，各个js文件代码如下：

//module1.js

var module1

 = {

    run:

function()

 {

        return $.merge(['module1'],

 $.merge(module2.run(), module3.run()));

    }

}

//module2.js

var module1

 = {

    run:

function()

 {

        return ['module2'];

    }

}

//module3.js

var module3

 = {

    run:

function()

 {

        return $.merge(['module3'],

 module4.run());

    }

}