美文网首页
前端模块规范

前端模块规范

作者: shupingWei | 来源:发表于2017-11-27 11:00 被阅读0次

1、为何要使用模块?
(1)将代码作为模块,方便他人使用;想加载什么模块就加载什么;
(2)管理模块之间的依赖性,便于代码编写和维护;
2、CommonJs
它的最好实现是NodeJS,运行在服务器端(好像也是可以在浏览器端),同步加载模块。

var math = require('./math');
math.add(2, 3);

问题:这在服务器端不是问题,加载文件都放在本地硬盘中,等待时间就是读取硬盘的时间; 但对于浏览器而言,所有的文件存在于服务前端,等待时间取决于网速,可能会等很久。

3、AMD 异步模块定义
它的最好实现是RequireJs,由于一般在浏览器端的代码,同时加载会产生阻塞,影响性能、可用性、调试和跨域访问等,所以提出了这种异步加载模块。
模块引用方式:

define(ids? dependencies? factory);

例子:

//ex.js
define(function() {
  var exports = {};
  exports.say = function() {
    console.log('hello');
  }
  return exports;
//加载模块
  require(['ex'], function(ex) {
    console.log(ex.say);
  });
});

如果在定义模块的时候,还有依赖别的模块,写在参数数组中

define(['myLib'], function(mylib) {})

4、CMD 通用模块定义
它的最爱好实现是SeaJs。
模块引入方式

define(factory);

依赖部分,CMD支持动态引入

define(function(require, exports, module) {
});

5、AMD和CMD不同点
(1)对于依赖的模块,AMD是提前执行,CMD是延后执行。
(2)对于依赖,AMD推崇依赖前置,CMD推崇依赖就近。
(3)API的不同
6、相同点
都有difine和require,而且调用方式实际都可以添加依赖参数,也就是说都可以用提供依赖参数的方式来实现预加载依赖模块(但是不推荐)
AMD也可以在factory中使用require来现加载用到的模块,但是这个模块就不会预先加载,属于用到才加载的同步加载了。
var a = require('a'); //加载模块a

相关文章

  • 06Vue的前端工程化

    Vue的前端工程化 一 模块化规范 1.1模块化规范举例 浏览器端JS模块化规范:AMD,CMD 服务器端JS模块...

  • 前端H5 SPA选型

    前台规范 ES6语法ES6前端代码规范 前端模块化管理 webpack 构建工具 vue-loader 前端CSS...

  • 关于前端模块化开发

    关于前端模块化开发 1 前端中有哪些模块化开发的规范以及实现方案 2 模块化的开发的好处 3 CommonJS

  • 前端自动化构建工具,前端工程化,前端模块化,前端组件化

    前端自动化构建,前端工程化,模块化,组件化, 1:前端自动构建工具webpack等,是为了前端的规范化,模块化,提...

  • 前端模块规范

    1、为何要使用模块?(1)将代码作为模块,方便他人使用;想加载什么模块就加载什么;(2)管理模块之间的依赖性,便于...

  • 前端模块加载规范

    模块加载规范:CommonJS、AMD 和 CMD,而框架Node.js、RequireJS 和 Seajs 分别...

  • 前端工程涉及八个比较大的分类:

    组织架构:前端开发规范和架构设计,包括模块化/组件化开发模型、开发框架、目录规范、组织形式等。 工程部署:有关前端...

  • 「页面架构」规范与模块化

    页面模块化 规范 在具体谈论规范的之前,可以下去查看下各大网络公司的前端开发规范(Developemnt Styl...

  • 什么是 UMD

    UMD 叫做通用模块定义规范(Universal Module Definition)。也是随着大前端的趋势所诞生...

  • 前端模块化:ES6,CommonJS

    前端模块化 共有四种规范 ES6 Module CommonJS AMD CMD ES6 Module ES6模块...

网友评论

      本文标题:前端模块规范

      本文链接:https://www.haomeiwen.com/subject/rlsrbxtx.html