前言前言 《Hello Sea.js》是一本Sea.js的入门指南，对Sea.js进行了全方位的介绍。通读本书，你能够了解Sea.js各个 细节，甚至整个前端模块化的大框架。本书既是一本参考手册，可以随时查阅；也是对前端模块化的一次剖 析，展望。 如果您觉得本书并不是如上一段描述的这样，欢迎讨论、意见，更期待您的贡献！ 前言前言 后浪推前浪，在早几年前，前端界最火的莫过于jQuery，那是个插件纷飞的年代。得jQuery者得天下。而现 在，CommonJS草案的提出，Node.js让JavaScript在服务端大展拳脚，前端界已经不是那个手持jQuery的小 孩了。 在这个新的浪潮中，JavaScript模块化开发开始流行起来。CommonJS标准制定后，Node.js兴起，RequireJ S使得JavaScript模块化在客户端齐头并进，ES6模块标准呼之欲出，涌现出了很多模块化的方案，兼容ES6也 好，不兼容也罢；国内外相关的项目如雨后春笋般涌现出来，谁都有可能引领标准。而本书正是关于Sea.js，关 于前端模块化的小书。记录一些我在模块化方面的见闻、理解和思考。 本书基于Sea.js v2.1.1完成。 致谢致谢 内容撰写：https://github.com/island205/HelloSea.js/ 更新日期更新日期 更新内容更新内容 2015-05-26 Hello Sea.js 中文版 目录目录 前言前言 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 第 1 章第 1 章 Sea.js是什么？Sea.js是什么？. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 第 2 章第 2 章 快速指南快速指南 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 第 3 章第 3 章 使用指南使用指南 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1212 第 4 章第 4 章 开发实战开发实战 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2525 第 5 章第 5 章 Sea.js是如何工作的？Sea.js是如何工作的？ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4141 第 6 章第 6 章 模块化JavaScript的未来模块化JavaScript的未来 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5656 第 7 章第 7 章 参考资料参考资料 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5858 11 Sea.js是什么？Sea.js是什么？ 起初被看作是一门玩具语言的JavaScript，最近已经发生了很大的变化。变化之一就是从HTML中的 标签转向了模块化。 模块化模块化 模块就是一团黑乎乎的东西，有份文档会教你如何使用这团东西，你只知道它的接口，但不知道它内部是如何运 作的，但这个模块能满足你的需求。 过程、函数、类都可以称作为模块，它们有一个共同的特点就是封装了功能，供外界调用。对于特定的语言，模 块所指的东西各有不同。 在Python中， 模块基本上就是一个包含了所有你定义的函数和变量的文件。 我们来定义一个Python的模块： #!/usr/bin/env python # Filename: greet.py def hello_python(): print "Hello,Python" def hello_javascript(): print "Hello,JavaScript" 真的，就是这么简单，我们可以这样使用： #!/usr/bin/env python # Filename: use_greet.py import greet # call greet module's func # print "Hello,Python" greet.hello_python() greet.py的模块中有两个方法，把它们import到use_greet.py中，我们就可以使用了。 Python还提供了另外一 种引入模块的方法： #!/usr/bin/env python # Filename: use_greet.py 第 1 章 Sea.js是什么？ | 4 from greet import hello_python # call greet module's func # print "Hello,Python" hello_python() 可以引入模块特定的API。 JavaScript的模块化JavaScript的模块化 那JavaScript有模块化吗？我想说有，而且是与它一样的，看下面的例子： // File: greet.js function helloPython(){ document.write("Hello,Python"); } function helloJavaScript(){ document.write("Hello,JavaScript"); } // File:usegreet.js helloJavaScript(); 在浏览器中打开index.html： Hello,JavaScript 可以看到，JavaScript这种通过全局共享的方式确实可以实现模块化，你只需要在HTML中引入需要使用的模块 脚本即可。 但这样的模块化有两个很实在的问题： 1. 必须通过全局变量共享模块，有可能会出现命名冲突的问题； 2. 依赖的文件必须手动地使用标签引入到页面中。 Node.js的模块化Node.js的模块化 这些问题如何解决呢？我们要不再来看一下Node.js的模块。你应该知道Node.js，现在它是火得不行！ 第 1 章 Sea.js是什么？ | 5 // File:greet.js exports.helloPython = function() { console.log("Hello,Python"); } exports.helloJavaScript = function() { console.log("Hello,JavaScript"); } // File: usegreet.js var greet = require("./greet"); greet.helloJavaScript(); 运行 node usegreet.js ，控制台会打印： Hello,JavaScript Node.js 把 JavaScript 移植到了 Server 端的开发中，Node.js 通过 exports 和 require 来实现了代码的模块 化组织。在一个 Node.js 的模块文件中，我们可以使用 exports 把对外的接口暴露出来，其他模块可以使用req uire函数加载其他文件，获得这些接口，从而使用模块提供出来的功能，而不关心其实现。在npmjs.org上已经有 上万的Node.js开源模块了！ ECMA 标准草案ECMA 标准草案 Node.js 模块化的组织方案是 Server 端的实现，并不能直接在浏览器中使用。JavaScript 原生并没有支持 exp orts 和 require 关键字。ECMAScript6 标准草案 harmony 已经考虑到了这种模块化的需求。举个例子： // Define a module module 'greet' { export function helloPython() { console.log("Hello,Python") } export function helloJavaScript() { console.log("Hello,JavaScript") } } // Use module import {helloPython, helloJavaScript} from 'greet' helloJavaScript() // Or module Greet from 'greet' 第 1 章 Sea.js是什么？ | 6 Greet.helloJavaScript() // Or remote module module Greet from 'http://bodule.org/greet.js' Greet.helloJavaScript() 可以到这里查看更多的例子 (http://wiki.ecmascript.org/doku.php?id=harmony:modules_examples) 。 参考es6-module-loader (https://github.com/ModuleLoader/es6-module-loader) 这个项目。 不过该标准还处于草案阶段，没有主流的浏览器所支持，那我们该怎么办？恩，已经有一些先行者了。 LABjsLABjs LABjs (https://github.com/getify/LABjs) 是一个动态的脚本加载类库，替代难看的，低性能的