前言前言 《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) 是一个动态的脚本加载类库,替代难看的,低性能的