關於開發環境
1、面試官想通過開發環境了解面試者的經驗；
2、開發環境，最能體現工作產出的效率；
3、會以聊天的形式為主，而不是出具體的問題。
開發環境的內容包含
1、IDE（寫代碼的效率）；
2、git（代碼版本管理，多人寫作開發）；
3、JavaScript模塊化；
4、打包工具（webpack）；
5、上線回滾的流程。
IDE介紹
1、webstorm；
2、sublime；
3、vscode；
4、atom。
（以上編輯器的插件非常重要！）
Git介紹
前言：正式項目都需要代碼版本管理；大型項目都需要多人寫作開發；Git和linux都是同一個作者。
常用的Git命令：
1、git add .；
2、git checkout xxx；
3、git commit -m “xxx”；
4、git push origin master；
5、git pull origin master；
6、git branch；
7、git checkout -b xxx / git checkout xxx；
8、git merge xxx；
更多
模塊化介紹
1、不使用模塊化的情況
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/util.js" ></script>
<script type="text/javascript" src="js/a-util.js" ></script>
<script type="text/javascript" src="js/a.js" ></script>
</head>
<body>
<!--1、以上JavaScript代碼中的函數必須是全局變量，才能暴露給使用方，全局變量的污染-->
<!--2、a.js知道要引用a-util.js，但是不知道還需要依賴於util.js-->
</body>
</html>
//util.js
function getFormatDate(date,type){
//type === 1 返回2017-11-08
//type === 2 返回2017年11月8日
}
//a-util.js
function aGetFormatDate(date){
return getFormatDate(date,2);
}
//a.js
var dt = new Date();
console.log(aGetFormatDate(dt));
2、使用模塊化（我們可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/a.js" ></script>
</head>
<body>
<!--直接引用a.js，其他的根據依賴關系自動引用那兩個函數，沒必要做成全局變量，不會帶來污染和覆蓋-->
</body>
</html>
//util.js
export{
function getFormatDate(date,type){
//type === 1 返回2017-11-08
//type === 2 返回2017年11月8日
}
}
//a-util.js
var getFormatDate = require('util.js');
export{
aGetFormatDate:function(date){
return getFormatDate(date,2);
}
}
//a.js
var aGetFormatDate = require('a-util.js');
var dt = new Date();
console.log(aGetFormatDate(dt));
3、AMD
全稱是Asynchronous Module Definition，即異步模塊加載機制。作為一個規范，只需定義其語法API，而不關心其實現，AMD規范簡單到只有一個API，即define函數：
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中：
module-name: 模塊標識，可以省略；
array-of-dependencies: 所依賴的模塊，可以省略；
module-factory-or-object: 模塊的實現，或者一個JavaScript對象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>AMD test</p>
<script type="text/javascript" src="js/require.js" data-main = "./main.js"></script>
</body>
</html>
//main.js(和html同個文件夾)
require(['./js/a.js'],function(a){
var date = new Date();
a.printDate(date);
})
//a.js
define(['./a-util.js'],function(aUtil){
var a = {
printDate:function(date){
console.log(aUtil.aGetFormatDate(date));
}
}
return a;
})
//a-util.js
define(['./util.js'],function(util){
var aUtil = {
aGetFormatDate:function(date){
return util.getFormatDate(date,2);
}
}
return aUtil;
})
//util.js
define(function(){
var util = {
getFormatDate:function(date,type){
if(type === 1){
return "2017-11-09";
}else{
return "2017年11月9日";
}
}
}
return util;
})
4、 CommonJS
CommonJS定義的模塊分為:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}
require()用來引入外部模塊；exports對象用於導出當前模塊的方法或變量，唯一的導出口；module對象就代表模塊本身。
node.js模塊化系統是參照CommonJS規范實現的，現在被大量用於前端，原因是：前端開發依賴的插件和庫，都可以從npm中獲取；構建工具的高度自動化，使得使用npm的成本非常低。
CommonJS不會異步加載JS，而是同步一次性加載出來。
5、AMD和CmmonJS的使用場景
需要異步加載JS，使用AMD；
使用了npm之后建議使用CommonJS。
6、其他
安裝本地服務器：
打開cmd=>cd 目錄=>npm install http-server -g=>http-server -p 端口號
訪問：
http://localhost:端口號/index.html
webpack介紹
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。
使用步驟：
1、cd 項目地址
2、初始化：npm init
3、安裝webpack：npm install webpack --save-dev
（卸載命令：npm uninstall 名字 --save）
4、安裝庫（jQuery）：npm install jquery --save-dev（-dev可以選擇不寫）
5、配置文件：
//webpack.config.js
//獲得node.js中一個path對象 var path =require('path'); //獲得安裝好的webpack對象 var webpack = require('webpack'); module.exports = { //尋找src目錄 context:path.resolve(__dirname,'./src'), //入口文件 entry:{ app:'./app.js'; }, output:{ path:path.resolve(__dirname,'./dist'), filename:'bundle.js' } }
6、執行命令：webpack
7、使用jQuery：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>test</div>
<div id="root"></div>
<script type="text/javascript" src="dist/bundle.js" ></script>
</body>
</html>
//app.js
//得到jQuery對象
var $ = require('jquery')
var $root = $('#root')
$root.html('<p>這是jQuery插入的文字</p>')
8、壓縮代碼：
//獲得node.js中一個path對象 var path =require('path'); //獲得安裝好的webpack對象 var webpack = require('webpack'); module.exports = { //尋找src目錄 context:path.resolve(__dirname,'./src'), //入口文件 entry:{ app:'./app.js' }, output:{ path:path.resolve(__dirname,'./dist'), filename:'bundle.js' }, plugins:[ new webpack.optimize.UglifyJsPlugin() ] }
上線和回滾
上線和回滾的基本流程要點：
1、將測試完成的代碼提交到git版本庫的master分支；
2、將當前服務器的代碼全部打包並記錄版本號，備份；
3、將master分支的代碼提交覆蓋到線上服務器，生成新版本號。
linux基本命令：