Object Oriented Javascript

类

如何声明一个类

在ES6之前，我们这样声明一个类

function Vehicle(engines) {
  this.engines = engines;
}

Vehicle.prototype.ignition = function() {
  console.log('Turning on ' + this.engines + ' engines!');
}

var vehicle = new Vehicle(2);

console.log(vehicle.engines);
// 2
vehicle.ignition();
// Turning on 2 engines!

当使用new操作符调用一个函数(和函数名无关，用作类时习惯首字母大写)时，会使用该函数构造一个对象，大概发生了以下几件事：

ECMAScript 2017 Preview

Array.prototype.includes

Array.prototype.includes（value[, index]）： boolean

> [1, 2, 3].includes(2);
// true
> [1, 2, 3].includes(2, 2);
// false

Why includes, we have indexOf already?

React Flux

What’s React Flux

Flux is more of a pattern than a framework, and does not have any hard dependencies.

简单的说Flux就是一种前端MV*解决方案(javascript不像Java等后端代码严格独立出Model-View-Controller，一般是指Model和View层的分离)。然而，React声称传统的MVC模式实际上存在很大的弊端，并且不利于大型项目管理，所以FB大牛发明了一种号称优于MVC模式的解决方案 —— Flux。

关于FB给出的官方解释，众说纷纭，各位看官可以仔细琢磨一番。以下是Flux的流程图：
![Flux data flow] (https://github.com/facebook/flux/raw/master/docs/img/flux-diagram-white-background.png)

How React Flux works

在React Flux中有三个重要的概念：Dispatcher、Stores、Views。

• Dispatcher 分发中心。Dispatcher是Flux的中枢，管理着所有数据流动作。它本质上是Store的回调函数，每个Store管理着自己的数据模型，同时通过Dispatcher注册了一个回调函数，当Dispatcher响应Action时将会挂载Action的数据并发送给对应的Store处理。

React with Webpack

React

React是facebook团队打造的前端js框架，现在很多人都在使用React构造自己的前端项目，可见React已经非常成熟了，而且React的生态系统也非常完善。之前在segment fault和tui cool上拜读了很多关于React的文章，有幸能在新项目中来运用React。最开始就参照别人的demo写了一些简单的模块，懵懵懂懂也并没有理解React的优越性。在摸索了一段时间之后，发现React使用起来真是得心应手啊，自己也试着写一点对于React的总结：

React 使前端代码模块化

React认为一切皆模块，一段js代码是一个模块，一个css样式文件是一个模块。这样一个较复杂的项目就可以分成很多个完全独立的模块，每个同事并行开发，然后再将这些模块组装好。
React支持也推荐使用CommonJs规范编写代码，使用require加载一个模块，使用exports对外暴露接口。如果你写过nodejs应该对这种语法非常熟悉。

CSS Hack

1. IE6中float元素双倍margin问题
   解决方案: 在这个div里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
2. IE不支持min-属性
   解决方案： 如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

Javascript Scope

要清楚的了解javascript运行逻辑，必须掌握javascript的作用域。这不仅有助于我们编写健壮的javascript代码，更有利于我们分析产生的代码bug。scope(作用域)、closure(闭包)、this(关键字)、namespace(命名空间)、function scope(函数作用域)、global scope(Global作用域)、lexical scope(词义作用域)、public/private scope(公共/私有作用域)等概念将在本文中介绍到。

什么是作用域

在javascript中，scope指的是你代码运行环境的上下文。Scopes可以在全局被定义，也可以在局部被定义。了解javascript的scope有助于提升javascript developer的编码能力。

webpack

1.webpack是什么

webpack是一个模块打包工具(module bundler),它可以管理模块间的依赖关系,模块可以是js,也可以是css,text等其它静态资源

2.webpack的特点

1. 可以将依赖关系树拆分成块并且动态加载
2. 保证初始化的加载时间
3. 所有的静态资源都很容易的被当做一个模块
4. 可以方便的引用第三方的类库作为模块
5. 针对每一个模块,可管理配置的api很多
6. 适合大型的单网页应用项目
7. 丰富的插件,不用在功能需求时还要借助第三方,本身的插件库足够面对足够多的场景

3.安装步骤

1. 安装node.js

2. 通过npm安装webpack
   npm install webpack -g
   现在webpack已经安装到全局,你也可以通过命令行全局的使用webpack命令了

Web Worker是HTML5中新增的一项技术，用于Web程序实现后台处理。

一、WebWorker的概述及特性

JavaScript语言采用的是单线程模型，也就是说，所有任务排成一个队列，一次只能做一件事。随着电脑计算能力的增强，这一点带来很大的不便，无法充分发挥JavaScript的潜力。尤其考虑到，File API允许JavaScript读取本地文件，就更是如此了。

Web Worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务，再把结果返回给主线程。因此，每一个子线程就好像一个“工人”（worker），默默地完成自己的工作。