连缀功能
2015-06-13 13:47
239 查看
一下都是我自己对代码的理解,但也是我自身也是弱菜一枚,很多地方可能理解有错,也希望大神们帮我指正。。我也会定期发错误总结写成博客!
所用代码为李炎恢老师博客前端代码!!!!
$().getId(‘box’).css(‘color’, ‘red’).html(‘标题’).click(function(){alert(‘a’)});
这段代码就是连缀功能。。很多人第一反正肯定是觉得很直观,清楚明了简洁,但为什么可以这么写呢。。
我们知道。在javascript中对象是有方法的,我们就把这每一个类似css(‘color’, ‘red’)当成为一种方法不就可以调用了么。。而css(‘color’, ‘red’)返回一个对象。这样我们就可以接着调用之后的方法了。。
那么既然知道这点。我们该如何写呢。肯定会想到写一个构造函数然后向其中加入各种方法。那我们就来看一下
先写几个最基本的功能吧。获取ID之后给其CSS样式
这样我们需要new一个对象来用其中的方法但是呢。我们所有的方法都放在构造函数里,不方便看和整理,所以我们不如分离出来,那如何分离呢。。这时我们就会想到原型函数
这样呢我们就可以和以前一样调用了,而且十分清楚每个方法是什么。但问题来了。。原型的弊端,那就是共享 也就是第一个代码中的this.elements=[]; ,也就是说如果我们其他方法需要用到this.elements[]那么所有的方法中的都会发生变化(例如设置背景颜色,就不在这举例了),,所以我们要将这个代码分离出来,那如何分离呢,我们可以这样想,在每次创建对象的时候就创建一个数组。可以是吧
这样我们每次调用这个方法就会新建一个数组。。这样就不会共享咯哟~~
那么我们也就实现了
第一次写,可能逻辑上还有些问题,希望广大看友留下意见。我慢慢改正
所用代码为李炎恢老师博客前端代码!!!!
$().getId(‘box’).css(‘color’, ‘red’).html(‘标题’).click(function(){alert(‘a’)});
这段代码就是连缀功能。。很多人第一反正肯定是觉得很直观,清楚明了简洁,但为什么可以这么写呢。。
我们知道。在javascript中对象是有方法的,我们就把这每一个类似css(‘color’, ‘red’)当成为一种方法不就可以调用了么。。而css(‘color’, ‘red’)返回一个对象。这样我们就可以接着调用之后的方法了。。
那么既然知道这点。我们该如何写呢。肯定会想到写一个构造函数然后向其中加入各种方法。那我们就来看一下
function Base(){ this.elements=[]; //用数组来保存获得的节点 this.getId=function(id){ this.elements.push(document.getElementById(id)); //把获取的节点放入数组里 return this; }; this.css=function(attr,value) { for(vari= 0;i<this.elements.length;i++) { this.elements[i].style[attr]= value; } return this; } }
先写几个最基本的功能吧。获取ID之后给其CSS样式
这样我们需要new一个对象来用其中的方法但是呢。我们所有的方法都放在构造函数里,不方便看和整理,所以我们不如分离出来,那如何分离呢。。这时我们就会想到原型函数
Base.prototype.css=function(attr,value) { for(vari= 0;i<this.elements.length;i++) { //如果获得的是tagName可能有很多就需要循环 this.elements[i].style[attr]= value; } return this; }
这样呢我们就可以和以前一样调用了,而且十分清楚每个方法是什么。但问题来了。。原型的弊端,那就是共享 也就是第一个代码中的this.elements=[]; ,也就是说如果我们其他方法需要用到this.elements[]那么所有的方法中的都会发生变化(例如设置背景颜色,就不在这举例了),,所以我们要将这个代码分离出来,那如何分离呢,我们可以这样想,在每次创建对象的时候就创建一个数组。可以是吧
var $=function(){ return new Base(); };
这样我们每次调用这个方法就会新建一个数组。。这样就不会共享咯哟~~
那么我们也就实现了
$().getId('box').css('color', 'red')
第一次写,可能逻辑上还有些问题,希望广大看友留下意见。我慢慢改正
相关文章推荐
- GridControl详解(六)样式设置
- 最怕外行人说内行话
- [Q]如何将图纸打印为黑白的及设置打印样式
- SlidingMenu 常用属性
- Android开发中 .9.png格式图形设计:
- 倍福提供的EtherCAT从站代码包解析
- opencl初步基本理解
- json2.js参考
- 第十四周项目2——【项目2-用文件保存的学生名单】
- Java 打开文件的两种方式
- Windows7在自由的虚拟机(微软官方虚拟机)
- jquery实现简单的自动播放幻灯片效果
- iPlayer项目开发
- C#Winform使用扩展方法自定义富文本框(RichTextBox)字体颜色
- 关于TI sysbios 的SWI
- opencl上下文
- spi驱动框架分析
- const修饰问题
- oracle union 注入工具
- HTML在Select具体的使用说明