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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
vue实现tab栏点击高亮效果
Aug 19 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
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
Function.prototype.bind用法示例
2013/09/16 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
微信小程序实现点赞业务
2021/02/10 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
python中列表元素连接方法join用法实例
2015/04/07 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python实现邮件发送功能
2019/08/10 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
口腔医学技术应届生求职信
2013/11/09 职场文书
函授生自我鉴定
2014/03/25 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
出差报告范文
2014/11/06 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
2019年思想汇报
2019/06/20 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers