1.页面中导入kissy（dev_index.html）
<script src="http://g.alicdn.com/kissy/k/1.4.8/??seed-min.js,import-style-min.js"
data-config="{combine:true}"></script>
seed.min.js默认加载压缩带min字样的js、css文件，seed.js则加载不带min字样的文件，相当于debug赋值为true
import-style-min.js用于加载css文件
data-config="{combine:true}"开启动态合并
2.配置模块
<script>
var base = '../build';//当前文件的相对路径
KISSY.config({
debug:true,
packages: [
{
name: 'bee-demo',
base: base,
ignorePackageNameInUri: true,
combine:false
}
]}
);
if(!KISSY.config('debug')){//利用KISSY.config('debug')倒换加载本地或网上资源
base = 'http://localhost:5555/bee-demo'
KISSY.config({
packages: [
{
name: 'bee-demo',
base: base,
ignorePackageNameInUri: true,
combine:false
}
]}
);
}
</script>
3.引入样式
<script>
KISSY.importStyle('bee-demo/index.css');
</script>
4.加载脚本
<script>
KISSY.use('bee-demo/index');
</script>
<!--[if !supportLists]-->5.<!--[endif]-->脚本主入口（index.js）
var header = require('./header/header');
header.init();
<!--[if !supportLists]-->6.<!--[endif]-->header模块脚本
var $ = require('node').all;
module.exports = {
init:function(){
S.log('header init');
$('header').html('this is header');
}
}
注解
模块化
普通的模块化机制通过自调用匿名函数实现
(function(doc)){
//模块代码
}()
KMD规范
①KISSY.add(name,factory,deps)//KISSY可以用S代替
name指代注册的模块名
当js文件只有一个add函数的时候，模块名可以省略，默认用文件名代替模块名
factory若为函数，以回调的形式返回值，首个回传参数是KISSY全局对象，约定记为S
若为对象或字符串，模块的返回值就是该对象或该字符串
deps以对象形式记录依赖的模块，各模块以数组的形式赋为requires属性，同时将各模块作为回传参数传给factory函数，前提是factory是个函数
KISSY.add(‘module-name’,function(S,’mod-a’,’mod-b’){
//模块代码
},{requires:[‘mod-a’,’mod-b’]})
②以commonjs规范书写add函数，当且仅当js文件只包含一个注册函数的时候才能使用
KISSY.add(function(S,require,exports,module){
var A=require(‘mod-a’);
return A;//或者module.exports=A;
})
③KISSY.require(‘mod-a’)加载已注册的模块
从包配置项base路径找不到相应的模块时，kissy会从http://g.tbcdn.cn/k/1.4.8中获取相应的模块，因此kissy内置的模块不需要加包名
除去模块名以外，require的参数可以使用当前文件的相对路径，这样会更灵活
④KISSY.use(‘mod-a’,’mod-b’,function(S,’ModA’,’ModB’){
//沙箱逻辑
});//以异步的方式载入模块，加载完成后运行沙箱逻辑
⑤KISSY.config(name,pkg)预设配置项，name配置项名称，pkg配置项的值
或者以对象的方式传入多个配置项KISSY.config({name:pkg})
KISSY.config(name)可以读取相应的配置信息
配置项包括：packages，值是json对象，配置包
modules，值是json对象，配置模块间的依赖
base，:类库所在的url，可以是本地文件的相对路径（相对于当前文件）
debug，默认false，默认加载带min字样的压缩文件，设成true开启debug模式
charest设置模块文件的编码格式，默认是utf-8
tag，异步加载文件时所带的时间戳
combine，是否开启动态合并，默认true，动态合并可以将多个文件请求合并成一个，通过data-config=”{combine:true}”也可以开启动态合并，示例参考文章的顶部
comboMaxFileNum，动态合并文件的最大个数，默认40
comboMaxUrlLength，动态合并后产生的url最大长度，默认2000
KISSY.config({
modules:{
‘mod-a’:{
requires:[‘mod-b’,’mod-c’]
//供动态合并使用，假使嵌套使用KISSY.use()将无法支撑动态合并
},
‘mod-b’:{
alias:[‘kg/offline/2.0.0/index’]//为kg/offline/2.0.0/index模块赋别名mod-b
}
},
packages:{
‘pkg-name’:{
base:’http://path/to/project/’
}
},
combine:true,
charest:’utf-8’,
debug:false
})
KISSY.use(‘pkg-name/a’,funciton(S,A))//载入包中的模块http://path/to/project/pkg-name/a.js
packages包配置相关属性：
name包名，模块名称路径起始，会拼接到请求的url中，通过将ignorePackageNameInUrl设为true忽略包名的拼接，比如KISSY.add(‘pkg-name/mod-a’)将拼接pkg-name/mod-a到config配置的base路径中，ignorePackageNameInUrl:true时则只拼接mod-a
ignorePackageNameInUrl，true时拼接路径忽略包名
debug是否开启包调试，默认false加载带min字样压缩文件，设为true时加载未压缩的文件
combine是否开启动态合并，默认为true，
⑥KISSY.importStyle(‘pkg-name/index.css’)首先需要载入import-style-min.js文件
相比KISSY.use()异步加载，importStyle()采用同步的方式加载，阻塞html页面的解析过程，不至于因为没有完成加载css文件而使页面元素得不到样式渲染
⑦借助gulp-kmc用Nodejs依赖的commonjs规范书写代码
var $=require(‘node’).all;
module.exports={
Init:function(){
S.log(‘header init’);
$(‘header’).html(‘this is header’)
}
}
以上代码将被gulp-kmc编译成符合KMD规范的形式
KISSY.add(‘module-name’,[‘node’],function(S,require,exports,module){
var $=require(‘node’).all;
module.exports={
Init:function(){
S.log(‘header init’);
$(‘header’).html(‘this is header’)
}
}
})//module-name由gulp读取文件名并赋值
参考
KISSY官网，KISSY模块定义规范http://docs.kissyui.com/1.4/docs/html/guideline/kmd.html
慕课网，玩转kissy框架http://www.imooc.com/learn/191
KISSY官网，loader子模块http://docs.kissyui.com/1.4/docs/html/guideline/loader.html
KISSY官网，config函数http://docs.kissyui.com/1.4/docs/html/api/loader/config.html