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 相关文章推荐
js中的前绑定和后绑定详解
Aug 01 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
《APMServ 5.1.2》使用图解
2006/10/23 PHP
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP PDO函数库详解
2010/04/27 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
Vue实现动态响应数据变化
2017/04/28 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
python之pandas用法大全
2018/03/13 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python批量修改xml属性的实现方式
2020/03/05 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
python相对企业语言优势在哪
2020/06/12 Python
出纳员岗位责任制
2014/02/11 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
可怜妈妈观后感
2015/06/09 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
JavaScript实现简单计时器
2021/06/22 Javascript
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技