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 相关文章推荐
简明json介绍
Sep 28 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
简单的js计算器实现
Oct 26 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
javascript实现放大镜功能
Dec 09 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
python pyheatmap包绘制热力图
2018/11/09 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
公司董事长职责
2013/12/12 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
物流仓管员工作职责
2014/01/06 职场文书
法学个人求职信范文
2014/01/27 职场文书
微信营销策划方案
2014/02/24 职场文书
投标担保书范文
2014/04/02 职场文书
医学专业大学生求职信
2014/07/12 职场文书
二人合伙经营协议书
2014/09/13 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL