KISSY
add(name?,factory?,deps) 函数挂载在全局对象KISSY上,用来定义模块。
一个 JS 文件包含一个add()(这时路径+文件名可以用作模块名),如果一个文件包含多个add(),则必须为每个add()指定模块名,即name参数不可省略
use() 函数挂载在全局对象KISSY上,用来异步调用模块,并在模块加载完成后运行沙箱逻辑。
config() 函数挂载在全局对象KISSY上,用来读写全局配置项,包括注册包、预注册模块名称,模块文件的引用规则等等。
KMD 规范诞生之初还未有CommonJS规范以及AMD 和 CMD。KMD 作为一个完整的模块规范,崇尚约定,保持简单,并在 Loader 的实现过程中,新增了别名、包配置、动态combo等实际工作中常用的功能。
Require
前端开发越来越复杂,代码的管理变得越来越重要。模块化开发简直是前端开发的福音啊,如果你还没有接触前端模块开发,可以了解一下两个著名的模块开发框架SeaJS和RequireJS,这个两个都是非常优秀的模块开发框架,只是两者的遵循的规范不一样,SeaJS提倡按需加载,你需要哪个库或者模块,直接 var myLib = require(‘xxx’);就可以了。而RequireJS则是全部加载完成后才执行。两者方式各有优缺点,按实际需求选择,但是如果是团队开发的话那么用Requirejs会好点,重点是人家文档规范。
今天时候的是RequireJS打包。在项目开发完成后,需要上线,但是模块太多了,一个个加载肯定不符合前端优化的要求,前端的优化原则是减少请求,合并压缩。那么写那么多的模块最后可定是要合并压缩起来的。这里就需要用到 RequireJS提供的r.js。r.js可以在安装RequireJS后的bin目录下可以找到。
依赖node和r.js
node r.js -o baseUrl=js name=main out=built.js
RequireJS加载模块速度很快,很有可能在页面DOM Ready之前脚本已经加载完毕。需要与DOM交互的工作应等待DOM Ready。现代的浏览器通过DOMContentLoaded事件来知会。 但是,不是所有的浏览器都支持DOMContentLoaded。domReady模块实现了一个跨浏览器的方法来判定何时DOM已经ready。下载并在你的项目中如此用它:
require(['domReady'], function (domReady) { domReady(function () { //This function is called once the DOM is ready. //It will be safe to query the DOM and manipulate //DOM nodes in this function. }); });
requireJs多模块打包合并说明:
1、一个模块只能有一个define模块定义。
2、一个js多个模块则需要写成非匿名模块。一般js压缩合并时会把路径作为模块名加到定义中。