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 相关文章推荐
图片之间的切换
Jun 26 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
浅谈Vue的computed计算属性
Mar 21 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批量检测并去除文件BOM头代码实例
2014/05/08 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
Django更新models数据库结构步骤
2020/04/01 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
酒店应聘自荐信
2013/11/09 职场文书
优秀学生获奖感言
2014/02/15 职场文书
安全生产责任书范本
2014/04/15 职场文书
社区戒毒工作方案
2014/06/04 职场文书
董事长秘书工作职责
2014/06/10 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
入团申请书格式
2019/06/20 职场文书
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL
Python中的socket网络模块介绍
2022/07/23 Python