模块化、全局变量、全局 API、以及 CSR、SSR、SEO 之 Node 相关

76 阅读3分钟

1. 模块化(CommandJS、ES Module)

  • 目前模块化的规范主要分为 CommandJS(Node环境) 和 ES Module(浏览器环境)。

  • 使用:

    • Command JS: 通过关键字 require 导入,module.export 导出。
      // Command JS 规范
      // 直接导入
      require('./index.js');
      // 使用别名接收导入的对象
      const _ = require('lodash');
      // 对导入的值进行解构接收
      const { random } = require('lodash');       
      
    • ES Module: 通过关键字 import 导入,export default / export 导出(常量、对象、函数都可以)。注意:export default 一个模块中只能有一个。
      // 直接使用 import 导入
      import './index.js';
      // 使用别名接收导入的对象
      import _ from 'lodash';
      // 对导入的值进行解构接收
      import { random } from 'lodash';
      
  • 两者区别:

    1. CommandJS 是运行时同步加载的,所以 require 引入模块是可以掺杂在逻辑之间的,但是会因此阻塞进程。而 ES Module 是编译时异步加载的,所以一般是没法掺杂在逻辑之间,但也可以使用 import('./index.js').then(res => {}) 这样的 import 函数方法进行强行进行逻辑间的模块加载。也正是因为 CommandJS 是运行时加载,ES Module 是编译时加载,所以对于 Tree Shaking,CommandJS 是不支持的,而 ES Module 是支持的。
    2. CommandJS 模块中 this 默认是指向当前模块的,而 ES Module 模块中 this 是指向 undefined 的。
    3. CommandJS 导出的值是可以修改的,而 ES Module 导出的值是不能够修改的(只读);是因为:commandJS 的导入是把需要导出的模块中的值拷贝了一份以新对象的形式导出供其他模块使用,而 ES Module 模块的导出则是把其他模块的引用导出,若对导出的值做出了修改,则会修改了其他模块,引起错误。

2. 全局变量

  • 浏览器环境中,当我们创建一个全局变量的时候,都会被挂载到 window 对象上,即 var a = 'a' -> window.a = 'a'; window 就是在浏览器上的全局全局变量,还有 DOM、BOM

  • node 环境中,全局变量有 global,如果我们要想在 Node 环境中生命全局变量,需要指定变量挂载到 global 对象上,即 global.a = 'a',并且,在引用模块之间,需要保证变量创建的顺序。

    // 先创建好全局变量 a,再引用其他模块,才能在其他模块中访问到全局变量 a 
    global.a = 'a';
    require('./index.js');
    
  • 因为浏览器中的 window 和 node 环境的 global 不一致,导致在处理跨平台的问题上很困难,所以在 ECMA Script 2020 中提出了 globalThis 这个全局变量,它会自动映射到当前环境中的全局变量,即浏览器中 globalThis -〉window,Node 环境 globalThis -> global。

  • Node 环境还有一些其他常用全局变量:

    • __dirname:获取当前执行文件的所在目录(绝对路径)
    • __filename: 获取当前执行的文件
    • process: 一些关于进程相关的 API
    // 常用的
    console.log(process.cwd()); // 跟__dirname一样
    console.log(process.argv()); // 返回一个数据,获取执行的指令中后面带的 --参数,例如:npm run build --test, 它就能获取到 --test 这个参数
    

3. CSR、SSR、SEO

  • CSR 客户端渲染,就是常规的用 Vue、React 开发的项目,缺点:首屏渲染慢,不利于 SEO

  • SSR 服务端渲染,在客户端就已经通过把数据拿到,并且将添加到 index.html 中,客户端拿到不需要再进行额外的网络请求,直接渲染出页面。优点:首屏渲染快,有利于 SEO

  • SEO 搜索引擎优化。SEO 三要素:TDK,title 标签、descripte、keywords。还有其他语义化标签之类的,img 的 alt属性这些。

  • 如有讲错,恳请诸位看客指正哈