kissy使用小结（2）模块化

最新推荐文章于 2016-12-16 19:52:45 发布

schifred

最新推荐文章于 2016-12-16 19:52:45 发布

阅读量615

点赞数

分类专栏： kissy 文章标签： json

kissy 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.页面中导入kissy（dev_index.html）

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.配置模块

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.引入样式

KISSY.importStyle('bee-demo/index.css');

</script>

4.加载脚本

KISSY.use('bee-demo/index');

</script>

5.脚本主入口（index.js）

var header = require('./header/header');

header.init();

6.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