Node.js
1. 说明
简单的说Node.js 就是运行在服务端的JavaScript。
Nodejs是一个事件驱动I/O服务端JavaScript环境,基于Google的V8
引擎,V8引擎执行Javascript的速度非常快,性能非常好。
2. 作用
如果你是一个前端程序员,你不懂得像PHP、Python或Ruby等动态编程语言,然后你想创建自己的服务,那么Node.js是一个非常好的选择。
Node.js是运行在服务端的JavaScript,如果你熟悉Javascript,那么你将会很容易的学会Node.js。当然,如果你是后端程序员,想部署一些高性能的服务,那么学习Node.js也是一个非常好的选择。
NPM
1. 说明
NPM全称Node Package Manager
,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的。也是Node.js的包管理工具,相当于前端的Maven。
2. NPM涉及文件
在一个被npm管理的项目中,会有package.json
,package-lock.json
文件,还有node_modules
文件夹。
package.json文件
里面定义的是各种依赖包的版本范围(比如^1.0.0
),具体跑npm install
的时候安的什么版本,要解析后才能决定。这里面定义的依赖关系树,可以称之为逻辑树(logical tree)。
node_modules目录
npm实际安装的确定版本的依赖包,这里面的文件夹结构我们可以称之为物理树(physical tree)。
package-lock.json文件
结合了逻辑树和物理树的一个快照(snapshot),里面有明确的各依赖包的版本号,实际安装的结构,也有逻辑树的结构。
Babel
1. 说明
ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行执行。
这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持。
Webpack
1. 说明
Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出,Webpack可以将多种静态资源js、css、less转换成一个静态文件,减少了页面的请求。
Vue项目在进行打包时,会先用Babel将项目中的ES6的代码转成ES5的代码,再使用Webpack将项目中各个模块的代码(js文件,css文件等)打包成尽量少的js文件存入项目的dist
目录中,最后只需要在index.html
文件中引入dist
中的js文件即可。
2. CSS打包
Webpack本身只能处理JavaScript模块,如果要处理其他类型的文件,就需要使用Loader进行转换。
Loader可以理解为是模块和资源的转换器。
所以我们需要安装相关Loader插件
- css-loader:将CSS装载到JavaScript
- style-loader:让JavaScript认识CSS
ES6相关知识
因为使用Vue-cli构建真实前端项目时,会用到大量es6的语法。所以需要对vue中经常使用到的es6相关知识进行学习。
1. let
-
var定义的变量没有局部作用域,let定义的变量有局部作用域。
{ let a = 1; } // 会报错 console.log(a);
-
var定义的变量会自动提升,let定义的变量不会自动提升。
// 会报错 console.log(a); let a = 1;
2. const
-
使用const定义常量,必须赋初值
const NAME = 'aydenbyran';
-
const定义的常量不容许再修改
const NAME = 'aydenbyran'; // 会报错 NAME = 'new Name';
3. 速写属性
-
原始写法
var name = "Ayden Bryan"; var age = 18; var person = { name: name, age: age }
-
速写属性改写
var name = "Ayden Bryan"; var age = 18; var person = { name, age }
4. 速写方法
-
原始写法
var person = { name: "Ayden Bryan", say: function () { console.log(this.name); } };
-
速写方法改写
var person = { name: "Ayden Bryan", say() { console.log(this.name); } };
5. 箭头函数
-
任何可以书写匿名函数的位置均可以书写箭头函数。
var sum = function(a, b) { return a + b; } // 箭头函数改写 var sum = (a, b) => { return a + b; }
-
箭头函数将会绑定this为函数书写位置的this值。
var obj = { count: 0, start() { setInterval(function() { // 这里的this不指向obj,指向window console.log(this.count ++) }, 1000) } } // 箭头函数改写 var obj = { count: 0, start() { setInterval(() => { // 这里的this指向obj console.log(this.count ++) }, 1000) } }
-
当箭头函数只有返回语句时,可以省略大括号。
import App from "./App.js"; new Vue( components: { App }, render(h) { return h(App); } ).$mount("#app"); // 箭头函数简化改写 new Vue( components: { App }, render: (h) => h(App) ).$mount("#app");
6. 模块化
Javascript不是一种模块化编程语言,它不支持"类"class
, "包"package
等概念,也不支持"模块"module
。Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。
-
常见的模块化标准:CommonJS、ES6 Module(vue使用)、AMD、CMD、UMD。
-
没有模块化的世界:全局变量污染、难以管理的依赖。
-
例如在util.js中定义a和test。
var a = 1; var test = function() { console.log("test"); }
-
然后将util.js使用
<script src="./util.js"></script>
-
那么a和test就会污染全局变量window,作为window的属性。
-
-
引入模块化标准后:模块内定义的变量和方法只能在模块内部使用,不会污染全局变量。
-
修改将util.js引入index.html的
<script>
。<script src="./util.js" type="module"></script>
-
window对象就不会被引入模块中的变量和方法污染了。
-
-
如果模块main.js想用util.js中的a和test,又不让util.js造成污染,该怎么办?
-
修改util.js,将a和test以默认的形式暴露出去。
export default a = 1; export default function test() { console.log("test"); };
-
在main.js最上方导入a和test并且重新命名(名字可以保持一致)。
import a from "./util.js"; import test from "./util.js";
-
7. 解构赋值
-
变量解构
一般情况下,我们给多个变量赋值是采用这种方式
let a = 1, b = 2, c = 3; console.log(a, b, c);
使用解构赋值
let [a, b, c] = [1, 2, 3]; console.log(a, b, c);
-
对象解构
一般情况下,我们获取变量属性的方式
let name = obj.name; let age = obj.age;
使用解构赋值
// 解构的变量名必须和对象属性名一致 let {name, age} = user;
8. 模板字符串
一般情况下,我们如果要将一个变量的内容嵌入一个字符串,我们会这么写
let name = 'aydenbryan';
let s = 'Hello, my name is' + name;
如果使用模板字符串
let name = 'aydenbryan';
let s = `Hello, my name is ${name}`;