jQuery中的编程范式详解

2020-05-22 21:57:08易采站长站整理

valHooks: { option: {get:function(){}}}
这样在程序中就不需要到处写
if(elm.tagName == ‘OPTION’){
     return …;
   }else if(elm.tagName == ‘TEXTAREA’){
     return …;
   }
可以统一处理
(valHooks[elm.tagName.toLowerCase()] || defaultHandler).get(elm);
  
映射表将函数作为普通数据来管理, 在动态语言中有着广泛的应用. 特别是, 对象本身就是函数和变量的容器, 可以被看作是映射表. jQuery中大量使用的一个技巧就是利用名称映射来动态生成代码, 形成一种类似模板的机制. 例如为了实现myWidth和myHeight两个非常类似的函数, 我们不需要
jQuery.fn.myWidth = function(){
      return parseInt(this.style.width,10) + 10;
    }
   
    jQuery.fn.myHeight = function(){
      return parseInt(this.style.height,10) + 10;
    }
而可以选择动态生成
jQuery.each([‘Width’,’Height’],function(name){
      jQuery.fn[‘my’+name] = function(){
        return parseInt(this.style[name.toLowerCase()],10) + 10;
      }
    });
 
12. 插件机制:其实我很简单   

jQuery所谓的插件其实就是$.fn上增加的函数, 那这个fn是什么东西?
(function(window,undefined){
    // 内部又有一个包装
    var jQuery = (function() {
      var jQuery = function( selector, context ) {
            return new jQuery.fn.init( selector, context, rootjQuery );
        }
       ….
      // fn实际就是prototype的简写
      jQuery.fn = jQuery.prototype = {
          constructor: jQuery,
          init: function( selector, context, rootjQuery ) {…  }
      }
   
      // 调用jQuery()就是相当于new init(), 而init的prototype就是jQuery的prototype
      jQuery.fn.init.prototype = jQuery.fn;
   
      // 这里返回的jQuery对象只具备最基本的功能, 下面就是一系列的extend
      return jQuery;
    })(); 
    …