Jquery框架
现在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就是我们所说的执行上下文了,通常都是window,这个是可选参数,只是为了以后的扩展。
然后我们要获取节点对象了
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框架的更多相关文章
- 小谈Jquery框架
现在Jquery框架对于开发人员基本上是无人不知,无人不晓了,用起来十分的方便,特别是选择器十分强大,提高了我们的开发速度.但是好多人也只是停留在了会用的基础上,我个人觉得会用一个框架不算什么,只能说 ...
- jQuery框架分析第一章: 第一个匿名函数
我的jQuery版本为1.7* 这个版本代码比之前的版本优化了很多,结构也清晰了不少,就用最新的吧. 打开jQuery源代码 首先你能看到所有代码被一个 (function(window,undefi ...
- jQuery框架的简单使用(H5)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 浅析jQuery框架与构造对象
这是一些分析jQuery框架的文字 面向的读者应具备以下要求 1.非常熟悉HTML 2.非常熟悉javascript语法知识 3.熟悉javascript面向对象方面的知识 4.熟练使用jQue ...
- 引用jquery框架后出错
问题描述:当引用了jquery框架后,页面的js不能正常工作. 后面我的解决办法:是因为在引用 jquery的框架时的代码为 <script type="text/javascript ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- jQuery系列 第八章 jQuery框架Ajax模块
第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求.接收服务器端的响应以及执 ...
- jQuery系列 第七章 jQuery框架DOM操作
第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...
随机推荐
- Flex列在一个表格式的数字值
1.问题背景 一般的.表格中展示的比率.对照率的处理是:保留两位小数,并向上保留 2.实现实例 <? xml version="1.0" encoding="utf ...
- idea_intellij
近期要研读和调试spark2,用eclispe据说各种问题,so还是切换到 intellij 1:下载 (官网自行下载最新版本) 2: 注册码 intellij idea 2016 activati ...
- C#关于HttpClient的应用(一):获取IP所在的地理位置信息
public class IpHttpClient:BaseHttpClient { private String appKey; private const string HOST_PATH = & ...
- SSAS系列——【06】多维数据(创建Cube)
原文:SSAS系列--[06]多维数据(创建Cube) 1.文件类型说明 项目定义文件 (.dwproj).项目用户设置 (.dwproj.user).数据源文件 (.ds).数据源视图文件 (.ds ...
- Windows 注册和取消注册一个dll或者ocx
原文:Windows 注册和取消注册一个dll或者ocx 一.DLL是什么 DLL,是Dynamic Link Library 的缩写形式,中文名称为动态链接库. DLL是 ...
- 修改vim/terminal配色
http://blog.csdn.net/angle_birds/article/details/11694325
- 表单验证 jquery-validation
表单验证首选:jquery-validation 参见 http://jqueryvalidation.org/ 下载之后 在 demo 的index 页面有各种API 详细的案例. 还可以参考 h ...
- JavaScript随记汇总
1.<script>标签嵌套,浏览器无法正常解析的问题: 百度知道回答 <script>FTAPI_slotid = 1007894;FTAPI_sync = true< ...
- Magicodes.NET框架
Magicodes.NET框架之路——让代码再飞一会(ASP.NET Scaffolding) 首先感谢大家对Magicodes.NET框架的支持.就如我上篇所说,框架成熟可能至少还需要一年,毕竟 ...
- 远程调用之RMI技术
---恢复内容开始--- RMI已经不是什么新的技术了,但是相对于webservice来说,rmi比较简单,比较适合一些小的应用,下面的helloword列子可以介绍rmi的相关技术 服务器端代码: ...