seajs使用教程指南[转载].docxVIP

seajs使用教程指南 前言 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模块化 ???????? 传统开发 ???????? SeaJS模块化开发 使用SeaJS ???????? 下载及安装 ???????? SeaJS基本开发原则 ???????? 模块的定义及编写 ???????? 模块的载入及引用 ???????? SeaJS的全局配置 ???????? SeaJS如何与现有JS库配合使用 ???????? SeaJS项目打包部署 一个完整的例子 主要参考文献SeaJS学习资源 传统模式 vs SeaJS模块化 假设我们现在正在开发一个Web应用TinyApp，我们决定在TinyApp中使用jQuery框架。TinyApp的首页会用到module1.js，module1.js依赖module2.js和module3.js，同时module3.js依赖module4.js。 传统开发 使用传统的开发方法，各个js文件代码如下： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 //module1.js varmodule1 = { ????run:function() { ????????return$.merge([module1], $.merge(module2.run(), module3.run())); ????} } ? //module2.js varmodule1 = { ????run:function() { ????????return[module2]; ????} } ? //module3.js varmodule3 = { ????run:function() { ????????return$.merge([module3], module4.run()); ????} } ? //module4.js varmodule4 = { ????run:function() { ????????return[module4]; ????} } 此时index.html需要引用module1.js及其所有下层依赖（注意顺序）： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 !DOCTYPE HTML htmllang=zh-CN head ????metacharset=UTF-8 ????titleTinyApp/title ????scriptsrc=./jquery-min.js/script ????scriptsrc=./module4.js/script ????scriptsrc=./module2.js/script ????scriptsrc=./module3.js/script ????scriptsrc=./module1.js/script /head body ????pclass=content/p ????script ????????$(.content).html(module1.run()); ????/script /body /html 随着项目的进行，js文件会越来越多，依赖关系也会越来越复杂，使得js代码和html里的script列表往往变得难以维护。 SeaJS模块化开发 下面看看