Web开发技术讨论之二：如何编写高效JavaScript代码

hbsycw

学会编写JavaScript程序容易，但要成为专家却实属不易!  

starwing83

回复 20# rogantianwz


    node.js的话，从express开始搞就行（expressjs.com），推荐可以看看数据库ORM（sequelizejs.com），另外就是学习一点Promise，比如说bluebird或者Q（推荐bluebird）。最后，可以看看libuv库（github.com/joyent/libuv）这个是node的底层，纯C。

国内有个cnode社区很不错。

反正，多看开源项目，多看论坛博客就OK，书的话我也不知道……这个还是比较新的，没发现有什么比较好的书～

asd3418182

坐等JS大婶出现啊～

duanfuyou

挺喜欢JS的，给我的感觉就是：
1、入门门槛较低，我就是在对编程一无所知的时候通过它入行的 ；
2、自由（相对而言），这个特点的话就造就了很多良莠不齐的代码，但是优秀的JS code有时候就感觉是一种艺术。

现在回答下问题：
Q：谈谈您的JavaScript的学习和提升的经验。
A：我的JS学习都是通过不断的写不断的读中进行的，多看看别人是怎么去写JS代码，怎么去实现一个功能，怎么去组织一个模块的，好的就汲取，不好的就当做是给自己的提醒。

Q：谈谈您的一些JavaScript的高效编程的技巧。
A：我也还在学习阶段，只能说一下平时我都是怎么写的吧。1、在开始写之前，都先把代码模块划分好，各个模块的API也尽量考虑到；2、为模块分配命名空间；3、在代码块内使用严格模式；4、如果工期不是赶得不行的话，最好自己要求自己的去写高质量的JS实现，这样对自己的提高是很有帮助的；5、自己或同事写的代码在一段时间以后都可以看看，会发现很多问题和可以探究的地方，这样的话映像比较深刻；……

回答的不一定正确，我是这样做的，希望大家指正，一起进步。

// 想到一点补充一点
要想编写高效优雅的JAVASCRIPT代码，我想还是必须清楚这门语言的细节，也可以叫做编写他们的小技巧或者注意事项。例如：
1、严格模式"use strict"的使用
2、变量作用域，function、var的装载时间（这里描述可能不正确）

OwnWaterloo

1、谈谈您的JavaScript的学习和提升的经验。

因为主要工作重心不在（无论是客户端还是服务端的）JS上于是没有太多经验可以分享。
最开始显然走过一段只为IE写的黑暗时期。。。后来随着IE的份额不断下降以及对语言规范与语言实现的区别有了解之后才发现它是最坑的一个。。。
为了系统的学习也找过一些书籍。最终选定先把《JavaScript权威指南》看完再说。但直到现在都没能看完。。。

2、谈谈您的一些JavaScript的高效编程的技巧。

工具方面前面已经提得差不多了。Chrome或Firefox自带的console或者Firebug等等。
这里提一个比较偏门的东西。。。 https://github.com/bard/mozrepl 。
简单的说它可以让Firefox监听一个端口，然后通过tcp发送js在Firefox里执行。于是可以编程地操作Firefox。

至于编辑器，在投靠Emacs之前用过的里面印象最深的是1st javascript editor。图标好像是个龙。
有免费版本。。。但会定期地将智能提示的那个check box给去掉。。。不过可以写个程序（或者直接用游戏修改器）不断地将内存中的一个值设置为1就可以了。。。
Emacs的话js2和js3的静态语法分析挺好的。基本不会误报。

OwnWaterloo

回复 5# starwing83

关于Q（以及JS里许多类似物）的设计，我感觉有一个问题。
比如就以Q的readme中的例子来说：

1. 
   
2. step1(function (value1) {
   
3.     step2(value1, function(value2) {
   
4.         step3(value2, function(value3) {
   
5.             step4(value3, function(value4) {
   
6.                 // Do something with value4
   
7.             });
   
8.         });
   
9.     });
   
10. });
    

复制代码

它忽略了一个重点。
注释部分不仅仅可以Do something with value4之外其实还可以Do something with value1,value2,value3。
并且还可以访问前面几个匿名函数中的局部变量。 只是例子里面被简化了。
并step4也不一定就是使用value3作为实际参数。 它可以使用value2, value1甚至是它们的组合。

而作为对比的例子里面就失去了这个能力：

1. 
   
2. Q.fcall(promisedStep1)
   
3. .then(promisedStep2)
   
4. .then(promisedStep3)
   
5. .then(promisedStep4)
   
6. .then(function (value4) {
   
7.     // Do something with value4
   
8. })
   
9. .catch(function (error) {
   
10.     // Handle any error from all above steps
    
11. })
    
12. .done();
    

复制代码

每个promisedStep的作用域都是分离的。


因为重心不在JS上所以没有什么实际例子。实际使用中类似管道的结构是大多数？ 当遇到不是的时候就必须将前面需要的信息包裹在promise(?)里继续传递下去？
如果promisedStepI是打算被复用的，在实现的时候怎么能预先知道究竟应该传递多少？
而如果整个Q.fcall.then.then...done就是one shot的， 那它与generator或者让那人肉CPS能自动化的方案相比的优势在哪里？
移植性？ 可以在不同浏览器对JS高级特性支持参差不齐的情况下也都能够实现？ 不依赖某个具体的JS实现(V8，SpiderMonkey，Node,Rhino...)？ 也不需要一个以JS为目标的编译器？

send_linux

starwing83 发表于 2014-03-10 11:37
回复 20# rogantianwz

欢迎更多分享~

starwing83

回复 26# OwnWaterloo


    是的，你提的的确是开发中会遇到而且会比较头疼的一些问题。

简单说来，promise相对cps——特别是经过coroutine/node-fiber包装的cps来说，其实没有什么太大的优势。真正的优势是，这个过程是“标准的”，“清晰的”，换句话说，出问题了你很容易知道是哪儿有问题。而代价就是，你必须得多写一点东西（比如说每个then的function(...) { ... }）。

我现在用的是bluebird，不过这不重要。你提到的问题，在promise里面的解决方法是这样的——他不只是只有一个then，还有其他很多的方法可以用，比如可以传递多个参数的spread，比如说十分方便的map（一次处理超多的promise——注意这里是并行的，换句话说就是个poll，这一点在cps或者是coroutine里面几乎是做不到的）。解决你说的问题的一个办法是tap——即忽略本次的返回值，下个then还是得到上次的返回值——这用来做“不影响上下文的插件处理”。另外的办法就是两个了：
1. 外面用var，里面回调赋值
2. 嵌套的then，但是只是在需要某些参数的时候嵌套。

其实还有一个办法，就是把v1v2v3v4这些一并传下去（只需要传递需要的参数即可）。

其实promise并不会用Q的example那么用，几乎每一个then都是一个匿名函数——说白了，除了能节省嵌套的缩进以外，目前我还没用它做太多事。

另外，可以对promise进行修改——我的做法是往prototype里面插入一些函数，比如我插入了一个这样的函数：

1. 
   
2. Promise.prototype.sendResponse = function(res) {
   
3.   return this.done(function(data) { ... }, function(err) { ... });
   
4. }
   

复制代码

这样，每次处理完以后加一行.sendResponse，处理后的请求就自动发送给客户端了。十分方便。

说白了，这东西就是一个尽量不改变语法，尽量保持一致性的前提下做的一个管道过滤系统。实际开发中的确很好用。

最后说一下，node.js的ORM——sequelize（http://sequelizejs.com）已经内建了promise了，用的就是bluebird。我现在已经用这玩意写了很多代码了。稳定性和特性都不错（有一些很重要的功能没有实现，但是还是可以自行hack，所以勉强不影响使用吧——一个最重要的hack是多表查询加分页，这个不支持太蛋疼了，不过应该已经提交到下次版本的特性列表了）。去年要是用了这玩意儿那写网站的速度至少快一倍啊。所以现在推荐使用这个库，而不是node-orm2了。

另外，最近找了找Java下的Promise库——因为最近发现后台前端都TMD要我自己写= =发现Java实在是残疾，完全没法用Promise的——一个没有lambda函数的东西怎么用Promise = =只能够等Java7了= =

Java方面的网络前端开发我也要说几句，Java开发，唯一一个能“元编程”的就是所谓的记号（Annotate）了，基于记号可以大幅缩减Java代码量，把注意力集中在没有OO……咳咳，业务逻辑上，这里有几个非常非常好用的基于记号元编程的库：
1. retrofit：Square开源出来的REST客户端的自动生成接口，只需要写Java Interface就自动产生能够同步或者异步发送REST请求的对象，十分方便。
2. ActiveAndroid：Android的ORM库，只需要继承Model类并且写记号就可以自动支持写入/读出/查询sqlite，相对sequelize功能弱的一逼，但是好歹还能用，而且基本用法也很方便。
3. AndroidAnnotations：超级好用的基于记号的快速开发库，支持Android上面各种控件和代码的直接绑定，支持Adapter绑定，支持Bean绑定，支持REST等等等等，简直就是解放劳(daima)动(min)力(gong)的必杀技啊- -

有了这三个基本上界面+数据库+网络请求就OK了，剩下的就是一些比较好用的控件了：
1. 第一名当然是slidingmenu，不解释= =
2. 要用slidingmenu当然得有actionbarsherlock了
3. 然后就是图片自动下载、缓存、显示的库，同样的square开源的picasso，非常好用，接口独特。

另外可以看一下的是谷歌的gson，挺有意思的。

反正一句话：Java没有元编程完全不是人写的东西啊！！！！（某安卓苦逼默默飘过……）

OwnWaterloo

回复 28# starwing83

信息量太大，一个一个回。。。 今天还不一定回得完。。。

先说最悲伤的Java。 java7出了很久了。lambda要等java8。还得看究竟是怎么实现的。
如果只是语法糖，最终依然是产生一个匿名class还好。，而如果是通过增加新的字节码指令实现的话， 发布时就需要目标机器上也有对应的vm才行。
增加字节码指令的问题好像已经在jvm上的动态语言里出现了，比如invokedynamic。 不过按java语言的尿性来看，估计会按前一种方法实现。

OwnWaterloo

回复 28# starwing83

关于ORM。 O和R怎么能M得起来？ 我了个去。  目前感觉它只是 O -> M而不是 O <-> M。
用了ORM， 会不会出现需要绕过它依然需要直接写sql的情况？即使排除下面这些情况：
1. 某些情况为了性能而绕过。
2. 为了一些one shot的任务而绕过。 并不属于用户日常使用的功能。 比如，假设因为物价飞涨CU打算将所有用户的积分上调10%。 这个是单条sql语句就可以完成的事情。
等等。。。
总之，会不会为了一些很常见的功能而绕过ORM直接用sql？

如果是的话，那ORM的意义就是让80%的情况可以轻松一点， 剩下20%自己看着办？