欢迎大家转载,转载请注明出处,谢谢!
接触JQueryEasyUI已经有一段时间了,但是自己还只是出于一个小白学习期,所以想系统的学习下:
这个学习笔记是基于孙宇的系列JQueryEasyUI教学视频而来。但是上面用的是Java实现的代码,在这里我将使用.Net实现其代码,并记录下来,希望对自己及大家有所帮助。
前期准备
JavaScript,也称ECMAScript,是一种广泛用于客户端网页开发的脚本语言,最早是在HTML上使用的,用来给HTML网页添加动态功能,然而现在JavaScript也可被用于网络服务器,如Node.js。
发展初期,JavaScript的标准并未确定,同期有网景的JavaScript,微软的JScript和CEnvi的ScriptEase三足鼎立。1997年,在ECMA(欧洲计算机制造商协会)的协调下,由Netscape、Sun、微软、Borland组成的工作组确定统一标准:ECMA-262。
一般来说,完整的JavaScript包括以下几个部分:
- ECMAScript,描述了该语言的语法和基本对象
- 文档对象模型(DOM),描述处理网页内容的方法和接口
- 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口
它的基本特点如下:
- 是一种解释性脚本语言(代码不进行预编译)。
- 主要用来向 HTML 页面添加交互行为。
- 通常直接嵌入 HTML 页面。
JavaScript常用来完成以下任务:
- 嵌入动态文本于HTML页面
- 对浏览器事件作出响应
- 读写HTML元素
- 在数据被提交到服务器之前验证数据
- 检测访客的浏览器信息
- 控制cookies,包括创建和修改等
2.什么是JQuery?
jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。
jQuery 是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择DOM元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery 也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使 jQuery 函数库能够创建功能强大的动态网页以及网络应用程序。
3.什么是JSON?
JSON解析:
http://www.bejson.com这个网站不错,可以直接在线解析JSON,非常方便;
下载谷歌浏览器的JSON解析器也很不错,视图化,清晰明了:JSONView;easyui help you build your web page easily!(这是EasyUI官网的原话)
EasyUI是基于JQuery的一组UI插件的集合,帮助Web开发人员轻松的打造出网站后台。
这些是基本的东西,写的也不是很详细,有啥不明白的就直接百度吧,希望对大家有所帮助!
本文链接
读《JavaScript高级程序设计》第7章有感。
一、究竟闭包是什么?
闭包是指有权访问另一个函数作用域中的变量的函数。
个人感悟:
通过书中的这句定义,按中文语法分析,说白了,闭包就是一种函数,而这种函数可以访问另一个函数作用域中的变量。
那为什么这种函数有这样牛B的功能呢?其实,它是利用了函数的作用域链。
二、创建闭包的常见方式:在一个函数内部创建另一个函数
return function(object1,object2){
var value1 = object1[propertyName];
var value2 = object2[propertyName];
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
};
}
留意这个例子中标红的地方。标红处是一个内部函数的代码,而这个内部函数正是匿名函数。
这两行代码访问了外部函数中的变量propertyName。即使这个内部函数被返回了,而且是在其他地方被调用了,但它仍然可以访问变量propertyName。
之所以还能够访问这个变量,是因为这个匿名函数的作用域链中包含了createComparisonFunction()的作用域(在作用域链中是以变量对象表示)
三、闭包能够起什么作用?为什么闭包能够起作用?
说到这里,我们不得不回想一下之前学过的关于作用域链的知识。只有透彻理解作用域链,才能真正理解闭包起什么作用,为什么能够起作用。
关于作用域链的知识,在我上一篇博文中已经详细说明,在这就不重复叙述了,我只讲关键的地方。
首先,当调用某个函数的时候,系统会为函数创建一个执行环境,并且通过复制函数的[[Scope]]属性中的对象构建起执行环境的作用域链。而函数的活动对象作为变量对象被推入执行环境作用域链的最前端。
可见,当函数被调用时,会创建两个东西,一个是函数的执行环境,另一个则是其相应的作用域链。
一般来说,当函数执行完毕后,局部活动对象就会被销毁,内存中仅保存全局作用域(也就是全局执行环境的变量对象)。
但是,闭包的情况有所不同。原因就是:
在另一个函数内部定义的函数会将包含函数(即外部函数)的活动对象添加到它的作用域链中。
回到上面的例子:
return function(object1,object2){
var value1 = object1[propertyName];
var value2 = object2[propertyName];
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
};
}
可以看出,在createComparisonFunction()函数内部定义的匿名函数的作用域链中,包含外部函数createComparisonFunction()的活动对象。
在匿名函数从createComparisonFunction()中被返回后,它的作用域链就变成了下图所示:
此时,匿名函数可以访问在createComparisonFunction()中定义的所有变量。
更重要的是,当createComparisonFunction()函数执行完毕后,也就是返回了匿名函数后,它的活动对象也不会被销毁,这是因为匿名函数的作用域链仍然在引用这个活动对象。
也就是说,当createComparisonFunction()函数返回后,它的执行环境的作用域链会被销毁,但它的活动对象仍然被引用。根据JS的GC策略,因为该活动对象引用次数不为0,因此它会留在内存中,直到匿名函数被销毁后,createComparisonFunction()的活动对象才会被销毁。
三、总结
由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存,过度使用闭包可能会导致内存占用过多,这方面要注意一下。
这本JS基础书真心好,闭包这部分得多看看。
关于闭包的一些应用将在下一篇文章讲述。
共勉。
本文链接
上一篇文章,讲解了jQuery.ajax函数。这篇文章将其他一些细节补充完。下一篇文章则开始讲解,jQuery是如何将script动态载入、XMLHttpRequest、JSONP一起包装进jQuery.ajax里的。
jQuery.ajaxSetup
我们可以从主函数看出,参数是通过jQuery.ajaxSetup产生的:
// 通过jQuery.ajaxSetup改造参数对象s = jQuery.ajaxSetup( {}, options ),
那么jQuery.ajaxSetup在干些什么呢?
// 如果有参数
return settings ?
// 创建一个设置对象,先将jQuery.ajaxSettings的属性放进去,
// 然后将参数也放进去
ajaxExtend( ajaxExtend( target, jQuery.ajaxSettings ), settings ) :
// 并将设置对象的属性放进jQuery.ajaxSettings对象里
ajaxExtend( jQuery.ajaxSettings, target );
};
ajaxExtend
ajaxExtend和jQuery.extend有一些不同,避免有些不需要深复制的属性进行深复制。
var key, deep,
flatOptions = jQuery.ajaxSettings.flatOptions || {};
// 遍历src对象中的所有key
for ( key in src ) {
// 如果值不是undefined
if ( src[ key ] !== undefined ) {
// 判断是不是不需要深复制的,如果不需要深复制,将属性直接写进target,
// 否则写进deep里存起来
// 我们可以从jQuery.ajaxSettings.flatOptions看到,
// 实际上不需要深复制的是url和context
( flatOptions[ key ] ? target : ( deep || (deep = {}) ) )[ key ] = src[ key ];
}
}
// 如果deep不是undefined,证明需要深复制
if ( deep ) {
// 开始深复制
jQuery.extend( true, target, deep );
}
// 返回target
return target;
}
ajaxHandleResponses
主体函数中response是通过ajaxHandleResponses来处理的:
// 得到响应数据if ( responses ) {
// 通过ajaxHandleResponses处理数据
response = ajaxHandleResponses( s, jqXHR, responses );
}
我们来看看该函数干了些什么。
var ct, type, finalDataType, firstDataType,
contents = s.contents,
dataTypes = s.dataTypes,
responseFields = s.responseFields;
// 将responseXXX填入jqXHR指定位置,也就是responseXML或者responseText
// 其中jqXHR.xml对应responseXML,jqXHR.text对应responseText
for ( type in responseFields ) {
if ( type in responses ) {
jqXHR[ responseFields[type] ] = responses[ type ];
}
}
// 删除掉通配dataType,得到返回的Content-Type
while( dataTypes[ 0 ] === "*" ) {
dataTypes.shift();
if ( ct === undefined ) {
ct = s.mimeType || jqXHR.getResponseHeader("Content-Type");
}
}
// 看看是不是我们能处理的Content-Type,比如图片这类二进制类型就不好处理了
if ( ct ) {
// 实际上能处理的就是text、xml和json
for ( type in contents ) {
if ( contents[ type ] && contents[ type ].test( ct ) ) {
// 如果是这三种类型,则推入dataTypes里
dataTypes.unshift( type );
break;
}
}
}
// 如果dataTypes是我们想要的,也就是text、xml、json
if ( dataTypes[ 0 ] in responses ) {
// 则最终dataType就是这个了
finalDataType = dataTypes[ 0 ];
// 否则
} else {
// 尝试转换成我们要的dataType
for ( type in responses ) {
// 如果dataTypes[ 0 ]不存在,则直接用type作为最终dataType
// 否则,看看能不能转换,能的话就用type作为最终dataType
if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[0] ] ) {
finalDataType = type;
break;
}
// 保存第一个type
if ( !firstDataType ) {
firstDataType = type;
}
}
// 用最终dataType或者用第一个type
finalDataType = finalDataType || firstDataType;
}