要是以前,我铁定整天到处找教程看,光说不练,现在觉悟了,看教程看得最多,不一定能看完,看完了不一定能比作者更明白,看明白了不一定能用得好。所以看教程其实好处不大,只能作为小小的参考。很多东西看别人的始终是没有用。只有将实验进行到底才是王道……

  这儿主要是代码分析。

  研究工具:Dreamweave cs3(装那个extJs 2.0插件老装不上)、Aptana(一个好处,好看代码,有括号匹配,json语法好是好,就是括号多了,搞清在哪儿结束)

  发现,extJs的代码最喜欢用json语法定义,类基本上都是用json语法定义的。而不是在外面一大路的xx.prototype.yyyy=function(){……}。不过这种语法蛮清晰。我喜欢。

  extJs时面只有一个类:Ext,它是一个静态类。提供了经常要用到的函数。

Ext.apply = function(o, c, defaults){
    if(defaults){
        // no "this" reference for friendly out of scope calls
        Ext.apply(o, defaults);
    }
    if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
        }
    }
    return o;
};

  这是apply函数,作用其实相当于克隆,它把对象c中的成员全部复制到o中去。如果有defaults,也把它的内容复制到o中。这儿其实揭示javascript的一种语法:

  javascript中的对象的成员有两种引用方法:

  一、o.propertyName

  二、o[propertyName]

  这段代码关键就在o[p]=c[p]。这个要理解。尽管如此,但是不能像下面一样做:

  var newelem=new Object();
  Ext.apply(newelem,Ext.getDom("a1"));
  Ext.getDom("form1").appendChild(newelem);

  下面一大段的代码,由于dw不好看代码,半天才晓得那儿是个(function(){……Ext.apply(Ext,{……}})(),这是 我把概述出来。这样写呢,实在有点叫人别扭,作者的意图是想把这相关的一段全部放到括号中,以免造成理解上的混乱。能理解。不过,这种写法不大招人喜欢。

applyIf : function(o, c){
            if(o && c){
                for(var p in c){
                    if(typeof o[p] == "undefined"){ o[p] = c[p]; }
                }
            }
            return o;
        }

  这是applyIf的代码,事实上,在文档上面,它的描述有问题,应当是是当o,c两个对象都存在时,则把o中不存在,c中存在的属性复制到o 中,且属性名不变。而不是所谓“如果o不存在时就把属性复制到o中”,哪有这种说法的。另外,判断一个对象是不是存在,最严谨的还是用typeof的方 法。

addBehaviors : function(o){
            if(!Ext.isReady){
                Ext.onReady(function(){
                    Ext.addBehaviors(o);
                });
                return;
            }
            var cache = {}; 
            for(var b in o){
                var parts = b.split(
'@');
                if(parts[1]){ // for Object prototype breakers
                    var s = parts[0];
                    if(!cache[s]){
                        cache[s] = Ext.select(s);
                    }
                    cache[s].on(parts[1], o[b]);
                }
            }
            cache = null;
        }

  这个地方巧妙在于依赖于Ext.isReady。这个属性我估计应当是在onload第一行将它设成true的,它的作用就是用于标志当前是不 是已经文档模型加载完了。前面几行的意思:如果dom模型还没有加载完,没有准备好,就将这些事件注册代码交给onload去做。即 Ext.onReady。

  如果DOM模型已加载完,那么就马上注册事件,区别:前者是延迟注册、后者是马上注册。为什么要延迟,因为DOM都没有创建完,有些元素在DOM树中还不存在,当然就没法设置它了。其余的地方则不足道,后面的关键就是Ext.select了。

id : function(el, prefix){
            prefix = prefix || "ext-gen";
            el = Ext.getDom(el);
            var id = prefix + (++idSeed);
            return el ? (el.id ? el.id : (el.id = id)) : id;
        }

  这儿有一个技巧:prefix = prefix || "ext-gen",这是最简捷的代码啊。本来要一个if语句的。

  extend、namespace两个函数硬是没有看懂,等水平高了再来研究。

  urlEncode的源代码原理简单,但是,要是我的话还是没法写得这么清楚,主要是情况比较多。这儿主要是学到了数组的push,原来以为 push只能传一个参数,没想到能一次传多个。发现,很多时候,在构造一个复杂的字符串时都是用到数组的。至于urlEncode的作用,就是把一个 JSON对象编码成一个查询字符串。

        each : function(array, fn, scope){
            if(!Ext.isArray(array)){
                array = [array];
            }
            for(var i = 0, len = array.length; i < len; i++){
                if(fn.call(scope || array[i], array[i], i, array) === false){ return i; };
            }
        }

  这个函数的功能并不是像它的名字一样简单啊,这儿又学到了:

  一、原来构造单元素数组可以直接这样写:a=[a]。

  二、scope在这儿是默认伪调用者,同时,还把当前数组元素值、序号、数组引用都传过去了。这个可能在fn中用得着。要注意。

  另外就是x===false这个语句要注意。要知道undefined==false。

        callback : function(cb, scope, args, delay){
            if(typeof cb == "function"){
                if(delay){
                    cb.defer(delay, scope, args || []);
                }else{
                    cb.apply(scope, args || []);
                }
            }
        }

  吃了一惊,Function什么时候有个成员叫defer了?后来才知,defer是extJs扩展出来的。delay是时延。老实说 scope这个东西不能言传只可意会,不看代码是不清楚的。事实上javascript中的确是存在defer属性的。用于修饰script元素的,确实 是用于延迟script里面内容的加载。详情见此处。

destroy : function(){
            for(var i = 0, a = arguments, len = a.length; i < len; i++) {
       var as = a[i];
      if(as){
        if(typeof as.destroy == 'function'){
          as.destroy();
      }
      else if(as.dom){
          as.removeAllListeners();
          as.remove();
      }
                }
            }
        }

  这个函数用来销毁对象,由代码可知一点,extJs鼓励大家在创建自己的类有必要的话就写destroy。如大量没用的dom元素。在这 里,destory相当于析构造函数一样。至于removeAllListenners,remove这两个函数,它们是Ext.Element类的成 员。

  removeNode : isIE ? function(){
            var d;
            return function(n){
                if(n && n.tagName != 'BODY'){
                    d = d || document.createElement('div');
                    d.appendChild(n);
                    d.innerHTML = '';
                }
            }
        }() : function(n){
            if(n && n.parentNode && n.tagName != 'BODY'){
                n.parentNode.removeChild(n);
            }
        }

  这个代码作用显然,就是删除一个结点。但是这个代码的写法实在有点让人难以接受啊。最郁闷是如果ie,那么,那个参数n是怎么传进去的呢,因为 外面罩住的那个函数没有参数,本来没有参数也好办,关键是外面的那个函数根本没有传参数给return里面的函数,这居然也能传进去,见识到了。

  经过一番实验与琢磨,发现,其实并不是外面的函数能传参给里面的那个函数,实在是因为那个()用得好,如有:

  var do1=function(){return function(n){}}();

  关键是要外面的函数{}之后要马上“自调用”一下,这样就会返回一个结果,这个结果是个函数表达式,它就能传参了。所以如果外面的函数没有()的话,那么实际调用将必须写成:do1()(3)的形式,连写两个括号。。这个问题我想了好久,终于想清楚了。

    createCallback : function(/*args...*/){
        // make args available, in function below
        var args = arguments;
        var method = this;
        return function() {
            return method.apply(window, args);
        };
    }

  顾名思意,回调。这个函数是对Function对象的原型扩展。所以,所有函数都有这个成员。例如:

  function A(){}

  B=A.createCallback();

  B();

  最后B()执行调用的是A。有人说,既然调用B就相当于调用A,还不如直接用

  function B(){A.apply(window,this.argments);}

  的确,这样确实可以达到差不多的目的,但是,写代码要注意封装。尽管这只有一行代码,但是,相对于客户程序员来说,createCallback比apply亲切多了,而且,它还节省了不少字符,这就节省带宽。

  什么时回调?让别人来调,那为什么不定义在那个调用者里面?因为,只有定义在别人的里面才可以获得别人的信息。

  当然,在这儿我还是学到了一点,以前没意识到,怎样把外层的this传给内层的function。只需method=this。

  有一些Ext下的函数并没有定义在ext.js中。如:Ext.onReady、Ext.reg、Ext.select、Ext.query。

关于defer 的用法相关推荐

  1. Go语言中 defer 的用法

    文章目录 Go语言中 defer 的用法 一.defer触发时机 二.defer执行逻辑 1. 多个defer语句按先进后出的方式执行 2.defer声明时,对应的参数会实时解析 3.defer.re ...

  2. go语言笔记——defer作用DB资源等free或实现调试

    defer 和追踪 关键字 defer 允许我们推迟到函数返回之前(或任意位置执行 return 语句之后)一刻才执行某个语句或函数(为什么要在返回之后才执行这些语句?因为 return 语句同样可以 ...

  3. java怎么延迟执行语句_Go语言defer(延迟执行语句)

    Go语言中关键字defer允许我们推迟到函数返回之前(或任意位置执行return语句之后)一刻才执行某个语句或函数(为什么要在返回之后才执行这些语句?因为return语句同样可以包含一些操作,而不是单 ...

  4. Swift之常见闭包与defer关键字的使用分析和闭包中的循环引用 | CSDN创作打卡

    一.什么是闭包? 在 Swift 中,可以通过 func 定义一个函数,也可以通过闭包表达式定义一个函数,闭包是一个捕获了上下文的常量或者是变量的函数.闭包(Closures)是自包含的功能代码块,可 ...

  5. 想学新的编程语言?考虑下Go吧

    作者 | Lewis Fairweather 译者 | 弯月,责编 | Elle 来源 | CSDN(ID:CSDNnews) [导读]快速的运行时.高效的并发.简单易学的语法,这些都是Go语言最吸引 ...

  6. golang 切片 接口_Golang简单入门教程——函数进阶使用

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是golang专题的第八篇,我们来聊聊golang当中的函数. 我们在之前的时候已经介绍过了函数的基本用法,知道了怎么样设计或者是定义一 ...

  7. golang 定义一个空切片_Golang简单入门教程——函数进阶使用

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是golang专题的第八篇,我们来聊聊golang当中的函数. 我们在之前的时候已经介绍过了函数的基本用法,知道了怎么样设计或者是定义一 ...

  8. Go语言学习Day03

    今天是学习go的第三天,早上6点起床,有点睡迟了,希望以后不要了,然后隔离手机,会发现生活还是很美好的. 今天学习了for,if,switch,defer等语句 一.for循环: for循环形式就是 ...

  9. 想学新的编程语言?考虑下 Go 吧!

    快速的运行时.高效的并发.简单易学的语法,这些都是Go语言最吸引人的特性. 作者 | Lewis Fairweather 译者 | 弯月,责编 | Elle 出品 | CSDN(ID:CSDNnews ...

最新文章

  1. ASP.NET2.0打通文件图片处理任督二脉【月儿原创】
  2. Notepad++ 添加Json格式化插件
  3. jQuery 源码分析笔记(3)
  4. oracle 时间戳最小单位,Oracle时间戳,最大值和最小值
  5. conda虚拟环境中使用pip仍然安装到全局python中
  6. camera(21)---camera 客观测试 Imatest教程--曝光度测试
  7. 源代码src修改为本地图片_20 行 Python 代码批量抓取免费高清图片!
  8. 正则表达式 基础认识
  9. Public权限下的列目录
  10. 3.8 - Using the Print Function
  11. 优点 spark_分布式计算引擎之星——Spark
  12. apache 伪静态转到nginx
  13. 用户名修改后进入不了计算机,更改计算机用户名后不能登录到桌面怎么办?
  14. i2c的IOL及上拉电阻
  15. 企业微信(h5页面嵌入企业微信)的分享总结
  16. 分享一些个人觉得非常好用的软件吧
  17. iOS 开发中的 Flux 架构模式
  18. [论文阅读]Spatio-Temporal Graph Routing for Skeleton-Based Action Recognition
  19. tekton入门 - 起步
  20. 域名防封之长城防封系统都能做什么?

热门文章

  1. PMP有效期三年后,还有必要续证吗?
  2. 金融风控-- >申请评分卡模型-- >特征工程(特征分箱,WOE编码)
  3. matlab求解振动学问题,振动力学基础与MATLAB应用
  4. Mysql报文理解mtu拆包依据(tso/gro)
  5. 【阅读笔记】后真相时代的竞争性真相
  6. Kerberos (一) --------- Kerberos 部署
  7. Qzon背景音乐常规办法(如何获取MP3链接)
  8. Wav ,flac,mp3,ogg 等的区别
  9. php网页怎么和PLC通讯,plc网络通讯方式和协议
  10. 记一次greenplum集群数据库连接慢的问题定位