前端培训那会儿，老师一直都强调一定要学习一门框架的源码，基于JavaScript的前端框架很多，工作中接触的各类框架，从来没有细心研究过。直到有一天，突然觉得自己只会用根本不知道这个框架的内部实现原则，我选择了工作多年用到最多的jQuery做研究，汇总了学习的笔记。
本系列文章基于jQuery1.11.1.js。后续会不断更新，争取每天一篇。
第一篇
1、$.type();判断数据类型。
用法：$.type({});//"object"
源码解读:
class2type = {};
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name){
class2type["[object"+ name +"]"] = name.toLowerCase();
//对象class2type的键"[object"+ name +"]"，值name.toLowerCase()。
/* class2type输出结果为：
* class2type = ["[object Boolean]":"boolean", "[object Number]": "number", "[object String]": "string", "[object Function]": "function", "[object Array]": "array", "[object Date]": "date", "[object RegExp]": "regexp", "[object Error]": "error"];
*/
});
core_toString = class2type.toString;
/* 将class2type所具备的toString方法赋值给变量core_toString
* core_toString 对象实例的toString，每一个继承自Object的对象都有toString方法
* {}.toString.call([]); //"[object Array]" ，改变toString的this指向为object实例。
*/
// 主方法
type: function(obj){
if(obj == null){
return String(obj);
}
return typeof obj === "object" || typeof obj === "function" ? class2type[core_toString.call(obj)] || "object" : typeof obj;
}
2、$.trim() 去除字符串首尾空格。
用法：$.trim(str); //返回去除首尾空格的字符串
源码解读：
rtrim = /^[\d\uFEFF\xA0]+|[\d\uFEFF\xA0]+$/g;
/* 正则匹配：
* \d空格，\uFEFF非UTF-8编码的空格，\xA0指
*/
core_version = '1.11.1';
core_trim = core_version.trim; //trim原生对字符串进行的首尾巴去除空格方法
trim: core_trim && !core_trim.call("\uFEFF\xA0") ?
function(text){
return text = null ? "": core_trim.call(text);
} :
function(text) {
return text == null ? "": (text + "").replace(rtrim, "");
}
/*
* 尝试使用原生的trim方法，如果不支持使用String.prototype.trim.call("\uFEFF\xA0")，最后使用正则replace
*/
3、Query.each(); 遍历数据或对象。
内部实现使有for循环，效率要比使用for差，对于大型循环，尽量使用for。
4、$.isNumeric() 判断是否是数字。
用法：$.isNumeric(num);
源码解读：
isNumeric: function(obj){
return !isNaN(parseFloat(obj)) && isFinite(obj);
/* isNaN判断是不是数字，true不是数字，false是数字
* parseFloat 字符串转数字，数字进制转换
* isFinit(obj) 判断是不是有穷大。
* !a && b 计算顺序: (!a) && b
*/
}
5、$.isEmptyObject() 判断对象是否为空。
用法：$.isEmptyObject(obj);
源码解读：
isEmptyObject: function(obj){
var name;
for(name in obj){
return false; //非空
}
return true; //空
}
6、$.parseJSON() 将JSON字符串转换成JSON对象。
// JSON正则
rvalidchars = /^[\],:{}\s]*$/,
rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
rvalidescape = /\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,
rvalidtokens = /"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g
parseJSON: function(data){
//如果有原生的JSON对象支持，使用原生对象
if(window.JSON && window.JSON.parse){
return window.JSON.parse(data);
}
if(data === null){
return data;
}
if(typeof data === "string"){
//去掉两端空格，制表符，bom
data = jQuery.trim(data);
if(data){
//保证输入的字符串是可用的JSON字符串
if(rvalidchars.test(data.replace(rvalidescape, "@")
.replace(rvalidtokens, "]")
.replace(rvalidtokens, "")
)){
console.log(data);
return (new Function("return " + data))(); //字符串转JSON对象，使用return(new Function("return " + data))();
}
}
}
jQuery.error("Invalid JSON:" + data);
}
7、$.globalEval();在全局作用域执行下一段JS脚本。
//在全局作用域中执行JS脚本
globalEval: function(data){
if(data && jQuery.trim(data)) {
//匿名函数作用域是window 在IE中使用execScript
(window.execScript || function(data){
window["eval"].call(window, data); //eval作用域问题，IE和其他浏览器下执行结果不同。
})(data);
}
}
eval作用域：
var a = "window";
function b(){
eval('val a = "b"');
}
b();
alert(a); //“window”
window.eval和eval作用域不同。
var a = "window";
function b(){
window.eval('var a = "b"');
}
b();
alert(a); //IE下是"window"，Chorme,FF下是"b"
目录 下一篇：暂无
