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 相关文章推荐
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
利用Python破解斗地主残局详解
2017/06/30 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
python集合的新增元素方法整理
2020/12/07 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
大学生学习自我评价
2014/01/13 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
森林防火标语
2014/06/23 职场文书
英文自荐信范文
2015/03/25 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js