这篇文章将为大家详细讲解有关Javasript设计模式之链式调用的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、虚拟主机、营销软件、网站建设、云浮网站维护、网站推广。
具体内容如下
写过jquery的可能都知道,jquery里面可以很方便的使用以下代码:
// 不使用链式调用 const element = $(ele); element.addClass('red'); element.removeClass('green'); element.show(); // 链式调用 $(ele) .addClass('red') .removeClass('green') .show();
而jquery这种调用方式就是链式调用。我们可以从上述代码看出来,如果不使用链式调用的话,那么我们会增加很多重复的代码,而且特别冗余。而通过链式调用,我们可以节省很多代码,并且代码看起来更加优雅和整洁。那么,接下来,我们来讨论下如何实现一个支持链式调用的库。
了解过原型链的人都知道,由构造函数生成的实例都可以访问其原型对象的属性和方法,因此,我们让定义在原型对象的方法最后都返回this(调用该方法的实例),就可以对原型方法进行链式调用。
// 通过立即执行函数,声明了一个_$函数,并且将一个$函数挂载到window上,并且每次调用$()的时候,返回的其实是个_$实例,由于原型对象方法里,执行最后都会返回一个this,因此就可以执行链式调用。 (function () { // 构造函数 function _$(selector) { // ... } _$.prototype = { addClass: function (className) { // ... return this; }, removeClass: function (className) { // ... return this; }, show: function () { // ... return this; } }; _$.prototype.constructor = _$; // 每次调用$()的时候,返回的其实是个_$实例 window.$ = function () { return new _$(arguments); } })(); // 通过这种方式,我们就可以直接使用$的链式调用 $(ele) .addClass('red') .removeClass('green') .show();
当然,上述代码其实可以进行优化一下,因为假设你引入的库里,已经有人定义了$函数,那么就会面临着命名冲突的问题。所以,我们可以为其增加一个安装器
(function () { // 构造函数 function _$(selector) { // ... } _$.prototype = { addClass: function (className) { // ... return this; }, removeClass: function (className) { // ... return this; }, show: function () { // ... return this; } }; _$.prototype.constructor = _$; // 增加一个安装器 window.installHelper = function (scope, interface) { scope[interface] = function () { return new _$(arguments); } } })(); // 而用户就可以这样使用它来自定义挂载对象以及其命名 installHelper(window, '$'); $(ele).show();
当然,有时候链式调用并不是一个好的主意。链式调用适用于赋值器方法,但是对于取值器方法的话,就不是很友好。因为我们有时候是想要方法返回一些数据,而不是返回一个this。对于这种情况的话,主要有两种解决方法,一种是对于取值器方法就不返回this,直接返回数据。而另一种方法呢,则是通过回调方法来处理数据:
// 第一种方法,当遇到取值器,则直接返回数据 (function () { // 构造函数 function _$(selector) { this.ele = document.querySelector(selector); // ... } _$.prototype = { addClass: function (className) { // ... return this; }, // 取值器 getClass: function () { // ... return this.ele.className; } }; _$.prototype.constructor = _$; })(); // 第二种方式,通过回调的方式来处理数据 (function () { // 构造函数 function _$(selector) { this.ele = document.querySelector(selector); // ... } _$.prototype = { addClass: function (className) { // ... return this; }, getClass: function (cb) { // ... cb.call(this, this.ele.className); return this; } }; _$.prototype.constructor = _$; })();
关于“Javasript设计模式之链式调用的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
当前名称:Javasript设计模式之链式调用的示例分析
新闻来源:https://www.cdcxhl.com/article8/pgejip.html
成都网站建设公司_创新互联,为您提供网站导航、网站改版、服务器托管、网站营销、网站内链、外贸建站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联