手写 jQuery 框架
1.测试页面;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手写jQuery框架</title>
<style type="text/css">
*{margin: 0px;padding: 0px;font-family: "微软雅黑";}
.box{width: 300px;height: 300px;border:1px solid #ddd;margin: 50px auto;padding: 20px;}
.header{height: 40px;}
.header span{display: block;width: 80px;height: 40px;text-align: center;line-height: 40px;color: #fff;background-color: blue;float: left;margin-left: 50px;font-size: 14px;cursor: pointer;}
.conter{height: 240px;background: #abcdef;margin-top: 20px;}
</style>
<script src="js/jquery-1.2.0.js"></script>
</head>
<body>
<div id="box" class="box">
<div class="header">
<span class="star">开启</span>
<span class="end">关闭</span>
</div>
<div class="conter"></div>
</div>
<script type="text/javascript">
// $(function() { // window.onload只能出现一次 $(function(){})可以出现多次
// alert(1);
// }); // $(function() { // window.onload只能出现一次 $(function(){})可以出现多次
// alert(2);
// }) // javascript 语言的设计原理 // console.log($("#box")); // console.log($(".end")); $(".star").click(function(){
alert(1);
}); // jquery对象 event属性 element对象
</script>
</body>
</html>
2.理论分析：
/**
* 忍者秘籍
* 函数 对象 面向对象 设计原理
* 简化DOM操作 ajax请求
* 从对象开始
* js 基于原型的面向对象语言
* 注：不存在独立的函数,所有的函数必须是某个对象的方法
* $('#box') jQuery对象
* $('#box').animate() //对象
*/ /*创建自运行函数(闭包) $*/
// 方法一：将自运行函数赋值给一个变量,通过运行自运行函数获取返回值
/*var jQuery = (function(){
return "$"; //
})(); // 调用 返回值 alert(jQuery); // 获取自运行函数的返回值*/ // 方法二：在自运行函数中再声明一个函数(构造函数)
/*(function(window){ // 参数 window
function jQuery(){ // 在jQuery()函数中封装document对象
//
}
function $(){
new jQuery(); // new一个jquery实例
}
window.jQuery = window.$ = $;// 将 $ 挂载在 window.$ 上
})(window); // 传参 window $(); // 调用$()方法*/ /**
* 面向对象
* 封装 继承 多态
* 通过构造函数 定义 类
* 通过类 创建 实例对象
* 通过实例对象 调用 方法(方法不能独自调用,需要通过对象调用)
*/
function Person(){
// 如果将Person()作为普通函数看待,Person() 就是一个 function对象, 我们关注其返回值
// 如果将Person()作为构造函数看待,Person() 就是一个 类, 我们关注 通过new创建Person的实例对象 this.name = 'Tom'; // 在构造函数中,this指向实例对象
this.sun = function() {
// body...
}
} var a = new Person(); // 创建实例对象
console.log(a.name); // 所有的数据类型都是对象
// function Function 通过字面量的写法,创建function的实例对象
3.实现;
jQuery-1.1.0.js
/**
* 通过$进行驱动
* 通过类 封装属性和方法
* 对象与类之间就是一个继承的过程,实例对象会继承类封装的属性和方法
* 不是通过extend关键字而是通过prototype属性来继承(将属性和方法封装在原型对象中)
* 构造函数有一个prototype属性,该属性指向当前构造函数的prototype的原型对象
*/
// 注：原型对象继承 与 this关键字继承 之间的区别 function jQuery(arg){ // 构造函数 本质而言,jQuery是Function的实例对象,拥有prototype、agruments、this等属性
this.event = []; // this指向当前所创造的实例对象 对象上面来进行添加 复制(继承)
// 判断arg类型
switch(typeof arg){
case "function":
// window.onload = arg; // 绑定window.onload事件
myAddevent(window,"load",arg);
break;
case "string": // 3中结果 $(".box") $("#box") $("span")
// 判断字符串首字符
switch(arg.charAt(0)){ // 将arg作为对象
case "#":
// 注:将element对象转换为jquery对象
var obj = document.getElementById(arg.substring(1)); //#box 去掉# element对象
// 将element对象方法数组中,转换成jquery对象
this.event.push(obj);
break;
case ".":
// 适配的设计模式
this.event = getClass(document,arg.substring(1)); // 去除.
break;
default: // 其他情况
break;
}
break;
case "object":
break;
}
} function $(arg){ // arg 代表任意的类型
return new jQuery(arg);
} // 给函数绑定事件
function myAddevent(obj,sev,fn){ // 参数1：对象,参数2；绑定的事件,参数3：绑定的函数
// 低版本浏览器兼容处理
if(obj.addachEvent){ // 当前传入的obj支持addachEvent()方法
obj.addachEvent("on"+sev,fn); // 参数1：事件绑定的类型,参数2：要绑定的函数
}else{
obj.addEventListener(sev, fn, false); // 参数1：事件类型,参数2：回调函数,参数3：事件的捕获
}
} // 查到当前文档指定的class名称的元素
function getClass(ohtml,oclass){// 参数1：所有的元素 参数2：指定的class
// 遍历所有的元素 查找指定的class
var myElement = ohtml.getElementsByTagName("*"); // 获得当前所有的元素
var result = []; // 定义结果数组
for(var i=0;i<myElement.length;i++){
if(myElement[i].className == oclass){ // 依次判断所选值 与 传值 是否相等
result.push(myElement[i]); // 放入结果数组
}
}
return result;
} // css eq click
jQuery.prototype = {
// 在原型对象中写规则
click:function(fn){ // 传入function参数
for(var i=0;i<this.event.length;i++){
// 给所有的element对象绑定事件
myAddevent(this.event[i],"click",fn); // 调用事件绑定函数
}
}
};// 通过jQuery的prototype属性,指向原型对象 // Element.addEventListener(load, fn, false); // 参数1：事件类型,参数2：回调函数,参数3：事件的捕获 // console.log($().__proto__); // __proto__ 是每个对象都有的隐藏属性,它指向原型对象,指向它的构造函数(也就是它的类) 此处执行当前的jQuery /**
* 1.$(".box") $("#box") $("span") 通过字符串查找
* 2.$(this) 通过关键字查找
* 3.$(function(){}) 传递函数
*/
$(function(){ // 相当于 window.onload });// 页面加载完毕,回调的函数 // 类 进行封装
// prototype 进行继承 // var a = new jQuery();
// alert(a.event);
.
手写 jQuery 框架的更多相关文章
- 手写DAO框架（三）-数据库连接
-------前篇:手写DAO框架(二)-开发前的最后准备--------- 前言 上一篇主要是温习了一下基础知识,然后将整个项目按照模块进行了划分.因为是个人项目,一个人开发,本人采用了自底向上的开 ...
- 手写DAO框架（二）-开发前的最后准备
-------前篇:手写DAO框架(一)-从“1”开始 --------- 前言:前篇主要介绍了写此框架的动机,把主要功能点大致介绍了一下.此篇文章主要介绍开发前最后的一些准备.主要包括一些基础知识点 ...
- 手写DAO框架（一）-从“1”开始
背景: 很久(4年)之前写了一个DAO框架-zxdata(https://github.com/shuimutong/zxdata),这是我写的第一个框架.因为没有使用文档,我现在如果要用的话,得从头 ...
- 手写DAO框架（四）-SQL执行
-------前篇:手写DAO框架(三)-数据库连接--------- 前言 通过上一篇写的方法,可以灵活的获取.释放数据库连接,拿到连接之后,我们就可以执行sql了!所以,本篇介绍的就是SQL执行器 ...
- (二)springMvc原理和手写springMvc框架
我们从两个方面了解springmvc执行原理,首先我们去熟悉springmvc执行的过程,然后知道原理后通过手写springmvc去深入了解代码中执行过程. (一)SpringMVC流程图 (二)Sp ...
- 手写RPC框架指北另送贴心注释代码一套
Angular8正式发布了,Java13再过几个月也要发布了,技术迭代这么快,框架的复杂度越来越大,但是原理是基本不变的.所以沉下心看清代码本质很重要,这次给大家带来的是手写RPC框架. 完整代码以及 ...
- 手写SpringMVC 框架
手写SpringMVC框架 细嗅蔷薇 心有猛虎 背景:Spring 想必大家都听说过,可能现在更多流行的是Spring Boot 和Spring Cloud 框架:但是SpringMVC 作为一款实现 ...
- 手写Spring框架，加深对Spring工作机制的理解！
在我们的日常工作中,经常会用到Spring.Spring Boot.Spring Cloud.Struts.Mybatis.Hibernate等开源框架,有了这些框架的诞生,平时的开发工作量也是变得越 ...
- 要想精通Mybatis？从手写Mybatis框架开始吧！
1.Mybatis组成 动态SQL Config配置 Mapper配置 2.核心源码分析 Configuration源码解析 SqlSessionFactory源码解析 SqlSession源码解析 ...
随机推荐
- 杭电oj2072
因为一直不能ac先发这里,希望有看到的大佬能指点一二. 先讲一下我的基本思路,首先将一整行数据保存在数组中,接着遍历数组,根据空格将每个单词存入二维数组中,最后遍历二维数组,找出其中不同的单词并计数. ...
- 《Linux命令、编辑器与shell编程》第三版 学习笔记---002
<Linux命令.编辑器与shell编程>第三版 学习笔记---001 Linux命令.编辑器与shell编程 Shell准备 1.识别Shell类型 echo $0 echo $BAS ...
- 《Linux命令行与shell脚本编程大全 第3版》高级Shell脚本编程---47
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
- ES6 - Babel编译环境搭建
都看到这里了,我就不写什么node环境安装之类的了. 直接从新建项目文件夹后开始吧! 安装依赖: 命令行cd到项目文件夹之后,执行以下命令:(mac记得前边加sudo) npm init –y // ...
- 有个人想上一个n级的台阶，每次只能迈1级或者迈2级台阶，问：这个人有多少种方法可以把台阶走完？
有个人想上一个n级的台阶,每次只能迈1级或者迈2级台阶,问:这个人有多少种方法可以把台阶走完? 相关问题: (1)有个人想上一个n级的台阶,每次只能迈1级或者迈2级台阶,问:这个人有多少种方法可以把台 ...
- Selenium2+python自动化15-select下拉框【转载】
前言最近由于工作原因,更新慢了一点,今天终于抽出一点时间给大家继续更新selenium系列,学习的脚本不能停止,希望小伙伴能多多支持. 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的 ...
- python爬虫beautifulsoup4系列2【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/beautifulsoup4/ 前言 本篇详细介绍beautifulsoup4的功能,从 ...
- java使用BeanUtils封装file类型表单数据到一个对象中
package com.cc.web.servlet; import java.io.FileOutputStream; import java.io.IOException; import java ...
- SimpleDateFormat格式
SimpleDateFormat函数语法: G 年代标志符 y 年 M 月 d 日 h 时 在上午或下午 (1~12) H 时 在一天中 (0~23) m 分 ...
- MySQL性能指标及计算方法 等待show processlist
http://www.cnblogs.com/cyt1153/p/6697847.html http://www.cnblogs.com/cyt1153/tag/mysql/