美文网首页
第七章 开发环境介绍

第七章 开发环境介绍

作者: qqqc | 来源:发表于2018-05-21 15:53 被阅读0次

    7-1 git 常用命令

    git add .   把所有修改的文件添加 . 是全部
    git checkout xxx  还原文件,发现自己改错,然后还原回去
    git commit -m "xxx"   提交修改的内容到本地, -m 加个备注
    git push origin master  提交到远程仓库
    git pull origin master  从远程仓库拉下来
    git branch 分支
    git checkout -b xxx 创建分支  git checkout xxx 切换到分支
    git merge xxx  
    git status 查看状态
    

    7-2 模块化

    1.不使用模块化的情况

    util.js getFormatDate 函数
    a-util.js aGetformatDate函数 使用getformatDate
    a.js aGetFormatDate
    
    //util.js
    function getFormatDate(date, type){
      // type === 1 返回2017-06-15
      // type === 2 返回2017年6月15格式
      // type === ....
    }
    
    // a-util.js
    function aGetFormatDate(date){
      // 要求返回 2017年6月15格式
      return getFormaDate(date, 2)
    }
    
    // a.js
    var dt = new Date()
    console.log(aGetFormatDate(dt))
    
    <script src="util.js"></script>
    <script src="a-util.js"></script>
    <script src="a.js"></script>
    

    缺点

    • 这些代码中的函数必须是全局变量,才能暴露给使用方。全局变量污染
    • a.js知道要引用 a-util.js ,但是他知道还需要依赖于 util.js 吗

    2.使用模块化

    // util.js
    export{
      getFormatDate : fucntion(date, type){
    
      }
    }
    
    // a-util.js
    var getFormatDate = require('util.js')
    export{
      aGetFormatDate: function(date){
        return getFormaDate(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

    equire.js requirejs.org/
    全局defune 函数
    全局require函数
    依赖js会自动、异步加载

    使用require.js

    //util.js
    define(function(){
      return {
        getFormaDate : function (date, type){
          if(type === 1){
            return '2017-06-15'
          }
          if(type === 2){
            return '2017/06/15'
          } 
        }
      }
    })
    
    //a-util.js
    define(['./util.js'], function(util){
      return {
        aGetFormatDate: function(date) {
          return util.aGetFormatDate(date, 2)
        }
      }
    })
    
    // a.js
    define(['./a-util.js'], function(aUtil){
      return {
        printDate : function(date){
          console.log(aUtil.aGetFormatDate(date))
        }
      }
    })
    
    // main.js
    require(['./a.js'], function(a){
      var date = new Date()
      a.printDate(date)
    })
    

    4. commonjs

    CommonJS nodejs 模块化规范,现在被大量前端
    前端开发依赖的插件和库,都可以从npm中获取
    构建工具的高度自动化,使得npm的成本非常低
    commonjs不会异步加载js,而是同步一次性加载出来

    使用

    // util.js
    module.exports = {
      getFormatDate : fucntion(date, type){
        if(type === 1){
          return '2017-06-15'
        }
        if (type === 2) {
          return '2017/06/15'
        }
      }
    }
    
    // a-util.js
    var util = require('util.js')
    module.exports = {
      aGetFormatDate: function(date){
        return util.getFormatDate(date, 2)
      }
    }
    

    5.amd 和 commonjs 的使用场景

    • 需要异步加载js,使用amd
    • 使用npm之后建议使用commonjs

    7-3.linux基本命令

    mkdir 创建文件夹
    touch box.html 创建一个html的文件
    open -a vscode box.html  指定用vscode 打开box.html 文件
    ls 查看当前文件夹有什么文件
    cd xxx  进入什么目录
    rm -rf xxx  删除什么目录
    vi a.js 打开这个文件 i 修改 esc 确认 :q 不保存退出 :wq 保存退出
    cp a.js  a1.js 拷贝a.js 并且命名为a1.js
    mv a1.js src/a1.js 把 a1.js 移动到src里面
    rm a.js 删除a.js
    cat a.js 直接可以查看a.js 的内容,而不用打开
    head a.js 查看前半部分
    tail a.js 查看后半部分
    

    相关文章

      网友评论

          本文标题:第七章 开发环境介绍

          本文链接:https://www.haomeiwen.com/subject/qvzfjftx.html