《码农（第12期）》的笔记

码农（第12期）

图灵社区

前端开发技术的发展

2015-07-14

其实是一系列已有技术的组合，早在这个名词出现之前，这些技术的使用就已经比较广泛了，GMail因为恰当地应用了这些技术，获得了很好的用户体验。

2015-07-14

DOM的选择
jQuery提供了一系列选择器用于选取界面元素，在其他一些框架中也有类似功能，但是一般没有它的简洁、强大。$("*") // 选取所有元素
$("#lastname") // 选取id为lastname 的元素 $(".intro") // 选取所有class="intro"的元素
$("p") // 选取所有<p> 元素 $(".intro.demo") // 选取所有class="intro" 且class="demo"的元素
链式表达式：在jQuery中，可以使用链式表达式来连续操作dom，比如下面这个例子：
如果不使用链式表达式，可能我们需要这么写：var neat = $("p.neat");
neat.addClass("ohmy"); neat.show("slow");
但是有了链式表达式，我们只需要这么一行代码就可以完成这些：$("p.neat").addClass("ohmy").show("slow");
除此之外，jQuery还提供了一些动画方面的特效代码，也有大量的外围库，比如jQuery UI这样的控件库，jQuery mobile这样的移动开发库等等。

2015-07-14

单个的界面想要做很多功能，需要写的代码是会比较多的，但是，并非所有的功能都需要在界面加载的时候就全部引入，如果能够在需要的时候才加载那些代码，就把加载的压力分担了，在这个背景下，出现了一些用于动态加载JavaScript的框架，也出现了一些定义这类可被动态加载代码的规范。
在这些框架里，知名度比较高的是RequireJS，它遵循一种称为AMD（Asynchronous Module Definition）的规范。

2015-07-14

RequireJS除了提供异步加载方式，也可以使用同步方式加载模块代码。AMD规范除了使用在前端浏览器环境中，也可以运行于nodejs等服务端环境，nodejs的模块就是基于这套规范定义的。

2015-07-14

这个时期，随着Web端功能的日益复杂，人们开始考虑这样一些问题：
如何更好地模块化开发业务数据如何组织
界面和业务数据之间通过何种方式进行交互在这种背景下，出现了一些前端MVC、MVP、MVVM框架，我们把这些框架统称为MV*框架。这些框架的出现，都是为了解决上面这些问题

给JavaScript初学者的24 条最佳实践

2015-07-14

1. 使用===代替==
JavaScript使用2种不同的等值运算符：===|!==和==|!=，在比较操作中使用前者是最佳实践。“如果两边的操作数具有相同的类型和值，===返回true，!==返回false。”
——JavaScript：语言精粹然而，当使用==和！=时，你可能会遇到类型不同的情况，这种情况下，操作数的类型会被强制转换成一样的再做比较，这可能不是你想要的结果。

2015-07-14

JSLint是由大名鼎鼎的道格拉斯（Douglas Crockford）编写的调试器。简单的将你的代码粘贴进JSLint中，它会迅速找出代码中明显的问题和错误。
“JSLint扫面输入的源代码。如果发现一个问题，它返回一条描述问题和一个代码中的所在位置的消息。问题并不一定是语法错误，尽管通常是这样。JSLint还会查看一些编码风格和程序结构问题。这并不能保证你的程序是正确的。它只是提供了另一双帮助发现问题的眼睛。”——JSLing文档
部署脚本之前，运行JSLint，只是为了确保你没有做出任何愚蠢的错误。

2015-07-14

将脚本放在页面的底部
在本系列前面的文章里已经提到过这个技巧，我粘贴信息在这里。记住——首要目标是让页面尽可能快的呈献给用户，脚本的夹在是阻塞的，脚本加载并执行完之前，浏览器不能继续渲染下面的内容。因此，用户将被迫等待更长时间。
如果你的js只是用来增强效果——例如，按钮的单击事件——马上将脚本放在body结束之前。这绝对是最佳实践。

2015-07-14

构建字符串的最优方法
当你需要遍历数组或对象的时候，不要总想着“for”语句，要有创造性，总能找到更好的办法，例如，像下面这样。var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';我不是你心中神，但请你相信我（不信你自己测试）——这是迄今为止最快的方法！使用原生代码（如 join()），不管系统内部做了什么，通常比非原生快很多。
——James Padolsey, james.padolsey.com

2015-07-14

减少全局变量
只要把多个全局变量都整理在一个名称空间下，拟将显著降低与其他应用程序、组件或类库之间产生糟糕的相互影响的可能性。——Douglas Crockford
var name = 'Jeffrey'; var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- 或 window.name更好的做法
var DudeNameSpace = { name : 'Jeffrey',
lastName : 'Way', doSomething : function() {...}
} console.log(DudeNameSpace.name); // Jeffrey

2015-07-14

使用{}代替 new Ojbect()
在JavaScript中创建对象的方法有多种。可能是传统的方法是使用"new"加构造函数，像下面这样：var o = new Object();
o.name = 'Jeffrey'; o.lastName = 'Way';
o.someFunction = function() { console.log(this.name);
}然而，这种方法的受到的诟病不及实际上多。作为代替，我建议你使用更健壮的对象字面量方法。
更好的做法var o = {
name: 'Jeffrey', lastName = 'Way',
someFunction : function() { console.log(this.name);
} };
注意，如果你只是想创建一个空对象，{}更好。var o = {};
“对象字面量使我们能够编写更具特色的代码，而且相对简单的多。不需要直接调用构造函数或维持传递给函数的参数的正确顺序，等

2015-07-14

使用[]代替 new Array()
这同样适用于创建一个新的数组。例如：
var a = new Array(); a[0] = "Joe";
a[1] = 'Plumber';更好的做法：
var a = ['Joe','Plumber'];“javascript程序中常见的错误是在需要对象的时候使用数组，而需要数组的时候却使用对象。规则很简单：当属性名是连续的整数时，你应该使用数组。否则，请使用对象”
——Douglas Crockford

2015-07-14

定义多个变量时，省略var关键字，用逗号代替
var someItem = 'some string'; var anotherItem = 'another string';
var oneMoreItem = 'one more string';更好的做法
var someItem = 'some string', anotherItem = 'another string',
oneMoreItem = 'one more string';…应而不言自明。我怀疑这里真的有所提速，但它能是你的代码更清晰。

2015-07-14

"For in"语句
当遍历对象的属性时，你可能会发现还会检索方法函数。为了解决这个问题，总在你的代码里包裹在一个if语句来过滤信息。for(key in object) {
if(object.hasOwnProperty(key) { ...then do something...
} }
参考JavaScript：语言精粹，道格拉斯（Douglas Crockford）。

2015-07-14

使用Firebug的"timer"功能优化你的代码
在寻找一个快速、简单的方法来确定操作需要多长时间吗？使用Firebug的“timer”功能来记录结果。function TimeTracker(){
console.time("MyTimer"); for(x=5000; x > 0; x--){}
console.timeEnd("MyTimer");

2015-07-14

自执行函数
和调用一个函数类似，它很简单的使一个函数在页面加载或父函数被调用时自动运行。简单的将你的函数用圆括号包裹起来，然后添加一个额外的设置，这本质上就是调用函数。(function doSomething() {
return { name: 'jeff',
lastName: 'way' };
})()

Angular、Backbone、CanJS与Ember : JavaScript MVC框架PK

2015-07-14

我用过其中4个框架：Angular、Backbone、CanJS和Ember

2015-07-14

视图绑定、双向绑定、筛选、可计算属性（computed property）、脏属性（dirty attribute）、表单验证，等等。还能罗列出一大堆来。下面比较了一些我认为MVC框架中比较重要的功能：

2015-07-14

可观察对象：可以被监听是否发生变化的对象。
路由：把变化通过浏览器URL的参数反映出来，并监听这些变化以便执行相应的操作。视图绑定：在视图中使用可观察对象，让视图随着可观察对象的变化而自动刷新。
双向绑定：让视图也能把变化（如表单输入）自动推送到可观察对象。部分视图：包含其他视图的视图。
筛选列表视图：用于显示根据某些条件筛选出来的对象的视图。

---

多看笔记 来自多看阅读 for Android

duokanbookid:498de9c698f2443fb76a4e41b992abab