XPY567

什么是KISSYKISSY是由阿里前端团队发起并维护的国产javascript框架，在阿里网站比如淘宝网、天猫、聚划算中大量使用，经过近五年的发展（KISSY诞生于2009年10月26日），已经是比较成熟的解决方案，也是为数不多的国产javascript框架。为什么推荐使用KISSY说到javascript框架，jquery是绕不开强大的存在，很多同学都说jqu

使用抓包工具线上调试在线上调试过程中，通常我们需要用到抓包代理工具，比如Fiddler、Charles、LivePool，将线上的assets资源代理成本地工程源码资源。这里以 Charles 为例，说明如何代理kissy的模块文件。访问 http://demo.apebook.org/bee-demo/demo/online_index.html，现在我们想要

使用gulp构建kissy工程bee 脚手架采用gulp 构建工程。所以我们需要gulp将src的模块代码编译到build目录下。好处是可以合并模块js文件，减少请求数。bee的gulpfile.js（gulp的构建文件）比较复杂，下一节会详细介绍，当然不了解也不妨碍我们构建工程，只要知道几个简单步骤即可。全局安装gulp：npm install -

kissy的调试模式当引入seed-min.js时，kissy所有加载的模块文件都会加上-min.js、-min.css后缀，即压缩后的文件，比如http://demo.apebook.org/bee-demo/build/index-min.js。 而当引入seed.js时，kissy就会加载源码模块文件 .js、.css文件，比如http://demo.apeboo

使用依赖表控制combo上一节我们学习了combo模块用于减少http请求，但自动combo无法保证所有的模块js都combo到一起，比如下面的代码：KISSY.use('kg/offline/2.0.0/index',function(s,Offline){ //use 表单校验组件 KISSY.use('kg/auth/2.0.0/index');})

别名机制  所谓别名机制，即可以将任意模块名，映射成其他名称，比如一个模块名 bee-demo/a，因为第三方的需要，需要定义成 bee-demo/b，如何操作呢？KISSY.config('modules',{ 'bee-demo/b':{ alias:['bee-demo/a'] }});业务模块 require('bee-de

使用combo配置减少请求什么是combo上一节中我们有一行代码：等价于：性能优化的黄金法则：尽可能减少http请求，combo可以理解为合并静态资源文件的规则，比如阿里的cdn使用??来合并多个静态资源。kissy所有的模块都支持combo规则。默认情况下kissy不使用combo规则：KISSY.add('bee-dem

加载模块css文件 kissy 除了加载模块js文件，还可以加载模块css文件。一般我们都是在头部静态引用一个css文件：在kissy中我们可以在业务js模块 require css样式文件。配置一个 bee-demo 包：KISSY.config({    packages: [        {            name: 'be

包配置包是 Kissy 中很重要的概念，回顾下上一节的代码：KISSY.config({ packages: [ { name: 'bee-demo', base: '../build', ignorePackageNameInUri: true, deb

主模块使用依赖模块主模块 src/index.js 依赖于子模块 src/mods/header.js，二个模块在物理目录中的关系：index.js 的代码这么写：//初始化header模块var header = require('./mods/header');header.init();require()的模块路径请使用相对路径，'./mods/hea

Kissy模块规范KISSY.add( '模块名/路径', ['依赖的模块'], function(S,require, exports, module){    //模块回调函数（在依赖模块加载完成后执行）})模块名称规范第一个参数为模块名称，gulp-kmc 会自动生成，请勿手动填写模块名称，不然很容易造成模块copy到其他目录时

在2-1节中明河讲解了几种风格的模块定义方式，本节我们重点来看在KISSY中如何定义和使用模块的。 2-1节的demo，模块是定义在html文件中：//定义一个模块KISSY.add('demo-mod',function(S,require,exports,module){ var Node = require('node'); var $ = Node.all;

kissy工程构建器 — Bee为了方便演示Kissy的模块加载机制，我们先使用generator-bee工具生成Kissy标准工程。PS：Kissy新手，建议先使用Bee生成标准工程，然后体会Kissy的loader，不然很容易会有挫败感，直呼Kissy文档坑爹...Bee生成的文件和demo，是可以保证立马跑起Kissy的loader代码。安装 ge

什么是模块系统javascript维护之困记得，刚来淘宝的时候，我维护的是淘宝收藏夹，那时候Kissy的还是1.1.6版本，没有模块系统，代码是1万4+，最开始是维护在1个文件，维护崩溃了，编写代码经常翻着翻着，不知道跑哪了。后来，分成多个功能逻辑js文件，使用ant打包成一个文件，新的问题出现，调试非常麻烦，代码依旧缺乏约束性。一刀切引入所有逻辑代码，

[选学]读懂bee的gulpfile.js本节内容为选学，建议深入掌握gulp使用的同学学习。一个kissy工程的构建需要包含如下部分：kissy包模块合并kissy模块转换，比如cmd模块转换成KISSY.add()包裹的模块kissy模块编译，比如去掉合并文件中大量的KISSY.add()包裹，用于提高脚本性能xtemplate模板编译，将.xtpl文件编译