模拟jquery底层链式编程
//特点1:快级作用域,程序启动自动执行
//内部的成员变量,外部无法访问(除了var)
//简单的函数链式调用
function Dog(){
this.run=function(){
alert("跑");
return this;
};
this.eat=function(){
alert("吃");
return this;
};
this.sleep=function(){
alert("睡");
return this;
}
};
var p1=new Dog();
p1.run().eat().sleep();
(function(window,undefined){
//$最常用的对象返回给外界,大型程序开发,一般使用'__'作为私有对象(规范)
function _$(arguments){
//实现代码
};
//在function上扩展一个可以实现链式编程的方法
Function.prototype.method=function(metName,fn){
this.prototype[metName]=fn;
return this; //链式编程关键
}
//在_$原型对象上加一些公共方法
_$.prototype={
const:_$,
addEvent:function(){
alert(11);
return this; //链式编程关键
},
setStyle:function(){
alert(22);
return this; //链式编程关键
}
}
//window上先注册一个全局变量,与外界产生关系
window.$=_$;
//写一个准备方法
_$.onReady=function(fn){
//1.实例化出来_$对象,真正注册到window上
window.$=function(){
return new _$(arguments);
}
//2.执行传进入的代码
fn();
//3.实现链式编程
_$.method('addEvent',function(){}).method('setStyle',function(){});
}
})(window); //程序的入口
/* $(function(){
//jquery代码
})*/
$.onReady(function(){
$("dd").addEvent().setStyle();
})
模拟jquery底层链式编程的更多相关文章
- jQuery支持链式编程,一句话实现左侧table页+常用筛选器总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery的链式编程风格
jQuery的链式编程风格 首先本人通过一个案例来展示jQuery的链式编程风格.先写一个页面,展示一个列表,代码如下: <body> <div> <ul class=& ...
- 原生JS实现jquery的链式编程。
这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...
- JQuery的链式编程,隐式迭代是啥意思?
链式编程 1.好处 "一句话,链式编程可以省去很多重复的代码." 这话什么意思呢?举个例子. /*设置obj对象的两个属性*/ //普通做法是这样的 obj.name = '小明' ...
- JQuery的链式编程与隐式迭代
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)
jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
- jQuery插件编写及链式编程模型
jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...
- 从零开始学 Web 之 jQuery(三)元素操作,链式编程,动画方法
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- file_get_contents url
file_get_contents (PHP 4 >= 4.3.0, PHP 5) file_get_contents — 将整个文件读入一个字符串 说明¶ string file_get_co ...
- laytpl--前端数据绑定
发现一枚前端数据绑定导弹:laytpl,官网:http://www.layui.com/laytpl/ 为了不用angularJS等较为重量级的,和繁琐的配置,所以就用了laytpl,可以配合JQ使用 ...
- linux 内核的各种futex
futex 设计成用户空间快速锁操作,由用户空间实现fastpath,以及内核提供锁竞争排队仲裁服务,由用户空间使用futex系统调用来实现slowpath.futex系统调用提供了三种配对的调用接口 ...
- WPF 自定义ColorDialog DropDownCustomColorPicker
今天分享一个 WPF 版的ColorDialog,该控件源自 这里,不过笔者已经该控件做了大量的修改工作,以适应自己的产品需求,闲话少说,先看看效果图: 1.DropDownCustomColorPi ...
- Docker - 在Windows7中安装Docker
安装docker 1 - Virtualization Support Check whether virtualization support is enabled at BIOS via HAV ...
- C#文件下载(适用于各个浏览器)
1.cs代码 public void DownFile(string filePath ,string fileName ) { // filePath 文件路径 例如:/File/记录.xlsx / ...
- Java学习笔记——设计模式之五.工厂方法
水边一只青蛙在笑 --石头和水 工厂方法模式(Factory Method),定义了一个用于创建对象的接口,让实现类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. 这里在简单和工厂的基础上 ...
- Python学习(一) —— matplotlib绘制三维轨迹图
在研究SLAM时常常需要对其输出的位姿进行复现以检测算法效果,在ubuntu系统中使用Python可以很好的完成相关的工作. 一. Ubuntu下Python的使用 在Ubuntu下使用Python有 ...
- 配置网络yum源
有的时候服务器需要下载一些软件,是本地yum源没有的,这时候需要配置网络yum源 #cd /etc/yum.repos.d/ 把这个目录下的配置文件备份,改名:或者是把文件里边的enabled=1的 ...
- xml注释快捷键
eclipse中编辑Java或C/C++文件时,注释的快捷键均为 "CTRL + / ",编辑xml文件时,该快捷键无效. eclipse XML 注释:CTRL + SHIFT ...