木灵鱼儿
阅读:2088
JS连缀语法
html部分:
<div id="box">id</div>
<input type="radio" name="sex" value="男" />
<p>标签</p><p>标签</p><p>标签</p><p>标签</p>
js连缀写法:
window.onload = function() {
$().getId('box').css('color','red').css('background','green');
$().getTagName('p').css('color','green').html('已修改').click(function() { alert('a')});
}
这里,使用了连缀的方式来获取元素,然后修改css,修改html内容,添加点击事件并且可以无限制的这样添加下去,那么这里就可以看出,在每个.xxx()的方法中肯定都会返回这个函数的本身,这样才可以无限制的.xxx(),因为你不可能getTagName()里面包含css(),然后css()里面包含css和html的方法,这是不可能的,所以只有返回这个初次调出的函数才对。
然后我们就开始写吧,一步步来:
function Base() {
this.getId = function(id) {
return document,getElementById(id); //这里返回对应的id元素
}
}
//由于后面我们还要修改css,所以我们要将这个对应的id元素保存在一个数组里,方便调用
function Base() {
this.elemrnts = [];
this.getId = function(id) {
this.elements.push(document,getElementById(id)); //将元素通过栈方法传入数组中
return this; //这里我们之前说了,在每个.xxx()的方法中肯定都会返回这个函数的本身,所以我们return出this。
}
this.css = function(attr,value) {
this.elements[0].style[attr] = value; //由于没有.attr的方法,不存在,原本style.color的写法要改成键对值的形式。
return this;
}
}
//这样我们可以模拟出两步了,getId('box').css('color','red');下面还要获取元素节点的集合,p元素节点,由于p元素获取是通过getElementsByTagName,他包含了很多个节点,为此我们还需要将他们的节点一个个出入elements中去,方便调用,那么既然elements中有多个节点,所以就不能用死的数组来修改css,一样也要一个个都修改,于是:
function Base() {
this.elemrnts = [];
this.getTagName = function(tag) {
var tags = doucment.getElementsByTagName(tag);
for(var i = 0;i<tags.length,i++){
this.elements.push(tags[i]); //将tags内的元素通过栈方法传入数组中
}
return this;
}
this.css = function(attr,value) {
for(var i = 0;i<this.elements.length;i++){
this.elements[i].style[attr] = value;
}
return this;
}
}
//这样p元素也是可以模拟出两步,于是我们开始调用一下:
window.onload = function() {
var base = new Base();
base.getId('box').css('color','red').css('background','green');
base.getTagName('p').css('color','green');
}
//然后你会发现color=green会覆盖color=red;原因是因为我们共用了一个构造函数中的数组,我们之前写的时候是将数组里的所有元素节点都做修改,所以我们还要改动一下,让他们不共用数组,那么就分别各运行一次new Base(),这样都分别创建了实例化对象了。
var $ = function() {
return new Base();
}
window.onload = function() {
//var base = new Base(); //不需要了
$().getId('box').css('color','red').css('background','green');
$().getTagName('p').css('color','green');
}
//剩下就很简单得了,只需要将对于的方法写入构造函数中,数组有多个元素,就用for语句循环,然后再一个个添加就行了,然后事情还没有结束,我们要考虑到如果有很多的地方都要调用.css的方法,我们分别new出来的实例化对象都会自带一个css方法,但是这样就很冗余了,因为.css方法是一样的,没必要个个都自带,可以共用啊,所以这里还要用到构造函数中的原型。
//于是改造如下:
function Base() {
this.arr = [];
this.getId = function(id) {
this.arr.push(document.getElementById(id));
return this;
}
this.getTagName = function(tag) {
var tags = document.getElementsByTagName(tag);
for(var i = 0;i<tags.length;i++){
this.arr.push(tags[i]);
}
return this;
}
}
Base.prototype.css = function(attr,value) {
for(var i = 0;i<this.arr.length;i++){
this.arr[i].style[attr] = value;
}
return this;
}
Base.prototype.html = function(str) {
for(var i = 0;i<this.arr.length;i++){
this.arr[i].innerHTML = str;
}
return this;
}
Base.prototype.click = function(fn) {
for(var i = 0;i<this.arr.length;i++){
this.arr[i].onclick = fn;
}
return this
}
//通过共有的原型来调用相同的方法,节省资源,于是,连缀方法大概就介绍到这里了。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
屏蔽属性
前言对于js的原型链继承,大部分都是知道的,但是对于以下内容,很多人可能并不清楚或者理解不完整,那就是屏蔽属性。什么是屏蔽属性,其实这个功能来源于面向对象语言中的多态,表示父级定义的属性,在子级可以自己扩展,虽然属性名相同,但是功能却可以不同。由于js的继承,它不像强类型语言是完全的复制,js对于继承是通过原型链的方式,当子级没有的情况下会通过在原型链上查找。那么子级如果需要覆写某一个属性,显然它是绝对不能直接修改原型链上的内容,这回导致所有继承的子类产生问题,这显然是不合适的。于是就有了屏蔽属性,当子级去覆写一个原型上存在的属性时,其实并不会去修改原型链的属性,而是给子级自己添加一个对...
第二章 字面量与构造函数
前言JavaScript中可以使用字面量的形式去声明对象,相比较使用构造函数去声明,更加准确且不容易出错,代码也更加简洁,这里讨论常见的类型中,为什么基于字面量的形式更加可取。对象字面量当我们考虑创建一个键-值对哈希表时(在其他语言被称为关联数组),我们可以从一个“空”对象开始,然后再根据需要向其添加所需要的内容,对于按需对象创建方式而言,对象字面量表示法是一种非常理想的选择方法。var dog = {}; dog.name = "jingmao"; dog.getName = function() { return dog.name; } //删除和复写也...
JavaScript里面继承是怎样实现的?如何避免原型链上的对象被共享?
JavaScript里面继承是怎样实现的?最简单的就是通过原型链继承,然后衍生出几种方法:构造函数继承、组合继承、原型式继承、寄生继承、寄生组合式继承。function Box() { this.name = "鱼儿", this.age = 666 } Box.prototype.run = function(){ return this.name; } function Pox() { this.run = function() { alert(this.name + this.age); } } Pox.prototype = ne...
对象与原型的继承组合模式中仿冒和继承不会冲突吗?
代码部分:function Box(name) { this.name = name; this.famil = ['爷爷','奶奶','爸爸','妈妈']; }; Box.prototype.run = function() { return this.name + this.famil; }; function Desk(name) { Box.call(this,name); }; Desk.prototype = new Box(); 通过对象仿冒,将Box的属性仿冒到Desk中,这样就可以传入参数,也可以算是继承了,但是后面我们又通过Des...
关于面向对象判断是否原型属性的疑问
首先我们需要创建一个构建函数,并为它添加一个实例属性(实例就是被运行的函数)。function Box() {}; var box1 = new Box(); box1.name = 'mu'; 每个函数都会有一个原型,原型里的数据是共享的,多个变量box1运行同一个函数Box(),这个Box()函数原型中的数据是共有的,并且引用地址相同。加上就近原则,当实例属性中有对应的属性,会优先调用实例属性,如果没有,就会去原型中查找。那么我们要去判断这个属性是实例中的属性还是原型中的属性,有两个判断语法:hasOwnProperty() / inhasOwnProperty()是判断属性是否存在...