浅析jQuery基本结构($实现原理)
jQuery是一个非常好的库,学习它的实现原理是一个很好的提高代码编写能力的途径,这里来简单解析下jQuery的基本架构,主要来说下$符号的实现原理。直接看代码吧。
<script>
(function(w){
//工厂
function jQuery(selector, context){
return new jQuery.fn.init(selector, context);
}
//给原型提供一个简写方式
jQuery.fn = jQuery.prototype = {
};
//init才是jQuery中真正的构造函数
var init = jQuery.fn.init = function(selector, context){
};
//把构造函数的原型,替换为jQuery工厂的原型
//这么做的目的是为了实现jQuery的插件机制,让外界可以通过jQuery方便的进行扩展
init.prototype = jQuery.fn;
w.jQuery = w.$ = jQuery;
}(window));
</script>
1.jQuery借助了沙箱模式,其实整个jQuery包中的代码就是一个自执行函数,并且把window对象作为参数传递了过去。
2.jQuery函数只是一个工厂,真正的构造函数时jQuery.fn.init( )
3.把init的原型对象替换为jQuery.fn,其实也就是替换为了jQuery这个函数自己的原型对象,也就是jQuery.prototype,这么做的目的是为了实现插件机制,让外界可以通过jQuery方便的进行扩展。
比如,我们要做一个对话框插件,就可以这么做:
jQuery.fn.jqAlert = function(msg){
alert(msg);
}
这样一个简单的jq插件就做好了,用的时候只需要调用:
$().jqAlert('aaa');
作者: lost blog
出处: http://www.cnblogs.com/JAYIT/
关于作者:专注服务器端开发
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接 如有问题, 可邮件(sawyershaw@qq.com)咨询.


浙公网安备 33010602011771号