引用kissy种子文件截止目前,kissy的最新版本是1.4.7,推荐使用该版本。
<script src="//g.alicdn.com/kissy/k/1.4.7/seed-min.js" charset="utf-8"></script>
seed.js,kissy的种子文件,包含了最关键的模块加载器,会引入全局对象KISSY(这是kissy唯一注入的全局变量,不推荐添加额外的全局变量,万不得已可以挂载在KISSY对象下)。
PS:之所以不加入 http://,是为了保证对https页面的支持。
Hello Kissy
目标:向一个DOM容器打印一行 Hello Kissy!文字。
假设有如下容器:
<p class="J_Wrapper">我是调皮的容器</p>
PS:Js有DOM操作逻辑,我们需要在DOM上加个hook-钩子,标识该节点有Js逻辑存在,J_Xx的形式,这是良好的编码习惯。
Jquery版实现:
$('.J_Wrapper').html('Hello Kissy!');
Kissy版本的实现:
//使用node模块操作DOM
KISSY.use('node',function(S,Node){
//使用all方法可以获取指定选择器节点
//可以理解为Jquery的$方法
var $ = Node.all;
$('.J_Wrapper').html('Hello Kissy!');
})
Kissy版本的代码相对于Jquery版本的代码,多了个KISSY.use() 的包裹。
KISSY.use() 到一下章讲模块加载器时,会重点讲解,现在只要知道是使用指定功能模块的意思。
我们想要操作DOM,就要使用Kissy的Node模块,Node模块可以理解为简化版的Jquery(在DOM操作的api上基本接近)。
Kissy的第一个核心思想:按需加载 ,也是前端性能优化的重要原则。
在我们的demo中只有DOM的操作,但Jquery默认会有ajax方法等,这些功能在本demo中并不需要,有所浪费,而Kissy的版本不存在该问题。