zoukankan      html  css  js  c++  java
  • 前端模块化

    前端模块化

    模块化的开发方式可以提高代码复用率,方便进行代码的管理。通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS,AMD,CMD,ES6模块系统

    CommonJS

    nodeJS是commonJS规范的主要实践者,他有四个重要的环境变量为模块化的实现提供支持:module,exports,require,global

    1.概述

    Node应用由模块组成,采用CommonJS规范。每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量,函数,类都是私有的,对其他文件不可见。在服务器端,模块的加载是运行时同步加载的;在浏览器端,模块需要提前打包编译。

    2.特点
    • 所有代码都运行在模块作用域,不会污染全局作用域。
    • 模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。
    • 模块加载的顺序,按照其在代码中出现的顺序。
    3.基本语法
    • 暴露模块:module.exports = valueexports.xxx = value
    • 引入模块:require(xxx),如果是第三方模块,xxx为模块名;如果是自定义模块,xxx为模块文件路径
    4.模块的加载机制

    CommonJS模块的加载机制是,输入的是被输出的值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。这点与es6模块化有重大差异。

    ES6模块化机制

    ES6模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。

    1.基本语法

    模块功能主要由两个命令组成:exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。export default命令,为模块指定默认输出。

    一个模块就是一个独立的文件。该文件内部所有的变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。

    2.特点
    • ES6模块是编译时加载,使得静态分析称为可能
    • 不再需要UMD模块格式了,将来服务器和浏览器都会支持 ES6 模块格式。目前,通过各种工具库,其实已经做到了这一点。
    • 将来浏览器的新 API 就能用模块格式提供,不再必须做成全局变量或者navigator对象的属性。
    • 不再需要对象作为命名空间(比如Math对象),未来这些功能可以通过模块提供。
    AMD

    CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。AMD规范则是非同步加载模块,允许指定回调函数。由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用。但是,如果是浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式,因此浏览器端一般采用AMD规范。此外AMD规范比CommonJS规范在浏览器端实现要来着早。

    CMD

    CMD规范专门用于浏览器端,模块的加载是异步的,模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。在 Sea.js 中,所有 JavaScript 模块都遵循 CMD模块定义规范。

    作者:逐梦

    -------------------------------------------

    个性签名:智者创造机会,强者把握机会,弱者坐等机会。做一个灵魂有趣的人!

    如果觉得这篇文章对你有小小的帮助的话,可以关注下方公众号,在该公众号同样会推送技术文章给大家,谢谢~

    逐梦wx
  • 相关阅读:
    hdu2243 考研路茫茫——单词情结【AC自动机】【矩阵快速幂】
    poj3376 Finding Palindromes【exKMP】【Trie】
    hdu4763 Theme Section【next数组应用】
    hdu2609 How many【最小表示法】【Hash】
    hdu3374 String Problem【最小表示法】【exKMP】
    poj2728 Desert King【最优比率生成树】【Prim】【0/1分数规划】
    python装饰器
    python面试题
    salt教程1-理解saltstack
    redis慢查询日志
  • 原文地址:https://www.cnblogs.com/songyao666/p/15129133.html
Copyright © 2011-2022 走看看