在2-1节中明河讲解了几种风格的模块定义方式,本节我们重点来看在KISSY中如何定义和使用模块的。 2-1节的demo,模块是定义在html文件中:
//定义一个模块 KISSY.add('demo-mod',function(S,require,exports,module){ var Node = require('node'); var $ = Node.all; exports.test = function () { $('body').html('CommonJs'); }; }); //使用模块 KISSY.use('demo-mod',function(S,demo){ demo.test(); })
这是为了演示方便,请勿使用这种方式定义模块。
Kissy规范:一个模块,一个js文件。
我们打开2-2节中的bee-demo 工程,打开 src/header.js,代码如下:
var $ = require('node').all; module.exports = { init:function(){ S.log('header init'); $('header').html('this is header'); } }
这就是个模块文件,如果你熟悉 NodeJs 代码,应该会惊呼,这不是 NodeJs 的写法吗,浏览器可以运行?
答案是不行,我们需要个编译工具gulp-kmc(后面会有章节专门讲解该工具),将代码编译成带 KISSY.add('',function(S,require, exports, module){}) 形式才能运行。
上述的代码会编译成:
KISSY.add('bee-demo/mods/header',['node'],function(S,require, exports, module){ var $ = require('node').all; module.exports = { init:function(){ S.log('header init'); $('header').html('this is header'); } } })