【構建】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