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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
Js切换功能的简单方法
Nov 23 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 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初学者头痛的十四个问题
2006/07/12 PHP
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
python获取本机外网ip的方法
2015/04/15 Python
python 实现视频 图像帧提取
2019/12/10 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
爱普生美国官网:Epson美国
2018/11/05 全球购物
2014年高三毕业生自我评价
2014/01/11 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
大课间体育活动方案
2014/03/12 职场文书
宣传活动总结范文
2014/07/01 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
工程承包协议书
2014/10/20 职场文书
五四青年节活动总结
2015/02/10 职场文书
2016中秋节问候语
2015/11/11 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python