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利用控件对windows的操作实现原理与应用
Dec 23 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
element-ui封装一个Table模板组件的示例
Jan 04 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
2020最新CPU的性能排名
2020/04/02 数码科技
php 函数使用方法与函数定义方法
2010/05/09 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP读取Excel类文件
2017/05/15 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
JS实现简单省市二级联动
2019/11/27 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
函授毕业自我鉴定
2014/02/04 职场文书
经济贸易系求职信
2014/08/04 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
体育教师教学随笔
2015/08/15 职场文书
z-index不起作用
2021/03/31 HTML / CSS
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL