开发环境

一、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))
  
  
  
  

• 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)
  })

• 使用

  AMD test

  
  

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