【vue.js】后端工程师学习Vue之前需要知道的小Tips

222 阅读5分钟

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.jsonpackage-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转换成一个静态文件,减少了页面的请求。

20210322181145.png

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的属性。

      20210321192630.png

  • 引入模块化标准后:模块内定义的变量和方法只能在模块内部使用,不会污染全局变量。

    • 修改将util.js引入index.html的<script>

      <script src="./util.js" type="module"></script>
      
    • window对象就不会被引入模块中的变量和方法污染了。

      20210321192643.png

  • 如果模块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}`;