一、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 卸载