前端JavaScript面试技巧-----开发环境

1.关于开发环境

关于为什么会考察开发环境方面的问题呢？如下

面试官想通过开发环境了解面试者的经验。
开发环境，最能体现工作产出的效率。
会以聊天的形式为主，而不是出具体的问题。
IDE(写代码的效率)。
git（代码版本管理，多人协作开发）
JS模块化
打包工具
上线回滚的流程

2.IDE(开发工具)

webstorm（功能强大，收费） （大牛，大咖，逼格路线）
sublime（轻量级） （普通低调路线）
vscode（轻量级，插件多）（我用的这个，因为我是文艺小清新，哈哈）
atom（github的软件）（同vscode）

！！！ 千万别说你在用Dreamweaver/notpad++
（显得土，? 面试会扣分哦）
！！！ 不做.net也不要用Visual Studio
！！！ java也不要用eclipse
（理由同上?）

3.Git（代码管理工具）

大型项目都需要代码版本管理
大型项目需要多人协作开发
Git和linux是一个作者哦

4.常用Git命令

git clone https://e.coding.net/tothethousand/xx.git（克隆远程仓库）
git add .（提交到暂存区）
git commit -m “first commit”（暂存区里的改动给提交到本地的版本库）
git push -u origin master（提交给远程仓库）
git status（查看当前状态）
git diff (查看新增的部分)
git checkout xxx（把之前修改的xxx撤销）
git pull origin master(远程仓库代码同步到本地)
git branch(查看分支)
git checkout -b dev(切换到dev分支)
git merge dev(合并分支)

5.模块化

不使用模块化的情况

//举个栗子
//这是util.js
function getFormateDate(data,type){
//type === 1返回这种格式 2019-10-15
//type === 2返回这种格式 2019年10月15日
}

//这是a-util.js
function aGetFormatDate(data){
	return getFormateDate(data,2)//调用util.js的方法
}

//这是a.js
var dt=new Data()
console.log(aGetFormatDate(dt))//输出格式化后的日期

//使用时
<script src='util.js'></script>//引入要用的js
<script src='a-util.js'></script>
<script src='a.js'></script>

上诉情况就没有使用模块化：
1.导致需要同时引入多个js，关系混乱，a.js知道引用a-util.js,但是不知道还要引用util.js。当项目庞大的时候，显然会遇到很多问题。
2.这些代码中必须使用全局变量，才能暴露给使用的一方，容易污染全局变量。

使用模块化是什么样子

//举个栗子
//这是util.js
export{
	getFormateDate：function (data,type){
	//type === 1返回这种格式 2019-10-15
	//type === 2返回这种格式 2019年10月15日
	}
}


//这是a-util.js
var getFormatDate=require('util.js')//引入依赖的js
export{
	aGetFormatDate：function (data){
		return getFormateDate(data,2)//调用util.js的方法
	}
}

//这是a.js
var aGetFormatDate=require('a-util.js')
var dt=new Data()
console.log(aGetFormatDate(dt))//输出格式化后的日期

使用模块化是不是很清晰呀，就不存在上诉问题了。

AMD
require.js一个工具 网址requirejs.org
全局define函数
全局require函数
依赖JS会自动，异步加载

//util.js
define(function(){
	return{
		getFormatDate:function(date,type){
			if(type === 1 ){
				return '2019-10-22'
			}
			if(type === 2 ){
				return '2019年10月14日'
			}
		}
	}
})
//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(date))
		}
	}
})
//main.js
requrie(['./a.js'],function(a){
	var data = new Data()
	a.printDate(date)
})

CommonJS
node.js 模块化规范，现在被大量使用在前端。why：？
1.前端开发依赖的插件和库，都可以从npm中获取
2.构建工具的高度自动化，使得使用npm的成本非常低
3.CommonJS不会异步加载JS，而是同步一次性加载出来

    //util.js
    module.exports = {
        getFormatDate: function (date, type) {
            if (type === 1) {
                return '2019-10-22'
            }
            if (type === 2) {
                return '2019年10月14日'
            }
        }
    }
    //a-util.js
    var util = require('util.js')
    module.exports = {
        aGetFormatDate: function (date) {
            return util.getFormatDate(date, 2)
        }
    }

AMD和CommonJS的使用场景
需要异步加载JS，使用AMD
使用了npm之后建议使用CommonJS

每晚更新，还没写完。