2-1、项目构建介绍

ES6在浏览器中跑不起来的，不能直接跑。为了操作和演练，有实际效果，就需要项目构建。项目构建，分4个方面。基础架构，需要放哪些目录，每个目录放哪些文件，为什么要这么放， 合理性在哪。结合模块化，如何创建一个前端项目基础。顺便了解基础架构怎么做。

任务自动化：开发css，用过sass，怎么让浏览器理解，中间是有一个编译的过程。 同理less也是要编译的。开发用这一种语言，让浏览器识别的是另一种语言，有一个编译过程，这个过程，需要自动处理。文件合并，项目依赖，模块依赖，文件压缩等，让机器自动完成，减少人工操作。

编译工具：编译sass有对应工具。babel专门编ES6代码，编译成ES5让浏览器识别，webpack处理模块化项目依赖关系，比如b.js依赖a.js这个模块，在ES6写就是在b.js中import a.js。在编译b.js的时候，会自动导入a.js。

代码实现：一步一步手把手演示。

业务逻辑：前端要写页面，html css js涉及的是业务逻辑

自动构建：编译，ES6编译成ES5甚至ES3。如果是IE8，IE6跑项目，ES5也不支持的。需要编译成ES3。大公司还是要支持IE8的。辅助：如果修改文件，反复切换IDE和浏览器进行刷新，这一块是可以自动化的。开发效率提高。还有文件合并、资源压缩，js，css压缩，图片转成base64编码。自动构建这部分不上线，只是把业务逻辑的一个处理。

服务接口：要做实战，前端单独做，看不到效果，只能看到基本交互，包括promise，异步操作，数据结构变换，都依赖服务接口。部署服务器，提供数据和接口。

真正的大公司，也就这些内容，不会多太多。比较一个完整的技术架构的内容。

什么是任务自动化：减少人工操作，让机器自动监听所有操作，自动去响应。

gulp：就是一个工具，之前是grunt天下， 但是grunt有缺点，项目复杂之后，操作慢，级联操作。glup通过stream流的方式操作文件，使得级联操作非常快。所以gulp非常流行。就是为了完成任务自动化。背后nodejs做开发的。利用很多grup插件，让更多操作自动化处理。

学习方式：gulp中文网了解基本api，看一下插件。通过这个实例的大量脚本，进而学会用grup实行构建。

babel：通过项目了解，怎么解决兼容问题，怎么编译，用哪些包完成编译。

webpack-stream是对webpack对gulp的支持。

2-2、项目目录创建

用代码创建这个项目。mkdir es6  创建根目录，es6、

cd es6/ 进入这个目录

创建3个板块，第一个板块用来放置前端代码这块。包括css，js，还有一些模板。还有一个模块是创建服务器代码模块，完整的项目，必须有服务器，有接口提供给我真实的数据。还有板块，构建编译，服务器定时刷新辅助功能。

mkdir app 放置前端代码

mkdir server 创建服务器目录

mkdir tasks 构建工具的目录

cd app/   进入app中，创建如下三个目录

mkdir css 

mkdir js

mkdir views

ls显示当前目录文件。

es6中有类的概念，所以在js中再创建一个类的目录，专门放置类文件的。

mkdir js/class

touch js/class/test.js   空的目录是没有作用的，初始化几个文件，比如test.js

touch js/index.js   初始化一个入口文件

touch views/error.ejs 创建错误模板

touch views/index.ejs  创建入口模板 nodejs需要ejs模板

回到server目录。创建sever代码过程中，借助express脚手架。使用这个脚手架的时候需要暗转nodejs。之前安装过，这里忽略。

express 脚手架的启动命令，-e表示我要使用ejs模板引擎。所以之前创建的ejs文件。点是当前目录执行。

安装npm install

util 放置常见脚本的。

npm init   创建package.json，有了package.json通过这个就可以通过npm instore 安装npm依赖包。

需要设置babel编译工具的配置文件。 通过命令touch .babelrc 

需要glup配置文件，所以命令touch gulpfile.babel.js

目录初始化构建就结束了。

第二章还有一半。第三章看书。下面第四章。

4-1、需求分解和目录创建

互联网项目大概分几类：私讯、电商、彩票、旅游、金融。

彩票项目对ES6知识复杂度都有要求。

十分钟一期，倒计时。

要完成的功能模块：

覆盖的知识点：

第一排：期号，倒计时。都是动态查询。

第二排，这里完成选好投注。

第三排，传统是都把东西写好，怎么用ES6实现Template模板，实现动态切换任二、任三效果。

第四排：选号区，下面都是跟这变，涉及很多算法。

下面还有机选等等。

怎么组织，用什么架构，怎么思考。做一个分析。

ES6倡导模块化。模块化倡导功能单一。

看一下哪些功能单一出来，首先定时器，单独模块，就是实现倒计时，给一个周期，完成倒计时，倒计时完成后，有一个触发函数。功能模块就是倒计时，跟你做不做彩票，做什么前段项目，没有强耦合性，我们给他弱化，分离出来。

创建彩票项目目录：mkdir  lottery

创建定时器文件：touch timer.js

涉及到很多计算东西，比如选中了号码，奖金怎么算，盈利怎么算，注数怎么算，投注的钱怎么算。所有跟运算相关，单独拿成一个模块。这些运算跟彩票关系不是很大。比如组合运算，在彩票里也能用，在其他项目也能用。创建一个计算模块：touch calculate.js

期号是动态获取，倒计时也是实时在变。倒计时结束，期号加一。倒计时重新开始。数据不是来自客户端，而是通过接口来自体彩中心。因为某一期可能是不销售状态。

遗漏：11选5，11个号码，每次会开5个中奖号码。没出的就是遗漏。遗漏就是拉下。根据当前中奖号码推测哪些号码没有中奖。统计某个号码有多少期没出，就是遗漏，这个数据是自己的服务端统计的。要投注，也要跟服务端通信。这些跟接口相关的东西，再封装成一个模块，叫接口模块。创建接口模块： touch interface.js 。

回到浏览器，还要根本的功能。上面的功能虽然是实现彩票项目，但是跟彩票没有根本关系。放到别的项目也能复用。差一个模块来描述彩票的。比如实现，玩法提示，有多少号码，计算规则，中奖逻辑。建一个基本模块base.js模块。

这些模块都是以类的方式来实施的。最后一个模块来整合11选5的彩种的模块。touch lottery.js 把上面四个模块继承过来。封装成一个完成模块。

在入口文件index.js，这个是整个大的彩票项目文件，需要引入两个部分，1、ES6兼容处理部分：import 'babel-pplyfill' ; 2、彩种文件：import Lottery from './lottery'';

在模块lottery.js中导入上面四个模块，这个模块是具体彩种，按功能划分导入下面4个部分。如下：

import './lottery/base.js'   import './lottery/timer.js'   import './lottery/calculate.js'   import './lottery/interface.js'

后面讲具体每个模块怎么实现。

至于模板部分，css部分，服务端接口部分不是重点，文件准备好，直接用。

4-2、创建倒计时模块

4-3、创建数据计算模块

上一节写了倒计时模块，但是并没有跑起来，1、因为只是声明了一个类，要想真正跑起来，首先要实例化。2、需要一个lottery把所有的类继承，最后由lottery再实例化。所以将继承的类都实例化，继承的类都实例化。从而保证代码运行。

先把类都写好，最后再实例化。倒计时的工作要取决于后端给我们一个时间戳。从哪开始倒计时，服务端的程序还没写，所以就算实例化，也拿不到时间戳。

这小节，模块实现接口。项目涉及很多接口，只有封装在一个类里，实例化之后，这个对象就能拿到所有接口。这样更方便一些。每个接口封装在不同模块，调用起来就比较麻烦。后期维护不方便找到接口。我们把所有接口都封装在一个类。将来修改或者新增，找到这个接口文件，都比较方便。这个接口涉及几个方法。

首先来看一下需求：首先是期号，然后是倒计时。倒计时服务端会给我们一个时间戳，也即是说，当前时间是多少，然后我们从这个时间点开始倒计时。然后一个销售状态。把这三个封装在一个接口里面。一个接口返回给我们三个信息。

还有一个接口：

看一下数字：0051   ，前面有个“遗漏”，遗漏是说这个号码有多少期没有出过了。所以这个数据是每当奖号出一次，就更新一次。这个自动变，是由前端在开奖之后，去获取服务端。这个数据是服务端算出来的。然后通过接口下发的服务端。前端数据重新更新。

还有一个，就是下面的奖号：

这个奖号是分5位的。十分钟开奖一次，所以每十分钟，就需要从服务端获取一次，这个奖号也需要接口。在我们这个Interface有三个方法，每个方法去实现与服务器的一次通信接口。

打开interface.js，