js框架设计-种子模块

  1. 命名空间
    1. 多库共存原理
    2. 对象扩展
    3. 数组化
    4. 类型判定
    5. domReady
    6. 无冲突处理
  • 自问自答
  • 核心模块,框架最先执行,必须得有很高的可扩展性,为第一章的内容

    • 对象扩展
    • 数组化
    • 类型判断
    • 简单的事件绑定与卸载
    • 无冲突处理
    • 模块加载
    • domready

    命名空间

    首先框架都是运行在一个命名环境中,都会以一个 IIFE(立即调用函数表达式)包裹。

    没有命名空间的,例如Prototypemootools,这些都是在原型上进行扩展。

    YUIEXT则是通过{}来叠罗汉的。

    jquery独辟蹊径,命名空间是一个函数(参见文底的自问自答),因为他选择器导向,这样可以接收 css 来查找并返回一个 jquery 实例。

    多库共存原理

    其实就是在初始化之前很简单地保存了一下原来全局里的$,然后在自己初始化的时候将这个值重新赋给$,然后再把自己 return 出来。

    var _jQuery = window.jQuery,
      _$ = window.$;
    jQuery.extend({
      noConflict: function(deep) {
        window.$ = _$;
        if (deep) window.jQuery = _jQuery;
        return jQuery;
      }
    });

    对象扩展

    这就是个给对象扩展的机制。
    实现的话就是 jQuery 的extend方法,jQuery 支持深复制。

    从源码看。主体就是一个for in循环,然后复制对象。然后就是在 deep 设置为 true 的时候,对对象进行深层的复制,循环调用一下 extend 自身。

    数组化

    先是最简单地[].slice.call(参见自问自答),这个方法可以提供除了 IE 低版本之外的数组化。因为 IE8 以及以下的版本 nodeList 等都不是 Object 的子类,所以调用这个方法会出错这里的各大框架的处理差不多。就是针对 IE 做了 hack,就是 new 了一个 array,然后遍历,然后取出来往里面推就是了。

    这里的 ie8 兼容看了半天,最后发现也就是很简单的遍历然后推进了数组而已。IE 下纯粹是因为不是 Object,所已无法调用方法,只能这样一个个遍历着拿。

    类型判定

    判断 undefined 可以===void 0就好了

    普通的基本数据类型可以直接typeof判断,object,function 可以使用Object.prototype.toString.call()来拿到类似于[object array]的结果。

    domReady

    一般就是DomContentLoaded,因为这个在 DOM 结构成型之后就会触发。而不像 window.onload 方法得在资源都下载完毕才会触发。

    所以对于支持 DomContentLoaded 的就是用这个,不支持的旧版本 IE 就使用下面的著名 hack。IE 下调用doscroll,因为 IE 下如果 DOM 未建完是无法调用的,IE 下也可以通过script defer来判断。jquery 下不仅监听了 DomContentLoaded,还监听额 onload,还判断了 document 的 readyState。

    无冲突处理

    很简单,就是先将全局里面的保存一下,然后再在函数中将保存的赋值一下就好了

        var _jquery = window.jquery;
        noConflict: function(){
               window.$ = _$;这样把存的冲突释放回去
               if(deep){
                  window.jQuery = _jQuery;
               }
               return jQuery;
        }

    自问自答

    • $到底是个啥?为什么这个函数居然会有变量?

          好吧,原来函数也是对象,也是可以有变量和方法的。
    • [].slice.call的运行机制是什么,以及与 Array.prototype.slice.call 的区别

          slice就是个数组的截取函数,返回是一个数组,`slice(0)`等于就是复制了一下数组。内部的实现就是根据传入的东西的length来push进一个新的数组中。通过call方法可以将这个数组原型的方法交给别的对象调用,就可以将一个类数组方法转换为真正的数组了。至于[]和Array.prototype,理论上讲是一致的,但是前者多创建了一个数组对象,所以建议使用后者。
    • void 0这是个什么东西?

          这个东西就是执行void后面的语句,然后返回一个undefined

    todo:为什么这种统一命名空间的比原型扩展混得更好一点?


    转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 981909093@qq.com

    文章标题:js框架设计-种子模块

    文章字数:1k

    本文作者:泽鹿

    发布时间:2019-08-28, 16:45:23

    最后更新:2019-08-28, 16:45:23

    原始链接:http://panyifei.github.io/2019/08/28/读书笔记/Javascript框架设计/种子模块/

    版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

    目录
    ×

    喜欢就点赞,疼爱就打赏