简单技巧创建JS的链式调用
来源: 阅读:1743 次 日期:2015-04-22 11:45:43
温馨提示: 小编为您整理了“简单技巧创建JS的链式调用”,方便广大网友查阅!

简单技巧创建JS的链式调用, 相信很多人都知道,jQuery的链式调用用起来非常的爽,就像下面这样,把自己需要用的方法串联起来,一条语句就可以完成多个动作:

jquery代码:

$("div").addClass("newClass").text("Hello").show();

上面的语句为div元素添加了名为"newClass"的CSS class,把内容改为"Hello",最后将其显示出来,非常的方便简洁。

下面我们也来创建自己的链式调用(由于本文只是说明如何实现链式调用,为了简单起见,我们将只支持id选择器),最后你会发现,实现链式调用是非常简单的事情,唯一需要做的就是在每个方法后面返回this。

(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实现了 setColor 和 setBold 方法,在每次调用这些方法时都会返回当前对象,于是返回的对象同样再次具有在prototype中定义的各种方法,这就是链式调用的唯一诀窍,就这么简单。

如果一切顺利,下面的语句将被成功执行,它会将id为 test 的元素设置为红色并加粗。

$('test').setColor("red").setBold();

更多信息请查看IT技术专栏

更多信息请查看 脚本栏目
手机网站地址: 简单技巧创建JS的链式调用
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们| 联系我们| 人才招聘| 网站声明| 网站帮助| 非正式的简要咨询| 简要咨询须知| 加入群交流| 手机站点| 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00) 版权所有:
云南网警报警专用图标
Baidu
map