jQuery技术

jQuery源码探索之路(2)

字号+ 作者:H5之家 来源:H5之家 2017-03-01 14:02 我要评论( )

自己最近在学习一些js的插件的写法,那么当然就绕不开jquery,于是自己就学习中遇到的一些问题做些总结和记录 自己也是在学习过程中,有问题请各位指出,希望大伙能多多支持,给给star,点点赞呗,github地址 init方法 先看看之前写的代码 var Ye = function

  • 自己最近在学习一些js的插件的写法,那么当然就绕不开jquery,于是自己就学习中遇到的一些问题做些总结和记录
  • 自己也是在学习过程中,有问题请各位指出,希望大伙能多多支持,给给star,点点赞呗,github地址
  • init方法

    先看看之前写的代码

    var Ye = function(selector){ return Ye.prototype.init(selector); } Ye.prototype = { //.... init:function(selector){ } //.... }

    所以我们要在init中获取传进来的selector,来构造对象。在JQ实际的源码中,这部分是很复杂的,要根据传进来的selector来做不同的处理,分为下面几种情况。

  • 参数selector为其他字符串,这里要分几种情况
  • 因为有些情况比较少见,所以我们自己写的话就不考虑那么多,我写下1,2,4,5几种情况,其他的大家也可以去尝试,遇到问题可以交流哈

    自己写 { init:function(selector){ //1.无意义,返回空JQ if(!selector) return this; //2.如果有nodeType属性,则认为是DOM if(selector.nodeType){ this[0] = selector; this.length = 1; return this; } //4.字符串 var elm; if(typeof selector === "string"){ //首字符为#,且无空格 if(selector.chatAt(0) == "#" !selector.match('\\s')){ elm = document.getElementById(selector); this[0] = elm; this.length = 1; this.selector = selector; return this; }else{ elm = document.querySelectorAll(selector); for(var i = 0; i < elm.length; i++){ this[i] = elm[i]; } this.length = elm.length; this.selector = selector; return this; } } //5.给ready调用,后续会写ready() if(typeof selector == 'function'){ Ye.ready(selector); return; } } } 附:既然看完了,麻烦各位看官老爷点个赞,给个star呗,源码地址:https://github.com/LY550275752/my-js-plug/blob/master/Ye.js

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • jQuery常用API jQuery

      jQuery常用API jQuery

      2017-03-01 15:00

    • jQuery javascript框架

      jQuery javascript框架

      2017-03-01 14:00

    • jQuery UI 中的 datepicker( )方法

      jQuery UI 中的 datepicker( )方法

      2017-03-01 10:01

    • JQuery ui dialog(close)无效的解决办法

      JQuery ui dialog(close)无效的解决办法

      2017-02-28 17:06

    网友点评