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

开发环境

原文：https://www.cnblogs.com/DCL1314/p/10393133.html