• 如何实现一个jQuery的框架格式?


    以前一直好奇和膜拜jQuery这样强大的类库它到底是怎样实现的。能让js变得如此方便快捷。

    趁着最近在看《javascript框架设计》也十分想实现一个自己的移动端库,以便于项目运用。于是开始琢磨起了jQuery。

    首先亮杀器!

    首先我们用一个闭包的方式,将我们的代码封闭起来避免过多的全局变量注入。然后在最后将我们的构造函数挂载到window.x暴露出去即可。

    如果你看过jQuery源码的话,应该对它的无new创建对象模式非常的熟悉。

    它的奇妙之处也就在于,kodo构造函数每次被调用的时候都会return 了一个新的对象。

    而这个对象其实就是kodo构造函数原型链上的init方法,为了让init这个对象,也要拥有kodo上的方法以便链式调用。

    所以我们在最后必须让 kodo.prototype.init的prototype 指向 kodo的prototype。

    也就是 kodo.prototype.init.prototype = kodo.prototype  这句代码的作用。接着我们就只需要在kodo构造函数的原型链上挂载各种方法和属性即可。

    然后避免我们的kodo构造函数原型链指向错误,我们要手动将constructor重新指向kodo。

    这基本就是一个大体的框架格式构建。接着我们来观察一下jQuery选择元素之后会有什么样的反馈,了解了后我们才知道$(‘xx’)是如何运作起来的。

    其实通过log我们可以发现,通过选择dom之后会返回一个类数组对象,而正是因为拥有这个类数组对象才能让被选择的jqdom对象能链式调用jq上的方法。

    那这就有个问题如何构造这个类数组对象呢?

    很简单我们只需要在我们的原型上增加2个对象即可

    length的作用就是为了可以循环jqdom对象然后对dom进行一些操作,这个length的设置就是选择了dom的数量。接着让我们完善一下init方法和color来测试测试。

    增加这些代码之后,我们先来看看选择器是否正常运作。

    嗯,看上去还挺不错,一切正常。直接k(‘li’).color(‘red’)也是可以直接调用的。到此为止我们的整体框架结构就算是搭建好了。

    接着又有一个问题那$.ajax 这样的方法又是如何挂载上去调用的呢?仔细想想可以知道,其实我们的构造函数也是一个对象。所以!我们可以直接这样

    同样在控制台只需要k.ajax()即可调用。到这里算是把jq所有的疑惑都解开了。噢吼吼吼

    最后给出完整的demo代码。

    have a nice day

     

    >>>>>原文地址<<<<<

  • 相关阅读:
    [图论入门]图的储存
    [五年CSP三年模拟]洛谷2020初赛模拟赛分析
    [五年CSP三年模拟]CSP2020-J冲刺
    [算法入门]KMP算法
    [算法入门]单调队列
    有关递推与递归的回顾
    软工实践个人总结
    第02组 每周小结 (3/3)
    第02组 每周小结 (2/3)
    第02组 每周小结 (1/3)
  • 原文地址:https://www.cnblogs.com/kodo/p/4873841.html
Copyright © 2020-2023  润新知