JS框架设计读书笔记之-核心模块
随笔记录一下读书心得
1. 框架模块-核心模块
该模块是框架最先执行的部分,jQuery与vue中都有初始化的代码。
模块的功能主要是:对象扩展、数组化、类型判定、事件绑定和解绑、无冲突处理、模块加载、domReady
之前阅读过jQuey的部分源码,对这些功能还是有感触的,比如说:
对象扩展:
jQuery.extend({
merge: function(first, second) {
var len = +second.length,
j = 0,
i = first.length; for (; j < len; j++) {
first[i++] = second[j];
} first.length = i; return first;
},
grep: function(elems, callback, invert) {
var callbackInverse,
matches = [],
i = 0,
length = elems.length,
callbackExpect = !invert;
for (; i < length; i++) {
callbackInverse = !callback(elems[i], i);
if (callbackInverse !== callbackExpect) {
matches.push(elems[i]);
}
} return matches;
},
map: function(elems, callback, arg) {
var length, value,
i = 0,
ret = [];
if (isArrayLike(elems)) {
length = elems.length;
for (; i < length; i++) {
value = callback(elems[i], i, arg); if (value != null) {
ret.push(value);
}
}
} else {
for (i in elems) {
value = callback(elems[i], i, arg); if (value != null) {
ret.push(value);
}
}
}
return concat.apply([], ret);
},
guid: 1,
proxy: function(fn, context) {
var tmp, args, proxy; if (typeof context === "string") {
tmp = fn[context];
context = fn;
fn = tmp;
}
if (!jQuery.isFunction(fn)) {
return undefined;
}
args = slice.call(arguments, 2);
proxy = function() {
return fn.apply(context || this, args.concat(slice.call(arguments)));
};
proxy.guid = fn.guid = fn.guid || jQuery.guid++; return proxy;
}
})
数组化:
jQuery.fn = jQuery.prototype = {
toArray: function() {
return slice.call(this);
},
makeArray: function(arr, results) {
var ret = results || []; if (arr != null) {
if (isArrayLike(Object(arr))) {
jQuery.merge(ret,
typeof arr === "string" ? [arr] : arr
);
} else {
push.call(ret, arr);
}
}
return ret;
}
}
类型判断:isFunction、type、isArrayLike
jQuery.extend({
noop: function() {},
isFunction: function(obj) {
return jQuery.type(obj) === "function";
},
isArray: Array.isArray,
isWindow: function(obj) {
return obj != null && obj === obj.window;
}, isNumeric: function(obj) {
var type = jQuery.type(obj);
return (type === "number" || type === "string") &&
// subtraction forces infinities to NaN
!isNaN(obj - parseFloat(obj));
}, isPlainObject: function(obj) {
var proto, Ctor;
if (!obj || toString.call(obj) !== "[object Object]") {
return false;
}
proto = getProto(obj);
if (!proto) {
return true;
}
Ctor = hasOwn.call(proto, "constructor") && proto.constructor;
return typeof Ctor === "function" && fnToString.call(Ctor) === ObjectFunctionString;
}, isEmptyObject: function(obj) {
var name;
for (name in obj) {
return false;
}
return true;
}
})
事件绑定和解绑:on?
无冲突处理:noConflict
// $可能为其他框架的符号
var _jQuery = window.jQuery, _$ = window.$;
jQuery.exteng({
noConflict: function(deep){
// 如果冲突 就把jQuery还回去
window.$ = _$;
if(deep){
window.jQuery = _jQuery;
}
return jQuery;
}
})
模块加载:初始化?
domReady:利用DOMContentLoaded 这个接口属于Event 用法如下(来自MDN):
document.addEventListener("DOMContentLoaded",callback)
第一节先这么写着,后面写一些比较有意思的函数
JS框架设计读书笔记之-核心模块的更多相关文章
- JS框架设计读书笔记之-节点模块
节点的创建 浏览器提供了多种手段创建API,从流行程度依次是document.createElement.innerHTML.insertAdjacentHTML.createContextualFr ...
- JS框架设计读书笔记之-动画
基础概念 CSS样式可分为两种,一种值接近无限的集合(color,width),一种值只有几种(display),可以进行计算的样式,产生了动画效果.\ 1. 动画的第一步是获得元素的精确样式值. 2 ...
- JS框架设计读书笔记之-异步
setTimeout/setInterval 1. 如果回调执行时间大于间隔时间,真正的间隔时间会大一些. 2. 存在一个最小的时间间隔,即使seTimeout(fn,0),在IE6-IE8中大概为1 ...
- JS框架设计读书笔记之-选择器引擎01
选择符 选择符是指CSS样式规则最左边的部分,例如 p{},#id{},.class{},p.class{} 等等 总共可以分为四大类: 并联选择器 => 逗号 => $('div,spa ...
- JS框架设计读书笔记之-小知识
这一篇写一点小知识 JS中0.1+0.2为什么不等于0.3? 关于这个问题之前也很疑虑,老师也只是笼统的讲这是JS的语言问题,但是内部具体的情况却没有讲,看了书才发现原理如此简单. 简单来讲,计算机识 ...
- JS框架设计读书笔记之-选择器引擎02
选择器引擎涉及相关概念 概念 以Sizzle的主函数声明为例,来说明引擎的相关概念. function Sizzle(selector, context, results, seed) { //... ...
- JS框架设计读书笔记之-函数
这次写一些函数 1.模拟Object.keys方法 Object.keys = Object.keys || function(obj){ var a = []; // a[0],a[1]...分别赋 ...
- javascript框架设计(读书笔记)
我觉得多看几本进阶的书 与其十本书读一遍,不如一本书读十遍 读书的启示: 读好书(看推荐) 精读(重复看) 能读厚书(javascript权威指南) Object.keys Object.keys=O ...
- js框架设计1.1命名空间笔记
借到了司徒正美的写的js框架设计一书,司徒大神所著有些看不太懂,果然尚需循序渐进,稳扎js基础之中. 第一张开篇司徒阐述了种子模块的概念 种子模块亦为核心模块,框架最先执行模块,司徒见解应包含:对象扩 ...
随机推荐
- springmvc05-Spring+Springmvc+Hibernate实现简单的用户管理系统
1, 导入\spring-framework-3.2.4.RELEASE\libs\disk下所有包; hibernate-distribution-3.6.7.Final\lib\required下 ...
- 框架应用:Mybatis(二) - 动态SQL
MybatisUtil工具类 在实际开发中,我们可以编写一个MybatisUtil辅助类来进行对进行操作. 1)在静态初始化块中加载mybatis配置文件和StudentMapper.xml文件一次 ...
- 网页端HTML使用MQTTJs订阅RabbitMQ数据
最近在做一个公司的日志组件时有一个问题难住了我.今天问题终于解决了.由于在解决问题中,在网上也查了很多资料都没有一个完整的实例可以参考.所以本着无私分享的目的记录一下完整的解决过程和实例. 需求:做一 ...
- 使用Gateway-Worker实现多人分组实时聊天 结合第三方tp
一.基础知识1.Workerman是一款纯PHP开发的开源高性能的PHP socket 服务器框架.被广泛的用于手机app.移动通讯等领域的开发. 支持TCP长连接,支持Websocket.HTTP等 ...
- 关于XCode9的一些问题
最近几天一直在做一项工作,为新项目在做搭建框架的前期准备,然后恰逢更新iOS11和XCode9,笔者心急的尝了个先,发现了一些问题,记录一下,如果有相同问题的程序猿,也可以参考一下. 目前问题遇到两点 ...
- 关于DbContext能不能单次请求内唯一?DbContex需不需要主动释放?欢迎各路大侠来“参战”!
基于前篇文章<HiBlogs>重写笔记[1]--从DbContext到依赖注入再到自动注入园友@Flaming丶淡蓝@ 吴瑞祥 提出了讨论和质疑,吓得我连夜查询资料(玩笑~). 本来文章的 ...
- vue.js项目构建
这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...
- java基础解析系列(七)---ThreadLocal原理分析
java基础解析系列(七)---ThreadLocal原理分析 目录 java基础解析系列(一)---String.StringBuffer.StringBuilder java基础解析系列(二)-- ...
- 第5章 不要让线程成为脱缰的野马(Keeping your Threads on Leash) ---简介
这一章描述如何初始化一个新线程,如何停止一个执行中的线程,以及如何了解并调整线程优先权. 读过这一章之后,你将有能力回答一个 Win32 多线程程序设计的最基本问题.你一定曾经在 Usenet ...
- Longge's problem poj2480 欧拉函数,gcd
Longge's problem Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6918 Accepted: 2234 ...