JavaScript DSL 流畅接口(使用链式调用)实例


Posted in Javascript onMarch 15, 2015

认真研究了一会DSL,发现了这么几件有趣的事,JavaScript用得最多的一个东西怕是链式调用 (方法链,即Method Chaining)。 有意思的是Martin Flower指出:

 I've also noticed a common misconception - many people seem to equate fluent interfaces with Method Chaining. Certainly chaining is a common technique to use with fluent interfaces, but true fluency is much more than that.

很多人将链式调用等同于流畅接口。然而链式调用是流畅接口的一种常用方法,真实的流畅接口不止这么一点点。

DSL 流畅接口

流畅接口的初衷是构建可读的API,毕竟代码是写给人看的。

类似的,简单的看一下早先我们是通过方法级联来操作DOM

var btn = document.createElement("BUTTON");        // Create a <button> element

var t = document.createTextNode("CLICK ME");       // Create a text node

btn.appendChild(t);                                // Append the text to <button>

document.body.appendChild(btn);                    // Append <button> to <body>

而用jQuery写的话,便是这样子
$('<span>').append("CLICK ME");

等等

于是回我们便可以创建一个简单的示例来展示这个最简单的DSL

Func = (function() {

    this.add = function(){

        console.log('1');

        return this;

    };

    this.result = function(){

        console.log('2');

        return this;

    };

    return this;

});
var func = new Func();

func.add().result();

然而这看上去像是表达式生成器。

DSL 表达式生成器

 表达式生成器对象提供一组连贯接口,之后将连贯接口调用转换为对底层命令-查询API的调用。

这样的API,我们可以在一些关于数据库的API中看到:

var query =

  SQL('select name, desc from widgets')

   .WHERE('price < ', $(params.max_price), AND,

          'clearance = ', $(params.clearance))

   .ORDERBY('name asc');

链式调用有一个问题就是收尾,同上的代码里面我们没有收尾,这让人很迷惑。。加上一个query和end似乎是一个不错的结果。

其他

方法级联
表示如下:

a.b();

a.c();
Javascript 相关文章推荐
javascript中定义类的方法汇总
Dec 28 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
token 机制和实现方式
Dec 15 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
详解vite2.0配置学习(typescript版本)
Feb 25 Javascript
JavaScript中的DSL元编程介绍
Mar 15 #Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 #Javascript
Javascript中的arguments与重载介绍
Mar 15 #Javascript
JavaScript中的闭包介绍
Mar 15 #Javascript
Javascript中的匿名函数与封装介绍
Mar 15 #Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 #Javascript
Javascript中的apply()方法浅析
Mar 15 #Javascript
You might like
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
python实现提取百度搜索结果的方法
2015/05/19 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
普通院校学生的自荐信
2013/11/27 职场文书
网络技术专业推荐信
2014/02/20 职场文书
求职意向书范文
2014/04/01 职场文书
关于保护环境的建议书
2014/08/26 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
学习经验交流会总结
2015/11/02 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB