Kissy整体架构 - Kissy框架学习笔记01

hello Kissy!
     
   PS：Js有DOM操作逻辑，我们需要在DOM上加个hook-钩子，标识该节点有Js逻辑存在，J_Xx的形式，这是良好的编码习惯。  


<p class="J_Wrapper">我是调皮的容器</p><script>    //使用node模块操作DOM    KISSY.use('node',function(S,Node){        //使用all方法可以获取指定选择器节点        //可以理解为Jquery的$方法        var $ = Node.all;        $('.J_Wrapper').html('Hello Kissy！');    })</script>



KISSY 整体架构
Kissy是由三个部分组成的：Seed、Core、Components。


Seed


Seed是种子，即seed-min.js，Seed的核心是Loader（即模块加载器），所有的功能模块或Ui组件都是在Seed上开花结果。

Loader会是系列教程讲解的核心，掌握了Loader，相当于已经推开了Kissy的门，后面处处是风景。

Seed还包含lang（工具模块，比如判断变量是否是数组等）、ua（终端判断，写hack和移动终端判断逻辑会用到），这二个部分非常简单，翻翻API就可理解。

Core

Core包含Kissy的核心功能模块，比如非常常用的node（DOM操作）、io（ajax请求）、event（事件操作）、base（基类）等，很多功能模块的api非常像Jquery。

比较难且重要的模块是base与promise，base作为基类，在抽象出组件或通用方法时，非常有用，也是Kissy组件风格的本源，必须掌握。

promise是promise规范的实现，异步编程优化的优秀工具，已经融入到io操作中，所以也非常重要。

Components


Kissy坐拥非常丰富的组件，当然跟Jquery数以万计的插件数量上市没的比，但日常开发常用的组件基本上都有，比如选项卡、日期选择、异步上传、图表、表单校验、弹出层、编辑器等。
 

KISSY的模块系统


Kissy已经支持commonjs的风格：


<script>    //定义一个模块    KISSY.add('demo-mod',function(S,require,exports,module){        var Node = require('node');        var $ = Node.all;        exports.test = function () {            $('body').html('CommonJs');        };    });    //使用模块    KISSY.use('demo-mod',function(S,demo){        demo.test();    })</script>



注：参考自慕课网《玩转Kissy框架》课程，Nifury整理于2016-1-4