jQuery源码框架fn解读
(function( window, undefined ){
var jQuery = (function(){
var jQuery = function( selector, context ){
return new jQuery.fn.init( selector, context )
}
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function( selector, context ){
if (!selector) return this;
var nodeList = (context || document).querySelectorAll( selector ),
i = 0,
length = nodeList.length;
for (; i<length; i+=1){
this[i] = nodeList[i];
}
this.length = nodeList.length;
return this;
}
}
//用fn的真正原因是
//如果不用fn，直接用jQuery.init 会返回undefined，主要是jQuery并不是new的对象，也就不能//访问原型，undefined不能设置原型
//jQuery.fn = {}可以直接访问init属性，所以fn必须写
console.log( jQuery.fn );
jQuery.fn.init.prototype = jQuery.fn;
jQuery.fn.extend = jQuery.extend = function(obj){
var obj = obj || null;
if (!obj) return this;
for ( var i in obj){
if (!jQuery.fn[i]){
jQuery.fn[i] = obj[i];
}
}
return this;
}
return jQuery;
})()
window.$ = window.jQuery = jQuery;
})( window, undefined )
下边是没有使用jQuery.fn的代码，使用了jQuery.fn的框架更简单，不用函数运行就可以对原型添加方法,也就是这一点,
因为直接jQuery.prototype不能直接添加方法，必须声明！但是jQuery.fn就可以，因为他不是原型而是一个{}object
jQuery.fn = jQuery.prototype = {};
<body>
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<script>
var jQuery = function( selector, context ){
return new jQuery.prototype.init( selector, context );
}
jQuery.prototype = {
constructor: jQuery,
init: function( selector, context ){
if ( !selector ) return;
var nodeList = ( context || document ).getElementsByTagName( selector ),
i = 0,
length = nodeList.length;
for (; i<length; i+=1){
this[i] = nodeList[i]
}
this.length = nodeList.length;
return this
}
}
jQuery.prototype.init.prototype = jQuery.prototype;
jQuery.prototype.extend = function( obj ){
if ( !obj ) return;
for ( var i in obj ){
if ( !jQuery.prototype[i] ){
jQuery.prototype[i] = obj[i]
}
}
}
jQuery.prototype.extend({
changeColor: function( color ){
if ( !color ) return;
var i = 0,
length = this.length;
for (; i<length; i+=1){
this[i].style.color = color;
}
return this;
}
});
jQuery('h1').changeColor('red');
//标准的写法 jQuery.fn.extend = jQuery.extend
//因为非标准的没有jQuery.fn 所以不能jQuery.extend()直接添加，必须jQuery.prototype.extend()
//进行添加,又因为jQuery.fn = jQuery.prototype = {},所以jQuery.fn是一个对象不用函数调用可以直//接添加
</script>
</body>
jQuery源码框架fn解读的更多相关文章
- jQuery源码笔记(一)：jQuery的整体结构
jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...
- jquery源码解读
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能 ...
- jQuery源码中的“new jQuery.fn.init()”什么意思？
所有文章搬运自我的个人主页:sheilasun.me 引子 最近打算试试看看jQuery的源码,刚开个头就卡住了.无论如何都理解不了jQuery源码入口部分中的 return new jQuery.f ...
- jQuery源码分析之整体框架
之前只是知道jQuery怎么使用,但是我觉得有必要认真的阅读一下这个库,在分析jQuery源码之前,很有必要对整个jQuery有个整体的框架概念,才能方便后面对jQuery源码的分析和学习,以下是我总 ...
- 三.jQuery源码解析之jQuery的框架图
这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...
- 读jQuery源码之整体框架分析
读一个开源框架,大家最想学到的就是设计的思想和实现的技巧.最近读jQuery源码,记下我对大师作品的理解和心得,跟大家分享,权当抛砖引玉. 先附上jQuery的代码结构. (function(){ / ...
- jQuery源码解读----part 2
分离构造器 通过new操作符构建一个对象,一般经过四步: A.创建一个新对象 B.将构造函数的作用域赋给新对象(所以this就指向了这个新对象) C.执行构造函数中的代码 D.返回这个新对象 最后一点 ...
- jQuery源码-dom操作之jQuery.fn.html
写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...
- jQuery 源码解析二：jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
随机推荐
- jQuery中删除方法empty(),remove()和detach()的区别
empty():清空匹配的元素集合中所有的子节点,自身节点和事件都未被删除. remove():这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.但除了这个元素本身 ...
- 字符IO流
输入 FileReader的用法: 1. 找到目标文件 2. 建立数据的输入通道 3. 读取数据 4. 关闭资源 具体实例:从硬盘中读取文件 输出 FileWriter的使用步骤: 1. 找到目标文件 ...
- Tensorflow环境下安装Pandas
https://blog.csdn.net/fentone/article/details/78888136
- python入门（十六）：正则
1.正则:对一些字符串实现模糊的匹配 使用场景: 爬虫:例如,网页源码里面的url都提取出来.网页里面提取我们想要的数据 分析日志:例如,拿到所有的ip,看看哪些ip访问过我的网站 2.引入包 > ...
- paloalto防火墙接口使用方法及实例
1.获取账号相关的唯一API KEY windows:https://x.x.x.x/api/?type=keygen&user=username&password=password ...
- node重新加载模块
delete require.cache[require.resolve('module name')]; var my_module = require('module name');
- SQL Server数据库中的系统数据库？
SQL Server的系统数据库分为:master,model,msdb和tempdb 1.Master数据库 Master数据库记录SQL Server系统的所有系统级别信息(表sysobjects ...
- Qt跨平台开发Wince5.0和Android程序
所谓跨平台是指维护一份代码,可编译出多平台的应用程序.Qt这方面虽然已经做的不错,但性能还是体验,和原生开发工具开发的程序相比,差距还是不小的.但单从生产应用的角度来说,可以采用,不失为一种好的解决方 ...
- windows安装oracle遇INS 30131 错误
win2008 64位安装oracle 11.2.0.4也遇到INS 30131 错误 描述: 原因 - 无法访问临时位置. 操作 - 请确保当前用户具有访问临时位置所需的权限. 附加信息: - 所有 ...
- Linux服务器上监控网络带宽的18个常用命令 zz
Linux服务器上监控网络带宽的18个常用命令 本文介绍了一些可以用来监控网络使用情况的Linux命令行工具.这些工具可以监控通过网络接口传输的数据,并测量目前哪些数据所传输的速度.入站流量和出站流量 ...