(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解读的更多相关文章

  1. jQuery源码笔记(一)：jQuery的整体结构

    jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...

  2. jquery源码解读

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能 ...

  3. jQuery源码中的“new jQuery.fn.init()”什么意思？

    所有文章搬运自我的个人主页:sheilasun.me 引子 最近打算试试看看jQuery的源码,刚开个头就卡住了.无论如何都理解不了jQuery源码入口部分中的 return new jQuery.f ...

  4. jQuery源码分析之整体框架

    之前只是知道jQuery怎么使用,但是我觉得有必要认真的阅读一下这个库,在分析jQuery源码之前,很有必要对整个jQuery有个整体的框架概念,才能方便后面对jQuery源码的分析和学习,以下是我总 ...

  5. 三.jQuery源码解析之jQuery的框架图

    这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...

  6. 读jQuery源码之整体框架分析

    读一个开源框架,大家最想学到的就是设计的思想和实现的技巧.最近读jQuery源码,记下我对大师作品的理解和心得,跟大家分享,权当抛砖引玉. 先附上jQuery的代码结构. (function(){ / ...

  7. jQuery源码解读----part 2

    分离构造器 通过new操作符构建一个对象,一般经过四步: A.创建一个新对象 B.将构造函数的作用域赋给新对象(所以this就指向了这个新对象) C.执行构造函数中的代码 D.返回这个新对象 最后一点 ...

  8. jQuery源码-dom操作之jQuery.fn.html

    写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...

  9. jQuery 源码解析二：jQuery.fn.extend=jQuery.extend 方法探究

    终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...

随机推荐

  1. C#生成树形结构泛型类

    C#生成树形结构泛型类,使用方法: ToTree<ShowMessageUpdatesTableTreeViewModel>.ToDo(models) public class ToTre ...

  2. jquery遍历----end()方法

    定义和用法 end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态. 举个栗子: <body> <ul class="first"> ...

  3. 字符IO流

    输入 FileReader的用法: 1. 找到目标文件 2. 建立数据的输入通道 3. 读取数据 4. 关闭资源 具体实例:从硬盘中读取文件 输出 FileWriter的使用步骤: 1. 找到目标文件 ...

  4. Linux 标准输入输出、错误输出、重定向标准输出

    再来看看 >& 操作符: 重定向操作符 描述 > 将命令输出写入到文件或设备(如打印机),而不是命令提示符窗口或句柄. < 从文件而不是从键盘或句柄读入命令输入. >& ...

  5. Vue-Router导航守卫：

    有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程:全局的, 单 ...

  6. vue实例

    <!--需求: 背景图片,进度条,减和重置按钮 进度条填满红色,值为100%,点击减时,进度条依次减十,减到0时换一张背景图片,减按钮消失,点击重置按钮时,进度条重新填满红色-->效果图: ...

  7. 简单搭建一个SpringBoot

    1.SpringBoot下载 https://start.spring.io/ 选择工程类型,编译语言,版本,工程名称,需要支持组件等:选择好了以后点击生成项目. 之后会下载一个压缩文件,解压之后导入 ...

  8. 通过微信公众号API复制公众号自定义菜单同时增加子菜单方法

    主要的原因是再不破坏公众号以前的菜单的基础上增加自定义菜单,主要步骤如下: 1.通过微信提供的微信公众平台接口调试工具获取公众号的所有自定义菜单 网址:https://mp.weixin.qq.com ...

  9. MySql中order by和union all同时使用

    () UNION ALL () 两边的语句加上括号就可以了

  10. IIS启动应用程序池报错"服务无法在此时接受控制信息"

    用管理员方式打开命令行 输入命令netsh winsock reset 这个命令在百科上的解释是 netsh winsock reset命令,作用是重置 Winsock 目录.如果一台机器上的Wins ...