kissy使用小结（2）模块化

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