随着网站规模的不断扩大,嵌入网页中的javascript代码越来越大,开发过程中存在大量问题,如:协同开发,代码复用,大量文件引入,命名冲突,文件依赖。

  模块化编程称为迫切的需求。

  所谓的模块,就是实现特定功能的一组方法。

  1. 模块的发展

  1)函数封装

     // 存在问题:污染全局变量,模块成员之间看不出直接关系
function add(x, y) {
return x + y;
}

  2)对象封装

     // 存在问题:暴露模块中的成员,可以被修改
var math = {
add: function(x, y) {
return x + y;
}
}

  3)立即执行函数

     // 没有暴露私有成员,模块化基本写法
var math = (function() {
var add = function(x, y) {
return x + y;
}
return {
add: add;
}
})();

   我们根据实际情况,可以设置传入参数,为模块添加方法。

     // 为传入的模块中添加方法,并返回,如果是空对象,创建一个空对象,添加方法返回。
var module = (function(module) {
module.add = function(x, y) {
return x + y;
}
return module;
})(module || {});

  2. 模块化规范

  1)Common.js

  common.js规范是服务器端的模块化规范,它使用的是同步加载的方式,必须模块加载完之后,才可以使用模块中的方法。

     // 加载模块
var math = require('math');
// 使用模块中的方法
math.add(x, y);

  2) AMD(Asynchronous Module Definition)

  对于浏览器而言,这样会造成页面失去响应。因此Common.js模块定义规范并不适用于浏览器端。因此AMD出现了。

  AMD采用的是异步加载的方式,当模块加载完毕,调用传入的回调函数。在加载的过程中,继续执行之后的代码,不会阻塞页面渲染。

     // module是要加载模块,回调函数中编写处理逻辑
require([module], function (module) {
...
});

  AMD解决两个问题:

  1)实现js文件的异步加载,避免网页失去响应

  2)管理模块之间的依赖问题,便于代码的编写和维护

  AMD规范网址:https://github.com/amdjs/amdjs-api/wiki/AMD

  3) CMD(Common Module Definition)

  CMD通用模块定义规范,和AMD都实现浏览器端模块化开发的目的。只是AMD提供了后端发展的方式。

  CMD规范网址:https://github.com/seajs/seajs/issues/242

模块化规范Common.js,AMD,CMD的更多相关文章

  1. JS模块化规范CommonJS,AMD,CMD

    模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块.理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可.一个模块化系统所必须的 ...

  2. Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...

  3. JS 模块化 - 02 Common JS 模块化规范

    1 Common JS 介绍 Common JS 是模块化规范之一.每个文件都是一个作用域,文件里面定义的变量/函数都是私有的,对其他模块不可见.Common JS 规范在 Node 端和浏览器端有不 ...

  4. 研究一下javascript的模块规范(CommonJs/AMD/CMD)

    最近写react需要使用nodejs作为开发环境,需要通过npm安装一些第三方的依赖库,因此慢慢感觉到nodejs基础薄弱对我带来了一些不安全感,尤其是javascript模块这一块听到了很多概念,比 ...

  5. 前端模块化之CommonJS,ES6,AMD,CMD

    最近在搞跨平台解决方案,讨论关于模块划分的问题以及如何尽量多的复用逻辑代码.于是就有了此文章,之前的博客也写过,不过由于主机商跑路,宝贵的资源也就没了,说多了都是泪~ 这里按模块化发展的历史回溯的时间 ...

  6. 前端模块化小总结—commonJs,AMD,CMD, ES6 的Module

    随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理 ...

  7. js模块化编程之CommonJS和AMD/CMD

    js模块化编程commonjs.AMD/CMD与ES6模块规范 一.CommonJS commonjs的require是运行时同步加载,es6的import是静态分析,是在编译时而不是在代码运行时.C ...

  8. javascript模块化之CommonJS、AMD、CMD、UMD、ES6

    javascript模块化之CommonJS.AMD.CMD.UMD.ES6 一.总结 一句话总结: CommonJS是同步加载模块,用在服务端:AMD是异步加载模块,用于浏览器端 1.为什么服务器端 ...

  9. 前端模块化——彻底搞懂AMD、CMD、ESM和CommonJS

    我们知道,在NodeJS之前,由于没有过于复杂的开发场景,前端是不存在模块化的,后端才有模块化.NodeJS诞生之后,它使用CommonJS的模块化规范.从此,js模块化开始快速发展. 模块化的开发方 ...

随机推荐

  1. Linux驱动技术(五) _设备阻塞/非阻塞读写

    等待队列是内核中实现进程调度的一个十分重要的数据结构,其任务是维护一个链表,链表中每一个节点都是一个PCB(进程控制块),内核会将PCB挂在等待队列中的所有进程都调度为睡眠状态,直到某个唤醒的条件发生 ...

  2. [MongoDB] - mongod.exe参数详解

    mongod.exe是启动mongodb的命令,我们可以通过mongod --help来查看帮助文档.下面是各个参数的对应中文解释.<基于Mongo3.0.5> 通用参数选项 -h/--h ...

  3. PHP Closure创建匿名函数

    Closure 类 用于代表匿名函数的类. 匿名函数(在 PHP 5.3 中被引入)会产生这个类型的对象.在过去,这个类被认为是一个实现细节,但现在可以依赖它做一些事情.自 PHP 5.4 起, 这个 ...

  4. 【前端】:jQuery实例

    前言: 今天2月最后一天,写一篇jQuery的几个实例,算是之前前端知识的应用.写完这篇博客会做一个登陆界面+后台管理(i try...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: < ...

  5. jQuery给CheckBox全选与不全选

    $(function(){ $("#checkAll").click(function() {//全选 $('input[name="DATA"]').prop ...

  6. (三目运算符)PHP中问号?和冒号: 的作用

    <表达式1>?<表达式2>:<表达式3>; "?"运算符的含义是: 先求表达式1的值, 如果为真, 则执行表达式2,并返回表达式2的结果 ; 如 ...

  7. nginx负载均衡2

    负载均衡2 网站是发展初期,nginx只代理了后端一台服务器,但由于网站名气大涨访问的人越来越多一台服务器实在是顶不住,于是我们加了多台服务器,那么多台服务器又怎么配置代理呢,这里以两台服务器为案例, ...

  8. [数据挖掘] - 聚类算法:K-means算法理解及SparkCore实现

    聚类算法是机器学习中的一大重要算法,也是我们掌握机器学习的必须算法,下面对聚类算法中的K-means算法做一个简单的描述: 一.概述 K-means算法属于聚类算法中的直接聚类算法.给定一个对象(或记 ...

  9. MyBatis从入门到放弃一:从SqlSession实现增删改查

    前言 开博客这是第一次写系列文章,从内心上讲是有点担心自己写不好,写不全,毕竟是作为java/mybatis学习的过程想把学习的路线和遇到的问题都总结下来,也让知识点在脑海里能形成一个体系. 开发环境 ...

  10. 30分钟掌握 C#6

    1. 只读自动属性(Read-only auto-properties) C# 6之前我们构建只读自动属性: public string FirstName { get; private set; } ...