前端面试题

star_sky
334 阅读24分钟

一、vue篇

1、MVVM是什么，怎么来的。

MVVM：M就是Model、V就是view，而VM就是viewModel。 数据Model的调用和模板内容的渲染不需要我们主动操作，而是用ViewModel自动来触发完成的，任何用户的操作也都是通过ViewModel的改变来驱动的，一般ViewModel初始化时会自动进行数据绑定。

（MVVM可以认为是一个自动化的MVP框架，并使用了ViewModel代替presenter）

2、生命周期（相互之间的区别是啥）

vue的生命周期主要分为几个简单，数据初始化，dom挂载，数据更新，组件卸载，在一个就是开启了组件缓存的时候，会有组件启用和组件停用阶段，每个阶段都去前后两个钩子除了缓存的那俩

数据初始化阶段 beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

dom挂载阶段 beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。 mounted：el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

数据跟新阶段 beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：

缓存启用的时候会有下面两个钩子 activated：keep-alive 组件激活时调用。 deactivated：keep-alive 组件停用时调用。

组件卸载的时候： beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

3、vue-router（跳转方式、动态添加路由）

4、导航守卫（全局前置守卫）

5、vuex(重点)

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。

dispatch：操作行为触发方法，是唯一能执行action的方法。

actions：操作行为处理模块,由组件中的 $store.dispatch('action 名称',data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。

commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。

mutations：状态改变操作方法，由actions中的 commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。

state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。

getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

6、组件间通信

  • 父组件传子组件
单项数据流props
使用refs访问子组件
使用$parent访问父组件
使用$children访问子组件
使用$root访问当前组件树的根 Vue 实例
在template元素使用scope 可以访问到子组件中slot元素的属性值
  • 子组件向父组件传值（通过事件形式）
子组件通过事件给父组件传数据，子组件通过$emit（eventName）触发事件，父组件通过$on监听事件
  • 兄弟组件间通信

①用事件发布订阅

var bus=new vue();
bus.$emit("id-selected",1);
bus.$on("id-selected",function(id){})

②用vuex来实现

7、axios在项目中怎么封装的

8、vue双向数据绑定原理

9、vue2与vue3的双向数据绑定原理的区别

10、vue中请求接口放在哪个生命周期为什么（created与mounted的区别）

created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

11、vue过滤器的使用

12、ElementUI怎么使用，里面的一些基础知识也得看看（会问到呢）

13、vue有哪些特点？与angular、react有啥区别？

  • 与AngularJS的区别 相同点：都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。 不同点：AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。
  • 与React的区别 相同点：React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。 不同点：React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

二、js&es6

null，undefined 的区别？

null  表示一个对象被定义了，值为“空值”；

undefined   表示不存在这个值。

typeof undefined   //"undefined"

undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined；

例如变量被声明了，但没有赋值时，就等于undefined

typeof null //"object"

null : 是一个对象(空对象, 没有任何属性和方法)；

例如作为函数的参数，表示该函数的参数不是对象；

注意： 在验证null时，一定要使用　=== ，因为 == 无法分别 null 和　undefined

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

典型用法是：

  1. 变量被声明了，但没有赋值时，就等于undefined。

  2. 调用函数时，应该提供的参数没有提供，该参数等于undefined。

  3. 对象没有赋值的属性，该属性的值为undefined。

  4. 函数没有返回值时，默认返回undefined。

null表示"没有对象"，即该处不应该有值。

典型用法是：

  1. 作为函数的参数，表示该函数的参数不是对象。
  2. 作为对象原型链的终点。

1、深拷贝与浅拷贝

数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。

基本数据类型的特点：直接存储在栈(stack)中的数据 引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

  • Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。
  • 用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。
  • 递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝

2、闭包是什么？优缺点，在哪用过

function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}var c=a();
c();

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

闭包的特性： 1，函数内再嵌套函数 2，内部函数可以引用外层的参数和变量 3，参数和变量不会被垃圾回收机制回收

闭包的使用场景 常见的闭包的使用场景就是模块化，用来做模块内部的实现通过接口的扩展贡其他模块使用 在就是闭包可以用来缓存值，减少不必要的技术，例如vue里面的计算属性

闭包就是能够读取其他函数内部变量的函数

作用 闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。

它的最大用处有两个一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中

需要注意的点：

（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

感兴趣的同学可以查看 深入学习闭包

3、原型、原型链有哪些特点

4、作用域链

变量作用域和作用域链

5、数组方法以及之间的区别如：pop、push、shift、unshift

  • push() 在数组尾部添加一个或多个元素
  • pop () 删除数组最后一个元素
  • unshift() 在头部添加一个或多个元素
  • shift() 删除数组的第一个元素并将其返回
  • slice()返回指定数组的一个片段或子数组
  • splice() 在数组中插入或删除元素（返回一个有删除元素组成的数组）

数组排序

  • 桶排序（桶中出现的数组元素都做个标记1，然后将桶数组中有1标记的元素依次打印）
  • 冒泡排序：将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）

//性能一般
var arr=[1,5,7,9,16,2,4];
var temp;
for(var i=0;i<arr.length-1;i++){
    for(var j=0;j<arr.length-1;j++){
        if(arr[j]>arr[j+1]){
            temp=arr[j];
            arr[j]=arr[j+1];
            arr[j+1]=temp;
        }
    }
  • 选择排序（假定某个位置的值是最小值）
  • sort排序

6、面向对象编程（设计模型）

面向对象的好处：可维护，可复用，可扩展和灵活性好

面向对象编程的基本特征：封装，继承和多态

创建型模式：单例模式、抽象工厂模式、建造者模式、工厂模式、原型模式。

结构型模式：适配器模式、桥接模式、装饰模式、组合模式、外观模式、享元模式、代理模式。

行为型模式：模版方法模式、命令模式、迭代器模式、观察者模式、中介者模式、备忘录模式、解释器模式、状态模式、策略模式、职责链模式(责任链模式)、访问者模式。

继承

1、原型链继承 构造函数、原型和实例之间的关系： 每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个原型对象的指针。

原型链继承的缺点： a.多个实例对引用类型的操作会被篡改 b.子类型的原型上的constructor属性被重写了 c.给子类型原型添加属性和方法必须在替换原型之后 d.创建子类型实例时无法向父类型的构造函数传参。

2、借用构造函数继承 使用父类的构造函数来增强子类实例，等同于复制父类的实例给子类（不使用原型） 缺点： 只能继承父类的实例属性和方法，不能继承原型属性和方法 无法实现复用，每个子类都有父类实例函数的副本，影响性能。

3、组合继承 组合继承就是原型链继承+借用构造函数继承。 用原型链实现对原型属性和方法的继承 用借用构造函数技术实现实例属性的继承。 缺点： 使用子类创建实例对象时，其原型中会存在两份相同的属性和方法。

4、原型式继承 利用一个空对象作为中介，将某个对象直接赋值给空对象构造函数的原型 缺点： 原型链继承多个实例的引用类型属性指向相同，存在篡改的可能 无法传递参数

5、寄生式继承 在原型式继承的基础上，增强对象，返回构造函数。 缺点： 同原型式继承

6、寄生组合式继承 结合借用构造函数传递参数和寄生模式实现继承 这是最成熟的方法，也是现在库实现的方法

7、混入方式继承多个对象

8、ES6类继承extends extends关键字主要用于类声明或者类表达式中，以创建一个类，该类是另一个类的子类。其中constructor表示构造函数，一个类中只能有一个构造函数，有多个会报出SyntaxError错误,如果没有显式指定构造方法，则会添加默认的 constructor方法

  • 函数声明和类声明的区别

    函数声明会提升，类声明不会。首先需要声明你的类，然后访问它，否则像下面的代码会抛出一个ReferenceError。

  • ES5继承和ES6继承的区别

    ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上(Parent.call(this)) ES6的继承有所不同，实质上是先创建父类的实例对象this，然后再用子类的构造函数修改this。因为子类没有自己的this对象，所以必须先调用父类的super()方法，否则新建实例报错。

参考链接：JavaScript常用八种继承方案

7、es5与es6的区别

ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性：

1）let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明

2）箭头函数ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义

3）模板字符串模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串

4）解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值

5）for of循环for...of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串

6）import、export导入导出ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用

7、es6用过哪些，具体说明（class、promise、解构赋值、箭头函数等）

8、let、var、const的区别

var声明变量可以重复声明，而let不可以重复声明

var是不受限于块级的，而let是受限于块级

var会与window相映射（会挂一个属性），而let不与window相映射

var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错

const声明之后必须赋值，否则会报错

const定义不可变的量，改变了就会报错

const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错

9、async与await的使用

10、说一下同步和异步

11、一个页面加载很多数据，使用异步方法时上面的数据还没加载完成，下面的就开始加载了，怎么处理这样的情况？

12、ajax中的success回调函数中处理数据，与不写回调函数，直接处理数据有什么区别？

三、css3（预处理器与后处理器）

1、CSS 预处理器 / 后处理器？

  • 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
  • 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

2、less、sass/scss、stylus区别

四、H5

1、H5新增标签

w3cshool

2、H5标签的兼容性

五、浏览器应用基础

1、用户输入一个网址到页面展示网页内容的这段时间内，浏览器和服务端都发生了什么？

  • 浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
  • 调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
  • 通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
  • 进行HTTP协议会话，客户端发送报头(请求报头);
  • 进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
  • 进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
  • 处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
  • 浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
  • 文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
  • 页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。

2、localstorage、sessionStorage、cookie的区别

  • Localstorage 存储的数据是永久性的除非手动删除；作用域是限定在文档源（document orgin）

文档源是有协议、主机名及端口来确定的。同源的文档共享同样的localstorage数据，但是作用域会受到浏览器供应商的限制。

| localStorage浏览器支持与大小限制 | | | :----- | :--: | -------: | | 浏览器 | 最大长度| | Internet Explorer8以上 | 5MB | | Firefox8以上| 5.24MB | | Opera | 2MB | | Chrome、Safari | 2.6MB |

  • sessionStorage 在浏览器关闭时会自动清空

  • Cookie（或cookies），指网站为了辨别用户身份或Session跟踪而存储在用户浏览器端的数据。Cookie信息一般会通过HTTP请求发送到服务端。一条cookie记录主要有键、值、域、过期时间和大小组成，一般用于保存用户的网站认证信息。通常我们认为Cookie的最大长度限制为4KB（4059字节）。可以通过max-age 设置过期时间。

Cookie浏览器支持与大小限制
浏览器支持域名个数最大长度
Internet Explorer8以上50个4095B
Firefox8以上50个4097
Opera30个4096B
Chrome、Safari无限制4097B

五、HTTP

1、HTTP中headers里面的东西，知道的都有什么吗？

HTTP菜鸟教程

2、HTTP中100-500之间的状态值都是啥，有什么区别，了解吗？

下面是常见的HTTP状态码：

  • 200 - 请求成功
  • 301 - 资源（网页等）被永久转移到其它URL
  • 302 - 请求的资源临时从不同的 URI响应请求
  • 403 - 服务器已经理解请求，但是拒绝执行它（请求被禁止）
  • 404 - 请求的资源（网页等）不存在
  • 500 - 内部服务器错误

HTTP详细链接一般会问到类似301与303的区别，这就需要小伙伴们自己去看了

3、get、post的区别（存储大小、安全性；为什么post比get安全）

  • get是从服务器上获取数据，post是向服务器传送数据。

  • get方式，服务端用Request.QueryString获取变量的值；post方式，服务端用Request.Form获取提交的数据。

  • get传送的数据量较小，不能大于2KB；

  • get收集数据及HTML表单内的输入字段名称的总长不超过1024个字节；

  • get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

  • Get不安全因为在传输过程中，数据被放在请求的URL中会被服务器、代理服务器挥着用户代理记录到日志文件中；用户也可以在浏览器上直接看到提交的数据。而post的所有操作对用户来说是不可见的。

4、长连接与短连接的区别

  • 短连接：连接->传输数据->关闭连接 执行一次结束任务就关闭
  • 长连接：连接->传输数据->保持连接 -> 传输数据-> ...........->直到一方关闭连接，多是客户端关闭连接。 长连接指建立SOCKET连接后不管是否使用都保持连接，但安全性较差。
  • 适用场景：短连接：适用于网页浏览等数据刷新频度较低的场景。长连接：适用于客户端和服务端通信频繁的场景，例如聊天室，实时游戏等。

5、两个标签页之间的通信（websoket、session、cookie）

  • WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

六、插件

1、jQuery与zepto的区别

  • Zepto最初是为移动端开发的库，是jQuery的轻量级替代品 2、jquery延迟3秒是为啥 3、Echarts中遇到的问题（图标联动）

七、构建工具

1、webpack的原理

  • webpack是一个打包模块化 JavaScript 的工具，在 webpack里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。 webpack专注于构建模块化项目。
  • 更新流程 热更新开启后，当webpack打包时，会向client端注入一段HMR runtime代码，同时server端（webpack-dev-server或是webpack-hot-middware）启动了一个HMR服务器，它通过websocket和注入的runtime进行通信。 当webpack检测到文件修改后，会重新构建，并通过ws向client端发送更新消息，浏览器通过jsonp拉取更新过的模块，回调触发模块热更新逻辑。

1.修改了一个或多个文件。 2.文件系统接收更改并通知Webpack。 3.Webpack重新编译构建一个或多个模块，并通知HMR服务器进行了更新。 4.HMR Server使用websockets通知HMR Runtime需要更新。HMR运行时通过HTTP请求这些更新（jsonp）。 5.HMR运行时替换更新中的模块，如果确定这些模块无法更新，则触发整个页面刷新（这是个大坑。。）。

  • webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

    • 初始化参
    • 开始编译 用上一步得到的参数初始Compiler对象，加载所有配置的插件，通 过执行对象的run方法开始执行编译
    • 确定入口 根据配置中的 Entry 找出所有入口文件
    • 编译模块 从入口文件出发，调用所有配置的 Loader 对模块进行编译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
    • 完成模块编译 在经过第4步使用 Loader 翻译完所有模块后， 得到了每个模块被编译后的最终内容及它们之间的依赖关系
    • 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk,再将每个 Chunk 转换成一个单独的文件加入输出列表中，这是可以修改输出内容的最后机会
    • 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内容写入文件系统中。

2、webpack怎么配置（自己配置过吗）

3、webpack与gulp的区别

  • webpack： webpack是一个模块打包器，强调的是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源都看成是模块，通过loader和plugin对资源进行处理。
  • gulp： gulp是一个前端自动化构建工具，强调的是前端开发的工作流程，可以通过配置一系列的task，第一task处理的事情（如代码压缩，合并，编译以及浏览器实时更新等）。然后定义这些执行顺序，来让glup执行这些task，从而构建项目的整个开发流程。自动化构建工具并不能把所有的模块打包到一起，也不能构建不同模块之间的依赖关系。

八、版本管理工具

1、Git与svn的区别

  • Git是分布式的，SVN是集中式的
  • Git把内容按元数据方式存储，svn是按文件。
  • Git无网络或服务器挂掉也可以继续工作，svn无网络或服务器挂掉不能正常工作
  • Git记录了全部操作记录及版本，svn只记录差异
  • Git每个人所持有的版本可以随意恢复，svn单点故障不易恢复
  • Git分支管理（新建，切换，合并等）便捷高效
  • Git没有现成的权限控制，svn有完整的权限控制

1、Git 最核心的一个概念就是工作流。 工作区(Workspace)是电脑中实际的目录。 暂存区(Index)类似于缓存区域，临时保存你的改动。 仓库区(Repository)，分为本地仓库和远程仓库。

2、Git的基本使用命令（提交文件、切换分支、创建文件）

通常提交代码分为几步：

  • git add从工作区提交到暂存区
  • git commit从暂存区提交到本地仓库
  • git push或git svn dcommit从本地仓库提交到远程仓库
  • git status 查看本地工作区、暂存区文件的修改状态
  • git branch 查看所有远程的分支
  • git branch -r 查看所有远程的分支
  • git branch -a 查看所有远程的分支和本地分支
  • git branch 创建branchnane分支
  • git branch -d 删除本地branchname分支
  • git checkout -b 切换分支到branchname
  • git checkout -- xx/xx 回滚单个文件
  • git merge 合并指定分支到当前分支 Git常用命令行可以看一下LHammer掘金总结的链接
avatar
文章
阅读
粉丝