Kissy && Require

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压缩合并时会把路径作为模块名加到定义中。
 
posted @ 2017-09-05 17:25  圣耀  阅读(225)  评论(0)  编辑  收藏  举报