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 相关文章推荐
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
JS返回顶部实例代码
Aug 09 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 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实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
JS实现DOM删除节点操作示例
2018/04/04 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python过滤列表用法实例分析
2016/04/29 Python
Django admin美化插件suit使用示例
2017/12/12 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Django实现表单验证
2018/09/08 Python
Python flask框架post接口调用示例
2019/07/03 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
python 如何实现遗传算法
2020/09/22 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
造价工程师个人求职信
2013/09/21 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
踏青活动策划方案
2014/08/19 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
运动会广播稿50字
2015/08/19 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python