Blog | Phodal - A Growth Engineerhttp://www.phodal.com/blog/2015-08-20T03:50:56.236548+00:00BlogJavascript Method Chaining 方法链2014-08-08T14:11:25+00:002014-08-10T11:59:36.475941+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/something-about-javascript-method-chaining/在寻找如何设计一个Javascript API的时候,发现了Method Chaining这个东西,方法链,看上去似乎很强大,也挺有意思的,而这个东西也是过去我们经常看到的。。
##Javascript Method Chaining
在维基百科上有这样的解释:
> Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method calls in object-oriented programming languages. Each method returns an object, allowing the calls to be chained together in a single statement.Chaining is syntactic sugar which eliminates the need for intermediate variables. A method chain is also known as a train wreck due to the increase in the number of methods that come one after another in the same line that occurs as more methods are chained togethe even though line breaks are often added between methods.
拿翻译工具翻译了一下:
方法链,也被称为命名参数法,是在面向对象的编程语言调用的调用多个方法的通用语法。每一个方法返回一个对象,允许电话连接到一起,在一个单一的声明。链接是语法糖,省去了中间变量的需要。方法链也被称为火车残骸中由于方法来相继发生的同一行以上的方法都锁在即使换行通常添加方法间的数量增加。
###Method Chaining 使用
目测对于方法链用得最多的,应该就是jQuery了。
// chaining
$("#person").slideDown('slow')
.addClass('grouped')
.css('margin-left', '11px');
我们可以用这样的用法来调用这个。jQuery严重依赖于链接。这使得它很容易调用的几个方法相同的选择。这也使得代码更清晰和防止执行相同的选择几次(提高性能)。没有方法链的时候则是下面的样子
var p = $('#person');
p.slideDown('slow');
p.addClass('grouped');
p.css('margin-left', '11px');
看上去和设计模式中的builder很像,不同的是,这里的p是方法,而不是一个类。
##Javascript 方法链示例
在之前我们说到[Javascript 高阶函数](http://www.phodal.com/blog/javascript-higher-order-functions/) 的时候,说到的print('Hello')('World'),而这种用法的结果可能会变成这样子。
function f(i){
return function(e){
i+=e;
return function(e){
i+=e;
return function(e){
alert(i+e);
};
};
};
};
f(1)(2)(3)(4); //10
这是网上的一个例子,然而也是我上一次写链式调用的作法。看上去弱爆了。
var func = (function() {
return{
add: function () {
console.log('1');
return{
result: function () {
console.log('2');
}
}
}
}
})();
func.add().result();
实际上应该在每个function都要有个return this,于是就有了:
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();
当然我们也可以将最后的两句
var func = new Func();
func.add().result();
变成
new Func().add().result();
##其他
最后作为一个迷惑的地方的小比较:
###Method Chaining VS prototype Chaining
原型链与方法链在某些方面上是差不多的,不同的地方或许在于
- 原型链是需要用原型
- 方法链则是用方法
Javascritp apply() 方法 2014-08-03T14:26:19+00:002014-08-03T14:37:56.387739+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/javascript-apply-method/之前我们说过 [Javascript Call 方法](http://www.phodal.com/blog/javascript-call-method/),这次我们就说说和Call方法类似的apply方法。
##apply vs call
两者间的不同在于:传递的是参数,还是参数数组
这个是call的用法
theFunction.call(valueForThis, arg1, arg2, ...)
而这个则是apply
theFunction.apply(valueForThis, arrayOfArgs)
故而
arrayOfArgs = [arg1, arg2, ...];
##Javascript apply 方法
先看看之前的call的用法
function print(p1, p2) {
console.log( p1 + ' ' + p2);
}
print.call(undefined, "Hello", "World");
由上面的叙述,我们可以得出当
args = "Hello", "World";
function print(p1, p2) {
console.log( p1 + ' ' + p2);
}
print.call(undefined, args);
两者是等价的,而实际上他们也是等价的,输出结果同样是"Hello,World"!
Intellij IDEA 重构——提炼函数2014-07-14T12:53:27+00:002015-08-20T03:50:56.236548+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/intellij-idea-refactor-extract-method/Intellij IDEA带了一些有意思的快捷键,或者说自己之前不在意这些快捷键的存在。重构作为单独的一个菜单,显然也突显了其功能的重要性,说说**提炼函数**,或者说提出方法。
##重构之提炼函数
快捷键
Mac: ``alt``+``command``+``M``
Windows/Linux: ``Ctrl``+``Alt``+``M``
鼠标: Refactor | Extract | Method
###重构之前
以重构一书代码为例,重构之前的代码
public class extract {
private String _name;
void printOwing(double amount){
printBanner();
System.out.println("name:" + _name);
System.out.println("amount" + amount);
}
private void printBanner() {
}
}
###重构
选中
System.out.println("name:" + _name);
System.out.println("amount" + amount);
按下上述的快捷键,会弹出下面的对话框
![Extrct Method][1]
输入
printDetails
那么重构就完成了。
###重构之后
IDE就可以将方法提出来
public class extract {
private String _name;
void printOwing(double amount){
printBanner();
printDetails(amount);
}
private void printDetails(double amount) {
System.out.println("name:" + _name);
System.out.println("amount" + amount);
}
private void printBanner() {
}
}
##Intellij IDEA重构
还有一种就以Intellij IDEA的示例为例,这像是在说其的智能。
public class extract {
public void method() {
int one = 1;
int two = 2;
int three = one + two;
int four = one + three;
}
}
只是这次要选中的只有一行,
int three = one + two;
以便于其的智能,它便很愉快地告诉你它又找到了一个飞盘
IDE has detected 1 code fragments in this file that can be replaced with a call to extracted method...
便返回了这样一个结果
public class extract {
public void method() {
int one = 1;
int two = 2;
int three = add(one, two);
int four = add(one, three);
}
private int add(int one, int two) {
return one + two;
}
}
然而我们就可以很愉快地继续和它玩耍了。当然这其中还会有一些更复杂的情形,当学会了这一个剩下的也不难了。
###代码
[https://github.com/gmszone/refactor](https://github.com/gmszone/refactor)
[1]: /static/media/uploads/extract-method.png