zoukankan      html  css  js  c++  java
  • javascript代码模块化解决方案

    我们用模块化的思想进行网页的编写是为了更好的管理我们的项目,模块与模块之间是独立存在的,每个模块可以独立的完成一个子功能。

    一、服务器和桌面环境中的Javascript代码模块化:CommonJS Modules/2.0 规范,特点是同步加载。

      CommonJS是在浏览器环境之外构建JavaScript生态系统为目标产生的项目,比如服务器和桌面环境中。CommonJS规范是为了解决JavaScript的作用域问题而定义的模块形式,可以使每个模块在它自身的命名空间中执行。该规范的主要内容是:模块必须通过 module.exports导出对外的变量或接口,通过require()来导入其他模块的输出到当前模块。CommonJS是同步加载模块,Node是服务端语言,遵循的是CommonJS规范,同步加载模块,例如:
      require("module");
      require("../file.js");
      exports.doStuff = function() {};
      module.exports = someValue;

    优点:

      1.服务器端便于重用
      2.NPM中已经将近20w个模块包
      3.简单并容易使用

    缺点:
      1.同步的模块方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的
      2.不能非阻塞的并行加载多个模块

    二、浏览器环境中的Javascript代码模块化:AMD和CMD规范,特点是异步加载。

    1.AMD: define + require
      对应的实现是 require.js (模块加载器),特点是依赖前置,推崇复用接口,不符合通用的模块思维方式,是一种妥协的实现。

    2.CMD: exports + require
      对应的实现是 sea.js (模块加载器),特点是依赖就近(相当于按需加载),推崇单用接口。

    3.ES6: export + import

      由于ES6本身是原生语言支持实现的模块化,但是现代浏览器大多都还未支持,因此必须使用相应的编译工具转换成ES5的AMD,CMD模块,再借助于systemjs/requirejs等模块加载器才能使用。其中ES6的编译一般是用babel,他的作用是可以使用ES6及更高版本,无需等待浏览器支持。

    4.webpack

      webpack 是一个预编译的JavaScript ES6 模块打包器,由于是预编译的,不需要在浏览器中加载解释器。在本地直接写JS,不管是AMD/CMD/ES6风格的模块化,它都能认识,并且编译成浏览器认识的JS。

  • 相关阅读:
    负数幅角的选取
    记一次py交易
    区间估计
    平方和
    正态总体 下常用结论
    每日一背
    乘积的期望
    java调用javascript
    Java Agent入门
    JavaPoet入门
  • 原文地址:https://www.cnblogs.com/heroljy/p/9051165.html
Copyright © 2011-2022 走看看