您现在的位置:首页 >> 前端 >> 内容

KISSY基础篇乄KISSY之Seed

时间:2016/12/13 9:34:37 点击:

  核心提示:使用kissy相应的功能,就要调用相应的模块。那么,我们下面通过对seed的讲解来了解kissy的加载机制吧。一、对SEED的说明Seed模块式KISSY的核心。必须在所有使用KISSY的页面中引入,...

使用kissy相应的功能,就要调用相应的模块。那么,我们下面通过对seed的讲解来了解kissy的加载机制吧。

一、对SEED的说明

Seed模块式KISSY的核心。必须在所有使用KISSY的页面中引入,所有核心模块的依赖关系均在Seed中定义,基于它可以生长出你所需要的代码基础库,而无需手写script标签。特别地,Seed并不是一个“模块名”,但它包含这些核心功能:lang,features,loader,ua。模块名称均小写。

二、载入seed

上一节已经讲述了引入kissy资源包的方法,这里不再赘述。

Seed是一段很小的脚本,包含模块加载器,用来加载其他核心模块。Seed会引入全局对象KISSY。加载外部模块:

KISSY.use('node',function(S,Node){

//Your code…

});

这时浏览器会将node模块对应的js文件及其依赖载入进来,载入后会注册node模块到KISSY,之后执行这里的回调,将node模块返回的对象带入第二个参数。回调函数第一个参数为KISSY对象的简写。注意这里有两个关键行为:

1. 载入node模块对应的外部js文件

2.注册node模块

这是use()函数的两个基本功能,这两个基本功能通过模块名称统一起来,让他们看起来是一个操作,但不要忘记,实际上有两层含义。

三、模块

根据上文,模块名有两个层面的含义

1.指示文件所在的地址

2.指示模块的具体内容

KISSY 要求所有满足 KMD 规范的模块,首先具备属性2,其次具备属性1。即use()首先要执行已经注册的模块,如果没有注册,则先尝试去模块名所指示的位置加载模块文件,再执行注册和运行。因此,只有被KISSY.add包装起来的代码,才是正确的KISSY模块。

场景一:运行已经注册的模块

//同一文件中执行add和use

KISSY.add('a',function(S){

return{};

});

//这里的use()不会造成一次http请求,因为模块a已经被注册过

KISSY.use('a',functuion(S,A){

//your code

});

 

场景二:运行外部文件注册的模块

 

//这里的use()会先载入‘path/a.js’(及其依赖),因为模块‘path/a’没有被注册过

KISSY.use('path/a',functuion(S,A){

//your code

});

//外部文件中注册了‘path/a’的模块

KISSY.add('path/a',functuion(S){

return{};

});


 

场景三:注册的模块族

可否将很多模块的注册抽离入一个文件?当然可以,比如这个例子,mods.js 包含了很多个模块的注册,预先载入页面后,KISSY注册了mods.js里的这些模块,这时通过use()调用时,只是运行注册的模块,而不会造成额外的http请求

 

总之,KISSY.use()函数的执行,会首先查找模块是否已经注册,若注册过,则直接执行模块逻辑,若没有注册过,则先加载模块名对应的模块文件,再注册并执行。KISSY Seed中包含的模块可以通过这种方式直接调用,而不会造成额外的http请求。

场景4:运行一个没有被注册过的模块(报错)

KISSY.use() 的目的是运行模块并执行回调,载入外部文件只是其附加功能。因此不能使用KISSY.use()来载入任意外部文件。比如:

 

//运行出错,因为‘path/jquery’没有被注册

KISSY.use('path/jquery',functuion(S,jQuery){

//your code

});

//jquery.js

function(window,undefined){

}();

 

必须给jquery.js冠以KMD格式:

 

//jquery.js

 

KISSY.add('path/jquery',functuion(S){

 

function(window,undefined){

}();

return jQuery;

});

这里所注册的模块都是外部加载的模块,通过这样的加载方式就可以使用相应的模块。而本基础教程所使用模块,都是kissy的主要模块,如果你觉得对此有困惑,没关系,请继续往下学习,之后再回头看这一节,相信你会有更多体会。

Tags:KI IS SS SY 
作者:网络 来源:lyxcfl的博客