開發環境

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