模块化开发规范

Posted ZZZ --- jh

tags:

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

模块化

webpack是以模块化的方式来打包项目的.

模块化

​ 模块化是现代前端开发不可缺少的一部分.

功能:

  • 把复杂的问题分解成相对独立的模块,
  • 降低程序复杂性,
  • 提高代码的重用.
  • 利于团队协作开发与后期的维护和扩展

核心:

  • 独立的作用域
  • 如何导出模块内部数据
  • 如何导入外部模块数据

ESM

​ es5开始引入的模块化

独立的模块作用域

​ 一个文件就是模块,模块拥有独立的作用域,且导出的模块都自动处于严格模式下, 即 user strice(模块中,默认为严格模式)

  • 严格模式下,不允许使用with.

  • 严格模式下,不允许给未声明的变量赋值.

  • 严格模式下,arguments与参数不存在映射关系.

  • 严格模式下,删除参数名,函数名报错.

    非严格模式下返回false,不报错也没有任何效果.

  • 严格模式下,函数参数名重复报错.

    非严格模式最后一个重名参数会覆盖之前的重名参数.

  • 严格模式下,删除不可配置的属性报错.

    非严格模式返回false,不报错也没有任何效果.

  • 严格模式下,修改不可写的属性报错.

  • 严格模式下,一般函数调用,this指向undefined,而不是全局对象.

  • 严格模式下,不支持qrguments.caller

导出模块内部数据

​ 用export语句导出模块内部数据

​ eg:

export let name1,name2;
export let name1='zhangsan',name2='lisi';

导入外部模块数据

​ 导入分为静态导入和动态导入两种模式

静态导入:

​ 在浏览器中, import语句只能在声明了type='module'的script标签中使用

<script type="module" src="./js/a.js"></script>
// import 语句 必须放在模块化代码的最顶层
import b from './b.js'
console.log(b);

// 不支持延迟加载
// document.onclick = function(){
//     import b from './b.js'
//     console.log(b);
// }

动态导入:

​ 使用 import 函数来完成动态导入,不需要依赖type='module'的script标签.

document.onclick = async function(){
    // 使用 import 函数来完成动态导入 返回的数据会被包装在一个对象中
    let b = await import ('./b.js'); //异步
    console.log(b.default);
}

模块化的向下兼容

  • commonJS(模块化在后端服务器的一种写法规范, 是基于文件系统,同步加载,并不适用于浏览器端)

    模块化的引入: 在node中require; 在vue中import

    独立模块作用域: 一个文件就是模块,拥有独立的作用域

    导出模块内部数据: 通过module.exportsexports对象导出模块内部数据

    // a.js
    let a = 1;
    let b = require('./b');
    console.log(b); //{ val: '这是b模块导出的数据' }
    
    // b.js
    module.exports = {
        val:'这是b模块导出的数据',
        x : a
    }
    //or
    exports.x = a;
    // 运行时直接在终端输入node a就可以出现结果{ val: '这是b模块导出的数据' }
    

    导入外部模块数据:通过 require 函数导入外部模块数据

    let b = require('./b');
    console.log(b.val); //这是b模块导出的数据
    
  • AMD(适用于浏览器端的规范)

    浏览器没有具体实现规范的代码,通过第三方库(requireJS)来解决

    requireJS:

    <!-- data-main 优先读取的文件 -->
    <script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js" data-main="./js/a.js"></script>
    

    独立模块作用域: 通过一个define方法来定义一个模块,并通过该方法的第二个回调函数参数来产生独立作用域

    define(function() {
      // 模块内部代码
    })
    

    导出模块内部数据: 通过return导出

    // b.js// 使用defined导出时, 需要返回值, 不需要参数define(function(){    let val = '这是amd规范下的数据';    return val;})
    

    导入外部模块数据:

    // a.js// 使用defined方法导入时, 需要参数, 不需要返回值// 参数一  导入的路径,(数组,因为可以导入多个)define(['./js/b.js'],function(b){    console.log(b); //这是amd规范下的数据})
    
  • UMD(不属于一套模块规范,主要用来处理CommonJSAMDCMD 的差异兼容,是模块代码能在前面不同的模块环境下都能正常运行)

  • ESM


注意点:

  • ESM中的独立模块的作用域 都自动处于严格模式下
  • 静态导入时,import语句放在模块化代码的最顶层,script标签要有type=‘module’
  • commonJS是模块化在后端服务器的一种写法规范, 是基于文件系统,同步加载,不适用于浏览器端
  • AMD是适用于浏览器端的规范

模块化总结:

​ 在es6, vue, node.js中都可以使用到模块化.

​ 把复杂的问题分成相对独立的模块.

功能:

  • 把复杂的问题分解成相对独立的模块,
  • 降低程序复杂性,
  • 提高代码的重用.
  • 利于团队协作开发与后期的维护和扩展

核心: 独立的作用域; 导出模块内部数据; 导入外部模块数据

独立的模块作用域: 一个文件就是模块,它拥有独立的作用域.

导出模块内部数据:

  • 用export语句导出;
  • commonJS中 用module.exports或exports对象导出;
  • AMD中的第三方库requireJS中 用defined方法,需要return;

导入外部模块数据:

  • 静态导入

    • import语句放在模块化代码的最顶层,script标签要有type=‘module’;

    • 不支持延时加载

  • 动态导入: 用 import 函数

  • commonJS中导入: require函数

  • AMD中的第三方库requireJS中导入: 用defined方法,需要参数

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

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

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

模块化开发规范

软件开发规范及日志模块

02.模块化相关规范

Vue.js 组件编码规范