浅析jQuery基本结构($实现原理)
2023-09-27 14:23:13 时间
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');
相关文章
- JQuery Mobile实现手机新闻浏览器(2)
- jQuery获取display为none的隐藏元素的宽度和高度的解决方案
- 在C#后端处理一些结果然传给前端Javascript或是jQuery
- jQuery内部原理和实现方式浅析
- AjaxFileUpload文件上传组件(php+jQuery+ajax)
- jQuery select操作控制方法小结
- jQuery-zclip实现复制内容到剪切板
- jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏
- jquery的css()函数同时设置多个css属性值
- jQuery Mobile的默认配置项具体解释,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全
- jquery ajax return值无法获取的解决方法
- 基于jQuery CSS3鼠标点击动画效果
- 基于jquery垂直缩略图切换相册
- window.onload多个共存 - 借鉴jQuery.noConflict的思路
- JQuery 表单校验插件 validate 使用纪录