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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
js实现百度搜索提示框
Feb 05 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
js实现多个标题吸顶效果
Jan 08 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
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jquery easyui使用心得
2014/07/07 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
python 多线程应用介绍
2012/12/19 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python实现大学人员管理系统
2019/10/25 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
商务英语专业自荐信
2013/10/14 职场文书
生物制药毕业生自荐信
2013/10/16 职场文书
食品销售计划书
2014/04/26 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
 Python 中 logging 模块使用详情
2022/03/03 Python
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript