loader

[shuier]

学习了解1.3的loader

1. 了解[1.3 loader]（http://docs.kissyui.com/docs/html/api/seed/loader/) ＊ 看完文档后，［Loader 使用示例］(http://docs.kissyui.com/docs/html/demo/seed/loader/index.html#loader-demo)注意combo支持方式
2. [KISSY Module Compiler]（http://docs.kissyui.com/docs/html/tutorials/tools/module-compiler/index.html）
   • 了解两种模块打包方式：模块依赖自动合并与模块依赖自动抽取
3. 下载kissy-tools安装包，地址：https://github.com/kissyteam/kissy-tools
4. 把安装包导入你的工程里面
5. 编写build.xml文件，设置build.xml的ant库为kissy-tools/ant/lib

6. 编写你的模块代码，然后build试试, 或者看完后面的内容再做第6部

   模块化机制

   • 静态
   • 打包方式：模块依赖自动合并，即把所有模块的依赖关系打包成一个脚本（deps.js)，并把所有模块的定义代码打包成另外一个脚本(combo.js)，模块的名称也根据包路径进行了更新；参见：build.xml
   • 脚本输出的方式，deps.js和combo.js都要被加载，或者间接被加载；参见：使用模块依赖自动合并的demo
   • 适用场景：这比较适合模块少且比较稳定的页面
   • 优点：能够利用缓存
   • 动态
   • 打包方式：模块依赖自动抽取，即把所有模块的依赖关系打包成一个脚本（deps.js），模块的名称重新根据包路径进行了更新；参见：build.xml
   • 模块脚本引用的方式：引入模块的依赖关系deps.js,同时动态地combo所use那些所需的模块；参见：使用模块依赖自动抽取的demo
   • 适用场景：模块多且经常变化的页面，动态地combo所use的哪些模块。
   • 优点：能实际情况加载所需的模块脚本，减少冗余代码的执行，提高页面性能。

     实际案例分析：

   • 店铺模块加载方式
   • 页面情况分析：店铺页面上的模块可被添加、删除，故每个卖家的店铺页面上的模块个数是变化的，但是目前店铺的官方模块个数还不是很多；同时店铺的模块要在集市详情页，天猫详情页，评价等页面上加载和使用，而这些二方页面上的模块个数又更少了。
   • 模块加载方式分析：个数不稳定，刚开始想用动态加载的方式；但是因为模块个数不多，又想利用浏览器缓存（店铺、宝贝详情页访问量都比较大），所以又在考虑静态加载的方式；静态加载方式的打包方式不太合适为多个业务方打多个不同的包，并且模块的代码都加载到页面上也不一定都需要得到执行。
   • 模块加载最终方案：结合静态和动态两种方式；打包方式选用属于静态的模块依赖自动抽取的方式；模块的脚本引用时，是use了所有的模块(模块combo后的js url可以被缓存住了)，但是模块的脚本真正执行是要new之后，这时就根据模块本身的class选择器是否存在来判断是否new这个模块，做到了按需new
   • 参考：旺铺浏览初始化脚本
   • 集市detail,
   • 页面情况分析：因为页面上除了sku区域的信息外，还有宝贝详情等几个tab, 这些模块都是稳定的；再有就是旺铺装修后添加的模块了，个数是变化的，但又不多；
   • 模块加载方式分析：旺铺装修后添加的模块，对detail来说可以看做是一个旺铺模块，交给旺铺来处理；这样对于detail来说，页面上的模块个数偏少，且个数稳定不变
   • 模块加载最终方案：使用静态的模块引入方式，并且结合kissy pie使用[todo]；
   • 参考：[todo].

     add和use的使用注意

   • 当add模块的时候，fn不会被执行，只有在use时，才会执行，并且use的执行是异步的

   // 写法一, 说明模块只有在use时，才会执行，并且use的执行是异步的
   var x=0;
   KISSY.add('x',function(){x=1})
   alert(x); // =>0 
   KISSY.use('x',function(){});
   alert(x); //=>0
   
   // 写法二，比较写法一，建议使用二的写法去获取对象
   KISSY.add('x',function(){return 1})
   KISSY.use('x',function(S,x){alert(x);});

   • combo的两种方式：

    // 方式一
   <script src="http://a.tbcdn.cn/s/kissy/1.3.0/seed.js" data-config="{combine:true}"></script>
   
   // 方式二
   KISSY.config({
      packages: [
         {
              name: "my", //包名
              tag: "20110323",//时间戳, 添加在动态脚本路径后面, 用于更新包内模块代码
              path: "./assets/module_package/", //包对应路径, 相对路径指相对于当前页面路径
              charset: "gbk" //包里模块文件编码格式
        }
    ]
   });

   • 把需要use模块，一起use, 减少http请求数

   
   var mods = [a,b,c];
   
   // 不建议这样use, 这样会产生三个http请求
   KISSY.use(mods[0], function(S,A){alert("mod a");});
   KISSY.use(mods[1], function(S,B){alert("mod b");});
   KISSY.use(mods[2], function(S,B){alert("mod c");});
   
   // 建议这样use，这样只会产生一个http请求， 前提是使用了combo的模块js加载方式
   KISSY.use(mods, function(S,A,B,C){alert("mods: a,b,c");});