day46_jquery_组件开发

最新推荐文章于 2023-06-05 18:19:01 发布

csdn_AF

最新推荐文章于 2023-06-05 18:19:01 发布

阅读量1.1k

点赞数

分类专栏：黑马培训班文章标签： jquery jquery插件

本文链接：https://blog.csdn.net/CSDN_AF/article/details/70173284

版权

黑马培训班专栏收录该内容

88 篇文章 1 订阅

订阅专栏

1Js的组件开发

1.1基本组件的开发

1.1.1树的组件的开发

1.1.1.1开发基本的组件

1、以jquery插件的形式开发

(function($){
})($);

2、因为要用继承的形式实现具体的树，所以整个组件采用json格式的写法

    createTree: function(config){
        //var treeObj = this;//把this赋值给当前变量
        var param = {};
        //如果config为undefine，则选择后者，如果config有值，则选择前者
        config = config||{};
        /**
         * 把config的内容赋值到setting中
         *    如果没有，直接赋值，如果有，则覆盖
         */
        $.extend(true, param, $.DataTree.defaultConfig, config);
        $.post(config.url, config.data, function(data){
            $("#"+config.id).zTree(param.setting, data);
        });
    }
    上面的内容是创建树的组件的代码

    $.DataTree.defaultConfig = {
        setting: {
            isSimpleData: true,
            treeNodeKey: "id",
            treeNodeParentKey: "pid",
            showLine: true,
            root: {
                isRoot: true,
                nodes: []
            }
         }
    };
    树的默认配置

2、因为createTree是一个特别重要的方法，详细分析：

写createTree的目的：完成要写成一个通用的树的组件，要完成两点内容：
1、把固定的代码固化在组件方法中
2、把一些变量作为参数传递进去
通过对树的形成的分析，可以得到：树的默认配置的一些内容得改。例如
treeNodeKey,当发出post请求的时候，传递的参数为url,data,也得传递过来，
所以在createTree方法中有了一个参数：config

1.1.1.2基本树的组件的使用

1.1.1.2.1命名空间

1、声明一个字符串，这个字符串将会附加到window上，作为window的一个属性，而且该属性是json格式的对象。
2、因为命名空间在任何地方都会用到，所以用了jquery的插件的形式来解决命名空间的问题。

(function($){
    $.nameSpace = function(namespace){
        var ss = namespace.split(".");
        var tempNs = [];
        for (var i = 0; i < ss.length; i++) {
            tempNs.push(ss[i]);
            var n = tempNs.join(".");
            if (typeof window[n] != "object") { eval("window." + n + "={}"); }
        }
    }
})($);

说明：这段代码的作用：

   参数为”cn.itcast.sh04.oa”
   返回值:window.cn.itcast.sh04.oa

1.1.1.2.2继承机制使用组件

在上述的命名空间中动态的创建了一个具体的树

$.extend(cn.itcast.sh04.MenuitemTree, $.DataTree);
cn.itcast.sh04.MenuitemTree.createTree({
        id:'tree',
        url: 'menuitemAction_showMenuitems.action',
        data: null,
        setting: {
            treeNodeKey: 'mid'
        }
});

说明：
在sh04对象上动态添加了一个属性MenuitemTree,是一个json格式的对象
该对象继承了$.DataTree
所以只需要MenuitemTree调用createTree方法就可以创建树了
好处：不同的命名空间，可以创建不同的树，但是用的都是最基本的树的组件

1.1.2表格的组件的开发

1.1.3Form表单的组件的开发

1.2 function

是一个函数
执行有两种方案:
1、先声明后调用
2、声明，事件触发
这种情况下的事件，在声明的时候，函数中的变量不需要管是否赋值了，在该函数被触发的时候，变量有值就可以了

1.3 function是一个对象

1、对象可以动态的添加属性，属性可以是function,json,基本类型
2、Constructor是默认的一个属性，是构造器对象
3、Prototype也是默认的属性，默认是一个{}
4、任何一个对象都有可能成为任何一个对象的属性

1.1.3.4function是一个构造器函数

利用该构造器函数可以把一个对象创建出来

3 this

1、谁调用this所在的函数，this就代表谁
2、可以利用call函数改变this的指向

4 Prototype

1、只有function才有prototype
2、Prototype默认是一个空的json对象
3、只要声明了一个函数，该函数内部就默认有一个prototype
4、可以通过prototype静态或者动态初始化值
静态初始化值

var json = {
   a:1,
   b:2,
   c:3
};

动态的初始化值

Json[‘aaa’] = function(){

}

aaa为字符串，可以为变量，这样就可以动态的给json对象添加key,value的值

动态遍历json对象的值

For(var i in json){
    Json[i]
}

利用上述的代码可以动态的遍历json对象

5、可以把上述的json对象的动态的初始化通过prototype的形式赋值给function

function createClass(json){
        function F(){

}
For(var I in json){
   F.prototype[i] = json[i];
}
}

6、通过构造器创建出来的对象拥有该构造器中prototype属性的内容
5 匿名函数
1、匿名函数的典型的应用：闭包
2、闭包的应用场合：
继承机制的封装应用了闭包
Jquery的插件开发
把核心的内容封装了，公开了一些api
6 事件
事件的声明

 三种：
      直接事件的名称
           事件是能够叠加的
      利用unbind和bind
           事件不能叠加，但是不能为未来的元素添加事件
      Delegate
            能为未来的元素添加事件

事件的触发：

浏览器内部的事件：通过浏览器的机制触发的
自定义事件：通过trigger函数触发

1、自定义事件绑定在哪个对象上，哪个对象调用trigger函数
me.delegate("tbody td","click",function(){
   $(this).trigger("clickcell",[me,this]);
});

说明：因为上面的代码给td添加了一个clickcell事件，所以应该是
Tbody下的td调用trigger

2、trigger函数有两个参数
trigger(自定义事件的名称，自定义事件要传递的参数)
如果是两个或者两个以上的参数，用数组来传递

7 回调函数
1、对原始的ajax请求的一个封装
2、$.post做的一些封装

8 Jquery的内核的机制
jQuery,$是什么
插件的开发

9 $.post方法
1、post方法的第三个参数只能接受到服务器成功响应后的信息
成功响应：指的是服务器端response中status的值，即便服务器端有错误
但是只要status的值为200即使成功响应。
2、在struts2中做一个全局的错误处理

<package name="ajax-error" namespace="/" extends="json-default">
        <global-results>
            <!-- 
                该结果集类型为chain,又跳转到另外一个action
             -->
            <result name="errHandler" type="chain">
                <param name="actionName">errorProcessor</param>
            </result>
        </global-results>
        <!-- 
            全局的异常映射
         -->
        <global-exception-mappings>
            <exception-mapping exception="java.lang.Exception"
                result="errHandler" />
        </global-exception-mappings>

        <action name="errorProcessor" class="cn.itcast.sh04.struts2.action.AjaxErrorProcessor">
            <result type="json"></result>
        </action>
    </package>

这样只要服务器一旦错误，就会跳转到错
误的action中

3、重新写post方法

(function($){
    $.mypost = function(ajaxJSON){
        $.post(ajaxJSON.url,ajaxJSON.data,function(data){ if(data.exception){//后台出错了 alert(data.exception.message); 错误处理 }else{ ajaxJSON.callback(data); } });
    }
})($);