实现内容：
1.jQuery是一个对象，而且是一个函数对象
2.jQuery代码组织结构
3.jQuery基本架构及其核心思想
4.jQuery三种特征的实现，链式编程，隐式迭代
5.jQuery提供的api都是函数
沙箱模式（函数自调用）：
(function(){
// 沙箱模式 :利用函数作用域的特性，防止变量污染
var number=10;
function fun(){
console.log(number);
}
fun(); //10
})();
实现细节：
利用原型替换，让工厂函数和构造函数指向同一个原型对象
简单结构：
代码：
/*
*/
// 因为jQuery是一个函数自调用，$是一个函数对象
(function (window,undefined){
// 这是jQuery工厂
var jQuery=function(selector){
// init才是jQuery真正的构造函数，jQuery函数只是一个工厂
return new jQuery.fn.init(selector);
}
// 为了简化代码，jQuery.fn是给原型对象提供一个简写方式
// 然后给jQuery做了原型替换
jQuery.fn=jQuery.prototype={ //连续赋值从右往左赋值,{}是匿名对象，本身是Object
constructor:jQuery,
verson:"1.0.0",
// 实现实例each的方法
each:function(callback){
jQuery.each(this,callback);//调用静态的each，实现实例each方法
},
toArray:function(){ //将jQuery对象转成数组返回
return [].slice.call(this);
},
get:function(index){
if(index == undefined || index == null){//没有传参或者传的是null
// 那么就把jQuery身上的所有dom元素，组织成一个数组返回
return this.toArray();
}else if(index >=0 && index<this.length){ //索引在正常的范围内
return this[index];
}else if(index >= -[this.length - 1] && idnex < 0 ){
return this[this.length + index];
}else{
return undefined;
}
}
};
// 选择器模块，init构造函数
var init = jQuery.fn.init=function(selector){ //jQuery真正的构造函数
//0.如果selector是String
//1.如果传递的selector是HTML标签片段,就创建dom对象
//2.如果是选择器，那么就通过 web api查询dom元素
// 3.把创建出来的dom元素/选择器选中的DOM元素，挂载到jQuery上
// 4.给自己补一个length属性
if(!selector){ //如果是null，undefined，null
return;
}
// 判断是不是DOM对象
if(jQuery.isDOM(selector)){
[].push.call(this,selector);
// Array.prototype.push.call(this,selector);
}
if(jQuery.isString(selector)){
if(jQuery.isHTML(selector)){
//<div>文字</div> <div><p>这是段落</p></div>
// 技巧：先创建一个容器，然后把selector这个字符串，整体作为容器的innerHTML添加到容器中
// 然后从容器中，通过找直接子元素，再找到这个dom对象
var tempDiv = document.createElement('div');
tempDiv.innerHTML = selector;
//call,apply借用
[].push.apply(this,tempDiv.children);
}else{
var firstChar = selector.charAt(0);
var lastChars = selector.substr(1);
try{
if(firstChar == '#'){ //id选择器
let obj =document.getElementById(lastChars);
if(obj){
[].push.call(this,obj);
}
}
else if(firstChar == '.'){ //class做选择器
let objs =document.getElementsByClassName(lastChars);
if(objs){
[].push.apply(this,objs);
}
}
else{ //标签名做选择器
let doms =document.getElementsByTagName(selector);
if(doms){
[].push.apply(this,doms);
}
}
return this;
}
catch{
this.length = 0;
return this;
}
}
}
};
// 后边功能代码，大多数都是通过extend扩展到对象身上，以此来实现模块化
jQuery.extend = jQuery.fn.extend = function(obj){
for(let key in obj){
this[key] = obj[key]; //this指jQuery对象
}
};
// 实例成员扩展，1.事件注册模块
jQuery.fn.extend({
// 只实现bind
on:function(type,fun){
if(jQuery.isString(type) && jQuery.isFunction(fun)){
//隐式迭代
this.each(function(i,el){
if(el.addEventListener){ //判断是不是主流浏览器
el.addEventListener(type,fun);
}else{
el.attachEvent('on'+ type,fun); //IE浏览器支持的事件注册方式
}
})
}
},
// 其他的事件都是调用的on方法
click:function(fun){
this.on('click',fun);
}
});
// 实例成员扩展，2.属性操作模块
jQuery.fn.extend({
addClass:function(clsName){
// 先判断dom对象是不是已经有该属性
// 如果没有再给他添加，否则什么都不做
this.each(function(i,el){
if((' '+ this.className+ ' ').indexOf(' '+clsName+ ' ')==-1){
this.className +=' '+clsName;
}
})
return this;//链式编程
},
removeClass:function(clsName){
// 1.如果没有传递参数，就把所有选中的dom元素的class属性清空
if(arguments.length===0){
this.each(function(i,el){
this.className='';
})
}
else{
this.each(function(i,el){
this.className=jQuery.trim((' '+ this.className+ ' ').replace(' '+clsName+ ' ',''))
})
}
return this; //链式编程
}
});
// 实例成员扩展，3.样式操作模块
jQuery.fn.extend({
css:function(name,val){
// 1.只传了1个参数，读取选择器选中的第1个元素对应的CSS属性值
if(arguments.length === 1){
if(jQuery.isString(name)){
return jQuery.getStyle(this.get(0),name);
}
else if(jQuery.isObject(name)){
for(var key in name){
this.each(function(i,el){
el.style[key] = name[key];
})
}
}
}else if(arguments === 2){ //设置样式
this.each(function(i,el){
el.style[name] = val;
})
}
return this; //链式编程
}
})
// 静态方法扩展 1.扩展核心成员
jQuery.extend({
isString:function(str){
return Object.prototype.toString.call(str) === "[object String]";
},
isNumber:function(num){
return Object.prototype.toString.call(num) === "[object Number]" && isFinite(num); //有穷大
},
isBoolean:function(b){
return Object.prototype.toString.call(b) === "[object Boolean]";
},
isObject:function(obj){
return Object.prototype.toString.call(obj) === "[object Object]";
},
isFunction:function(fn){
return Object.prototype.toString.call(fn) === "[object Function]";
},
isDate:function(date){
return Object.prototype.toString.call(date) === "[object Date]";
},
isRegExp:function(reg){
return Object.prototype.toString.call(reg) === "[object RegExp]";
},
isArray:function(arr){
return Object.prototype.toString.call(arr) === "[object Number]";
},
isLikeArray:function(likeArr){
// 1.伪数组要有length属性
// 2.要么没成员，要么一定存在key为0,1,2...length-1;(没办法判断所有的key就只判断0号和length-1号对象)
// 3.对象的__proto__不是指向Array.prototype，伪数组是Object对象
return ('length' in likeArr) && (likeArr.length === 0 || (likeArr.length - 1) in likeArr && 0 in likeArr) && (likeArr.__proto__ != Array.prototype);
},
trim:function(str){ //低版本不支持trim方法，需要适配
if(!str){ //没传的情况 或者传的是0 ，undefined，null
return str;
}
else{
if(str.trim){
return str.trim();
}else{
return str.replace(/^\s+|\s+$/,''); //把结尾空格用空来替换
}
}
},
isHTML:function(str){
// 1.首字母必须是'<'
// 2.结尾必须是'>'
// 3.<>不行，str的长度至少是3;
if(!str){ //排除0，null，undefined
return false;
}
if(jQuery.isString(str)){
if(str.charAt(0) == '<' && str.charAt(str.length - 1) == '>' && str.length >= 3){
return true;
}
}
return false;
},
isDOM:function(obj){
return obj instanceof HTMLElement;
}
});
// 静态方法扩展 2.扩展ajax模块
jQuery.extend({
})
// 静态方法扩展 3.获取样式
jQuery.extend({
getStyle:function(dom,style){
if(window.getComputedStyle){//判断是不是主流浏览器
return window.getComputedStyle(dom)[style];
}else{
return dom.currentStyle[style];
}
}
});
// 静态方法扩展 3.实现隐式迭代，each是核心方法
jQuery.extend({
each:function(collection,callback){
// 1.判断callback是不是函数对象
if(jQuery.isFunction(callback)){
// 2.判断collection是不是数组或者伪数组
if(jQuery.isArray(collection) || jQuery.isLikeArray(collection)){
for(var i=0;i< collection.length;i++){
// callback(i,collection[i]);
// 我们需要把callback调用时，其内部的this指向当前遍历到的集合的成员
callback.call(collection[i],i,collection[i]);
}
}else{
for(var key in collection){
callback.call(collection[key],key,collection[key]);
}
}
}
}
})
// 把构造函数的原型，替换为jQuery工厂的原型,原型共享一个
// 这么做是为了实现插件机制，让外界可以通过jQuery方便的进行拓展
init.prototype = jQuery.fn; //让init.prototype和jQuery.fn都指向一个相同的匿名对象
// 把jQuery工厂函数和$简写暴露出来
window.$=window.jQuery=jQuery;
})(window);
1569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
