模块化

作者: swhzzz | 来源:发表于2017-06-10 20:50 被阅读0次

一.为什么要使用模块化
随着技术的发展,框架的层出不穷,前端的复杂程度日益增加,代码量也快速增加,使用模块化势在必得。模块化解耦了代码,使代码更易于阅读,同时又提高了代码的复用性。模块化开发还解决了各个模块之间的命名冲突以及模块之间的依赖问题。

二.CMD规范
CMD全称通用模块定义, CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。在CMD中一个模块就是一个文件。
CMD通过define定义模块,define 接受 factory 参数,factory 为函数时,表示是模块的构造方法。执行该构造方法,可以得到模块向外提供的接口。factory 方法在执行时,默认会传入三个参数:require、exports 和 module:

define(function(require, exports, module) {
  // 模块代码
});

CMD通过require来加载模块

define(function(require, exports) {
  // 获取模块 a 的接口
  var a = require('./a');
  // 调用模块 a 的方法
  a.doSomething();

});

三.AMD规范
AMD规范叫异步模块定义。在该机制下模块和依赖可以异步加载。这对浏览器端的异步加载尤其适用。AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
AMD规范的语法

define(id?, dependencies?, factory);

例子:

define('modal', ['jQuery', 'dialog'], function($, Dialog){
    $('.modal').show();
    Dialog.open();
});//先加载模块,当模块加载完成之后在function里使用模块

四.CommonJS 规范
CommonJS是服务器端模块的规范,Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。
根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性。
CommonJS定义模块输出:

//模块定义 myModel.js

var name = 'Byron';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加载模块

var nameModule = require('./myModel.js');

nameModule.printName();

demo

相关文章

  • ES6学习笔记 II

    模块化 注意:模块化需要放到服务器环境使用模块化: 定义模块化如下 export export const a =...

  • 前端开发——模块化(css模块化开发)

    掌握模块化开发的思想是我们进行模块化开发的基础。他有以下几部分组成: 模块化开发的优势 css模块化 css模块化...

  • Node.js模块化学习

    模块化的基本概念Node.js 中模块化npm与包模块的加载机制 模块化的基本概念 什么是模块化 模块化是指解决一...

  • webpack基础笔记

    webpack基础 1.前端工程化 实际的前端开发: 模块化:(js的模块化,css的模块化,资源的模块化) 组件...

  • 模块化开发

    js模块化开发vue模块化开发

  • Vue前端工程化

    1.模块化的分类 A.浏览器端的模块化 B.服务器端的模块化 C.ES6模块化 小结:推荐使用ES6模块化,因为A...

  • 前端工程化

    1.模块化的分类 A.浏览器端的模块化 B.服务器端的模块化 C.ES6模块化 小结:推荐使用ES6模块化,因为A...

  • vue5

    es6新内容 class 解构赋值 扩展对象 模块化 什么是模块化 模块的作用 怎么实现模块化 模块化的标准 Co...

  • Vue基础教程之-组件核心概念(四)

    一、模块化 1.1 为什么需要模块化 没有模块化的世界:全局变量污染、难以管理的依赖。常见的模块化标准:Commo...

  • vue项目基建

    路由模块化 , 高频全局组件模块化 权限

网友评论

      本文标题:模块化

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