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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
Vue指令实现OutClick的示例
Nov 16 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
用Zend Encode编写开发PHP程序
2010/02/21 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
php strftime函数的详细用法
2018/06/21 PHP
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
python中字典(Dictionary)用法实例详解
2015/05/30 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python中异常重试的解决方案详解
2017/05/05 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
python如何统计代码运行的时长
2019/07/24 Python
通过实例解析Python调用json模块
2019/12/11 Python
pytorch构建多模型实例
2020/01/15 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
序列化Python对象的方法
2020/08/01 Python
python 5个顶级异步框架推荐
2020/09/09 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
师范应届生求职信
2013/11/15 职场文书
小学敬老月活动方案
2014/02/11 职场文书
教师网络培训感言
2014/03/09 职场文书
初中教师业务学习材料
2014/05/12 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang