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
相关推荐
kissy模块化实践
淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。 KISSY ...
KISSY提供稳定的核心,包括 oo、dom、Event、Anim、Ajax 等;强大且易用的脚本加载器,特有的 loader;丰富的UI组件,包括 Switchable、Overlay、Draggable and ...KISSY具备模块化、高扩展性、组件齐全等特性。
淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。
KISSY 1.4.8,一个淘宝用的类似jQuery的前端框架
KISSY Editor 是开源项目 KISSY ...KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件。目前已有 CSS 基础框架、搜索提示 Suggest 和今天发布的富文本编辑器等组件。
kissy-1.4.8.zip,淘宝最新前端开发包
使用KISSY实现视差滚动效果
js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码
Kissy 15天学会.zip欢迎下载!!!
淘宝帮派编辑器 kissy editor 2.0
Google Docs – 简单与复杂的权衡,2/8 原则的遵守者。只把 20% 核心功能做好做妙,需要魄力。 YUI RTE – 如果爱上你是场梦境,醒来后叫我如何继续使用? NicEditor – 爱唐装的摇摆,还是牛仔的风采?这是位别致的...
Web常用UI库 kissy ,kissy 是淘宝一个开源的 JavaScript 库,包含的组件有:日历、图片放大镜、卡片切换、...
高发展前途的web前端开发利器--kissy,中文文档。拥有该文档后不必再上网到处找,一切尽在其中。
Kissy学习教程.rarKissy学习教程.rarKissy学习教程.rarKissy学习教程.rar
kissy.js 提供小程序开发中一些常用的工具函数,有完整的接口文档。 下载地址:http://7te9kq.com1.z0.glb.clouddn.com/wxapp/kissydocs.html 本站下载:kissy.js (此图片来源于网络,如有侵权,请联系删除! ) 示例...
淘宝kissy帮助文档 学习文档 用法等
KISSY框架是目前硕果仅存的几个国产js框架之一,在阿里的网站比如淘宝网、天猫等大量使用。
kissy-mobile ...本人觉得这是一个非常好的移动端框架,有着体积小,速度快,模块化的优秀框架。我希望可以把这个框架放在github供大家学习交流并改进之。希望它可以为中国的程序员开发移动端H5提供一个选项。