模拟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 ...
随机推荐
- JS设计模式之---单例模式
单例模式是保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式在现在面向对象的语言Java,C#,C++等等中也有很多用到,其实它在Javascript中使用同样非常广泛. var Cre ...
- ETL开发面试问题加吐槽加职业发展建议
写在前面: 作为甲方,对于乙方派来的开发人员,我是会自己面一下.总体来说遇到的水平不一,于是经过这三年多的面(cui)试(can),总结了一套自己的面试套路,中间也遇到过很多想吐槽的东西,于是大概记录 ...
- 被低估的选手 - JavaFx
被低估的选手 - JavaFx 1.MFC(Visual C++) 个人不是很喜欢这个框架,太多系统定义的东西,就像无底洞,学都学不完,这个东西需要你有比较强的记忆力,并且能融会贯通里面很多预定义的功 ...
- coding.net及git的使用方式
一般部分测试的公司里可能会用到代码管理工具,这里可能不得不推荐coding.net和git这个工具,类似于svn,不过用命令行的情况多点 这里简单介绍下 1.建立coding.net 首先新建一个co ...
- 关于MAC设置免费的动态壁纸
首先大部分的动态壁纸都是收费的或者是已经固定的,其实这一款也是固定的 但是这个固定的是可以进行修改的 第一先在App Store下载 LiveDesktop Pro 这一款是免费的 然后下载后进行打 ...
- PHP三维数组拼装
foreach ($records as $k => $v) { foreach ($records as $m => $n) { if ($v['days'] == $n['days'] ...
- Numpy的使用
Numpy的主要功能: 可以观察以上的规律,会发现,代码类型的简写,计量都是以8作为起始1的. # -*- coding: utf-8 -*- #向量相加-Python def pythonsum(n ...
- linux下实时监测命令运行结果工具:watch
watch是一个非常实用的工具,可以实时监测一些经常变化的命令结果或文件,而不需要手动一次一次的输入命令. 语法: watch [选项] [命令参数] 选项: -n :指定刷新间隔时间,默认2秒. - ...
- 成熟的C#网络通信框架介绍——ESFramework通信框架
(转自:http://www.cnblogs.com/zhuweisky/archive/2010/08/12/1798211.html) ESFramework通信框架是一套性能卓越.稳定可靠.强大 ...
- 用react系列技术栈实现的demo整合系统
引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果‘课后’适当地进行总结,必然更快地提升自己的水平. 由于公司采用的react+node的技术 ...