当前位置:  编程技术>WEB前端
本页文章导读:
    ▪JQueryEasyUI学习笔记(一)        欢迎大家转载,转载请注明出处,谢谢! 接触JQueryEasyUI已经有一段时间了,但是自己还只是出于一个小白学习期,所以想系统的学习下:这个学习笔记是基于孙宇的系列JQueryEasyUI教学.........
    ▪【深入JavaScript】2.闭包(读书笔记)      读《JavaScript高级程序设计》第7章有感。一、究竟闭包是什么?  闭包是指有权访问另一个函数作用域中的变量的函数。  个人感悟:  通过书中的这句定义,按中文语法分析,说白了.........
    ▪jQuery ajax —— 一些细节以及主函数扩展出来的方法      上一篇文章,讲解了jQuery.ajax函数。这篇文章将其他一些细节补充完。下一篇文章则开始讲解,jQuery是如何将script动态载入、XMLHttpRequest、JSONP一起包装进jQuery.ajax里的。 jQuery.ajaxSetup我们可.........

[1]JQueryEasyUI学习笔记(一)
    来源:    发布时间: 2013-11-15

  欢迎大家转载,转载请注明出处,谢谢!

 

接触JQueryEasyUI已经有一段时间了,但是自己还只是出于一个小白学习期,所以想系统的学习下:

这个学习笔记是基于孙宇的系列JQueryEasyUI教学视频而来。但是上面用的是Java实现的代码,在这里我将使用.Net实现其代码,并记录下来,希望对自己及大家有所帮助。

 

 前期准备

  • 什么是javascript?
  •     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简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组2种结构,通过这两种结构可以表示各种复杂的结构
          1、对象:对象在js中表示为“{}”扩起来的内容,数据结构为 {key:value,key:value,...}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key 获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种。
          2、数组:数组在js中是中括号“[]”扩起来的内容,数据结构为 ["java","javascript","vb",...],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。
        经过对象、数组2种结构就可以组合成复杂的数据结构了。  

      JSON解析:

                http://www.bejson.com这个网站不错,可以直接在线解析JSON,非常方便;

        下载谷歌浏览器的JSON解析器也很不错,视图化,清晰明了:JSONView;
      4.什么是JQueryEasyUI?    

            easyui help you build your web page easily!(这是EasyUI官网的原话)

        EasyUI是基于JQuery的一组UI插件的集合,帮助Web开发人员轻松的打造出网站后台。

     

        这些是基本的东西,写的也不是很详细,有啥不明白的就直接百度吧,希望对大家有所帮助!

     

    本文链接


        
    [2]【深入JavaScript】2.闭包(读书笔记)
        来源:    发布时间: 2013-11-15

    读《JavaScript高级程序设计》第7章有感。

    一、究竟闭包是什么?

      闭包是指有权访问另一个函数作用域中的变量的函数。

      个人感悟:

      通过书中的这句定义,按中文语法分析,说白了,闭包就是一种函数,而这种函数可以访问另一个函数作用域中的变量。

      那为什么这种函数有这样牛B的功能呢?其实,它是利用了函数的作用域链。

     

    二、创建闭包的常见方式:在一个函数内部创建另一个函数

    function createComparisonFunction(propertyName){

      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]]属性中的对象构建起执行环境的作用域链。而函数的活动对象作为变量对象被推入执行环境作用域链的最前端。

      可见,当函数被调用时,会创建两个东西,一个是函数的执行环境,另一个则是其相应的作用域链。

      一般来说,当函数执行完毕后,局部活动对象就会被销毁,内存中仅保存全局作用域(也就是全局执行环境的变量对象)。

      但是,闭包的情况有所不同。原因就是:

     

      在另一个函数内部定义的函数会将包含函数(即外部函数)的活动对象添加到它的作用域链中。

       

      回到上面的例子:

    function createComparisonFunction(propertyName){

      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基础书真心好,闭包这部分得多看看。

      关于闭包的一些应用将在下一篇文章讲述。

      共勉。

    本文链接


        
    [3]jQuery ajax —— 一些细节以及主函数扩展出来的方法
        来源:    发布时间: 2013-11-15

    上一篇文章,讲解了jQuery.ajax函数。这篇文章将其他一些细节补充完。下一篇文章则开始讲解,jQuery是如何将script动态载入、XMLHttpRequest、JSONP一起包装进jQuery.ajax里的。

     

    jQuery.ajaxSetup

    我们可以从主函数看出,参数是通过jQuery.ajaxSetup产生的:

    // 通过jQuery.ajaxSetup改造参数对象
    s = jQuery.ajaxSetup( {}, options ),

    那么jQuery.ajaxSetup在干些什么呢?

    jQuery.ajaxSetup = function( target, settings ) {
    // 如果有参数
    return settings ?

    // 创建一个设置对象,先将jQuery.ajaxSettings的属性放进去,
    // 然后将参数也放进去
    ajaxExtend( ajaxExtend( target, jQuery.ajaxSettings ), settings ) :

    // 并将设置对象的属性放进jQuery.ajaxSettings对象里
    ajaxExtend( jQuery.ajaxSettings, target );
    };

     

    ajaxExtend

    ajaxExtend和jQuery.extend有一些不同,避免有些不需要深复制的属性进行深复制。

    function ajaxExtend( target, src ) {
    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 );
    }

    我们来看看该函数干了些什么。

    function 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;
    }


        
    最新技术文章:
    ▪css white-space:nowrap属性用法(可以强制文字不...
    ▪IE里button设置border:none属性无效解决方法
    ▪border:none与border:0使用区别
    ▪html清除浮动的6种方法示例
    ▪三个不常见的 HTML5 实用新特性简介
    ▪css代码优化的12个技巧
    ▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
    ▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
    ▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
    ▪小技巧处理div内容溢出
    ▪html小技巧之td,div标签里内容不换行
    ▪纯CSS实现鼠标放上去改变文字内容
    ▪li中插入img图片间有空隙的解决方案
    ▪CSS3中Transition属性详解以及示例分享
    ▪父div高度不能自适应子div高度的解决方案
    ▪告别AJAX实现无刷新提交表单
    ▪从零学CSS系列之文本属性
    ▪HTML 标签
    ▪CSS3+Js实现响应式导航条
    ▪CSS3实例分享之多重背景的实现(Multiple background...
    ▪用css截取字符的几种方法详解(css排版隐藏溢...
    ▪页面遮罩层,并且阻止页面body滚动。bootstrap...
    ▪CSS可以做的几个令你叹为观止的实例分享
    ▪详细分析css float 属性以及position:absolute 的区...
    ▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
    ▪CSS小例子(只显示下划线的文本框,像文字一...
    ▪可以给img元素设置背景图
    ▪不通过JavaScript实现的自动滚动视差效果
    ▪div+CSS 兼容小摘
    ▪CSS的inherit与auto使用分析
     


    站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3