1Js的组件开发
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、声明一个字符串,这个字符串将会附加到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在上述的命名空间中动态的创建了一个具体的树
$.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、先声明后调用 2、声明,事件触发 这种情况下的事件,在声明的时候,函数中的变量不需要管是否赋值了,在该函数被触发的时候,变量有值就可以了
1、对象可以动态的添加属性,属性可以是function,json,基本类型 2、Constructor是默认的一个属性,是构造器对象 3、Prototype也是默认的属性,默认是一个{} 4、任何一个对象都有可能成为任何一个对象的属性
利用该构造器函数可以把一个对象创建出来
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); } }); } })($);如果data中有exception,则说明后台报错了
10 $.ajax方法 Ajax方法中的配置选项error函数,只有在服务器端设置status的值得时候,才能执行 ServletActionContext.getResponse().setStatus(500);