关于kissy框架的块加载机制
来源：互联网 发布：如果张作霖不死 知乎 编辑：程序博客网 时间：2024/05/16 18:55
这几天呢，一直在做工作室的项目。而这个项目用到了淘宝的自主开发的框架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){ 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 = '<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){ var that = 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){ var that = 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框架中 其他方面的问题！
0 0
- 关于kissy框架的块加载机制
- KISSY框架
- 淘宝框架kissy
- 关于Java的静态块和和非静态块（构造块）的加载顺序
- 淘宝Kissy框架使用记录
- Kissy整体架构 - Kissy框架学习笔记01
- KISSY
- 关于类、方法、变量、语句块的加载顺序
- 关于Java classloader的加载机制
- 关于类加载机制的一些笔记
- 关于类加载机制的一道题目
- 关于各种框架加载图片的坑
- 关于.NET框架下的反射机制
- 【Kissy WaterFall】实行手动加载数据
- 关于generator-bee生成的KISSY目录中demo执行失败
- apk动态加载机制(一）: 框架的实现
- 关于静态块和类加载
- 关于动态加载机制的热更新的小结
- longestCommonPrefix
- hive原理与源码分析-语法分析器和语义分析器（二）
- PHP递归实现无限级分类并展示
- mysql性能优化方向
- 第六次上机实验
- 关于kissy框架的块加载机制
- gsoap webService 开发过程的问题总结
- Eclipse下jQuery文件报错解决方案
- scrapy duplicate requestes
- Spark API 详解/大白话解释 之 reduce、reduceByKey
- c语言链表数据存入文件和读取文件
- 【开源】java集群任务调度系统 cuckoo-schedule
- win10去除桌面快捷方式小箭头
- C语言：计算输入的整数是几位数
