seajs

web应用越变的庞大，模块化越显得重要，尤其Nodejs的流行，Javascript不限用于浏览器，还用于后台或其他场景时，没有Class，没有Package的Javascript语言变得难以管理，于是出现CommonJS项目，提出了一些规范模块化的写法，在Nodejs中普遍应用，同样浏览器端也出现了类似的解决方案，并结合浏览器异步加载的特性，有RequireJS提出的AMD（Asynchronous Module Definition）规范，以及SeaJS提出的CMD（Common Module Definition）规范，两者都实现Javascript了模块化定义的APIs，各有异同，下面将分别使用两种方案，实现Qunee组件的模块化加载 相关文章 关于RequireJS的文章很多，这里重复介绍，列出几篇专业文章： requireJS官方网站 http://requirejs.org/ SeaJS官方网站 http://seajs.org/ 使用 RequireJS 优化 Web 应用前端 http://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/ Javascript模块化编程（一）：模块的写法 http://www.ruanyifeng.com/blog/2012/10/javascript_module

Sea.js官网 http://seajs.org/docs/ sea.js官方文档 https://github.com/seajs/seajs/issues/547 RequireJS官网 http://requirejs.org/ RequireJS中文网 http://www.requirejs.cn/ require.js的用法 http://www.ruanyifeng.com/blog/2012/11/require_js.html 来源： https://www.cnblogs.com/home-/p/11917680.html

一、CommonJS CommonJS 模块就是对象，用于服务器端编程（webpack 是以CommonJS的形式来书写） CommonJS 定义的模块分为： {模块引用(require)} require()用来引入外部模块； {模块定义(exports)} exports对象用于导出当前模块的方法或变量，唯一的导出口； {模块标识(module)} module对象就代表模块本身。 CommonJS模块特点： CommonJS 是 同步加载模块 ，模块加载的顺序，按照其在代码中出现的顺序。 所有代码都运行在模块作用域，不会污染全局作用域。 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。 二、AMD（RequireJS）、CMD（SeaJS） RequireJS与SeaJS 模块是可以是对象 函数 构造器 字符串 JSON等各种类型的模块，用于浏览器端编程 RequireJS与SeaJS模块特点： RequireJS与SeaJS 是 异步加载模块 CMD推崇 依赖就近 ，AMD推崇 依赖前置 AMD里require分全局的和局部的，CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动，CMD里每个API都简单纯粹。 ES6 模块不是对象

自己接触过的几种javascript模块开发，由于水平有限，只能简单谈一谈。 立即执行匿名函数 由于javascript的函数作用域，将模块代码放入立即执行匿名函数中，防止污染全局变量。将需要对外提供的类或对象暴露到window对象中。 需要实例化的模块 定义 // mod1.js (function(window) { var defaultOpts = {}; // 外部传入一些配置选项，也可不传入以默认选项实现 var Module1 = function(options) { this.options = $.extend(true, {}, defaultOpts, options); this.init(); }; // 将需要对外提供的方法加到原型链上 Module1.prototype = { constructor : Module1, init : function() { this.initPage(); this.initEvent(); this.initOther(); }, initPage : function() { }, initEvent : function() { method1(); }, initOther : function() { }, getOne : function(){} // 其他需要对外提供的接口 }; //

前言 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

前言 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

<p>             Js资源增量更新--seajs本地存储增量更新插件(storeinc)使用</p> <p>storeinc 是一个用来实现js代码本地存储化，并可以在js版本更新的时候，对js内容做增量更新的seajs插件。对于一个js文件来说，当js版本没有更新的时候，storeinc会从本地存储(localstorage)里读取js并解释执行，而当需要修改js内容时,storeinc则会只拉取新更新的js内容跟本地内容合并成新的js内容，更新的内容通过使用与storeinc配套的构建工具spm-storeinc-build来离线生成。另外storeinc还提供了一个java servlet来实现实时生成增量更新内容，如果使用了这个servlet则无需使用spm-storeinc-build来构建，只需要按这个servlet配置即可。</p> <p>Storeinc的增量更新的原理跟rsync有点像，算是一个rsync的js版了，不同的是rsync的增量更新单位用二进制来计算，storeinc则是字符为单位，具体的实现原理请看:<a href="https://github.com/luyongfugx/hcliuLoad/blob/master/hcliuLoad.ppt">https://github.com/luyongfugx/hcliuLoad/blob

CMD define(function (require) { var a = require('./a'); var b = require('./b'); // more code .. }) AMD define(['./a', './b'], function (a, b) { // more code .. }) 文章来源: SeaJS 与 RequireJS 的差异

一、模块化配置信息 seajs config 用于配置seajs的一些选项参数，接受一个对象，该对象的属性值就是我们的配置项目 配置信息基本语法： 在seajs.use()上边： seajs.config({ alias:{}, paths:{} }) 　　 1.alias定义模块别名 当我们在项目中引入一些基础类库，经常会涉及到类库的版本升级问题，才是每个模块都引入了类库，那么升级就需要修改每个模块中的名字，风险比较大， 如果使用alias定义这个模块（类库）、使用别名调用，更新只需要更新版本号，就可以做到全局更新 eg: jq:jquery-1,12.2.min.js 所有模块中都使用jq，如果我将这个版本改为jq:jquery-1.5.min.js 所有使用了jq的模块中的jquery都会变为1.5的版本 2.paths 路径配置 当模块目录比较深的时候，或者需要跨目录调用模块时，可以使用paths简化路径 也可以使用{}匹配语法调用变量（vars） eg: require('header/skin/top/top') ===> paths:{ h:'header/skin/top' } require('h/top'); 3.vars 声明变量 有些场景下，模块路径在运行时才能确定（动态处理），这是可以使用vars变量来配置 如果模块开发时路径比较复杂

一、模块化规范 1、服务器端规范 CommonJS--node.js 2、浏览器端规范 AMD--RequireJS 国外相对流行 CMD--SeaJS 国内相对流行 3、模块化框架实现 CMD实现-seaJS创始人是 阿里巴巴前端架构师玉伯；js文件的依赖管理、异步加载、方便前端的模块化开发。 官方网站：http://seajs.org/ AMD实现-RequireJS， James Burke AMD规范的创始人；与SeaJS 基本实现类似的功能。 官方网站：http://www.requirejs.cn/ 两者比较： ① 对于依赖的模块，AMD是提前执行，CMD是延后执行。 ② CMD推崇依赖就近，AMD推崇依赖前置。 ③ AMD的API默认是一个当多个用，CMD得到API严格区分，推崇职责单一。 二、seaJS实现demo 步骤： 1、首先下载seajs 2、引入seajs 3、写html 4、在js里面定义模块，并暴露公共成员 注意：define关键字里面定义模块的私有空间；然后用exports关键字向外暴露公共成员 5、在html里面使用seajs的use方法调用暴露公共成员的js 注意：使用seajs.use来调用对应的js（最好使用相对路径） 来源： https://www.cnblogs.com/wangyfax/p/11756254.html