开发环境

一、IDE编写代码工具

• webstorm、sublime、vscode、atom、插件

二、Git

• 代码版本的管理，多人协作开发

• 正式项目都需要代码版本管理

• 大型项目需要多人协作开发

• git和linux是一个作者

• 网络git服务器如codeing.net、github.com

• 常用git命令

    git add 修改
    git checkout xxx 还原
    git commit -m "xxx" 建到本地
    git push origin master 远程仓库
    git pull origin master 下载
    git branch 分支
    git checkout -b xxx/git checkout xxx 新建分支/切换分支
    git merage xxx
    git status 看状态
    git diff 看不同
  

三、模块化

• 知识点：不使用模块化的情况、使用模块化、Amd、ConmmonJS

1、不使用模块化

• util.js getFormatDate函数

• a-utils.js aGetFormatDate函数 使用getFormatDate

• a.js aGetFormatDate

    //util.js
    function getFormaDate(date,type){
    	// type === 1 返回2019-02-17
    	// type === 2 返回2019年2月17日 格式
    }
    // a-util.js
    function aGetFormatDate(date){
    	// 要求返回2019年2月17日
    	return getFormatDate(date,2)
    }
    // a.js
    var dt = new Date();
    console.log(aGetFormatDate(dt))
    <!-- 使用 -->
    <script src="util.js"></script>
    <script type="a-util.js"></script>
    <script src="a.js"></script>
  

• 1.这些代码中的函数必须是全局函数，才能暴露给使用方，全局变量污染

• 2.a.js知道要引用a-util.js,但是他知道依赖于until.js

2、使用模块化

// util.js
export {
	getFormatDate:function(date,type){
		// type === 1 返回2017-06-15
		//type === 2 返回2017年6月15日格式
	}
}
// a-util.js
var getFormate = require('util.js');
export {
	aGetFormatDate:function(date){
		// 要求返回2019年2月17日格式
		return getFormatDate(date,2)
	}
}
// a.js
var aGetFormatDate = require('a-util.js');
var dt = new Date();
console.log(aGetFormatDate(dt))

• 直接<script src="a.js"></script>其他的根据依赖关系自动引用
• 那两个函数，没必要做成全局变量，不会带来污染和覆盖

3、AMD 异步模块定义

• require.js

• 全局定义 define函数

• 全局require函数

• 依赖js会自动，异步加载

• 使用`require.js

    //util.js
    define(function(){
    	return {
    		getFormatDate:function(date,type){
    			if(type === 1){
    				return `2019-02-17`
    			}
    			if(type === 2){
    				return `2019年2月17日`
    			}
    		}
    	}
    })
    // 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
    reuqire(['./a.js'],function(a){
    	var date = new Date();
    	a.printDate(date)
    })
  

• 使用

        <p>AMD test</p>
        <script src="/require.min.js" data-main="./main.js"></script>
  

4、CommonJS

• node.js模块化规范，现在大量用前端原因

• 前端开发依赖的插件和库，都可以从npm中获取

• 构建工具的高度自动化，使用npm的成本非常低

• CommonJS不会异步加载js,而是同步一次性加载出来

• 使用CommonJS

    //util.js
    module.export = {
    	getFormate:function(date,type){
    		if(type === 1){
    			return '2019-02-17'
    		}
    		if(type === 2){
    			return '2019年2月17日'
    		}
    	}
    }
    //a-util.js
    var util = require('util.js');
    module.export = {
    	aGetFormatDate:function(date){
    		return util.getFormatDate(date,2)
    	}
    }
  

AMD和CommonJS的使用场景

• 需要异步加载js，使用AMD
• 使用npm之后建议使用CommonJS

四、构建工具

• grunt、gulp、fis3、webpack
• npm install webpack --save-dev
• npm install === npm i
• moment
• npm uninstall webpack --save 卸载