HTML5高级工程师之前端模块化 seaJs

后盾网 人人做后盾
module.exports
只通过 exports 参数来提供接口会有一些限制，有时无法满足开 发者的所有需求， 所以很多时候我们会用到module.exports。
后盾网 人人做后盾
其实，module.exports才是真正的接口，exports只不过是它的 一个辅助工具。最终返回给调用的是module.exports而不是 exports。 所有的exports收集到的属性和方法，都赋值给了 module.exports。如果module.exports 被改变，exports不会被改变， 因为真正导出的执行是module.exports，而不是exports，所以 exports收集来的信息将被忽略。
seaJs.config
后盾网 人人做后盾
paths 设置路径，方便跨目录调用。
seaJs.config
后盾网 人人做后盾
use
use方法用来在页面中加载一个或多个模块，加载完之后可以执行 回调函数，在回调函数里可以使用模块里的方法。当然回调函数也可以 省略不用。
seaJs.use
后盾网 人人做后盾
Sea.js 具备完善的测试用例，兼容所有主流浏览器： Chrome 3+ Firefox 2+ Safari 3.2+ Opera 10+ IE 5.5+
Sea.js Sea.js
✔ ✔ ✔ ✔ ✔
Mobile Hybrid App
后盾网 人人做后盾
seaJs
Sea.js 遵循 MIT 协议，无论个人还是公司，都可以免费自由使用。
define
在 sea.js 中，所有 JavaScript 模块都遵循 CMD（Common Module Definition） 模块定义规范。该规范明确了模块的基本书写 格式和基本交互规则。 define 是一个全局函数，用来定义模块。 define 接受 factory 参数，factory 可以是一个函数，也可以是 一个对象或字符串。
后盾网 人人做后盾
config
seaJs.config接口可以对 Sea.js 进行配置，让模块编写、开发调试 更方便。
base alias paths
: https://github.com/seajs/seajs/issues/262
seaJs.config
后盾网 人人做后盾
base属性用于设置基本路径，设置之后模块的路径都要基于base的设 置。 alias属性用来设置引入文件的别名（文件类型可以省略）方便调用。
后盾网 人人做后盾
CMD
Sea.js Definition JavaScript CMD Common Module
后盾网 人人做后盾
seaJs 7
Sea.js的核心设计思想是保持简单，主要的接口只有七个，只要掌 握这些用法，就可以娴熟地进行模块化开发。 seajs.config seajs.use define require require.async exports module.exports
require exports module.exports exports
define
后盾网 人人做后盾
require
require 用来获取指定模块的接口，相当于把文件引入进当前文件来。 require可以引入jquery这种框架文件 :
也可以引入自己定义的模块，调用里面的方法和属性 :
后盾网 人人做后盾
后盾网 人人做后盾
factory是字符串时
factory是 json对象时
define
后盾网 人人做后盾
factory 为函数时，表示是模块的构造方法。执行该构造方法，可 以得到模块向外提供的接口。factory 方法在执行时，默认会传入三个 参数：require、exports 和 module：
require.async
require.async 用来在模块内部异步加载一个或多个模块， 在加载 完成时，执行回调函数。
后盾网 人人做后盾
exports
exports 是一个对象，用来向外提供模块接口。只要把想要设置 的值和函数，作为属性添加给exports，那么模块中就具有了这些值和 函数。那么，外部文件调用该模块时，就可以调用模块里的值和方法 了。
module.exports
后盾网 人人做后盾
虽然这样的写法看起来有点冗余，其实是为了保证，模块的初始化 环境是干净的。即使改变了 module.exports 指向的对象后，依然能 沿用 exports的特性。
module.exports
后盾网 人人做后盾
return
除了给 exports 对象增加成员，还可以使用 return 直接向外提供 接口。
www.houdunwang.com
seaJs
后盾网 2011-2016
在Web应用程序的用户体验越来越被重视的今天，前端开发的 地位也上升到了前所未有的高度，而随之而来的也有更多的挑战。 为了将前端开发者繁重的工作变得简单，框架应运而生。 Sea.js是一款国产前端框架，作者为玉伯（王保平），是淘宝 前端类库 KISSY、前端模块化开发框架SeaJS、前端基础类库Arale 的创始人。 Sea.js是一个很纯粹小巧的模块加载器，它只解决一个问题： 前端代码的模块化。通过Sea.js，可以将大量JavaScript代码封装成 一个个小模块，然后轻松实现模块的加载和依赖管理。
后盾网 人人做后盾
: http://seajs.org/docs/#downloads http://seajs.org
后盾网 人人做后盾
seaJs
使用方法很简单 : 首先引入sea.js文件。 然后使用seajs.config方法设置一下模块的路径配置。 最后使用seajs.use方法调用一下主模块就可以啦。
后盾网 人人做后盾
seaJs
Sea.js 追求简单、自然的代码书写和组织方式， 具有以下核心特性： 1. 简单友好的模块定义规范：
Sea.js CMD Node.js
2. 自然直观的代码组织方式： 3. Sea.js 还提供常用插件，非常有助于开发调试 和性能优化，并具有丰富的可扩展接口。
后盾网 人人做后盾
wk.baidu.com
后盾网 人人做后盾
css
sea.js不是万能的，不可能把所有的功能都实现。很多时候我们会 用到一些基于sea.js的插件。这里我们介绍一款css引入插件：
https://github.com/seajs/seajs-css
后盾网 人人做后盾
后盾网 人人做后盾