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

第七章 开发环境介绍

作者: 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