Chinaunix首页 | 论坛 | 博客

Hi~颖峰！lovenyf.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

lovenyf

  • 博客访问： 817969
  • 博文数量： 62
  • 博客积分： 526
  • 博客等级： 二等列兵
  • 技术积分： 2078
  • 用 户 组： 普通用户
  • 注册时间： 2012-02-04 20:41
个人简介

博客迁移至 freefe.cc

文章分类

全部博文（62）

推荐博文
简单说说jQuery对象

分类： JavaScript

2013-12-02 16:11:18

Jquery 对象


    一般来说，我们都将 Jquery 对象视为一个数组，精确点的说是视为一个类数组对象，可以直接使用 1 2 3 4 5等下标取得所需要的DOM元素或者其他。

    练手自己的函数库的时候，便遇到了一些关于实现上的问题，我有一个 $ 的模块，很简单是返回一个包含查询结果的DOM数组，然后又有了一个关于处理 CSS 的模块，那么如果两个模块不相干 直接可以想这样的使用：

  1. CSS.addClass( $(".classOne"), "classTwo" );

显然也没什么问题，不过就是看上去不那么顺畅，比不上：

  1. $(".classOne").addClass( "classTwo" );

那么的舒服，于是就想整合在一起。

相当于需要将许多是关乎于 DOM 的操作的方法放置到 $ 产生的对象的原型链上，于是问题来了，我的 $ 模块中由于需要判断各种情况 所以基本均是使用 return [] 的方式得到的结果，[] 原型链上只有 Array.prototype 和 Object.prototype 当然不能说在这两个对象上添加 addClass 等方法。

然后就认为，那么不适用 return [] 这种方式，而是得到一个 new 出来的对象，该对象的原型链上添入所需要的方法即可。
可是对于需要对参数做各种判断在实现的函数不使用return实在是不现实。


  1. function $(str,root){
  2.     var elements = [],
  3.     ele_len = 0,
  4.     reg_spl = /\s*,\s*/,
  5.     reg_white = /^\s+|\s+$/,
  6.     dom_obj = {},
  7.     ret = [],
  8.     root = root || d,
  9.     element,i,name;

  11.     if(str.nodeType){ return [str]; }

  13.     if(typeof str !== "string"){ return []; }

  15.     // 单个情况
  16.     if(str.indexOf(",") === -1){
  17.         return getDomObj(str,root);
  18.     }

  20.     elements = str.split(reg_spl);
  21.     ele_len = elements.length;
  22.     for(i = 0; i<ele_len; i++){
  23.         dom_obj = getDomObj(elements[i],root);
  24.         ret = ret.concat(dom_obj);
  25.     }
  26.     return ret;
  27. }


  30. function getDomObj(str, root){
  31.     if(root.querySelectorAll){
  32.         return slice.call(root.querySelectorAll(str));
  33.     }else{
  34.         if(str.indexOf("#")){
  35.             str = str.slice(1);
  36.             return [d.getElementById(str)];
  37.         }else if(str.indexOf(".")){
  38.             str = str.slice(1);
  39.             return getByClass(str,root);
  40.         }else{
  41.             return slice.call(root.getElementsByTagName(str));
  42.         }
  43.     }
  44. }

实在无法改动。

Jquery的实现

    那么Jquery那边是如何实现的，很简答，使用 return 但是是 return this；
    不但可以在各个判断之处及时跳出函数返回结果，也可以方便的控制其原型链。

简单的类Jquery的结构



  1. var jQ = function( selector, context ) {
  2.     return new jQ.fn.init( selector, context );
  3. }
  4. jQ.fn =jQ.prototype = {}
  5. jQ.fn.init = function( selector, context ) {
  6.     this[0] = document.getElementById(selector); // #开头某一个情况
  7.     this.length=1;
  8.     return this；
  9. }
  10. jQ.fn.init.prototype = jQ.fn;
  11. jQ.fn.abc = 1;

那么 所有 jQ 生成的对象可以在内部判断中适当的情况及时 return 出，并且 jQ对象原型链上包含对象 jQ.fn.init.prororype，即 jQ.fn，即 jQ.prototype。所有的 jQ 对象均可以访问 abc 属性。当然，之所以这里这么绕，也和Jquery的自身结构与实现方式有关。

那么：

  1. // 模块中的部分代码结构

  3. // 几个基本选择器方法
  4. function getDomObj(str, root){
  5.     if(root.querySelectorAll){
  6.         return slice.call(root.querySelectorAll(str)); //使用内置方法
  7.     }else{
  8.         if(str.indexOf("#")){
  9.             str = str.slice(1);
  10.             return [d.getElementById(str)];
  11.         }else if(str.indexOf(".")){
  12.             str = str.slice(1);
  13.             return getByClass(str,root);
  14.         }else{
  15.             return slice.call(root.getElementsByTagName(str));
  16.         }
  17.     }
  18. }

  20. function getByClass(classname, root){
  21.     var elements, doms = [], len;
  22.     if(root.getElementsByClassName){
  23.         return slice.call(root.getElementsByClassName(classname))
  24.     }else{
  25.         elements = root.getElementsByTagName("*");
  26.         len = elements.length;

  28.         each(elements, function(ele){
  29.             if((" " + ele.classname + " ").indexof(" "+str+" ") !== -1){
  30.                 doms.push(ele);
  31.             }
  32.         });
  33.         return doms;
  34.     }
  35. }

  37. // 转化类数组形似的 each
  38. function likeArrayEach( nObj, iterator, context){
  39.     var arr = [], i, len = nObj.length;

  41.     for (i=0; i<len; i++) {
  42.         if( nObj[i] ){
  43.             arr[i] = nObj[i];
  44.         }
  45.     };

  47.     each( arr, iterator, context )
  48. }

  50. function dealClass( classStr ){
  51.     var classesName = [],
  52.         classStr = trim( classStr );

  54.     return classStr.split(/\s+/g);
  55. }

  57. //为了可以继承DOM的一般方法，将DOM数组信息放入实例对象中
  58. function markNObject( array, obj ){
  59.     for( var i=0,len=array.length; i<len; i++ ){
  60.         obj[i] = array[i];
  61.     }
  62.     obj.length = len;
  63.     return obj;
  64. }


  67. /** 微型选择器 $
  68. *
  69. * @method $ 目前只支持简单的复合选着 如$("#id, .classname") & $("#id") & $("#id1,#id2")
  70. * 暂不支持层级选着 如 $("#id tag")
  71. * @param {String} str 必选，选择字符串
  72. * @param {Object} obj 可选 选择节点的区域
  73. *
  74. * @return {Array} 返回目标DOM对象数组
  75. *
  76. */
  77. function $(str,root){ // $(".classname") & $("#id") & $("#id1,#id2")
  78.     var elements = [], // 分割后的数组
  79.         ele_len = 0, // 数组长度
  80.         reg_spl = /\s*,\s*/, // 截取
  81.         reg_white = /^\s+|\s+$/,
  82.         dom_obj = {}, // dom 对象
  83.         ret = [], // 返回的dom对象
  84.         root = root || d,
  85.         element,i,name;

  87.     // 参数为DOM对象
  88.     if(str.nodeType){
  89.         this[0] = str;
  90.         this.length = 1;
  91.         return this;
  92.     }

  94.     //不为string返回空数组
  95.     if(typeof str !== "string"){
  96.         this.length=0;
  97.         return this;
  98.     }

  100.     // 单个情况
  101.     if(str.indexOf(",") === -1){
  102.         return markNObject( getDomObj(str,root), this);
  103.     }

  105.     elements = str.split(reg_spl);
  106.     ele_len = elements.length;

  108.     for(i = 0; i<ele_len; i++){
  109.         dom_obj = getDomObj(elements[i],root);
  110.         ret = ret.concat(dom_obj);
  111.     }
  112.     
  113.     return markNObject( ret, this);
  114. }

  116. $.prototype = {
  117.     constructor : $,

  119.     addClass : function( classes ){
  120.         var self = this;
  121.         if( !isArray(classes) ){
  122.             classes = [classes];
  123.         }

  125.         likeArrayEach( self, function( dom ){
  126.             var classStr = dom.className,
  127.                 oldclasses = dealClass( classStr ),
  128.                 newclasses;

  130.                 newclasses = arrayUtil.mergeRepeatArray( classes, oldclasses );

  132.                 dom.className = newclasses.join(" ");
  133.         } );

  135.         return this;
  136.     },
  137.     deleteClass : function( classes ){
  138.         var self = this;
  139.         if( !isArray(classes) ){
  140.             classes = [classes];
  141.         }

  143.         likeArrayEach( self, function( dom ){
  144.             var classStr = dom.className,
  145.                 oldclasses = dealClass( classStr ),
  146.                 newclasses;

  148.                 newclasses = arrayUtil.deleteRepeat( oldclasses, classes );

  150.                 dom.className = newclasses.join(" ");
  151.         } );

  153.         return this;
  154.     },

  156.     hide : function(){
  157.         var self = this;
  158.         markNObject( self, function( dom ){
  159.             dom.style.display = "none";
  160.         } );

  162.         return this;
  163.     },
  164.     show : function(){
  165.         var self = this;
  166.         markNObject( self, function( dom ){
  167.             dom.style.display = "block";
  168.         } );

  170.         return this;
  171.     },

  173.     extend : function( obj ){
  174.         extend( $.prototype, obj );
  175.         return this;
  176.     }
  177. }

上面为选择器模块中的部分代码。










阅读(4115) | 评论(0) | 转发(0) |
0

上一篇：JS设计模式二：工厂模式

下一篇：【译】 JavaScript 的 console API

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6