开发环境

1、IDE编写代码工具

• webstorm、sublime、vscode、atom、插件

2、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 看不一样

3、模块化

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

一、不使用模块化

• 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

二、使用模块化

// 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>其余的根据依赖关系自动引用
• 那两个函数，不必作成全局变量，不会带来污染和覆盖

三、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>

四、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

4、构建工具

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