现在Jquery框架对于开发人员基本上是无人不知,无人不晓了,用起来十分的方便,特别是选择器十分强大,提高了我们的开发速度。但是好多人也只是停留在了会用的基础上,我个人觉得会用一个框架不算什么,只能说明你对那个框架比较熟悉,知道里面的思想和实现才是王道。有好多大牛对Jquery框架进行了剖析,今天我只是根据我的见解来分析一下。

一段代码如下:

        (function (win) {
var _$ = function (selector, context) {
return new _$.prototype.Init(selector, context);
}
_$.prototype = {
Init: function (selector, context) {
this.elements = [];
var context = context || document;
if (context.querySelectorAll) {
var arr = context.querySelectorAll(selector);
for (var i = 0; i < arr.length; i++) {
this.elements.push(arr[i]);
}
}
////这一块是选择器的实现,没有写完,可以自己实现
},
each: function (callback) {
if (this.elements.length > 0) {
for (var i = 0; i < this.elements.length; i++) {
callback.call(this, i, this.elements[i]);
}
}
}
}
_$.prototype.Init.prototype = _$.prototype;
window.$ = _$;
})(window || global);

一般的我们写一个函数,调用的方法如下:

var   Demo=function(){

}

Demo.prototype= {

method:function(){

}

}

var   demo=new  Demo();//实例化Demo

之后我们可以调用method方法:

demo.method();

如果这样的话,我们每次都要实例化一下,才能调用里面的方法,岂不是有点儿烦?

我想直接这样调用:Demo().method();这样不是省了一段代码(哈哈,程序员都喜欢偷懒)。

那么我们再写一段代码:

var  demo=function(){

return  new  Demo();

}

然后就可以demo().method()这样调用了。

如果你理解了我讲的这个,相信下面的代码你就会明白了:

        var _$ = function (selector, context) {
return new _$.prototype.Init(selector, context);
}
接下来我们再看看_$.prototype.Init方法的扩展
              Init: function (selector, context) {
this.elements = [];
var context = context || document;
if (context.querySelectorAll) {
var arr = context.querySelectorAll(selector);
for (var i = 0; i < arr.length; i++) {
this.elements.push(arr[i]);
}
}
////这一块是选择器的实现,没有写完,可以自己实现
}
这里面有selector,context两个参数:
selector其实就是所谓的选择器符号了,我们是根据这个来找到dom节点对象的。
context就是我们所说的执行上下文了,通常都是document,这个是可选参数,只是为了以后的扩展。
然后我们要获取节点对象了
var arr = context.querySelectorAll(selector);
document.querySelector和document.querySelectorAll是w3c标准新加入的方法 ,是已经写好的选择器,但是ie8以下的版本不支持。
我们要优先查看有没有这个方法,有的话就直接用这个了。
没有就直接用document.getElementById,  document.getElementsByClassName(IE8以下不兼容,须扩展), document.getElementsByName,document.getElementsByTagName扩展了
(这个后面会讲具体实现)。
this.elements=[]保存查询出的dom节点对象。
然后说说each方法,这个其实是用回掉简化 elements的循环。
   each: function (callback) {
if (this.elements.length > 0) {
for (var i = 0; i < this.elements.length; i++) {
callback.call(this, i, this.elements[i]);
}
}
}

这些方法我们都实现了,但是有一个问题:怎么让Init方法的this.elements这个属性让$也能共享呢?他们的作用域不一样呢。

var _$ = function (selector, context) {
return new _$.prototype.Init(selector, context);
}
我们最终得想法其实是想用$().method()这种方式去对dom节点做事件绑定,动画效果,样式设置等等处理。 我们知道:如果让两个对象共享一个属性,那么有一个方法就是让他们的原型指向一致
那么,关键的一段代码上场了:
 _$.prototype.Init.prototype = _$.prototype;

这样之后我们就可以让_$和Init实现对elements的共享了。

Jquery框架的核心代码其实就是这些了。后面就可以对$进行方法扩展了。
今天就讲到这,有些说法不是很规范,但是应该能看懂,后面会陆续讲各个方法的具体实现。。。

 

 

小谈Jquery框架的更多相关文章

  1. [小北De编程手记] : Lesson 05 玩转 xUnit.Net 之 从Assert谈UT框架实践

    这一篇,本文会介绍一下基本的断言概念,但重点会放在企业级单元测试的相关功能上面.下面来跟大家分享一下xUnit.Net的断言,主要涉及到以下内容: 关于断言的概念 xUnit.Net常用的断言 关于单 ...

  2. 第二章 jQuery框架使用准备

    window常用属性: History:有关客户访问过的URL的信息 Location: 有关当前url的信息 常用方法: Confirm()将弹出一个确认对话框 open()在页面上弹出一个新的浏览 ...

  3. 教你三种jQuery框架实现元素显示及隐藏动画方式

    摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...

  4. 盘点用jQuery框架实现“for循环”的四种方式!

    摘要:分享在jQuery高级开发中对元素标签体的遍历常用的几种方法. 本文分享自华为云社区<盘点用jQuery框架实现"for循环"的四种方式!>,原文作者:灰小猿 . ...

  5. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  6. jQuery框架分析第一章: 第一个匿名函数

    我的jQuery版本为1.7* 这个版本代码比之前的版本优化了很多,结构也清晰了不少,就用最新的吧. 打开jQuery源代码 首先你能看到所有代码被一个 (function(window,undefi ...

  7. 【军哥谈CI框架】之入门教程之第二讲:分析CI结构和CI是怎么工作的

    [军哥谈CI框架]之入门教程之第二讲:分析CI结构和CI是怎么工作的   之入门教程之第二讲:分析CI结构和CI是如何工作的大家好!上一节,我们共同部署了一个CI网站,做到这一点非常简单,但是,亲们, ...

  8. jQuery框架的简单使用(H5)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 浅析jQuery框架与构造对象

    这是一些分析jQuery框架的文字    面向的读者应具备以下要求 1.非常熟悉HTML 2.非常熟悉javascript语法知识 3.熟悉javascript面向对象方面的知识 4.熟练使用jQue ...

随机推荐

  1. https连接的前几毫秒发生了什么

    在讨论这个话题之前,先提几个问题: 为什么说https是安全的,安全在哪里? https是使用了证书保证它的安全的么? 为什么证书需要购买? 我们先来看https要解决什么问题 (手机读者推荐移步ht ...

  2. html+ccs3太阳系行星运转动画

    做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转. 效果静态图: 动画中包括:太阳及各行星,运行轨道,行星公转动画. 先画好草图,设计好大小和位置,根 ...

  3. 在公有云AZURE上部署私有云AZUREPACK以及WEBSITE CLOUD(六)

    (六)在Website Cloud中添加site 1新建Website,并打开 使用前面创建的用户 newbee@waplab.com 登录租户Portal,新建一个website 新建完成后, 可以 ...

  4. C#开发微信门户及应用(33)--微信现金红包的封装及使用

    我在上篇随笔<C#开发微信门户及应用(32)--微信支付接入和API封装使用>介绍为微信支付的API封装及使用,其中介绍了如何配置好支付环境,并对扫码支付的两种方式如何在C#开发中使用进行 ...

  5. Java Servlet+Objective-c图上传 步骤详细

    一. Servlet 1.创建图片保存的路径 在项目的WebContent下创建一个上传图片的专属文件夹. 这个文件夹创建后,我们保存的图片就在该文件夹的真实路径下,但是在项目中是无法看到上传的图片的 ...

  6. Android的历史与花边

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 历史 现在的Android如日中天.每天150万部的Android设备被激活,全球 ...

  7. HTML+CSS项目开发总结

    好几天没更新博客了,刚实战完一个HTML+CSS的简单项目.经过几天的摸索,发现收益良多.之前只是单纯得写demo,看知识点,没有亲自实战项目.但实战过后才会了解,如何才能更好地提升自己的技术.针对这 ...

  8. C# 在Repeater 的ItemDataBound 如何转换e.Item.DataItem 的类型

    1.使用DataSet和DataTable绑定数据源时,用 DataRowView view = (DataRowView)e.Item.DataItem; 2.DataReader绑定数据源时,用 ...

  9. git与github安装、配置、pull、push

    操作系统是Ubuntu 16.04 LTS 64bit 1 安装git (1)安装 sudo apt-get install git-core (2)一些全局变量的初始化 在本地建立一个文件夹,然后做 ...

  10. Squirrel: 通用SQL、NoSQL客户端

    安装 配置数据库 配置驱动 配置连接 如果你的工作中,需要使用到多个数据库,又不想在多种客户端之间切换来切换去.那么就需要找一款支持多数据库的客户端工具了.如果你要连接多个关系型数据库,你就可以使用N ...