AngularJS Backbone.js Ember.js 对比

看到一篇关于AngularJS Backbone Ember.js的对比,建议看一看

说说个人的观点(仅是个人的观点):

  1. backbone.js 短小精悍,非常的灵活,其实拿它跟另外两者比某种程度上不太恰当,另外两者提供的是非常完整全面的框架,Backbone他所提供的正像是他的名字一样backbone,适用于较小非企业级的应用

  2. Ember.js (我使用的是早期1.4版本,无法确定新版本是否有改进,所以以下评论只是针对老版本)在之前的一个SPA中使用过,再实际使用过程中感觉不太好(也许是我们没有完全深入的学会),

    • 第一感觉就是路由的强大,Ember.js的基本模式就是由路由来控制和处理流程,如果是完全按照这种模式的应用,使用Ember.js会非常的快和简单,但强大的另一面就是感觉很僵硬,如果有些脱离路由这种流程外,来做一些自定义的东西时感觉就非常的不好,很不容易实现,如:动画,自定义的处理

    • 数据模型的引入使人感觉整个的框架非常巨大和完整,基本上是一个完整的后端框架了,但这种方式带来的问题是很不灵活,尤其是一对多,多对多这种的关系结构,个人感觉在前端处理这种结构的弊大于利

    • RESTFUL API 基本上也是类似的问题,RESTFUL API和Model搭载起来,真的很难去适应这种强制的要求,在实际的项目中也很难完全符合他过于严格的要求

  3. AngularJS 目前正在使用,感觉这个东西真是神器啊,非常的强大完整,但设计又不失灵活,搭配上ui-router(看过该作者的演讲,他也是眼馋Ember.js强大的路由,从而开发的ui-router)使用真的是非常不错,很方便的Pub/Sub,provider,强大灵活的指令,filter,容易实现的动画等,即能清晰的分割出各个模块,又能灵活的搭配适用,个人感觉特别适合复杂的企业级的应用,AngularJS基本上隐去了模型结构,相对Ember.js的模型硬性要求要灵活的多。感觉他的缺点就是有可能性能会较差,不过在企业中使用基本上不用计较这个问题,其次是涉及的技术点较多,新上手学习曲线成本较高

Implement a Formatter function in JS

JS原生并没有提供方便使用的Formatter函数,用字符拼接的方式看起来混乱难读,而且使用起来很不方便。个人感觉C#里提供的语法比较好用,如:

1
String.Format(“Welcome to learn '{0}','{0}' is awesome,you will {1} it!","Javascript","love");

这种有顺序的替换方式,比较清晰,而且在要替换同一内容时候可以省去传递重复参数的情况,下面是JS简单实现版本(没有严格测试):

1
2
3
4
5
6
7
8
9
10
11
12
13
(function(exports) {
exports.format = function(){
var args = Array.prototype.slice.call(arguments),
sourceStr = args.shift();
function execReplace(text,replacement,index){
return text.replace(new RegExp("\\{"+index+"\\}",'g'),replacement);
}

return args.reduce(execReplace,sourceStr);
}
})(window.utils = window.utils || {});

console.log(utils.format("Welcome to learn '{0}','{0}' is awesome,you will {1} it!","Javascript","love"));

关键的是这句:

1
args.reduce(execReplace,sourceStr);

这里使用了Array的reduce函数,reduce和reduceRight是ES2015新增加的函数,该函数的参数是reduce(callback,initialValue),callback接收4个参数分别是:

  1. previousValue:
    在遍历第一次进入该回调函数时,如果指定了initivalValue将直接使用initivalValue,如果没有指定将使用数组的第一个元素
    第二次及以后的遍历该值是前一次遍历返回的结果
    最后一次遍历返回的结果将作为reduce函数的返回值
  2. currentValue: 遍历到的当前item
  3. index: 当前item在数组中的下标
  4. array: 原始array

在execReplace中每一次执行时使用前一次替换后的结果作为原始替换字符串,使用当前item的index作为要被替换的内容,依次遍历,最终完成替换内容。
注:reduceRight和reduce函数基本一样,只是它的遍历顺序是由右向左