js框架设计-种子模块
核心模块,框架最先执行,必须得有很高的可扩展性,为第一章的内容
- 对象扩展
- 数组化
- 类型判断
- 简单的事件绑定与卸载
- 无冲突处理
- 模块加载
- domready
命名空间
首先框架都是运行在一个命名环境中,都会以一个 IIFE(立即调用函数表达式)包裹。
没有命名空间的,例如Prototype
,mootools
,这些都是在原型上进行扩展。
而YUI
,EXT
则是通过{}来叠罗汉的。
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" 转载请保留原文链接及作者。