【构建】1.项目开发环境、知识储备、开发流程、工程构建

1、环境及知识准备

1.运行环境

node 8.9.1 （建议用nvm来管理node版本）
nvm：Windows版本 、Mac版本

NVM经常使用操做

• nvm version：查看nvm版本
• nvm ls：列举所管理的node版本
• nvm install 8.9.1(版本号)：安装node
• nvm use 8.9.1(版本号)：使用此版本node

Git
git简易基础：参考资料

• 建立新仓库：git init
• 检出仓库：git clone
• 添加：git add
• 提交：git commit
• 切换分支：git checkout

chrome
最新浏览器 V62+

2.构建环境

webpack 3.10.0 、npm scripts （用npm作任务管理）、babel （es6必备工具）

参考资料：ES6和Babel你不知道的事儿

3.编辑器

atom 、ESlint （代码规范检查工具）

4.基础知识

ES6 、Sass 、Vue.js

2、业务开发流程

1.技术选型（需求会议）

构建工具

• gulp，作任务管理，不能编译打包，后，流操做，I/O效率高
• grunt，作任务管理，不能编译打包，先，先读取在写入
• webpack，作编译打包
• fis，百度内部作集成的构建方案
• prepack，facebook推出的作代码优化的方案
• rollup

为何要用构建工具？1.资源压缩，2.静态资源替换，3.模块化管理，4.编译处理

MVVM框架选择（vue，angular，react）

模块化设计（js模块化，css模块化）

自适应方案设计（移动端自适应，放在构建工具中作）

代码维护及复用性设计的思考（需求变动，产品迭代，bug定位，新功能开发）

2.其余

• 业务开发（处理业务逻辑）
• 测试验证（需求验证、测试）
• 发布上线（小流量，单机房->全量）

3、工程构建安装

1.下载代码

git clone https://github.com/stefanieliang/JDFinance.git

2.安装调试

• cd JDFinance
• npm install，node环境下安装全部依赖包
• git checkout setup，切换到setup分支
• npm start，启动服务

3.测试验证

• 是否是安装正确
• ESlint是否是能检查代码格式，linter-eslint
• 推荐的插件：atom-beautify（代码格式化），Emmet（快速完成HTML输入），snippets（快速生成代码片断）
• 是否是能编译Vue、es6
• 是否是能编译sass和css
• 修改代码后浏览器能不能自动刷新
• css模块化是否是正确

4、项目设计

1.css模块化设计（module，新）

设计原则

• 可复用能继承要完整
• 周期性迭代

设计方法

• 先总体后部分再颗粒化
• 先抽象再具体

2.js组建设计

设计原则

• 高内聚低耦合
• 周期性迭代

设计方法

• 先总体后部分再颗粒化
• 尽量抽象

5、原理分析

1.自适应

基本概念

css像素、设备像素（物理像素）、逻辑像素（同css像素）、设备像素比 。

• 设备像素比 = css像素/物理像素

参考资料：CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport #21
、移动端（自适应）布局解决方案

viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0">

• width:控制viewpoint的大小，能够指定的一个值，如600，或者特殊的值，如device-width为设备的宽度（单位为缩放为100%时的css像素）。
• height：和width相对应，指定高度。
• initial-scale：初始缩放比例，也便是当页面第一次load的时候缩放比例。
• maximum-scale：容许用户缩放到的最大比例。
• minimum-scale：容许用户缩放到的最小比例。
• user-scalable：用户是否能够手动缩放（通常不容许）。

三类：
layout viewport（页面窗口，大）；
visual viewport（可视区域的大小）；
ideal viewport（ideal viewport的宽度等于移动设备的屏幕宽度）
width=device-width所作的就是将layout viewport=ideal viewport

rem（相对于HTML标签）/em（相对于父级元素）

工做原理

• 利用viewport和设备像素比调整基准像素
• 利用px2rem自动转换css单位

2.SPA设计

设计意义

1. 先后端分离（前端作业务逻辑，后端处理接口数据）
2. 减轻服务器压力（不须要每一个页面都请求服务器）
3. 加强用户体验
4. Prerender预渲染优化seo （SPA对seo不太友好）

工做原理

1. History API（更优雅，可是对浏览器有要求）

• 要能执行打开的动做
• 要有历史操做单 输入图片说明
• pushState：建立历史记录
• onpopstate：响应浏览器的前进后退、及控制事件

<a class="api a">a.html</a>
<a class="api b">b.html</a>

<script type="text/javascript">
    //注册路由
    document.querySelectorAll('.api').forEach(item=>{
        item.addEventListener('click',(e)=>{
            e.preventDefault();
            let link = item.textContent;
            //pushState(参数，页面title，连接)
            window.history.pushState({name:'api',link,link});
        },false)
    })
    
    //监听路由
    window.addEventListener('popstate',(e)=>{
        console.log({
            location : location.href,
            state : e.state
        });
    },false)
</script>

1. Hash（兼容性最好的方案）

• 要能执行打开的动做
• 要有历史操做单 输入图片说明
• hashchange：当地址改变时，修改hash，监听hashchange事件，在事件里做相应的动做
• location.hash：

<a class="hash a">#a.html</a>
<a class="hash b">#b.html</a>

<script type="text/javascript">
    //注册路由
    document.querySelectorAll('.hash').forEach(item=>{
        item.addEventListener('click',(e)=>{
            e.preventDefault();
            let link = item.textContent;
            location.hash = link;
        },false)
    })
    
    //监听路由
    window.addEventListener('hashchange',(e)=>{
        console.log({
            location : location.href,
            hash : location.hash
        });
    },false)
</script>

6、构建工具

1.webpack

安装、配置、plugin

2.Babel

安装、配置、loader

3.webpack dev-server(热更新)

安装、配置

7、上线指导

• html
• css
• javascript