## 开发环境
* 了解经验
* 体现工作产出效率
* 聊天形式
### 关于开发环境
* IDE（写代码效率）
* git（代码版本管理，多人协作开发）
* js模块化
* 打包工具
* 上线回滚的流程
#### IDE（编写代码工具）
1. webstorm（功能强大，集成很多东西，收费）（很容易进入舒适区）
2. sublime（免费）
3. vscode（微软，轻量级）（常用插件，代码提示，一键生成代码结构）
4. atom（github开源的编辑器）
5. ** 插件 插件 插件！！！**提高效率
6. 最好一个用的熟悉，其他都会一点
7. 快捷键
8. 千万不要说使用Dreamweaver或notpad++
9. 不做.net也不要用Visual Studio
10. 不做java也不要用eclipse
#### Git（代码版本管理，有源可查）
1. 正式项目都需要代码版本管理
2. 大型项目需要多人协作开发
3. Git和linux是一个作者
4. 网络git服务器如 coding.net（可以不用分享） github.com
5. 一般公司代码非开源，都是自己的git服务器
6. 搭建git服务器无需了解太多
7. **git的基本操作必须熟练**
#### 常用Git命令
* git add .(所有文件都提交)
* git checkout xxx(还原文件)
* git commit -m "xxx" (把修改的提交到本地)
* git push origin master（提交到远程）
* git branch（分支）
* git checkout -b xxx /git checkout xxx
* git merge xx (合并分支)
#### coding.net
* ll：所有文件夹
* cat 文件名
* git status（看状态）
* git add xx yy zz (多个文件)
* git commit -m "xxx"(提交)
* git push
* vi a.js
* :wq(保存)
* cat a.js
* git status
* git diff（查看不同，没有新增的）
* git add .
* ctrl c取消
* git checkout 文件名（取消当前文件修改）
* git status（之前文件取消）
* git add .
* git status(modify)
* git commit -m "second commit"
* git push origin master
* git clone "xxxx"（取代码）
* git pull origin master（取最新代码）
#### 多人协作
* vi a.js(修改a.js)
* git add .
* git commit -m "xxx"
* git push origin master
* git branch(查看所有分支)
* git checkout -b dev(创建新分支)
* git branch
* vi a.js（修改文件）
* git add .
* git commit -m "xx"
* git push origin dev(提交分支，但没有合并)（保证修改的代码在自己的分支上）
* git checkout master
* git branch
* git pull origin master（更新别人提交的代码）
* git merge dev (合并分支)
* cat a.js
* git push origin master(合并后提交)
* 注意：回归怎么操作
* **版本回退：**
git reset --hard 版本号
### 模块化
1. 不使用模块化的情况
2. 使用模块化
3. AMD
4.
4. CommonJS
#### 不使用模块化的情况
* util.js getFormateDate函数
~~~
function getFormateDate(data, type){
//type ==1 返回2017-06-15
//type ==2 返回2017年6月25
}
~~~
* a-util.js aGetFormateDate函数，使用getFormateDate
~~~
function aGetFormateDate(date){
return getFormateDate(data,2)
}
~~~
* a.js aGetFormate
~~~
var dt = new Date();
console.log(aGetFormate(dt));
~~~
（基础库，封装常用函数！！）
~~~
script src ="util.js"
script src ="a-util.js"
script src ="a.js"
~~~
1. 这些代码中的函数必须是全局函数，才能暴露给使用方，**全局变量污染**
2. a.js知道要引用a-util.js，但是它知道还需要**依赖**于util.js吗？依赖关系不清楚
3. 顺序不能放错，强依赖
#### 使用模块化
用到谁，主动去引用（页面不用再引用），最后直接引用最外层js，依赖关系非常明显
也不用全局变量。
#### AMD（异步模块定义，规范）
1. require.js requriejs.org（成熟）
2. 全局define函数(定义模块，也可引用其他模块，必须define、return对象，才能被require)（第一个参数是数组，依赖的文件（必须define），）
3. 全局require函数（引用模块，不需要return）
4. 依赖js会自动、异步加载（根据引用关系，自动异步加载 main.js=>a.js=>a-util.js==>util.js）
5. 引用最表层文件（加载一个）
~~~
define(function(){
return {
getFormateDate(){
}
}
})
~~~
~~~
define(['./util.js'],function(util){
return{
aGetFormateDate:function(data){
return util.getFormatDate(data,2)
}
}
})
~~~
~~~
define(['./a-util.js'], function(autil){
return {
printData:function(data){
console.log(aUtil.aGetFormatDate(date))
}
}
})
~~~
main.js
~~~
require(['./a.js'],function(a){
var date = new Date();
a.printDate(date)
})
~~~
#### 使用require.js
~~~
<script src="/require.min.js" data-main="./main.js"></script>
~~~
好处：
1. 没有用到（引用）的js不会加载
2. 异步加载：提高渲染效率
### CommonJS（nodejs规范，被前端使用）
1. nodejs模块化规范，现在被大量用前端，原因：
* 前端开发依赖的插件和库，都可以从npm中获取
* 构建工具的高度自动化，使得使用npm的成本非常低
2. CommonJS不会异步加载js（服务器端运行），而是同步一次性加载
3. 需要构建工具支持
4. 一般和npm一起使用
~~~
util.js
module.exports = {
getFormateDate:function(data, type){
}
}
~~~
~~~
aUtil.js
var util = require('util.js')
module.exports = {
aGetFormatDate:function(date){
return util.getFormateDate:function(date,2)
}
}
~~~
**var util = require('util.js')
module.exports = {}**
比较简洁
#### AMD和CommonJS的使用场景
技术不分好坏，新项目（vue，react），很多以前的项目（jQuery，zepto）
1. 需要异步加载js，使用AMD
2. 使用了npm之后，建议使用CommonJS
#### 重点总结
1. AMD
2. CommonJS
3. 两者的区别
### 构建工具
* grunt（基本没人用）
* gulp（更加简单，速度更加快）
* fis3（内部用的多，前端场景用的不多）
* webpack（功能强大）（CommonJS）
保证有nodejs npm
node -v npm -v
npm install http-server -g
http-server - p 8881(浏览静态网页)
#### 安装webpack
1. 初始化npm环境 `npm init`
2. 生成了`package.json`（包的配置，npm把webpack目录当成一个包）
~~~
{
"scripts": {
"test":'xxxx',
"start": "webpack"
},
"devDependencies":{
"webpack": "^3.0.0"
},
"dependencies":{
"jquery": "^3.2.1"
}
}
~~~
** "start": "webpack"** //npm start 执行webpack命令
3. 安装webpack `npm install webpack --save-dev`(只用于开发环境，页面运行不需要)
4. `npm install jquery --save`(不写-dev，因为jquery在浏览器运行是也需要)
5. **npm install **等于**npm i**
6. `npm moment --save`（dependencies）
7. `npm uninstall moment --save`(卸载)
8. 创建了node_modules文件夹
9. 在webpack文件夹下创建webpack.config.js（和package.json同级）
~~~
var path = require('path'); //路径，和前端没什么关系
var webpack = require("webpack");
module.exports= {
//__dirname表示webpack目录，找到目录下的src目录
context: path.resolve(__dirname,'./src'),
//入口
entry:{
app: 'app.js', //src目录下app.js
},
//输出 输出到webpack/dist目录下(webpack会自动创建)
output:{
path: path.resolve(__dirname,'./dist'),
filename:'bundle.js',
}
}
~~~
10. npm start
11. 页面引入
~~~
<script src="dist/bundle.js" ></script>
~~~
#### jQuery怎么用
~~~
var $ = requrie('jquery');
var aUtil = require('./autil.js')
aUtil.print();
console.log($);
var $root = $("#root")
$root.html("<p>text</p>")
~~~
~~~
autil.js
module.exports = {
print:function(){
console.log(111)
}
}
~~~
### webpack代码压缩
代码太大，不利于性能优化
~~~
var path = require('path'); //路径，和前端没什么关系
var webpack = require("webpack");
module.exports= {
//__dirname表示webpack目录，找到目录下的src目录
context: path.resolve(__dirname,'./src'),
//入口
entry:{
app: 'app.js', //src目录下app.js
},
//输出 输出到webpack/dist目录下(webpack会自动创建)
output:{
path: path.resolve(__dirname,'./dist'),
filename:'bundle.js',
},
plugins:[
new webpack.optimize.UglifyJsPlugin(),//webpack自身有的
]
}
~~~
npm start（打包后发现已压缩）
**打包工具：代码的合并和压缩**（不然前端代码无法识别）
不压缩的代码基本是无法上线的
### 上线和回滚
1. 上线和回滚的基本流程
2. linux基本命令（阿里云 熟悉一下）
#### 上线回滚流程介绍
* 是非常重要的开发环节
* 具体流程不同
* 由专门的工具或者系统完成，无需关系细节
* 如果没有参与过，说出要点
#### 上线流程要的
1. 将测试完成的代码提交到git版本库的master分支（保证是完成之后的，等待上线）
2. 将当前服务器的代码全部打包并记录版本号，备份（压缩包）
3. 将master分支的代码提交覆盖到线上服务器，生成新版本号（上线1.0）
#### 回滚流程要点
1. 将当前服务器的代码打包并记录版本号，备份（1.1）
2. 将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本号（1.2）
### linux基本命令
* 服务器使用linux居多，server版，只有命令行
* 测试环境要匹配线上环境，因此也是linux
* 经常需要登录测试机来自己配置、获取数据
#### linux基本命令
* 登录 ssh name@server
* 创建文件夹 mkdir a
* ls 查看当前文件有什么文件名字
* ll 列表形式，更详细
* cd a//计入目录
* pwd 查看当前目录
* cd ..返回上一级
* cp a.js a1.js 拷贝
* mkdir src
* mv a1.js src/a1.js 移动
* cd src
* ll //查看文件
* rm a.js 删除
* vi（vim） a.js（新建a.js，进入编辑模式）（vi编辑器）
* 点击i（输入环境 instert）
* 点击esc（不能输入）
* i(可输入)
* 点击esc 再:w(写) 回车，此时文件保存，再:q(退出)
* cat a.js(查看文件内容)
* head a.js(查看文件内容前一部分)
* tail a.js(查看文件内容后一部分)
* head -n 1 a.js //第一行
* tail -n 2 a.js//后两行
* grep "2" a.js //文件搜索
- 空白目录
- 双樾
- JS基础知识
- JS-WEB-API
- 开发环境
- 运行环境
- ES6
- 原型
- 异步
- 虚拟dom
- mvvm
- 组件化和React
- hybrid
- 其他
- 补充
- 技巧
- 快乐动起来呀
- css
- 掘金小册子
- js基础知识
- ES6知识点
- JS异步
- JS进阶知识
- 思考题
- DevTools Tips
- 浏览器基础知识
- 浏览器缓存机制0
- 浏览器渲染原理
- 安全防范知识点0
- 从V8中看JS性能优化0
- 性能优化琐碎事
- Webpack性能优化0
- 实现小型打包工具0
- React和Vue
- Vue生命周期
- vue基础知识点
- Vue响应式
- vue高级
- React基础
- Vue.js技术解密
- 准备工作
- 数据驱动
- new Vue()
- vue实例挂载
- 组件化
- 深入响应式原理
- 编译
- 扩展
- Vue Router
- Vuex