02.模块化相关规范

Posted songsongblue

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了02.模块化相关规范相关的知识,希望对你有一定的参考价值。

1.模块化概述
传统开发模式的主要问题

  • 命名冲突:指的是多个js文件之间如果存在重名的变量,则会发生变量覆盖问题;
  • 文件依赖:指的是js文件之间无法实现相互的引用

通过模块化解决上述问题

  • 模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成
    员,也可以依赖别的模块
  • 模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护

2.浏览器端模块化规范(已过时,不推荐使用,推荐使用ES6模块化规范)

  • AMD
    Require.js(http://www.requirejs.cn/)
  • CMD
    Sea.js(https://seajs.github.io/seajs/docs/)

3.服务器端模块化规范

  • CommonJS
    ①模块分为单文件模块与包
    ②模块成员导出: module.exports 和exports
    ③模块成员导入: require (‘模块标识符‘)

4.大一统的模块化规范-ES6模块化
在ES6模块化规范诞生之前,javascript社区已经尝试并提出了AMD、 CMD、 CommonJs 等模块化规范。
但是,这些社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:

  • AMD和CMD适用于浏览器端的Javascript 模块化
  • CommonJs适用于服务器端的Javascript 模块化

因此,ES6语法规范中,在语言层面上定义了ES6模块化规范,是浏览器端与服务器端通用的模块化开发规范。

ES6模块化规范中定义:

  • 每个js文件都是一个独立的模块
  • 导入模块成员使用 import 关键字
  • 暴露模块成员使用 export 关键字

4.1 Node.js 中通过babel体验ES6模块化
(1)安装babel相关的依赖包
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
(2)安装额外的第三方插件
npm install --save @babel/polyfill
(3)项目跟目录创建文件babel.config.js
(4)babel.config.js文件内容如下代码

//presets:语法转换的数组,提供在转换期间可能会用到的语法转换插件
const presets=[
    ["@babel/env",{
    //转换完毕之后的代码至少要支持以下浏览器
        targets:{
            edge:"17",
            firefox:"60",
            chrome:"67",
            safari:"11.1"
            }
        }]
     ];
     //向外暴露,供babel来进行使用
      module.exports={presets};

(5)通过npx babel-node index.js执行代码

5 ES6模块化的基本语法
(1).默认导出与默认导入

  • 默认导出语法 export default 默认导出的成员
  • 默认导入语法 import 接收名称 from ‘模块标识符‘

默认导出

//当前文件模块为m1.js

//定义私有成员a和c
let a=10
let c=20
//外界访问不到变量d,因为它没有被暴露出去
let d=30
function show(){}

//将本模块中的私有成员暴露出去,供其它模块使用
export default{
 a,
 c,
 show
}

默认导入

//导入模块成员
import m1 from './m1.js'

console.log(m1)
//打印输出的结果为:
//{a:10,c:20,show:[Fuction:show]}

以上是关于02.模块化相关规范的主要内容,如果未能解决你的问题,请参考以下文章

php Yoast SEO规范输出的代码片段

php Yoast SEO规范输出的代码片段

02 Commonjs规范基础使用详解

构建之法阅读笔记02

软件开发规范及日志模块

Es6中模块引入的相关内容