day46_jquery_组件开发

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才有prototype2、Prototype默认是一个空的json对象3、只要声明了一个函数，该函数内部就默认有一个prototype4、可以通过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调用trigger2、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);            }        });    }})($);

如果data中有exception,则说明后台报错了

10 $.ajax方法
Ajax方法中的配置选项error函数，只有在服务器端设置status的值得时候，才能执行
ServletActionContext.getResponse().setStatus(500);