jquery是如何架构的.
心里一直有个疑问.
jquery是如何做到一个jQuery即可以当方法用比如$();又可以当对象用$.extend();
现在总结一下吧
function method(){}
var m=new method();
m.version="123";
console.log(m.version) // 打印出123
这段代码表示申明一个对象后,还可以继续为该对象添加属性或方法.
继续往下看:
var m=function(){};
m.version="123";
这个地方仍然可以打印出123;
可是这个地方并没有申明对象,只不过是定义了一个变量方法名而已.
核心一:其实变量方法名也是一个对象
比如上面的代码本质上是这样的
var m=new Function();
m.version="123";
这个就是jQuery为什么可以直接作为对象使用的原理.
接着看为什么jQuery可以直接做方法用.
核心二:如果构造函数有返回值,运算符new所创建的对象会被丢弃,返回值作为new表达式的值.
function Method(name,age){
var obj={
name:name,
age:age
};
this.name="我来自本身";
return obj;
}
var objM=new Method("思思博士",26);
console.log(objM);//打印出obj对象,而没有打印"我来自本身"
有了上面的两个核心理论.就可以构建jQuery了.
(function(window,undefined){
var jQuery=(function(){
//核心理论二
var jQuery=function(name,age){
return new jQuery.prototype.init(name,age);
};
jQuery.prototype={
init:function(name,age){
return [name,age];
}
};
jQuery.prototype.init.prototype=jQuery.prototype;
//核心理论一.
jQuery.version="1.7.2";
return jQuery;
})();
window.$=window.jQuery=jQuery;
})(window);
console.log(jQuery.version);
console.log(jQuery("思思博士",25))
上面的代码模仿的就是jQuery即做方法用,又当对象用的基本理论.
jquery是如何架构的.的更多相关文章
- Jquery的基本架构
引入 以前学习原生JS然后切换到用JQ的时候总觉得很不习惯,甚至有点排斥用JQ.后来自己写项目一直到公司实习用JQ的这段时间,才深深感受到JQ的强大~JQ不仅做到兼容很多浏览器,还能很方便地使用JS ...
- 深入了解jQuery之整体架构
本文是在阅读了Aaron艾伦的jQuery源码解析(地址:http://www.imooc.com/learn/172)后的个人体会以及笔记.在这里感谢艾伦老师深入浅出的讲解!! 先来看看如何生成一个 ...
- jQuery 源码解析一:jQuery 类库整体架构设计解析
如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...
- 浅谈 jQuery 核心架构设计
jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...
- 【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- jQuery架构剖析
对于jQuery的整体架构,经典之处有三: 1.jQuery的无new构建 2.jQuery的链式调用 3.jQuery的插件接口 想必兄弟姐妹们也觉得这架构不错哈,但有时又畏惧去拜读大量的jQuer ...
- jQuery整体架构源码解析(转载)
jQuery整体架构源码解析 最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性, ...
- jQuery整体架构源码解析
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- 【深入浅出jQuery】源码浅析--整体架构(转)
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
随机推荐
- IOS 核心动画之CAKeyframeAnimation - iBaby
- IOS 核心动画之CAKeyframeAnimation - 简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation ...
- BestCoder Round #39
-------好久没更新博客了,发现还是需要不断总结才能进步,所以还是把最近打的一些比赛记录一下. T1:Delete (hdu 5210) 题目大意: 给出n个数,然后要删掉k个,要求剩下的数中 不 ...
- C语言学习常识
开发环境 学习C语言,在mac os x上,我们选用的开发工具是x-code:而在Windows上,我们一般用微软提供的vc6.0:此外还有很多编辑器内置了或者支持下载C语言的编译器插件.所以,我们可 ...
- String类实现
String类是应用框架中不可或缺的类 重载运算符实现字符串的操作 #idndef IOTECK_STRING_H_#define IOTECK_STRING_H_namespace iotek{ c ...
- MYSQL中关于日期处理的函数
< DOCTYPE HTML PUBLIC -WCDTD HTML TransitionalEN> MySQL数据库中SQL语句中 关于日期.时间\时间戳的函数 一 MySQL 获得当 ...
- 正则表达式 java
如果你曾经用过Perl或任何其他内建正则表达式支持的语言,你一定知道用正则表达式处理文本和匹配模式是多么简单.如果你不熟悉这个术语,那么"正则表达式"(Regular Expres ...
- js 中混乱this
1.在HTML元素事件属性中inline方式使用this关键字: <div onclick=" // 可以在里面使用this ">division element&l ...
- SAP web 开发 (第二篇 bsp 开发 mvc模式 Part2 )
单击第一个图标,第一个图标突出显示,单击第二个图标,第一个变灰,第二个突出显示,反之一样.单击history读取历史记录. Controller ZCL_SUS_C_ORDER_CHANGE 1. ...
- PTA作业
- 史上最全的html标签属性用法对照表
html标签特效代码语法使用对照说明 <!> 跑马灯 <marquee>...</marquee>普通卷动 <marquee behavior=slide&g ...