JavaScript DSL 流畅接口(使用链式调用)实例

 这篇文章主要介绍了JavaScript DSL 流畅接口(使用链式调用)实例,本文讲解了DSL 流畅接口、DSL 表达式生成器等内容,需要的朋友可以参考下

 
 

认真研究了一会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();

时间: 2024-08-04 03:39:23

JavaScript DSL 流畅接口(使用链式调用)实例的相关文章

JavaScript DSL 流畅接口(使用链式调用)实例_javascript技巧

认真研究了一会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 te

学习JavaScript设计模式(链式调用)_javascript技巧

1.什么是链式调用这个很容易理解,例如: $(this).setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:调用完方法后,return this返回当前调用方法的对象. function Dog(){ this.run= function(){ alert("The dog is running...."); return this;//返回当前对象 Dog }; this.eat= function(){ alert("Aft

《JavaScript应用程序设计》一一2.13 链式调用与流式API

2.13 链式调用与流式API 链式调用是指下一次方法调用的上下文环境,由前一次方法调用的输出结果提供,下面的代码实例在jQuery中较为常见: $('.friend').hide().filter('.active').show(); 更为清晰的写法: $('.friend') .hide() .filter('.active') .show(); 这一连串方法调用的内在含义为: 先找出所有类名为.friend的元素并将它们隐藏,随后在其中找出所有拥有.active类名的元素并将之显示. 在页

JavaScript 异步调用框架 (Part 4 - 链式调用)_javascript技巧

现实开发中,要按顺序执行一系列的同步异步操作又是很常见的.还是用百度Hi网页版中的例子,我们先要异步获取联系人列表,然后再异步获取每一个联系人的具体信息,而且后者是分页获取的,每次请求发送10个联系人的名称然后取回对应的具体信息.这就是多个需要顺序执行的异步请求. 为此,我们需要设计一种新的操作方式来优化代码可读性,让顺序异步操作代码看起来和传统的顺序同步操作代码一样优雅. 传统做法 大多数程序员都能够很好的理解顺序执行的代码,例如这样子的: 复制代码 代码如下: var firstResult

JavaScript中两种链式调用实现代码_javascript技巧

一.方法体内返回对象实例自身(this) 复制代码 代码如下: function ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; } ClassA.prototype = { method1 : function(p1){ this.prop1 = p1; return this; }, method2 : function(p2){ this.prop2 = p2; return this; }, metho

深入探究使JavaScript动画流畅的一些方法

  这篇文章主要介绍了使JavaScript动画流畅的一些方法,包括与CSS动画效果的一些对比,需要的朋友可以参考下 基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javascript的DOM动画库,如Velocity.js和GSAP,看其是如何比jQuery和CSS动画效果更具性能的. jQuery 让我们先从基础的开始: JavaScript 和 j

深入探究使JavaScript动画流畅的一些方法_javascript技巧

基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javascript的DOM动画库,如Velocity.js和GSAP,看其是如何比jQuery和CSS动画效果更具性能的.jQuery 让我们先从基础的开始: JavaScript 和 jQuery 被错误的混为一谈了. JavaScript 动画是很快的. jQuery 把它放慢了下来.为什么?因为 -

让“链式调用(方法链)”更加自然一点

不论是JavaScript还是C#程序,我们已经习惯了采用如下所示的"链式调用"的方式进行编程,这样确实会使我们的程序变得很精练. 1: new Foo() 2: .UseXxx() 3: .UseZzz() 4: .UseZzz() 5: .Invoke(); 采用这种链式调用方式的很多方法都是扩展方法,比如上面所示的UseXxx.UseYyy和UseXxx方法就是采用如下形式定义的扩展方法. 1: public interface IFoo 2: { 3: void Invoke(

JS链式调用的实现方法_javascript技巧

链式调用    链式调用其实只不过是一种语法招数.它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的.该技术包括两个部分: 一个创建代表HTML元素的对象的工厂. 一批对这个HTML元素执行某些操作的方法. 调用链的结构$函数负责创建支持链式调用的对象 复制代码 代码如下: (function() {    /*     * 创建一个私有class     * @param {Object} els  arguments 所有参数组成的类数组     */    function _