js 프레임워크에 대한 소스 코드 연구
- 巴扎黑원래의
- 2017-08-10 13:21:301480검색
[소개] Underscore js 소스 코드 Underscore js는 기본 JavaScript 개체를 확장하지 않고 _() 메서드를 호출하여 캡슐화합니다. 캡슐화가 완료되면 기본 JavaScript 개체가 Underscore 개체가 됩니다. 주어진 변수가 객체인지 확인 Is
underscore.js 소스 코드
Underscore.js는 기본 JavaScript 객체를 확장하지 않지만 _( ) 캡슐화가 완료되면 기본 JavaScript 개체가 Underscore 개체가 됩니다. Underscore.js 没有对原生 JavaScript 对象进行扩展,而是通过调用 _() 方法进行封装，一旦封装完成，原生 JavaScript 对象便成为一个 Underscore 对象。
判断给定变量是否是对象
// Is a given variable an object?
_.isObject = function(obj) { var type = typeof obj; return type === 'function' || type === 'object' && !!obj;
};这是underscore.js的判断给定变量是否是object的一段源码。 我们知道typeof会返回如下六个值：
1. 'undefined' --- 这个值未定义；2. 'boolean' --- 这个值是布尔值；3. 'string' --- 这个值是字符串；4. 'number' --- 这个值是数值；5. 'object' --- 这个值是对象或null；6. 'function' --- 这个值是函数。
而&&的优先级要高与||。!!的作用相当于Boolean()，将其转换为布尔值。
判断给定值是否是DOM元素
// Is a given value a DOM element?
_.isElement = function(obj) { return !!(obj && obj.nodeType === 1);
};同样!!相当于Boolean()的作用，nodeType === 1则说明是元素节点，属性attr是2 ，文本text是3
<body>
<p id="test">测试</p><script>
var t = document.getElementById('test');
alert(t.nodeType);//1
alert(t.nodeName);//p
alert(t.nodeValue);//null</script></body>firstChild属性
var t = document.getElementById('test').firstChild; alert(t.nodeType);//3alert(t.nodeName);//#testalert(t.nodeValue);//测试
文本节点也算是一个节点，所以p的子节点是文本节点，所以返回3
zepto源码
判断是否是数组
isArray = Array.isArray || function(object){ return object instanceof Array }Array.isArray() 方法：如果一个对象是数组就返回true，如果不是则返回false。
instanceof 用于判断一个变量是否某个对象的实例，如
var a= []; alert(a instanceof Array);//返回 true
同时 alert(a instanceof Object) 也会返回 true
isArray 返回布尔值，如果Array.isArray为true，则返回true，否则返回object instanceof Array的结果。
数据类型判断
class2type = {},function type(obj) { return obj == null ? String(obj) :
class2type[toString.call(obj)] || "object"
} function isFunction(value) { return type(value) == "function" } function isWindow(obj) { return obj != null && obj == obj.window } function isDocument(obj) { return obj != null && obj.nodeType == obj.DOCUMENT_NODE } function isObject(obj) { return type(obj) == "object" }class2type是一个空对象，实际上一个什么都没有的空对象是这样创建的Object.create(null);
我们可以通过Object.prototype.toString.call()方法来判断数据类型，例如：
console.log(Object.prototype.toString.call(123)) //[object Number] console.log(Object.prototype.toString.call('123')) //[object String] console.log(Object.prototype.toString.call(undefined)) //[object Undefined] console.log(Object.prototype.toString.call(true)) //[object Boolean] console.log(Object.prototype.toString.call({})) //[object Object] console.log(Object.prototype.toString.call([])) //[object Array] console.log(Object.prototype.toString.call(function(){})) //[object Function]首先如果参数obj是undefined或null，则通过String(obj)转换为对应的原始字符串“undefined”或“null”。
然后class2type[toString.call(obj)]首先借用Object的原型方法toString()来获取obj的字符串表示，返回值的形式是 [object class]，其中的class是内部对象类。
然后从对象class2type中取出[object class]对应的小写字符串并返回；如果未取到则一律返回“object。
get方法
get: function(idx){ return idx === undefined ? slice.call(this) : this[idx >= 0 ? idx : idx + this.length]
},取集合中对应指定索引的值，如果idx小于0,则idx等于idx+length,length为集合的长度.
可能你刚看到slice.call(this)会觉得很纳闷，其实不仅是zepto.js的源码，包括jQuery，backbone的源码都是这么写的，只不过它们在最开头做了声明：
var push = array.push;var slice = array.slice;var splice = array.splice;
所以slice.call(this)其实还是Array.slce.call(this)
prototype.js源码
//为对象添加 class 属性值
addClassName: function(element, className) {
element = $(element);
Element.removeClassName(element, className);
element.className += ' ' + className;
}, //为对象移除 class 属性值
removeClassName: function(element, className) {
element = $(element); if (!element) return; var newClassName = ''; var a = element.className.split(' '); for (var i = 0; i < a.length; i++) { if (a[i] != className) { if (i > 0)
newClassName += ' ';
newClassName += a[i];
}
}
element.className = newClassName;
},因为addClassName依赖于removeClassName()，所以先分析后者，$()是先将元素封装成prototype对象，
if(!element) return
这句的意思就是如果元素对象不存在，则忽略不再继续执行的意思，也就是终止的意思。
split() 方法用于把一个字符串分割成字符串数组。
如果把空字符串 ("") 用作 分隔符，那么 该对象 中的每个字符之间都会被分割。
判断是否拥有 class 属性值
//是否拥有 class 属性值hasClassName: function(element, className) {
element = $(element); if (!element) return; var a = element.className.split(' '); for (var i = 0; i < a.length; i++) { if (a[i] == className) return true;//返回正确的处理结果
} return false;//返回错误的处理结果},兼容旧版本浏览器增加Array的push方法
/**
* 为兼容旧版本的浏览器增加 Array 的 push 方法。
*/if (!Array.prototype.push) { Array.prototype.push = function() { var startLength = this.length;//this指代Array
for (var i = 0; i < arguments.length; i++) this[startLength + i] = arguments[i];//this依旧指代Array
return this.length;
}
}!Array.prototype.push如果为true，说明浏览器不支持该方法，则往下执行。this[startLength + i] = arguments[i]将传递进来的每个参数依次放入数组中，最后返回数组的长度
访问对象可以使用(.)表示法，也可以使用[]来访问，同样访问数组元素也是
jQuery 源码
jQuery源码太多关联了，所以不好单独拿出来做分析，就举一两个简单的例子吧：
toArray方法
jQuery.prototype = {
toArray: function() { return slice.call( this );
},
}Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组，也就是说其目的是将arguments对象的数组提出来转化为数组。例如：
<script>
var a = {length:4,0:'zero',1:'one',2:'two'}; console.log(Array.prototype.slice.call(a));// Array [ "zero", "one", "two", <1 个空的存储位置> ]</script>Array
这是我们想要的基对象名称
prototype
주어진 변수가 객체인지 확인
Array.prototype.slice.call == [].slice.call
주어진 변수가
객체인지 확인하는 underscore.js 소스 코드입니다. . 우리는 typeof가 다음 6개 값을 반환한다는 것을 알고 있습니다: object1 = {
name:'frank',
greet:function(){
alert('hello '+this.name)
}
};
object2 = {
name:'trigkit4'};// object2没有greet方法// 但我们可以从object1中借来
object1.greet.call(object2);//弹出hello trigkit4🎜 및 &&는 ||보다 우선순위가 높습니다. !!는 Boolean()과 동일하며 이를 부울 값으로 변환합니다. 🎜주어진 값이 DOM 요소인지 확인
var t = function(){ console.log(this);// String [ "t", "r", "i", "g", "k", "i", "t", "4" ] console.log(typeof this); // Object console.log(this instanceof String); // true};
t.call('trigkit4');🎜마찬가지로 !!는 Boolean(), nodeType의 역할과 동일합니다. === 1은 요소 노드이고 attr 속성이 2이며 text 텍스트가 3🎜 1.toString ( )
2.toLocaleString ( )
3.valueOf ( )
4.hasOwnProperty (V)
5.isPrototypeOf (V)
6.propertyIsEnumerable (V)🎜firstChild임을 의미합니다. code> attribute🎜jQuery.fn.extend({
on: function( types, selector, data, fn, /*INTERNAL*/ one ) { var type, origFn; // Types can be a map of types/handlers
if ( typeof types === "object" ) { // ( types-Object, selector, data )
if ( typeof selector !== "string" ) { // ( types-Object, data )
data = data || selector;
selector = undefined;
}
}
})
jQuery.extend(object) ：为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object) ：给jQuery对象添加方法。🎜text 노드도 노드로 간주되므로 p의 자식 노드는 텍스트 노드이므로 3🎜🎜zepto 소스 코드를 반환합니다🎜배열인지 판단
type: function( obj ) { if ( obj == null ) { return obj + "";
} return typeof obj === "object" || typeof obj === "function" ?
class2type[ toString.call(obj) ] || "object" : typeof obj;
},🎜 Array.isArray() 메서드: 객체가 배열이면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 🎜🎜instanceof는 변수가 객체의 인스턴스인지 확인하는 데 사용됩니다. 예를 들어 🎜rrreee🎜동시에 alert(a instanceof Object)도 반환됩니다. true🎜🎜isArray는 부울 값을 반환하고, Array.isArray가 true인 경우 true를 반환합니다. , 그렇지 않으면 배열의 객체 인스턴스를 반환합니다. 🎜데이터 유형 판단
rrreee🎜class2type은 실제로는 Object.create(null);🎜🎜<code>Object.prototype.toString.call() 메서드를 통해 데이터 유형을 결정할 수 있습니다. 예: 🎜rrreee🎜먼저, obj 매개변수가 다음과 같은 경우 정의되지 않음 또는 null을 선택한 다음 이를 해당 원래 문자열 "정의되지 않음" 또는 " ~ <code>String(obj) null". 🎜🎜그런 다음 class2type[toString.call(obj)]는 먼저 Object의 프로토타입 메소드 toString()을 빌려 obj의 문자열 표현, 반환 값은 <code>[객체 클래스] 형식입니다. 여기서 class는 내부 객체 클래스입니다. 🎜🎜그런 다음 class2type 개체에서 [object class]에 해당하는 소문자 문자열을 꺼내서 반환합니다. 검색되지 않으면 항상 "object"를 반환합니다. > 🎜get 메소드
rrreee🎜 컬렉션의 지정된 인덱스에 해당하는 값을 가져옵니다.idx가 0보다 작은 경우 idx는 idx+length.와 동일하며 length는 컬렉션의 길이입니다. 🎜🎜방금 slice.call(this)을 보고 혼란스러울 수도 있습니다. code>인데 사실은 <code>zepto뿐만 아니라 <code>jQuery를 포함한 .js의 소스코드와 backbone의 소스코드도 모두 이렇게 작성했지만 처음에 다음과 같이 선언합니다. 🎜rrreee🎜Soslice.call(this)는 실제로 Array.slce.call(this)🎜🎜prototype입니다. .js 소스 코드🎜rrreee🎜 addClassName는 removeClassName()에 의존하므로 먼저 $()를 분석하여 요소를 캡슐화합니다. prototype 객체입니다. 🎜rrreee🎜의 의미는 요소 객체가 존재하지 않으면 실행을 계속하지 않는다는 의미를 무시하고 🎜rrreee🎜빈 문자열()을 의미합니다. "")를 구분 기호로 사용하면 각 문자가 분할됩니다. 🎜클래스 속성 값이 있는지 확인
rrreee배열을 추가하려면 이전 버전 브라우저와 호환됩니다. push 메소드
rrreee🎜!Array.prototype .pushtrue이면 브라우저가 이 메소드를 지원하지 않는다는 뜻이고, 그 다음에는 이 메소드를 지원하지 않는다는 뜻입니다. [startLength + i] = 인수[i]가 전달됩니다. 들어오는 각 매개변수는 차례로 배열에 배치되고 마지막으로 배열의 길이가 반환됩니다.🎜🎜객체에 액세스하려면 (.) 표기법을 사용하거나 []를 사용하여 객체에 액세스할 수 있습니다. 배열 요소에 액세스하는 것과 같은 방법은 🎜🎜jQuery 소스 코드 🎜🎜jQuery 소스 코드는 연결이 너무 많아 따로 분석하기가 어렵습니다. 간단한 예를 하나 또는 두 개 들어보겠습니다. 🎜<h3>toArray 메소드 </h3>rrreee🎜<code>Array.prototype.slice.call( 인수)는 length 속성이 있는 객체를 배열로 변환할 수 있습니다. 이는 해당 객체의 목적이 arguments 객체의 배열이 추출되어 다음으로 변환된다는 것을 의미합니다. 배열. 예: 🎜rrreee🎜Array🎜이것은 우리가 원하는 기본 개체의 이름입니다🎜🎜prototype🎜이것은 인스턴스 메서드의 네임스페이스로 생각할 수 있습니다. 배열🎜slice
这提取数组的一部分并返回新的数组，并没有开始和结束索引，它只是返回一个数组的拷贝
call
这是一个非常有用的功能，它允许你从一个对象调用一个函数并且使用它在另一个上下文环境
下面的写法是等效的：
Array.prototype.slice.call == [].slice.call
看这个例子：
object1 = {
name:'frank',
greet:function(){
alert('hello '+this.name)
}
};
object2 = {
name:'trigkit4'};// object2没有greet方法// 但我们可以从object1中借来
object1.greet.call(object2);//弹出hello trigkit4分解一下就是object1.greet运行弹出hello + 'this.name'，然后object2对象冒充，this就指代object2
var t = function(){ console.log(this);// String [ "t", "r", "i", "g", "k", "i", "t", "4" ] console.log(typeof this); // Object console.log(this instanceof String); // true};
t.call('trigkit4');call(this)指向了所传进去的对象。
在Object.prototype中已经包含了一些方法：
1.toString ( )
2.toLocaleString ( )
3.valueOf ( )
4.hasOwnProperty (V)
5.isPrototypeOf (V)
6.propertyIsEnumerable (V)on方法
jQuery.fn.extend({
on: function( types, selector, data, fn, /*INTERNAL*/ one ) { var type, origFn; // Types can be a map of types/handlers
if ( typeof types === "object" ) { // ( types-Object, selector, data )
if ( typeof selector !== "string" ) { // ( types-Object, data )
data = data || selector;
selector = undefined;
}
}
})
jQuery.extend(object) ：为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object) ：给jQuery对象添加方法。!= 在表达式两边的数据类型不一致时,会隐式转换为相同数据类型,然后对值进行比较.!== 不会进行类型转换,在比较时除了对值进行比较以外，还比较两边的数据类型, 它是恒等运算符===的非形式。
on : function(){} 是js对象字面量的写法
{键:值,键:值}语法中的“健/值”会成为对象的静态成员。如果给某个“健”指定的值是一个匿名函数，那么该函数就会变成对象的静态方法；否则就是对象的一个静态属性。
jQuery类型判断
type: function( obj ) { if ( obj == null ) { return obj + "";
} return typeof obj === "object" || typeof obj === "function" ?
class2type[ toString.call(obj) ] || "object" : typeof obj;
},前面已经分析了，class2type = {};所以class2type[ toString.call(obj) ] ={}.toString.call(obj)。它的作用是改变toString的this指向为object的实例。
위 내용은 js 프레임워크에 대한 소스 코드 연구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!