<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 抽取jq框架的结构
// 1.jq结构整体是一个自调,自调是为了防止全局变量的污染
(function(global,factory){//这两个是形参 global对应就是window ,factory对应就是工厂函数
factory(global);//jq对模块化做了一些支持
})(typeof window!=='undefined'?window:this,function(window){//这两个是实参
//jq的主体代码都在这里
//3.这是jq对外暴露的工厂函数
var jQuery = function(){
return new jQuery.fn.init();
}
// 4.置换原型。同时给原型起了一个简称,方便用户和自己使用。
// #######然后init构造函数的原型也指向jQuery.fn。即jQuery原型和init构造函数同时指向同一个名字jQuery.fn
// 加以说明:给jQ原型起一个简称是因为,JQ实现了一个插件机制,说白了,就是让用户可以自由扩展原型
jQuery.fn = jQuery.prototype={
constructor:jQuery,//######这个指向jQuery
alert:function(msg){
alert(msg);
}
}
// 5.定义构造函数,同时把构造函数加到了jQuery工厂函数的原型中
// 这是jq内部影响的构造函数
var init = jQuery.fn.init = function(){//###这个指向init工厂函数
}
// 6.让构造函数的原型与工厂函数的原型保持一致 这样就可以访问jQuery原型中的方法和属性
init.prototype = jQuery.fn;
//2.在jq主体代码中对外暴露了两个变量,这两个变量指向同一个工厂函数
window.jQuery = window.$ = jQuery;
return jQuery;
});
console.log($());//返回的是一个构造函数
console.log($().alert('调用jq原型中的方法'));
</script>
</body>
</html>
对jQuery框架整体内部结构的理解
猜你喜欢
转载自blog.csdn.net/m13302979400/article/details/80755152
今日推荐
周排行