小目录：

1.设计三流程
2.页面实现流程
3.CSS的掌握重点
4.怎么读英文文档，技巧是什么
5.对MVC的阶段性思考
6.关于HTML
7.关于对象
8.关于backbone
9.关于函数和闭包
10.关于事件函数
11.关于jQuery
12.关于virtual DOM
13.关于JS的函数参数
14.关于逻辑判断符的经典妙用
15.关于Self-Executing Anonymous Function
16.关于原型

1. 设计三流程：

1、看设计图做大概的布局，也就是搭一个骨架，然后加上CSS，呈现出设计图的轮廓
2、接着是分而治之，一般是从上到下，从左到右去实现页面的CSS，这个过程中去熟悉box model，float，absolute position模式
3、这一步才是实现交互，添加事件，动画，Ajax之类的交互工作

注意：
1、各个产品的设计规范
2、多积累布局方案的经验，比如如何实现水平居中，垂直居中，单列多列布局（960栅格，978栅格），响应式布局方案。这些布局在网上可以找到很多的总结。如果说设计页面是目标的话，这些都是基础，只有把这些基础掌握了，设计页面才不会觉得难。

2. 页面实现流程：

（这是从前端工程师如何不断自我提升知乎live的笔记）

关于页面用html和css实现的思路：
1、先划区块，比如头中尾，肯定是有共用的，自己先心理有个数
2、然后找相同，中间这部分（body）是否有左右侧列表，中间的内容每一块是否有复用的地方，把相似的地方找出来
3、之后写html的结构，等所有的文本内容全用html处理好了，再在网页里测试看看，
4、然后再去对应设计稿里面的样式，一步步把html还原到设计稿的样式，长宽高，该浮动浮动，该对齐对齐，挨个去实现就可以了。

总结：还是先骨架，再样式，再js实现行为这么一个顺序

3. CSS的掌握重点：

1、布局，经典的布局方式
2、定位（position），比如相对定位，绝对定位
2、盒模型（box model）context，padding，border，margin
3、动画属性
4、伪类，选择器 （a:hover 这是伪类）（#xxx，.xxx这是选择器，即id，class）
5、选择符的优化，即性能这一部分
6、如何拆分，怎么写公共的，比如reset
7，移动端，需要看下flex这种流式布局是怎么做的
8、用 写好css目录，给每段选择器标注相应目录，便于阅读

2017年6月27日补充：
无论是Pc还是移动布局都有着两套不同的方案，pc讲究的是各浏览器的兼容，移动讲的是视口度的兼容。

4. 怎么读英文文档，技巧是什么：

先看指南，再扫一遍大类，以此了解每个类分别实现什么功能，再去看插件部分，了解这个框架通过这些api或者插件到底能做什么
为什么有这个框架，这个框架能解决什么问题，不能解决什么问题，你最好心理有数
然后你才根据你自己的需求，找到你自己需求会用到的插件，然后你才把这个插件仔细的去读
要是一上来就把文档全读一遍肯定没有时间
所以读之前要明确目标，以解决问题为主，读具体部分时，重视示例代码，如果使用时出现问题，对照示例代码查看你自己调用是否有问题

5. 对MVC的阶段性思考：

在学习headfirst javascript这本书的第八章，做一个游戏应用，采用了MVC的设计思路，现在完成了view和model两个部分，我的一个感悟：
目前为止，我领会到的、教材想传递给我的思想是首先是面向对象，即把这个应用看作一个整体，一个对象。然后以此基础上，把这个对象的特点想清楚，抽象出模型，即model层，模型的本质或者说目的是把这个对象（应用）模拟提炼成数据，当然这样做是为了方便计算，这是计算机的长项。当用户使用应用（在我们看来是使用对象），状态会发生变化，反映到模型上就是对应状态或行为的数据、逻辑也会跟着变化，在这个模型数据的变化过程中，插入view层的接口，也就是在数据变化的那行代码下，插入视图层的代码，以此改变用户浏览的界面，让用户感知到自己操作引起的变化。不然，不插入视图层的话，虽然模型数据变了，应用运行了，但界面没改变，用户还是一位这个应用没反应。

6. 关于HTML：

Ideally you should start your learning journey by learning HTML. Start by reading Introduction to HTML. You may then move on to learning about more advanced topics such as:

HTML5 APIs
CSS, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)
JavaScript, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)

说一个相关的，HTML 标签中 script 和 link 标签现在有 integrity 属性，用来校验已获取的资源是否被篡改，Chrome / Firefox / Safari TP r30 现在已经支持，IE 不支持

6月25日补充：
注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

7. 关于对象：

在浏览器里的一切都被看作对象，他们有属性，有方法，这使得一切都可以被操作改变

看的headfirst JS的第9章感悟：
DOM把网页里的东西看成对象，而事件对象（event object）则是在DOM的基础上，把整个“操作DOM的行为”也看作一个对象，使得我们可以通过对属性和方法调用更便捷效率地实现功能所需的逻辑。

17年7月17日补充：
深拷贝与浅拷贝的区别：

参考文章：详解js中对象的深浅拷贝

我自己的总结：
浅拷贝是复制对象的引用，这意味着，如果你修改拷贝出来的这个对象的属性的值，那么之前那个被拷贝的对象的属性的值也会被修改。这在实际编程中显然是我们不想看到的，容易导致数据被修改。

深拷贝就是解决了浅拷贝的问题，具体实现参考文章。

8. 关于backbone和MVC：

在用MVC模式编写webapp后，初步了解MVC在JS的实践。接下来了解一下backbone，一个对mvc的封装
相关博客：http://www.cnblogs.com/lyzg/p/5634565.html
backbone官方文档：http://backbonejs.org/#Getting-started

17年7月14日补充：

基于backbone的MVC原理思考

首先要提一个概念——关注点分离

关注点分离指应用中的每个模块/层级都应该仅对一个任务负责（比如一个购物车功能就是一个模块，一个支付功能就是一个模块）然后每个模块/层级中的代码不该过多地牵涉其他模块/层级所负责的事务逻辑。

关注点分离原则将应用程序拆解为多个封装好的独立功能单元，从而降低了应用整体的代码复杂度。
——《JavaScript应用程序设计（Eric Elliott）》

一个完整有规模的JS应用的关注点包括：

• 模块管理
• 事件
• 表现层与DOM操作
• 数据管理与同/异步读写
• 路由机制（将URL与任务连接起来）
• 日志
• 数据分析与追踪
• 用户认证
• 特性开关（将代码部署与特性发布解耦）
• 国际化

现在的框架和库都试图给开发者一套针对这些关注点的解决方案。

这些框架/库一般归为两类：轻量型与综合型。

backbone.js就是轻量型库，提供一组较为实用的对象和方法，比如视图，模型，集合，路由，事件机制，从而让应用的组织结构更为清晰。

9. 关于函数和闭包：

JS的一个强大特性：把函数看作一个可以传递的值
就跟string，number，object被看作值（value）一样，函数function也可以被看作一种值。因此函数能被赋给变量，也能作为参数传给另一个函数。特别是这个作为参数传给另一个函数，比如map方法，它的作用是遍历前面的数组，这个方法的参数是传入一个有特定功能（比如做比较）的函数，那么在遍历的同时，数组里被遍历的元素还会分别依次使用被传入的这个特定功能函数，并返回结果，这里就是返回比较之后的结果。这个思想和Python里的列表生成式（[x * x for x in arr]）很相近，都是一种高级用法，精简逻辑的代码表现形式，简化代码量。
另一个可能不是很准确的例子，就是JSONP（JSON with Padding）的链接中，可以在链接末尾附带一个函数，有点相当于把函数作为一个值传给这个链接，作为链接这样一个“函数”的参数。当从那个链接获取到数据时，会把数据先传入这个"参数"做处理，然后这个函数返回的值才是我们最终需要的数据。
总结：把函数作为值的思想使得JS有了更灵活的处理数据的能力。

6月14日补充：
就是嵌套函数，函数的嵌套，嵌套函数带有上一层函数的环境（作用域），可以访问上一层函数的变量。
js的闭包能实现就是因为函数能被作为值传入或者返回（return）。在这种情况下，返回的那个函数可以获得上一级函数里的变量作用域，因此可以使用到函数内的变量，从而避免冒险去使用全局变量（因为之前要用全局变量就是因为函数里的变量为局部变量不可用，现在因为first class function的特性解决了这问题）

闭包的作用：函数作为参数或者作为return返回值时，作为有名函数或者直接作为匿名函数全部写入，那么就能获得被传入或者被return的上级函数的作用域，比如使用上级函数里的变量。
关于闭包的一篇文章：Javascript Closures

《JavaScript应用程序设计（Eric Elliott）》一书中对闭包的精确描述：

简单来说，闭包会保存函数作用域中的状态，即使这个函数已经执行完毕（这里体现了内部函数的生命周期强于外部函数）。创建闭包很简单，只需要在一个函数体中再定义一个内部函数，接着将这个内部函数直接返回或者传递给另一个函数即可。

这个内部函数可以访问所有在其外部函数作用域中定义的变量（而这个外部函数的外部，通常为全局，则不能访问），闭包的这种特性常常被用来做数据的访问控制（因此可以把数据用闭包函数包起来，以此保护数据）。

由于在外部函数定义的变量仅存在于内部函数的作用域上，所以你只能通过一个特权方法来访问这些数据。在其他语言中，特权方法通常是一个可以访问私有数据的暴露方法，而在JS中，任何具有闭包作用域的方法都具有特权性质。

2017年7月9日补充：
为什么在JS里this的指向会是一个问题，因为function也是一个对象，每创建或者调用一个函数，也就是创建或者调用了一个对象，又由于不同的对象有不同的指针（体现在代码上也就是this）指向着，所以在嵌套函数或是其他一些情况下要用一些方法把函数间的指针统一指向一个对象（函数）。

比如有var that = this， 有proxy（JQuery中），有apply，call。

• foo() ---> foo.call(window)

• obj.foo() --> obj.foo.call(obj)

首先，call函数的第一个参数，在这是window和obj是this，即指针的指向的对象。

然后，第一个函数foo是全局函数，相当于是window这个全局对象的一个方法，所以在调用foo的时候，相当于foo.call(window)，即指针指向的是window对象，this的上下文是window。

而第二个foo是对象obj的方法，这也相当于指针指向的是obj，即obj.foo.call(obj)，this的上下文是obj

最后，这里反映的是JS里this的问题，“函数”这个对象的this指向都可以转换为后面call函数的应用。只要记得this的上下文是在执行时才会被确认，而不是在被创建的时候，即每次执行时this的指向都会被更新，也就是call函数反映出来的。

但call函数或者apply函数由此也可用来改变this的指向，比如obj.foo.call(obj2)，那么这里就是使用了obj的方法，但由于上下文用的是obj2的this，所以结果被赋给了obj2。

其他，7月10日补充：

有一句话‘当对象的方法中还存在函数时，该函数其实是当做函数模式触发，所以其this默认为window‘，这句话昨晚在高程三里面看到，说的是匿名函数的this具有全局性，除非用call等方法改变了执行环境。

10. 关于事件函数：

事件函数能实现是因为函数可作为值传递，即first class function特性，不仅能作为参数的值或者返回值或者作为变量的值赋给变量，也同样可以作为值赋给对象的属性或者方法，进而当对象触发时，就可以invoke这个事件函数。

2017年7月7日补充：
在异步事件函数中经常出现上下文切换问题（this的指向问题），原因是在JS中每新创建一个函数，在这个函数内用this就会指向这个新建函数，而不是上级函数，或者换种说法，this会指向应用this的地方，而不是创建this的地方，即在哪里用this，this就指向这个地方。
解决办法是在原上级函数把this保存在一个变量中，约定俗成是var that = this; 或者 var self = this; 然后再在下级的事件函数里用 that.xxx 或者 self.xxx ，这样就解决了上下文切换的问题。
而在ES6中，箭头函数直接就解决了这个问题，因为箭头函数会自动搜寻上级的this。

11. 关于jQuery：

提示：使用谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
把所有 jQuery 代码置于事件处理函数中（避免作用域污染）
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库:
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

下面是 jQuery 中事件方法的一些例子：
Event 函数绑定函数至：

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)  触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

12. 关于virtual DOM：

这时是端框架react和vue都有的技术。

Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。

例子如下，我们可以看看下面这个列表在HTML中的代码是如何写的：

<ul class="list">
  <li>item 1</li>
  <li>item 2</li>
</ul>

而在JavaScript中，我们可以用对象简单地创造一个针对上面例子的映射：

{
    type: 'ul',
    props: {'class': 'list'},
    children: [
        { type: 'li', props: {}, children: ['item 1'] },
        { type: 'li', props: {}, children: ['item 2'] }
    ]
}

真实的Virtual DOM会比上面的例子更复杂，但它本质上是一个嵌套着数组的原生对象。

13. 关于JS的函数参数：

对象经常作为函数的参数，比如在微信小程序里，page()这个生命周期函数的参数就是对象，各个接口的参数也是如此。

比如在JQuery里

// you can provide an object to change 
// several CSS properties on an element at once:
$('#main').css({
  color: 'red',
  border: '1px solid blue'
});

14. 关于逻辑判断符的经典妙用：

foo && bar();   // runs bar() only if foo is truthy

var bar = baz || createBar(); 
// use baz as value for bar unless baz is falsy; in that case, create bar

关于JS的type转换问题，一些示例：

log( 'a' + 2 );           // 'a2'
log( '4' + 3 );           // '43'
log( 'five' - '4' );      // NaN (not a number)
log( - '1' );             // -1
log( 1 + true );          // 2
log( 1 == true );         // true
log( 1 === true );        // false

15. 关于Self-Executing Anonymous Function:

严格来说，这一点应该在第9点里（9. 关于函数和闭包）

相关链接 Self-Executing Anonymous Functions

例子:

(function(){
  console.log('Hello World!');
})();

优点：

Those two little brackets cause everything contained in the preceding parentheses to be executed immediately. What’s useful here is that JavaScript has function level scoping. All variables and functions defined within the anonymous function aren’t available to the code outside of it, effectively using closure to seal itself from the outside world.

IIFE所创建的临时作用域常常用来作模块封装，jQuery正式使用了IIFE将内部变量与全局作用域隔离开。

17年7月18日补充：
自执行匿名函数的最大优点是能封装函数，避免作用域污染，然后能根据需要暴露内部的方法，提供给外部接口。自执行匿名函数是模块化的最佳实践。

16. 关于原型

原型链——原型的委托过程：

原型链只有在检索value的时候才会被用到。如果我们尝试去获取对象的某个属性值，但该对象没有此属性名，那么JS会试着从原型对象中获取属性值。如果那个原型对象也没有该属性值，那么再从它的原型中寻找，以此类推，直到该过程最后到达终点Object.prototype。如果想要的属性完全不存在于原型链中，那么结果就是undefined值。这个过程称为委托。

——《JavaScript精粹》