关于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了。这就是块加载机制！
但是这只是简单的一些内容，很多人不知道如何具体应该怎么加载。今天我就以我现在在维护的一个项目为例子。来展示一下如何进行块加载机制！
例子：
今天我们的任务就是进行一个四级联动的加载！首先呢，来看看我们的页面：
我们再来看一下代码！
<html>
<head>
<meta charset="utf-8"/>
<title>新增学生title>
<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>
<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">4option>
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">2014option>
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){
var
linkage = 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){
var
that = this,
opts = that.opts,
majorClassOptions = '';
S.each(data,function(majorClass,o){
majorClassOptions = majorClassOptions + '+majorClass.majorName+'';
});
$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){
var
that = this,
opts = that.opts,
MinorClassOptions = '';
S.each(data,function(minorClass,o){
MinorClassOptions = MinorClassOptions + '+minorClass.majorName+'';
});
$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){
var
that = this,
opts = that.opts,
majorNameOptions = '';
S.each(data,function(majorName,o){
majorNameOptions = majorNameOptions + '+majorName.majorName+'';
});
$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框架中 其他方面的问题！