jQuery太大了,觉得挺实用的,但是我水平很菜,用不到那么多的功能,只需要用几个简单的功能:设置样式,设置属性,添加元素。一直没有时间做,这次利用制作项目的机会,顺便写出来了。
做了一个简单的DOM对象的包装,增加了几个简单的方法,常用的。类似jQuery的链式操作。
没做错误处理。方法:attr,append,appendTo,html,css。
$c创建对象之后,就可以使用这些方法。
function extend(obj){
(function(){
this.append=function(obj){
this.appendChild(obj);
return this;
}
this.appendTo=function(obj){
obj.appendChild(this);
return this;
}
this.attr=function(a,b){
if(a instanceof Object){
for(var x in a){
this.setAttribute(x,a[x]);
}
}else{
this.setAttribute(a,b);
}
return this;
}
this.css=function(a,b){
if(a instanceof Object){
for(var x in a){
this.style[x]=a[x];
}
}else{
this.style[a]=b;
}
return this;
}
this.html=function(str){
if( typeof str =='undefined')return this.innerHTML;
this.innerHTML=str;
return this;
}
}).apply(obj);
return obj;
}
function $c(str){return extend(document.createElement(str));}
使用时可以对某个html对象使用extend方法。然后该对象就可以进行链式操作。
实现的思路是通过apply 用 要包装的对象替换了函数中的this对象。使得该对象拥有了那些this写的方法。
今天看了别人实现的JS链式操作,感觉更精炼一些。(来自JSMIX
)
(function(){
function _$(id){
this.ele = document.getElementById(id);
}
_$.prototype = {
setColor : function(c){
this.ele.style.color = c;
return this; // Important
},
setBold : function(){
this.ele.style.fontWeight = "bold";
return this; // Important
}
/** 更多方法 **/
}
window.$ = function(id){
return new _$(id);
}
})();
通过 prototype关键字 修改对象原型 来实现链式操作。prototype和apply经常被用来作比较,比如模仿继承特性。不过我不喜欢prototype。。。害怕出现别的问题。
分享到:
相关推荐
jQuery的链式操作是其设计模式中的一个...总之,jQuery的链式操作提供了一种优雅的方式来组织代码,特别是在处理DOM操作和异步任务时。然而,何时使用链式操作应根据具体需求和场景来判断,确保代码的可维护性和性能。
本文将深入探讨链式编程的概念、优点、实现方式以及在实际开发中的应用。 链式编程的核心思想是让函数返回对象自身,这样就可以连续调用同一对象上的多个方法,形成一个“链”。在JavaScript中,如果一个方法的...
链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用。 this的作用域链,jQuery的实现方式,通常链式调用都是采用这种方式。 返回对象本身, 同this的区别就是显示返回链式对象。 ...
jQuery对象的链式操作是一种非常高效的编程方式,它可以让开发者将多个jQuery方法连续调用,使代码更加简洁、易于理解。这种操作方法不仅减少代码量,还能够提升执行效率,因为在链式调用中,多个方法共享同一个...
在链式存储结构中,基本操作的实现主要有以下几种: * InitList_Link0120(LinkList0120 &L):创建一个空的链式存储结构 * ListInsert_Link0120(LinkList0120 &L, int i, ElemType e):在链式存储结构中插入一个新的...
总结一下,React Native中原生模块向JS传递数据主要有三种方式:Callbacks、Promises 和 Event Emitter。Callbacks是最基础的异步处理方式,Promises 提供了更优雅的错误处理和链式调用,而Event Emitter则允许模块...
在jQuery库中,链式操作是一种非常强大的特性,它允许开发者在一个对象上调用多个方法,而无需反复引用该对象。这种高效的方式可以显著提高代码的可读性和简洁性。本篇文章将深入探讨jQuery链式操作的正确使用方法,...
在JavaScript中,可以使用链式调用来实现责任链。 - 状态模式:允许对象在内部状态改变时改变其行为,看起来好像对象改变了它的类。在JavaScript中,可以使用条件语句或策略模式来实现状态管理。 - 命令模式:将...
链式结构序列化主要涉及到JavaScript中的几种核心结构,包括条件语句、函数以及数组操作。在JavaScript中,链式结构代码无处不在,例如,我们经常使用链式调用的方式处理DOM元素,或者使用jQuery库来实现链式调用。 ...
本篇文章将重点讨论线性表的链式表示方法,以及如何使用JavaScript(JS)来实现这一数据结构。 链式存储结构的主要优点在于它不依赖元素的物理位置,而是通过节点间的引用关系来组织数据。在链式表示的线性表中,每...
JavaScript链式调用是一种常见的编程技巧,特别是在使用jQuery或类似的库时,它使得代码更加简洁易读。在JavaScript中,链式调用是通过在对象的方法中返回对象本身来实现的,这允许开发者在一个表达式中连续调用多个...
对于初学者来说,理解这两种实现方式有助于提高JavaScript基础和DOM操作能力。原生JavaScript更适合深入学习和定制,而jQuery则提供了快速实现轮播图的途径。在实际项目中,可以根据需求和团队技能选择合适的方法。...
JavaScript中的链式延迟执行是一种设计模式,常用于创建异步执行流程,特别是在处理DOM操作时。这种模式允许我们在代码中创建一系列任务,并按照特定顺序依次执行,同时保持代码的整洁和可读性。在给定的例子中,...
本篇文章将详细探讨jQuery的几种使用方法,帮助你更好地理解和运用这一强大的工具来提升网页设计的效率和用户体验。 1. **DOM操作**:jQuery的核心功能之一就是对HTML文档对象模型(DOM)进行操作。通过选择器,如`...
同时,由于D3.js广泛使用链式调用(chaining),熟悉JavaScript的原型和方法调用方式也是必要的。 HTML5在D3.js中的作用主要体现在创建可被D3操作的基础结构,如SVG元素。SVG(Scalable Vector Graphics)是一种...
有以下几种方式实现这一目标: 1. **回调函数**:当js文件加载完成时,可以调用一个预先定义的回调函数,确保后续操作在加载完成后执行。例如,使用`fetch`API时,可以监听`then()`和`catch()`中的结果。 2. **...
在JavaScript编程中,封装是一种重要的面向对象编程原则,它允许我们隐藏实现细节,提供更简洁、安全的接口供外部调用。"常用js方法封装"的主题聚焦于将常见的JavaScript功能整理成可重用的模块,以提高代码的复用性...
原型是JavaScript实现继承的方式,每个对象都有一个原型链,使得属性和方法可以通过链式查找获取。 5. **数组与数组方法**:JavaScript中的Array对象提供了许多便利的方法,如push、pop、shift、unshift、slice、...