JQ源码解析篇
来源:互联网 发布:大数据 nosql 编辑:程序博客网 时间:2024/06/05 15:22
/**
* Created by lihongwei on 2017/3/15.
*/
* Created by lihongwei on 2017/3/15.
*/
//利用自执行函数封装jq代码,避免暴露太多的全局变量
(function (window) {
//为了以后能方便借用数组的各种方法,提前存到变量中,全局都是用这一个数组,节约空间
var arr = [];
var push = arr.push;
var splice = arr.splice;
var slice = arr.slice;
//模拟jQuery中的Sizzle引擎,利用选择器获取元素
function Sizzle(seletcor) {
return document.querySelectorAll(seletcor);
}
//定义jq的核心方法
function jQuery(selector) {
//创建jq函数原型中的F的实例,因为后面将 init函数(初始化函数)的原型指向了 jq的原型(核心操作),所以所有F的实例都可以
//访问jq中的方法
return new jQuery.fn.init(selector);
}
//使用原型替换,给jq定义原型,并且把jq原型的索引复制给jQuery.fn,即 jQuery.prototype == jQuery.fn
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
//定义初始化函数
init: function (selector) {
//为了把获取到的dom元素,并把获取到的dom元素包装成一个数组,并保存在this中
//借用数组的splice方法,清空this最终存储的属性
splice.call(this,0,this.length);
//借用数组的push,把获取到的dom元素包装成一个数组,并保存在this中
push.apply(this,Sizzle(selector));
//为了可以使用链式编程,返回调用该方法的对象。
//解析:一、如果是方法调用模式,this指向调用该方法的对象,return this从而实现链式编程
// 二、如果是构造函数调用,默认返回this,return this和不返回没什么区别。
return this;
},
//模仿jq中的css方法,设置dom的样式
css: function (styleName, styleValue) {
for (var i = 0; i < this.length; i++) {
var ele = this[i];
ele.style[styleName] = styleValue;
}
(function (window) {
//为了以后能方便借用数组的各种方法,提前存到变量中,全局都是用这一个数组,节约空间
var arr = [];
var push = arr.push;
var splice = arr.splice;
var slice = arr.slice;
//模拟jQuery中的Sizzle引擎,利用选择器获取元素
function Sizzle(seletcor) {
return document.querySelectorAll(seletcor);
}
//定义jq的核心方法
function jQuery(selector) {
//创建jq函数原型中的F的实例,因为后面将 init函数(初始化函数)的原型指向了 jq的原型(核心操作),所以所有F的实例都可以
//访问jq中的方法
return new jQuery.fn.init(selector);
}
//使用原型替换,给jq定义原型,并且把jq原型的索引复制给jQuery.fn,即 jQuery.prototype == jQuery.fn
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
//定义初始化函数
init: function (selector) {
//为了把获取到的dom元素,并把获取到的dom元素包装成一个数组,并保存在this中
//借用数组的splice方法,清空this最终存储的属性
splice.call(this,0,this.length);
//借用数组的push,把获取到的dom元素包装成一个数组,并保存在this中
push.apply(this,Sizzle(selector));
//为了可以使用链式编程,返回调用该方法的对象。
//解析:一、如果是方法调用模式,this指向调用该方法的对象,return this从而实现链式编程
// 二、如果是构造函数调用,默认返回this,return this和不返回没什么区别。
return this;
},
//模仿jq中的css方法,设置dom的样式
css: function (styleName, styleValue) {
for (var i = 0; i < this.length; i++) {
var ele = this[i];
ele.style[styleName] = styleValue;
}
//为了实现链式编程
return this;
}
};
//jq中的extend方法是jq的非常核心的一个方法,在 jQuery和jQuery.prototype中都有这个方法的索引
//entend方法使用示例:
/*
* 往jquery的原型中添加方法时,利用extend的特性。
*
* jQuery.extend({
* each:function(){},
* type:function(){},
* isString:function(){}
* });
*
* jQuery中的工具方法一般加到jQuery中
* jQuery中操作dom的方法一把加到jQuery.prototype中
*
* */
return this;
}
};
//jq中的extend方法是jq的非常核心的一个方法,在 jQuery和jQuery.prototype中都有这个方法的索引
//entend方法使用示例:
/*
* 往jquery的原型中添加方法时,利用extend的特性。
*
* jQuery.extend({
* each:function(){},
* type:function(){},
* isString:function(){}
* });
*
* jQuery中的工具方法一般加到jQuery中
* jQuery中操作dom的方法一把加到jQuery.prototype中
*
* */
/*
* jq中比较核心的extend方法解析:
*
*
* jQuery.extend();传入一个对象的话,就吧这个对象的属性加到jQuery上
* jQuery.extend();传入多个对象的话,就把第2,3,4等等个对象,依次追加到第一个对象上
*
* jQuery.fn.extend():传入一个对象的话,就吧这个对象的属性加到jQuery.fn上
* jQuery.fn.extend():传入多个对象的话,就把第2,3,4等等个对象,依次追加到第一个对象上
*
* */
jQuery.fn.extend = jQuery.extend = function () {
var target, sources;
var arg0 = arguments[0];
if (arg0.length == 0) return this;
* jq中比较核心的extend方法解析:
*
*
* jQuery.extend();传入一个对象的话,就吧这个对象的属性加到jQuery上
* jQuery.extend();传入多个对象的话,就把第2,3,4等等个对象,依次追加到第一个对象上
*
* jQuery.fn.extend():传入一个对象的话,就吧这个对象的属性加到jQuery.fn上
* jQuery.fn.extend():传入多个对象的话,就把第2,3,4等等个对象,依次追加到第一个对象上
*
* */
jQuery.fn.extend = jQuery.extend = function () {
var target, sources;
var arg0 = arguments[0];
if (arg0.length == 0) return this;
if (arguments.length == 1) {
target = this;
sources = [arg0];
} else {
target = arg0;
sources = slice.call(arguments, 1);
}
for (var i = 0; i < sources.length; i++) {
var source = sources[i];
for (var key in source) {
target[key] = source[key];
}
}
return target;
}
//核心操作 核心操作 核心操作 让init的原型指向 jquery的原型,这样,任何init的实例,都可以访问
// jq原型中的所有方法
jQuery.fn.init.prototype = jQuery.fn;
//暴露两个全局变量,可以访问 jq中的方法
window.jQuery = window.$ = jQuery;
})(window);
target = this;
sources = [arg0];
} else {
target = arg0;
sources = slice.call(arguments, 1);
}
for (var i = 0; i < sources.length; i++) {
var source = sources[i];
for (var key in source) {
target[key] = source[key];
}
}
return target;
}
//核心操作 核心操作 核心操作 让init的原型指向 jquery的原型,这样,任何init的实例,都可以访问
// jq原型中的所有方法
jQuery.fn.init.prototype = jQuery.fn;
//暴露两个全局变量,可以访问 jq中的方法
window.jQuery = window.$ = jQuery;
})(window);
0 0
- JQ源码解析篇
- JQ源码
- JQ源码分析
- JQ源码分析
- jQ源码之camelCase
- jQ源码之each
- jQ源码之animate
- js/jq解析json
- shell jq 解析json
- jQuery源码解析(1)—— jq基础、data缓存系统
- jq的扩展函数解析
- JSON解析器jq小解
- Linux中解析json---jq
- 【仿】程序员的表白-源码HTML5+JQ
- jq Linux下命令行json解析工具
- shell解析json之jq工具
- postgres源码解析篇1
- ceph源码解析--osd篇
- 【菜鸟之路】重捡Git
- ESP8266--学习笔记(二)扫描、连接WiFi
- java二叉树的创建与遍历
- Python中带参数的decorator
- Excel中批量插入图片并对齐
- JQ源码解析篇
- vue.js和angular.js的特点与比较
- CSU-1837 Tree Count(树的同构)
- Mysql之数据库备份与恢复
- blrlpbrzhjxrvjf
- 动态规划算法
- ztree+java后台取数据(包括异步)生成树状图
- vue.js和angular.js的数据展示
- spring-boot启动报错【This application has no explicit mapping for /error.....】