关于kissy框架的块加载机制

这几天呢，一直在做工作室的项目。而这个项目用到了淘宝的自主开发的框架kissy。所以对与kissy有一点自己的认识。

什么是kissy？

淘宝发布开源编辑器：KISSY Editor，和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样，它可以让我们在线编辑和格式化文本，但是相比 TinyMCE KISSY Editor 更加轻巧，更加适合国内的网络环境。 KISSY Editor 是开源项目 KISSY UI Library 的一个组件。KISSY 目前基于 YUI 2.x 开发，目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件，目前已有 CSS 基础框架、搜索提示 Suggest 和 KISSY Editor 这个富文本编辑器等组件

kissy的代码结构

Kissy的代码结构
Kissy:KISSY UI Library,存放ks-core，常用utils+widgets
Kissy-sandbox：实验基地，存放各种成型中的组件。
Kissy-gallery：展览馆，存放社区贡献的正式组件。
Kissy-dpl：HTML/CSS模式库。
Kissy-editor：KISSY富文本编辑器。
Kissy-ajbridge：AJBridge子品牌区。
Kissy-tools：压缩/打包/文档/测试等自动化工具。
Kissyteam.github.com：入口+文档等资料。

模块化思想：

对于这个我就有一些感慨了。之前学习使用了jquery之后发现jquery十分好用，特别是对于dom操作的方法的封装，特别的完善。但是kissy不单单对dom操作有封装对于io也是有封装的。而这个模块化的思想，就是让我们需要使用什么就来加载什么。如果我想对dom进行操作了，我只需要

KISSY.use('dom',function(S,DOM){// use DOM
});

只需要引用一下就Ok了。这就是块加载机制！
但是这只是简单的一些内容，很多人不知道如何具体应该怎么加载。今天我就以我现在在维护的一个项目为例子。来展示一下如何进行块加载机制！

例子：

今天我们的任务就是进行一个四级联动的加载！首先呢，来看看我们的页面：
我们再来看一下代码！

<!-- 新增加性别，民族，政治面貌，学制 学历 -->
<!-- 将专业改为专业名称四级联动 -->
<!-- 添加类为“other-major”的块 -->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>新增学生</title><!--#include file="/nenu_jysj_front/pages/common/link.html"  --><!--#include file="/nenu_jysj_front/pages/common/script.html"  --><link rel="stylesheet" type="text/css" href="../../../resources/css/page/admin_page/students_management/newStudent.css"><script type="text/javascript">KISSY.use('page/admin_page/students_management/newStudent',function(S){S.ready(function(){PW.page.admin_page.students_management.newStudent();})})</script>
</head>
<body><!--#include file="/nenu_jysj_front/pages/common/header.html"  --><!--#include file="/nenu_jysj_front/pages/common/Asidebar.html"  --><script type="text/javascript">KISSY.use('module/sidebar',function(S){S.ready(function(){PW.module.Sidebar();});});</script><div class="alertWrapper"></div><div><h2 class="headTitle">新增学生</h2></div><form class="J_complete-form pw-validation" action="#" method="post" name="J_complete-form"><div class="divCommon fontColor"><label  for="">姓名：</label><input type="text" id="" name="name" class="studentName J_notNull"/><p class="J_stuName" display="none">请输入正确的姓名</p></div><div class="divCommon fontColor"><label for="">身份证号：</label><input type="text" id="" name="idNumber" class="idNumber J_notNull"/><p class="J_idNumber">请输入18位身份证号</p></div><div class="divCommon fontColor"><label>考生号：</label><input type="text" id="" name="candidateNumber" class="candidateNumber J_notNull" /><p class="J_candidateNum">请输入正确考生号</p></div><div class="divCommon fontColor"><label>学号：</label><input type="text" id="" name="studentNumber" class="studentNumber J_notNull"/><p class="J_stuNumber">请输入正确的学号</p></div><div class="divCommon fontColor"><label>民族：</label><select class="nation J_notOption" name="nationCode" autocomplete="off"><option value="-1">请选择</option><option value="1">汉族</option></select></div><div class="divCommon fontColor change-sex"><label>性别：</label><input type="radio" id="male" name="sex" value="1" checked="checked" /><label for="male">男</label><input type="radio" id="female" name="sex" value="2" /><label for="female">女</label></div><div class="divCommon fontColor"><label>政治面貌：</label><select class="politicalStand J_notOption" name="politicalStandCode" autocomplete="off"><option value="-1">请选择</option><option value="1">共青团员</option></select></div><div class="divCommon fontColor"><label>学制：</label><select class="stuLength J_notOption" name="stuLengthCode" autocomplete="off"><option value="-1">请选择</option><option value="1">4</option></select></div><div class="clearfix divCommon fontColor"><label>学历：</label><select class="qualification J_notOption" name="qualificationCode" autocomplete="off"><option value="-1">请选择</option><option value="1">本科毕业</option></select></div><div class="divCommon fontColor"><label>所在院系：</label><select class="college J_notOption" name="collegeCode" autocomplete="off"><option value="-1">请选择</option><option value="1">信息与软件工程学院</option></select></div><div class="divCommon fontColor"><label>所在年级：</label><select class="grade J_notOption" name="grade" autocomplete="off"><option value="-1">请选择</option><option value="1">2014</option></select></div><div class="divCommon fontColor"><label>师范生类别：</label><select class="J_notOption"  name="normalStuCode" autocomplete="off"><option value="-1">请选择</option><option value="1">公费师范生</option><option value="2">普通师范生</option><option value="3">非师范生</option></select></div><div class="major-name origin fontColor clearfix"><label class="major-label must no-matter">专业名称：</label><select class="J_qualification J_notOption" name="majorQualification" autocomplete="off"><option value="-1" selected="">请选择</option><option value="1">本科专业</option><option value="2">研究生专业</option></select><label>------</label><select class="J_notOption J_majorClass" autocomplete="off" name="majorClass"><option value="-1" selected="">请选择专业大类</option></select><label>------</label><select class="J_notOption J_majorMinorClass" autocomplete="off" name="majorMinorClass"><option value="-1" selected="">请选择专业中类</option></select><label>------</label><select class="J_notOption J_majorName" name="majorCode" autocomplete="off"><option value="-1" selected="">请选择专业</option></select></div><div class="divCommon fontColor"><label>培养方式：</label><select class="J_notOption trainingMode" name="trainingModeCode" autocomplete="off"><option value="-1">请选择</option><option value="1">非定向</option><option value="2">定向</option><option value="3">自筹</option><option value="4">委培</option><option value="4">在职</option></select></div><div class="other-major fontColor divCommon"><label class="must matter">请填写专业名称：</label><input type="text" name="otherMajor" disabled="true" /></div><div class="origin fontColor"><label>生源所在地：</label><input class="area-id-local" type="hidden" name="areaId"><input type="text" name="originPlace" autocomplete="off" class="J_areaHolder J_notNull" id="J_localAreaHolder"/><ul class="none areaFidle" id="J_areaFidle_local"></ul><p style="padding-left: 112px;"></p></div><div class="areaCode shengyuan"><label>地区代码：</label><input type="text" name="originPlaceCode" class="local-code J_local_code " onfocus="this.blur()" value="222222"/></div><div class="company divCommon fontColor J_orientation"><label for="">委培/定向单位：</label><input type="text" id="unit" name="weipeiUnit"  class="J_notNull"/></div><div class="companyAddress fontColor J_orientation"><label>定向/委培单位地址：</label><input class="area-id-unit" type="hidden" name="areaId"><input id="J_unitAreaHolder" class="J_areaHolder J_notNull" type="text"  name="weipeiUnitPlace" autocomplete="off"/><ul class="none areaFidle position" id="J_areaFidle_unit"></ul><p style="padding-left: 118px;"></p></div><div class="areaCode J_orientation weipei"><label>地区代码：</label><input type="text" class="unit-code J_unit_code" onfocus="this.blur()" name="weipeiUnitPlaceCode" value="000000"/></div><div class="submitWrapper"><input type="submit" class="newStudentSubmit" value="新增学生"/></div></form>
</body>
</html>

首先我们引用了newStudent这个js

KISSY.use('page/admin_page/students_management/newStudent',function(S){S.ready(function(){PW.page.admin_page.students_management.newStudent();})})

而四级联动需要我们使用ajax传值。我就引用了linkage这个模块：

KISSY.add('page/admin_page/students_management/newStudent',function(S,addNewStudent,suggest,linkage){PW.namespace('page.admin_page.students_management.newStudent');PW.page.admin_page.students_management.newStudent = function(){new addNewStudent();new suggest();new linkage(); // 引用的模块}
},{requires:['newStudent/suggest','newStudent/addNewStudent','newStudent/linkage']
})

在页面底部，我们会看到这个模块

KISSY.add('newStudent/linkage',function(S){varlinkage = PW.module.linkage;function linkage(param){new linkage(param);}return linkage;
},{requires:['module/linkage']
});

这个linkage需要引用到module文件夹下的linkage.js
接着我们来到linkage.js！

KISSY.add('linkage/core',function(S){var$ = S.all, on = S.Event.on,LinkageIO = PW.io.module.linkage, //定义一个IO层入口el = {qualification: '.J_qualification',//学生类别majorClass: '.J_majorClass',//专业大类majorMinorClass: '.J_majorMinorClass',//专业中类majorName: '.J_majorName',//专业名称};function core(param){this.opts = S.merge(el,param);this.init();}S.augment(core,{init:function(){this._addEventListener();},_addEventListener:function(){var qualificationId = 0,majorClassId = 0,majorMinorId = 0;//专业联动$(el.qualification).on('change',function(ev){$(".other-major").hide().children("input").attr("disabled", "true");var qualificationId = $(ev.currentTarget).children('option:selected').val();LinkageIO.majorClassIO({qualification:qualificationId} , function(rs,data,msg){if(rs){varthat = this,opts = that.opts,majorClassOptions = '<option value="-1">请选择专业大类</option>';S.each(data,function(majorClass,o){majorClassOptions = majorClassOptions + '<option value="'+majorClass.majorCode+'">'+majorClass.majorName+'</option>';});$currentTarget = $(ev.currentTarget).parent().children(".J_majorClass");$currentTarget.html(majorClassOptions);$currentTarget.val(0);$(ev.currentTarget).parent().children(".J_majorMinorClass").val(0);$(ev.currentTarget).parent().children(".J_majorName").val(0);}});});$(el.majorClass).on('change',function(ev){$(".other-major").hide().children("input").attr("disabled", "true");var majorClassId = $(ev.currentTarget).children('option:selected').val();var qualificationId = $(el.qualification).children('option:selected').val();LinkageIO.majorMinorClassIO({majorCode:majorClassId, qualification:qualificationId} , function(rs,data,msg){if(rs){varthat = this,opts = that.opts,MinorClassOptions = '<option value="-1">请选择专业中类</option>';S.each(data,function(minorClass,o){MinorClassOptions = MinorClassOptions + '<option value="'+minorClass.majorCode+'">'+minorClass.majorName+'</option>';});$currentTarget = $(ev.currentTarget).parent().children(".J_majorMinorClass");$currentTarget.html(MinorClassOptions);$currentTarget.val(0);$(ev.currentTarget).parent().children(".J_majorName").val(0);}});});$(el.majorMinorClass).on('change',function(ev){$(".other-major").hide().children("input").attr("disabled", "true");var majorMinorClassId = $(ev.currentTarget).children('option:selected').val();var qualificationId = $(el.qualification).children('option:selected').val();LinkageIO.majorNameIO({majorCode:majorMinorClassId, qualification:qualificationId} , function(rs,data,msg){if(rs){varthat = this,opts = that.opts,majorNameOptions = '<option value="-1">请选择专业</option>';S.each(data,function(majorName,o){majorNameOptions = majorNameOptions + '<option value="'+majorName.majorCode+'">'+majorName.majorName+'</option>';});$currentTarget = $(ev.currentTarget).parent().children(".J_majorName");$currentTarget.html(majorNameOptions);$currentTarget.val(0);}});}); $(el.majorName).on('change',function(ev){var majorNameId = $(el.majorName).children('option:selected').html();if(majorNameId=="其他") {$(".other-major").show().children("input").attr("disabled", false);}else{$(".other-major").hide().children("input").attr("disabled","ture");}}); },});return core;
},{requires:['core' , 'io/module/linkage']
});

我们找到了linkage这个模块发现了很多例如LinkageIO的代码
这就是kissy的精髓所在，分块化的管理，把所有ajax放到一个IO文件夹下，把同一类的js放到一个文件夹下！

KISSY.add('io/module/linkage' , function(S){var urls;try{urls = PW.Env.url.module.linkage;}catch(e){S.log('地址信息错误');return;}PW.namespace('io.module.linkage');S.mix(PW.io.module.linkage, {conn: urls,majorClassIO:function(data,callback){S.IO({url:urls.majorClass,type:'get',data:data,dataType:'json',success:function(rs){callback(rs.code == 0,rs.data,rs.errMsg);},error:function(rs){callback(false,null,PW.Eng.msg[0]);}});},/** 专业联动下拉框**/majorMinorClassIO:function(data,callback){S.IO({url:urls.majorMinorClass,type:'get',data:data,dataType:'json',success:function(rs){callback(rs.code == 0,rs.data,rs.errMsg);},error:function(rs){callback(false,null,PW.Eng.msg[0]);}});},majorNameIO:function(data,callback){S.IO({url:urls.majorName,type:'get',data:data,dataType:'json',success:function(rs){callback(rs.code == 0,rs.data,rs.errMsg);},error:function(rs){callback(false,null,PW.Eng.msg[0]);}});},});
});

最后我们来到了IO文件夹下的linkage.js
我们会发现它有很多ajax请求，也可以看到我们通过get方式发送了很多请求！
相信到这里，我们对于kissy框架的块加载机制有了一定的了解了！
之后我还会继续更新做项目中，遇到了kissy框架中其他方面的问题！