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 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
通俗易懂地解释JS中的闭包
Oct 23 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 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
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
php制作文本式留言板
2015/03/18 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
PDO::getAttribute讲解
2019/01/28 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
javascript解析json实例详解
2014/11/05 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
一年级班主任寄语
2014/01/19 职场文书
秋游活动策划方案
2014/02/16 职场文书
员工安全生产责任书
2014/07/22 职场文书
优秀班主任材料
2014/12/16 职场文书
政府会议通知范文
2015/04/15 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
php引用传递
2021/04/01 PHP
hive数据仓库新增字段方法
2022/06/25 数据库