【JavaScript】第十二章 開發環境

關於開發環境

---

• 面試官放通過開發環境瞭解面試者的經驗
• 開發環境最能體現工作產出效率
• 會以聊天的形式爲主，而不是出具體的問題
• IDE（開發工具，寫代碼的效率）
• Git（代碼版本管理，多人協作開發）
• JS模塊化
• 打包工具
• 上線回滾的流程

IDE

---

• webstorm
• sublime
• vscode
• atom
• 插件

Git

---

• 正式項目都需要代碼版本管理
• 大型項目需要多人協作開發
• Git和linux是一個作者
• 網絡Git服務器，如 coding.net 和 github.com
• 一般公司代碼非開源，都有自己的Git服務器
• 搭建Git服務器無需瞭解太多

Git的基本操作必須很熟練

命令	說明
git status	查看狀態
git diff	查看兩個文件的不同
git checkout xxx (file name)	發現自己改錯了，需要還原
git add .	將所有修改的東西全部囊括進來
git commit -m “xxx”	修改的內容提交到本地倉庫，-m代表添加的備註
git push origin master	提交到遠程倉庫
git pull origin master	別人修改代碼，從遠程下載已修改的代碼
git clone	克隆新的項目
git branch	查看當前分支
git checkout -b xxx	新建一個分支
git checkout xxx (branch name)	切換到一個已有的分支
git merge xxx	合併分支

echo "# test" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin [email protected]:kxbk100/test.git
git push -u origin master

模塊化

---

不使用模塊化

• 依賴層級引用關係
• 代碼中的函數必須是全局變量，才能暴露給使用方面，所以全局變量污染，不清楚各個文件間的依賴關係
• a.js知道要引用a-util.js，但是不知道其還需要依賴util.js

util.js

function getFormatDate(date, type) {
  // type === 1 返回 2017-06-15
  // type === 2 返回 2017年6月15日
  // ...
}

a-util.js

function aGetFormatDate(date) {
  // 要求返回 2017年6月15日 格式
  return getFormatDate(date, 2);
}

a.js

var dt = new Date();
console.log(aGetFormatDate(dt));

date.html

• 順序不能顛倒
• 3個文件之間是強依賴關係

<script src="util.js"></script>
<script src="a-util.js"></script>
<script src="a.js"></script>

使用模塊化

• 只往外s輸出1個函數
• 在另一個文件中再接收
• 直接<script src="a. js"></script> ，其他的根據依賴關係自動引用
• 前2個函數，沒必要做成全局變量，不會帶來污染和覆蓋

util.js

export {
  getFormatDate: function(date, type) {
    // type === 1 返回 2017-06-15
    // type === 2 返回 2017年6月15日
    // ...
  }
}

a-util.js

var getFormatDate = require('util.js');
export {
  aGetFormatDate: function (date) {
    // 要求返回 2017年6月15日 格式
    return getFormatDate(date, 2)
  }
}

a.js

var aGetFormatDate = require('a-util.js');
var dt = new Date();
console.log(aGetFormatDate(dt));

AMD

---

• 異步模塊定義
• require.js
• 全局定義define函數
• 全局定義require函數
• 依賴js會自動、異步加載，不使用就不加載，提升性能
• return一個對象
• 只有先define才能被require

util.js

define(function () {
  return {
    getFormateDate: function (date, type) {
      if (type == 1) {
        return '2017-06-15'
      }
      if (type == 2) {
        return '2017年6月15日'
      }
    }
  }
})

a-util.js

define(['./util.js'], function (util) {
  return {
    aGetFormatDate: function(date) {
      return util.getFormatDate(date, 2);
    }
  }
});

a.js

define(['./a-util.js'], function(aUtil) {
  return {
    printDate: function (date) {
      console.log(aUtil.aGetFormatDate);
    }
  }
}) 

main.js

require(['./a.js'], function (a) {
  var date = new Date();
  a.printDate(date)
})

main.html

<script src="/require.min.js" data-main="./main.js"></script> // 定義程序入口

---

a.js

define(['./util.js'], function (util) {
  return {
    aGetFormateDate: function (date) {
      return util.getFormateDate();
    }
  }
})

main.js

define(['./a.js'], function (a) {
  return {
    printDate: function (date) {
      console.log(autil.aGetFormateDate(date))
    }
  }
})

CommonJS

• nodejs模塊化規範，現在被大量用於前端
• 前端開發依賴的插件和庫，都可以從npm中獲取
• 構建工具的高度自動化，使得使用npm的成本非常低
• CommonJS不會異步加載JS，而是同步一次性加載進來
• exports輸出出一個東西，var require接收一個東西

util.js

module.exports = {
  getFormateDate: function (date, type) {
    if (type == 1) {
      return '2017-06-15'
    }
    if (type == 2) {
      return '2017年6月15日'
    }
  }
}

a-uril.js

var util = require('util.js');
module.export = {
  aGetFormateDate: function (date) {
    return util.getFormateDate(date, 2);
  }
}

AMD和CommonJS的使用場景

• 需要異步加載，用AMD
• 不需要異步加載JS，用CommonJS
• 使用npm之後使用CommonJS

構建工具(對模塊化的代碼打包和壓縮)

---

構建工具

• grunt（沒人用）
• gulp
• fis3
• webpack

構建的意義

• 模塊化打包
• 支持CommonJS
• CommonJS受nodeJS支持
• 後端放到前端來用需要兼容
• webpack封裝了很多方法，支持通過CommonJS的方式來運行在前端

安裝 -> 配置 -> 處理一個簡單事例 -> 得到結果

安裝nodeJS

1. 安裝Node.js
2. 進入文件目錄
3. 初次使用安裝http-server sudo npm install http-server -g
4. 使用http-server -p 8881生成服務
   這個服務只能針對靜態頁面的編輯，nodejs或者php的修改無法使用

安裝webpack

1. 進入文件目錄
2. 初始化環境npm init
3. 自動生成package.json文件

5. 安裝包npm install webpack --save-dev，-dev表示僅用於開發環境
6. 安裝包npm install jquery --save，任何環境都需要
7. 卸載包npm uninstall moment --save

配置webpack

1. 新建webpack.config.js，與index.html和package.json同級

var path = require('path');
var webpack = require('webpack');

module.exports = {
  context: path.resolve(__dirname, './src'), // __dirname：前端目錄
  entry: {
    app: './app.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  }
}

2. 新建src文件夾，在其中創建app.js入口文件
3. 在package.json的script中新增

"start": "webpack" // 將start指定爲webpack

4. 在index.html中，引入bundle.js
5. 訪問頁面

使用jQuery

1. 在app.js中添加

var $ = require('jquery'); // 它會從package.js中的dependencies中查找安裝的juqery

2. 自己寫模塊可以根據相對路徑獲取

var aUtil = require('./a-util.js')

3. npm start打包

壓縮jQuery

1. 安裝UglifyJS Webpack Plugin

$ npm install uglifyjs-webpack-plugin --save-dev

2. 修改webpack.config.json如下

var path = require('path');
var webpack = require('webpack');
var uglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  context: path.resolve(__dirname, './src'), // __dirname：前端目錄
  entry: {
    app: './app.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  //壓縮js
  optimization: {
    minimizer: [
      new uglifyJsPlugin({
        uglifyOptions: {
          compress: false
        }
      })
    ]
  }
}

3. npm start打包

上限回滾流程

介紹

• 是非常重要的開發環節
• 各個公司的具體流程不同
• 由專門的工具負責系統完成，我們無需關心細節
• 如果沒有參與過，面試時也要說出要點
• 只講要點，具體實現無法講解

上線和回滾的基本流程

上線

• 將測試完成的代碼提交到git版本庫的master分支
• 將當前服務器的代碼全部打包並記錄版本號（1.0），備份
• 將master分支的代碼提交到服務器覆蓋到線上服務器，生成新版本號（1.1）

回滾

• 將當前服務器的代碼打包並記錄版本號（1.1），備份
• 將備份的上一個版本號解壓（1.0），覆蓋到線上服務器，並生成新的版本號（1.2）

linux基本命令

• 服務器使用Linux居多，server版，只有命令行
• 測試環境要匹配線上環境，因此也是Linux
• 經常需要登錄測試機來自己配置，獲取數據

常用命令

• mkdir a
• ls
• ll
• cd a
• pwd 查看路徑
• rm -rf a
• vi a.js
  輸入：i
  保存：esc :w
  退出：esc :q
  保存並退出：esc :wq
• cat a.js 查看文件
• cp a.js a1.js 拷貝
• mv a1.js src/a1.js
• rm a.js