关于kissy框架的块加载机制

最新推荐文章于 2024-03-09 15:37:22 发布

wuxy720

最新推荐文章于 2024-03-09 15:37:22 发布

阅读量1k

点赞数 2

分类专栏： AJAX 前端框架文章标签： kissy 框架格式化

本文链接：https://blog.csdn.net/wuxy720/article/details/71331195

版权

AJAX 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端框架

2 篇文章 1 订阅

订阅专栏

这几天呢，一直在做工作室的项目。而这个项目用到了淘宝的自主开发的框架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框架中其他方面的问题！

wuxy720

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于kissy框架的块加载机制

这几天呢，一直在做工作室的项目。而这个项目用到了淘宝的自主开发的框架kissy。所以对与kissy有一点自己的认识。什么是kissy？淘宝发布开源编辑器：KISSY Editor，和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样，它可以让我们在线编辑和格式化文本，但是相比 TinyMCE KISSY Editor 更加轻巧，更加适合国内的网络环境。 KISSY Editor
复制链接

扫一扫

专栏目录