alan89757 / jquery-analysis Goto Github PK
View Code? Open in Web Editor NEWjquery源码分析
License: MIT License
jquery源码分析
License: MIT License
var def = $.Deferred();
var wait = function(def) {
var test = function() {
console.log("test开始")
def.resolve()
}
setTimeout(test, 5000);
return def; // 返回def给when函数使用
}
$.when(wait(def)).done(function(data) {
console.log("执行成功")
}).fail(function() {
console.log("执行失败")
}).done(function() {
console.log("再次执行成功")
});
jQuery.extend({
Callbacks: function(options) {
options = typeof options === "string" ? ( optionsCache[options] || createOptions(options)) : {}; // options保存options.split后的对象 {mermory: true, stopOnFalse: true}
var memory, start, index, firing, length, testing;
var list = []; // 回调列表
// 执行回调列表
var fire = function( data ) {
memory = options.memory && data; // 获取参数值
index = start || 0; // 第一次进来直接从0开始执行回调列表,后面进来index从上一次执行完length(list.length)开始
length = list.length; // 记录上次执行的length
firing = true;
testing = true; // 如果参数有once 回调函数已经调用过了
for( ; index < length; index++) {
if(list[index].apply( data[0], data[1]) === false && options.stopOnFalse ) { // 判断执行结果是否为false,给stopOnFalse使用
break;
}
}
start = 0; // 执行完成重置start, 处理参数不传的情况,memory直接执行fire函数
firing = false;
}
// 工厂模式
var self = {
add: function() {
var startlen = list.length;
jQuery.each( arguments, function(i, value) {
if(jQuery.isFunction(value)) {
list.push(value);
}
})
if(firing) { // 执行完回调才能去获取回调函数的长度作为新起始点
start = list.length;
} else
if(memory) {
start = startlen; // add之前的回调列表函数
fire(memory); // 如果是memory,fire之后的add立即执行
}
},
fireWith: function(context, args) {
args = [ context, args ];
if(!options.once || !testing) { // 没有once || 是once,但是第一次调用
fire( args );
}
},
fire: function() {
self.fireWith( this, arguments);
return this;
}
}
return self;
}
})
show slide animate 等频繁修改 dom 很耗性能,可采用 jquery.transit 插件等
使用单个 id 或 class 选择器当然也是优化点咯,元素选择器是真的会卡
每次调用 $() 其实都是生成一个超大的对象,还是尽量存为变量吧
用 jquery 写事件委托是最爽的,优点也是非常明显的
(1)任意对象扩展
var obj1 = {name: "alan"};
var obj2 = {age: 20};
$.extend(obj1, obj2);
(2)jquery本身扩展
$.extend({
world: function() {
console.log('hello world');
}
})
(3)jquery实例对象扩展
$.fn.extend({
css1: function() {
console.log("css1")
}
})
deferred => ES6 promise => Generator => async
jquery的所有方法返回this(对象本身)
prop获取元素本身自带的属性,比如a中的href,input中的type
attr获取用户自己给元素添加的属性,即自定义属性
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.