VUE(相关简介及初始)

大家好，又见面了，我是你们的朋友全栈君。

1.什么是vue

代码语言：javascript复制

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习
，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。其实说白了Vue.js就是一个用于搭建类似于网页版知乎这种
表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单
页应用。

Vue是一个数据驱动页面的一个框架，基于MVVM模式，M指的是数据，V值得是视图，VM是视图模型，将数据绑定视图上（双向绑定）

这个框架着重于VM部分

2.VUE诞生的背景

近几年来，得益于手机设备的普及和性能的提升，移动端的web需求大量增加，产生了一种叫webapp的东西，也就是移动端的网页应用。

它们功能越来越复杂，交互也越来越酷炫，功能与效果越来越接近于原生的APP。

这种webapp它们不仅仅像h5营销网页一样有酷炫的效果，它们还有复杂的点击、输入、下拉选择，视图切换等复杂的交互。在这样的业务需求下，我们还是沿用PC端的开发方案，难免会不太合适。比如：视图切换。

在PC端，视图切换我们会用<a>标签进行页面的跳转，但如果在移动端，那就歇菜了

这个时候用户只能等…..3秒，5秒，8秒…….很难想象，在一个需要频繁切换视图的webapp里面，使用<a>标签去实现，对用户来说是很不友好的，换你你也不愿意等那么久，反正我是不愿意了….

此外，接收用户输入的同时，很可能要及时更新视图，比如用户输入不同的内容，页面就会相对应进行更新，点击不同的选项，就会显示不同的状态等等交互效果。一旦这种交互多了，你要手动地进行操作，代码就容易变得复杂和难以维护。

为了解决webapp这些的体验和开发上的不足，我们决定学习并使用一个MVVM框架——Vue.js

2.什么是MVVM

MVVM可以拆分成：View — ViewModel — Model三部分

那么，我们怎么理解MVVM呢？

左侧的View相当于我们的DOM内容，我们所看到的页面视图，右侧的Model相当于我们的数据对象，比如一个对象的信息：

代码语言：javascript复制

{
    name:'张三',
    age:30
}

而中间的监控者就负责监控两侧的数据，并相对应地通知另一侧进行修改。比如：你在Model层中修改了name的值为：“李四”，那么View视图层显示的“张三”也会自动变成了“李四”，而这个过程就是有ViewModel来操作的，不需要你手动地去写代码去实现（你不用再手动操作DOM了）。

如果你写过复杂的DOM操作，你就可以感受到它带来的便利。

这就是MVVM框架，属于MVVM的JS框架除了Vue.js，还有React.js，Angular.js。

3.Vue.js的优点

（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化Vue

vue技术双向绑定原理使我们开发页面更简单，比如我们以前用源生js开发页面时候，书写复杂可读性差，后来用jquery开发页面业务逻辑重复，可复用差，Vue通过数据双向绑定是这一一切变得更简单

Eg:(改变值)

Js:

<div></div>

document.getElementsByTagName(‘div‘)[0].innerHTML = ‘韩国‘;

document.getElementsByTagName(‘div‘)[0].innerHTML = ‘中国‘

Jq

<div></div>

$(‘div‘).html(‘韩国‘)

$(‘div‘).html(‘中国‘)

Vue

Vue只提供一个Api就是Vue，它是类，我们要想获取Vue实例化对象，只能通过new关键字创建

通过el定义一个Vue视图的容器元素，可以传递css选择器，id选择，类选择器，元素名称选择器等等

页面中有多个符合条件选择器，vue只会捕获第一个符合条件的选择器对应的元素选择器

实现了将视图到视图模型的绑定

<div>{{msg}}</div>

var data = {

msg: ‘韩国‘

}

new Vue({

　el: ‘div‘,

data: data

})

data.msg = ‘中国‘

通过data属性可以为Vue实例化对象添加属性，添加的属性与外部的data中的数据是同步的 不论是修改外部data中的数据还是修改Vue实例化对象中的数据，他们的数据始终同步的 数据绑定实现了将模型到视图模型的绑定 var data = { msg: ‘国‘, obj: { color: ‘red‘ } } var app = new Vue({ el: ‘#app‘, data: data }) console.log(data.msg === app.msg) //true console.log(app.obj === data.obj) //true // data.msg = ‘下周‘

4.Vue.js的两大核心

铺垫了这么多，终于讲到了Vue的核心。

那么，我们就来认识一下Vue.js，这里摘取一段官网对它的介绍：

通过尽可能简单的API实现响应的数据绑定和组合的视图组件

这句话有两个关键词：数据绑定和视图组件。

Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图，一个字：爽。再也不用你去操心DOM的更新了，这就是MVVM思想的实现。

视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。

具体在开发过程中怎样实现一个组件，到底哪些区块可以划分成一个组件，后面的章节我们再一一介绍，这里你只需要知道，在Vue.js中，网页是可以看成多个组件组成的即可。

5.Vue.js的适用场景

如果你还在用jquery频繁操作你的DOM来更新页面的话，那么，你可以用Vue.js来解放你的DOM操作了。

如果你的项目中有多个部分是相同的，并可以封装成一个组件，那么，你可以试试用Vue.js。

此外，Vue.js的核心实现中使用了ES5的Object.defineProperty特性，IE8及以下版本浏览器是不兼容的，所以，你的项目需要兼容这些较低版本的浏览器的话，那么，Vue.js就不适用了。

毕竟，开发一个项目的目的不是为了使用某个框架。

6.VUE.js安装

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

下载 Vue.js

下载好以后，将文件保存到制定位置使用时直接引入即可

我们能发现，引入vue.js文件之后，Vue被注册为一个全局的变量，它是一个构造函数。

7.相关学习准备

ES5和ES6

说到ES的时候顺嘴说一下JavaScript

JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。（好吧，概念什么最讨厌了）

动态：

在运行时确定数据类型。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型。

弱类：

计算时可以不同类型之间对使用者透明地隐式转换，即使类型不正确，也能通过隐式转换来得到正确的类型。

原型：

新对象继承对象（作为模版），将自身的属性共享给新对象，模版对象称为原型。这样新对象实例化后不但可以享有自己创建时和运行时定义的属性，而且可以享有原型对象的属性。

PS：新对象指函数，模版对象是实例对象，实例对象是不能继承原型的，函数才可以的。

JavaScript由三部分组成：

1. ECMAScript（核心）

作为核心，它规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象

PS：*不完全兼容的实现

2. DOM（文档对象模型）

DOM把整个页面映射为一个多层节点结果，开发人员可借助DOM提供的API，轻松地删除、添加、替换或修改任何节点。

PS：DOM也有级别，分为DOM1、DOM2、DOM3，拓展不少规范和新接口。

3. BOM （浏览器对象模型）

支持可以访问和操作浏览器窗口的浏览器对象模型，开发人员可以控制浏览器显示的页面以外的部分。

PS：BOM未形成规范

什么是ES5

作为ECMAScript第五个版本（第四版因为过于复杂废弃了），浏览器支持情况可看第一副图，增加特性如下。

1. strict模式

严格模式，限制一些用法，’use strict’;

2. Array增加方法

增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法

PS： 还有其他方法 Function.prototype.bind、String.prototype.trim、Date.now

3. Object方法

Object.getPrototypeOf

Object.create

Object.getOwnPropertyNames

Object.defineProperty

Object.getOwnPropertyDescriptor

Object.defineProperties

Object.keys

Object.preventExtensions / Object.isExtensible

Object.seal / Object.isSealed

Object.freeze / Object.isFrozen

PS：只讲有什么，不讲是什么。

什么是ES6

ECMAScript6在保证向下兼容的前提下，提供大量新特性，目前浏览器兼容情况如下：

ES6特性如下：

1.块级作用域 关键字let, 常量const

2.对象字面量的属性赋值简写（property value shorthand）

代码语言：javascript复制

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Method definitions
    toString() {
    // Super calls
    return "d "   super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_'   (() => 42)() ]: 42
};

3.赋值解构

代码语言：javascript复制

let singer = { first: "Bob", last: "Dylan" };
let { first: f, last: l } = singer; // 相当于 f = "Bob", l = "Dylan"
let [all, year, month, day] =  /^(dddd)-(dd)-(dd)$/.exec("2015-10-25");
let [x, y] = [1, 2, 3]; // x = 1, y = 2

4.函数参数 – 默认值、参数打包、 数组展开（Default 、Rest 、Spread）

代码语言：javascript复制

//Default
function findArtist(name='lu', age='26') {
    ...
}

//Rest
function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6

//Spread
function f(x, y, z) {
  return x   y   z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

5.箭头函数 Arrow functions

(1).简化了代码形式，默认return表达式结果。

(2).自动绑定语义this，即定义函数时的this。如上面例子中，forEach的匿名函数参数中用到的this。

6.字符串模板 Template strings

代码语言：javascript复制

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// return "Hello Bob, how are you today?"

7. Iterators（迭代器） for..of

迭代器有个next方法，调用会返回：

(1).返回迭代对象的一个元素：{ done: false, value: elem }

(2).如果已到迭代对象的末端：{ done: true, value: retVal }

代码语言：javascript复制

for (var n of ['a','b','c']) {
  console.log(n);
}
// 打印a、b、c

8.生成器 （Generators）

9.Class

Class，有constructor、extends、super，但本质上是语法糖（对语言的功能并没有影响，但是更方便程序员使用）。

代码语言：javascript复制

class Artist {
    constructor(name) {
        this.name = name;
    }

    perform() {
        return this.name   " performs ";
    }
}

class Singer extends Artist {

    constructor(name, song) {
        super.constructor(name);
        this.song = song;
    }

    perform() {
        return super.perform()   "["   this.song   "]";
    }
}

let james = new Singer("Etta James", "At last");
james instanceof Artist; // true
james instanceof Singer; // true

james.perform(); // "Etta James performs [At last]"

10.Modules

ES6的内置模块功能借鉴了CommonJS和AMD各自的优点：

(1).具有CommonJS的精简语法、唯一导出出口(single exports)和循环依赖(cyclic dependencies)的特点。

(2).类似AMD，支持异步加载和可配置的模块加载。

代码语言：javascript复制

// lib/math.js
export function sum(x, y) {
  return x   y;
}
export var pi = 3.141593;

// app.js
import * as math from "lib/math";
alert("2π = "   math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = "   sum(pi, pi));

Module Loaders:
// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
  alert("2π = "   m.sum(m.pi, m.pi));
});

// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

11.Map Set WeakMap WeakSet

四种集合类型，WeakMap、WeakSet作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉。

代码语言：javascript复制

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

//WeakMap
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//Because the added object has no other references, it will not be held in the set

12.Math Number String Array Object APIs

一些新的API

代码语言：javascript复制

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior

[0, 0, 0].fill(7, 1) // [0,7,7]
[1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

13. Proxies

使用代理（Proxy）监听对象的操作，然后可以做一些相应事情。

代码语言：javascript复制

var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';

可监听的操作： get、set、has、deleteProperty、apply、construct、getOwnPropertyDescriptor、defineProperty、getPrototypeOf、setPrototypeOf、enumerate、ownKeys、preventExtensions、isExtensible。

14.Symbols

Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。

代码语言：javascript复制

var key = Symbol("key");
var key2 = Symbol("key");
key == key2  //false

15.Promises

Promises是处理异步操作的对象，使用了 Promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观（类似jQuery的deferred 对象）。

代码语言：javascript复制

function fakeAjax(url) {
  return new Promise(function (resolve, reject) {
    // setTimeouts are for effect, typically we would handle XHR
    if (!url) {
      return setTimeout(reject, 1000);
    }
    return setTimeout(resolve, 1000);
  });
}

// no url, promise rejected
fakeAjax().then(function () {
  console.log('success');
},function () {
  console.log('fail');
});

ES6简单语法

****VUE相关编辑工具：Sublime text3****

let和const

es6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效

代码语言：javascript复制

<script type='text/javascript'   src='vue.min.js'></script>
<script type='text/javascript'>
    {
    //let声明的变量是块儿级作用域且使用let不能重复声明变量
    let  a  =   12;     //  正确
    }
    console.log(a);
   {
    let  a  =    10;    //  错误，不可以重复声明同一个变量
    }
    console.log(a);  // 报错：Identifier 'a'  has  already  been   declared

</script> 

下面我们来看一下var和let有什么区别

代码语言：javascript复制

1 var a = [];
2 for (var i = 0; i < 10; i  ) {
3   a[i] = function () {
4     console.log(i);
5   };
6 }
7 a[6]();

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10

代码语言：javascript复制

var a = [];
for (let i = 0; i < 10; i  ) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算

不存在变量提升

var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

代码语言：javascript复制

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。

不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

代码语言：javascript复制

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

因此，不能在函数内部重新声明参数

代码语言：javascript复制

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

为什么需要块级作用域？

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量。

代码语言：javascript复制

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景，用来计数的循环变量泄露为全局变量。

代码语言：javascript复制

var s = 'hello';

for (var i = 0; i < s.length; i  ) {
  console.log(s[i]);
}

console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

const命令

基本语法

const声明一个只读的常量。一旦声明，常量就会初始化且常量的值就不能改变。

代码语言：javascript复制

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值

代码语言：javascript复制

const foo;
// SyntaxError: Missing initializer in const declaration

上面代码表示，对于const来说，只声明不赋值，就会报错

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

代码语言：javascript复制

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

模板字符串

代码语言：javascript复制

<script type='text/javascript'  src='vue.min.js'></script>
<script type='text/javascript'>
    var a  = 1;
    var b =  2;
    var str =`哈哈${a}嘿嘿${b}`;
    console.log(str);

//如果想要在字符串中插入变量的话，只需插入变量名即可

</script>

箭头函数

说到函数我们肯定不会感到陌生，之前就大量的接触到了函数我们再来回顾一下

代码语言：javascript复制

def  函数名(形参):
    '''
    形参1:
    形参2:
    return  返回值
   '''
   函数体
res = 函数名(实参)
print(res)

那么什么是箭头函数呢？箭头函数又该怎么写呢？

基本语法：

ES6允许使用“箭头”（=>）定义函数

代码语言：javascript复制

var f = a = > a

//等同于
var f = function(a){
   return a;  
}

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

代码语言：javascript复制

//无形参
var f = () => 5;
// 等同于
var f = function () { return 5 };

//多个形参
var sum = (num1, num2) => num1   num2;
// 等同于
var sum = function(num1, num2) {
  return num1   num2;
};

使用箭头函数注意点：

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

代码语言：javascript复制

 1  var name = '张三'；   
 2  var person = {
 3         name:'小马哥',
           age:18,　　
 4         fav:function(){        
 5             console.log(this)
 6             console.log(this.name)
 7         }
 8     }
 9 
10     person.fav();

我们发现，打印的结果为

此时this指向的是使用它的对象，也就是person对象

代码语言：javascript复制

 var person2 = {
    name:'小马哥',
    age:18,
    fav: ()=>{
         // 当前this指向了定义时所在的对象（window）
         console.log(this);
      }
    }

 person2.fav();

打印的结果：

使用箭头函数，它表示定义时所在的对象window。

再看一个例子吧！

代码语言：javascript复制

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。

（2）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

代码语言：javascript复制

         var person3 = {
             name:'小马哥',
             age:18,
             fav: ()=>{
                 console.log(argument);
             }
         }

         person3.fav('把妹','把爷');

报出如下❎：

对象的单体模式

为什么要有对象单体模式？

为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式

代码语言：javascript复制

1     var person = {
2         name:'小马哥',
3         age:12,
4         fav(){
5             console.log(this.name,this.age);
6         }
7       }
8  person.fav();

ES6的面向对象

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。

代码语言：javascript复制

       function Animal(name,age){
            this.name = name;
            this.age = age;

        }
        Animal.prototype.showName = function(){
            console.log(this.name);
            console.log(this.age);
        }

        var a = new Animal('小黄',5);
        a.showName();

上面这种写法跟传统的面向对象语言（比如 C 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样

代码语言：javascript复制

          class Animal{
            
            // 构造器  当你创建实例之后 constructor()方法会立刻调用 通常这个方法初始化对象的属性
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            showName(){
                console.log(this.name);
            }
        }
        var a2 = new Animal('点点',3);

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5 的构造函数Animal，对应 ES6 的Animal类的构造方法。

Animal类除了构造方法，还定义了一个showName方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

ES6 的类，完全可以看作构造函数的另一种写法。

代码语言：javascript复制

console.log(Animal2===Animal2.prototype.constructor);//true

上面代码表示，类本身就指向了类的构造函数。

使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。

constructor方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

代码语言：javascript复制

class Animal {
}

// 等同于
class Animal {
  constructor() {}
}

上面代码中，定义了一个空的类Point，JavaScript 引擎会自动为它添加一个空的constructor方法。

NodeJs介绍

Nodejs英文网：https://nodejs.org/en/

中文网：http://nodejs.cn/

在这里我们会发现这样一句话：

翻译成中文如下：

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。

上面的这段译文也就说明了什么是NodeJs,当然了这只是比较官方的解释，那么NodeJs究竟是什么呢？

什么是node？

    根据官方文档可以知道，node就是一个给予谷歌v8引擎的一个javascript的运行时，可以理解为运行js的一个虚拟机。他使用的是一个 事件驱动，非阻塞I/O模型 ，他是将js的运行环境搬到了服务器端，和客户端没有一点关系。是一个纯服务端的东西，node只是为js提供了一个平台。node里面其实还分了两块，一是封装了v8引擎，目的是为了执行es（如定义变量，定义函数等），另外一个提供了大量的工具库,是帮助node实现各种功能的，提供了一些以前js的环境办不到的事情，比如文件操作，网络操作，操作系统的操作。     既然node是一个平台（所谓的平台就是用来运行特定语言的），也就意味着node是用来运行语言的，那么java也是语言，node能运行java吗？据nodejs创始人Ryan Dahl回忆，他最初是选择了Ruby这门语言，但是Ruby这门语言的虚拟机效率不怎么样最终放弃了，按照这种思路，貌似node将java的虚拟机集成进来应该可以运行java，但node作者最终选择了javascript。这样js就实现了在服务端运行的可能，js运行在node平台上（分为v8部分，用来执行es，和大量的工具库组件（API）称之为libuv，提供了以前js的环境办不到的事，如文件操作，网络操作等等）。 知道了什么是node,应该还要清楚node在web中有什么用途？     （1）node可以接受客户端用户的所有请求，并且能够快速的给出响应，因此node可以用来做网站。     （2）node可以作为一个中间层来来分发调用数据接口，比如有一个网站数据是有java提供的，我们可以让node作为一个中间曾，来接受用户的请求，然后通过node来调用java数据接口，获取到数据后直接在node层面做html的瓶装，然后将渲染好的页面直接给用户。为什么要这样做，直接请求java接口不行吗，这是因为node被称之为高性能的web服务器，在并发和抗压方面都比传统的平台要好很多，因此这样一包装可以极大的减轻服务器的开发。     通过上面的两点，可以总结出，node在web中要么从前端页面到后端服务全包了，一个是只做其中的一点。     一言以蔽之，node就是一个javascript的运行环境（平台），他不是一门语言，也不是javascript的框架。可以用来开发服务端应用程序，web系统。其特点是体积小，快速，高性能。

Node中的NPM

首先我们先来了解一下什么是NPM?

简单的说，npm就是JavaScript的包管理工具。类似Java语法中的maven，gradle，python中的pip

安装

傻瓜式的安装。

第一步：打开https://nodejs.org/en/

第二步：

第三步：我们为了统一版本，虽然node.js更新到了8.11.1的版本，但对于我个人而言，还是比较喜欢6.10.*版本的。

第四步：

第五步：点点点。为了避免环境变量出现额外的问题，winodows用户将nodejs统一安装在c盘中，mac电脑直接安装。

npm是和Nodejs一起并存的，只要安装了Nodejs，npm也安装好了，安装好Nodejs之后。打开终端，执行如下命令，检查是否安装成功

但是由于npm自身的更新频率比Node.js高很多，所以通过上面安装的npm可能不是最新版本，可以通过下面的命令单独更新npm。在这里不简易大家更新了。

针对mac电脑的用户，如果执行

会出现如下错误；

解决方案：只需要

ok，到目前为止，我们的软件都安装好了。

既然我们知道npm它能够管理我们的包，也就是我们所谓的模块。

那么，比如在之前我们使用到的jquery框架，bootstrap框架。都可以使用npm去下载了。

安装包

我们在桌面上创建一个文件夹/01-studyNpm。

注意：千万不要起名成：node、npm这样的文件夹，以免与系统软件产生不必要的冲突。

打开终端，切换到当前创建的文件夹目录下，一定是当前目录。

npm 初始化

在去下载包之前，首先先让当前项目的包进行初始化操作，执行命令：

代码语言：javascript复制

npm init

运行这个命令后，它会询问一些关于包的基本信息，根据实际情况回答即可。如果不喜欢这种方式，可以使用npm init --yes命令直接使用默认的配置来创建package.json文件，最后根据需要修改创建好的package.json文件即可。

代码语言：javascript复制

{
  "name": "01-studynpm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

主要字段的含义如下:

• name: 模块名, 模块的名称有如下要求:
  • 全部小写
  • 只能是一个词语，没有空格
  • 允许使用破折号和下划线作为单词分隔符
• version: 模块版本信息
• description：关于模块功能的简单描述，如果这个字段为空的话，默认会从当前目录的READMD.md或README文件读取第一行内容作为它的默认值。
• main: 模块被引入后，首先加载的文件，默认为index.js。
• scripts: 定义一些常用命令入口

关于最后一个英文的意思，我们可以证明，当我执行npm init之后，会自动的生成package.json的文件。

安装模块

使用npm install会读取package.json文件来安装模块。安装的模块分为两类 dependencies和devDependencies，分别对应生产环境需要的安装包和开发环境需要的安装包。

同样在安装模块的时候，可以通过指定参数来修改package.json文件，以jquery和webpack做例子

代码语言：javascript复制

npm install jquery --save

npm install webpack --save-dev

来将新安装的模块信息记录到package.json文件.

我们正式操作一遍，下载jquery包

代码语言：javascript复制

npm install jquery --save

执行以上命令，便可以安装对应的包到执行命令的当前目录，并创建一个node_modules的文件夹,然后把需要安装的安装包下载到里面。

打开package.json文件会发现：

下载不同版本的模块

代码语言：javascript复制

npm install jquery@2.0.1 --save

卸载模块

代码语言：javascript复制

npm uninstall jquery --save

使用cnpm（淘宝镜像）

使用npm下载依赖时，由于是从国外的网站上下载内容，所以可能经常会出现不稳定的情况，所以需要下载cnpm代替npm，cnpm是国内淘宝的做的，在国内使用稳定。

1.下载cnpm

代码语言：javascript复制

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.使用cpm

代码语言：javascript复制

cnpm install jquery --save

模块化

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/124453.html原文链接：https://javaforall.cn

编程算法 npm java ecmascript node.js

0 人点赞