JavaSript模块化 AMD CMD 详解.....
模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在。对于软件行业来说:解耦软件系统的复杂性,使得不管多么大的系统,也可以将管理,开发,维护变得“有理可循”。(等同于Java 高内聚低耦合思想详情请参见Java编程思想第三版)
还有一些对于模块化一些专业的定义为:模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块。那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。
AMD
define( 模块标识符?, depend?, function);
require();
局部 与 全局 的require
- define( ['require'], function( require ){
- // ...
- } );
- or:
- define( function( require, exports, module ){
- // ...
- } );
- require(String)
- define( function( require ){
- var a = require('a'); // 加载模块a
- } );
- require(Array, Function)
- define( function( require ){
- require( ['a', 'b'], function( a,b ){ // 加载模块a b 使用
- // 依赖 a b 模块的运行代码
- } );
- } );
- require.toUrl( Url )
- define( function( require ){
- var temp = require.toUrl('./temp/a.html'); // 加载页面
- } );
amdjs 的API https://github.com/amdjs/amdjs-api/wiki
RequireJS
- <script data-main='scripts/main' src='scripts/require.js'></script>
- define({
- method1: function(){},
- method2: function(){}
- });
- define(function(){
- return{
- method1: function(){},
- method2: function(){}
- }
- });
- define([ 'module1', 'module2' ], function(m1, m2){
- ...
- });
- define( function( require ){
- var m1 = require( 'module1' ),
- m2 = require( 'module2' );
- ...
- });
- require( ['foo', 'bar'], function( foo, bar ){
- foo.func();
- bar.func();
- } );
- define( function( require ){
- var m1 = require( 'module1' ),
- m2 = require( 'module2' );
- ...
- });
CMD 与 seaJS
CMD
- define({ "foo": "bar" });
- define('this is {{data}}.');
- define( function(require, exports, module) {
- // 模块代码
- });
- define( 'module', ['module1', 'module2'], function( require, exports, module ){
- // 模块代码
- } );
- define(function( require, exports ){
- var a = require('./a');
- a.doSomething();
- });
- define( function(require, exports, module) {
- require.async('.a', function(a){
- a.doSomething();
- });
- });
- define(function( require, exports ){
- exports.foo = 'bar'; // 向外提供的属性
- exports.do = function(){}; // 向外提供的方法
- });
- define(function( require, exports ){
- return{
- foo : 'bar', // 向外提供的属性
- do : function(){} // 向外提供的方法
- }
- });
- define({
- foo : 'bar', // 向外提供的属性
- do : function(){} // 向外提供的方法
- });
- define(function( require, exports ){
- exports = {
- foo : 'bar', // 向外提供的属性
- do : function(){} // 向外提供的方法
- }
- });
- define(function( require, exports, module ){
- module.exports = {
- foo : 'bar', // 向外提供的属性
- do : function(){} // 向外提供的方法
- }
- });
seaJS
- // 加载一个模块
- seajs.use('./a');
- // 加载模块,加载完成时执行回调
- seajs.use('./a',function(a){
- a.doSomething();
- });
- // 加载多个模块执行回调
- seajs.use(['./a','./b'],function(a , b){
- a.doSomething();
- b.doSomething();
- });
AMD 与 CMD 区别到底在哪里?
- // CMD
- define(function(require, exports, module) {
- var a = require('./a')
- a.doSomething()
- // 此处略去 100 行
- var b = require('./b') // 依赖可以就近书写
- b.doSomething()
- // ...
- })
- // AMD 默认推荐的是
- define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
- a.doSomething()
- // 此处略去 100 行
- b.doSomething()
- // ...
- })
amdjs 的 require 接口文档 https://github.com/amdjs/amdjs-api/wiki/require
amdjs 的接口文档 https://github.com/amdjs/amdjs-api/wiki
RequireJS和AMD规范 http://javascript.ruanyifeng.com/tool/requirejs.html
知乎 AMD 和 CMD 的区别有哪些? http://www.zhihu.com/question/20351507
JavaScript模块化开发 - AMD规范 http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-amd
模块化设计 http://baike.baidu.com/view/189730.htm
模块化 http://baike.baidu.com/view/182267.htm
转载于:https://www.cnblogs.com/qiaorenjie/p/5290181.html
JavaSript模块化 AMD CMD 详解.....相关推荐
- webpack3.x模块化与自动化详解-张玉坤-专题视频课程
webpack3.x模块化与自动化详解-228人已学习 课程介绍 webpack是前端模块化和自动化流出的构建工具.本课程从webpack起源.前端遇到是问题开始,讲解webpack的 ...
- php 微信开发实战pdf,微信开发实战之模块化的实例详解
在任何一个大型应用中模块化是很常见的,与一些更传统的编程语言不同的是,JavaScript (ECMA-262版本)还不支持原生的模块化. Javascript社区做了很多努力,在现有的运行环境中,实 ...
- require.js的AMD规范详解
require.js使用简介 在web刚开始发展的蛮荒时代,一个页面中只需要加载一个或少量的js文件,不存在模块,也不存在冲突之类的问题,但随着web项目的发展,它越来越大,js文件动辄几十个,怎么加 ...
- 使用ARouter进行Android模块化开发,详解系列文章
@Override public void process(Postcard postcard, InterceptorCallback callback) { - // No problem! ha ...
- vuex结合php,Vuex模块化(module)实例详解
本文主要和大家介绍Vuex 模块化(module),小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 一.为什么需要模块化 前面我们讲到的例子都在一个状态树里进行,当一个项目比较 ...
- gulp临时服务器显示html页面,Gulp实现静态网页模块化的方法详解
前言 在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题.比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同.那么同样的两段代码我们复制了40遍(最难受的方法).然后,这个问题就这样解决 ...
- 阿里云AMD服务器ECS实例g6a、c6a和r6a性能参数详解
阿里云AMD服务器ECS计算型c6a.通用型g6a和内存型r6a实例,CPU采用2.6GHz主频的AMD EPYCTM ROME处理器,睿频3.3GHz,计算性能稳定,云服务器吧来详细说下阿里云ECS ...
- 前端模块化详解(CommonJS、AMD、CMD、ES Module)
大家好,我是一碗周,一个不想被喝(内卷)的前端.如果写的文章有幸可以得到你的青睐,万分有幸~ 写在前面 随着前端项目的不断复杂,代码日益膨胀,项目的维护难度随之越来越大,此时模块化也就相继的出现了,本 ...
- CommonJS,AMD,CMD,ES6,require 和 import 详解
CommonJS,AMD,CMD,ES6 commonJS用同步的方式加载模块.在服务端,模块文件都存在本地磁盘,读取非常快,所以这样做不会有问题.但是在浏览器端,限于网络原因,更合理的方案是使用异步 ...
最新文章
- 有虚拟服务器的无线路由,无线路由,虚拟服务器,。怎么办?
- 2020 年的算法,降温之后会更好
- python3.6安装【scrapy】-最保守方法
- 清华大学《操作系统》(十二):临界区与锁
- JavaScript中的运算符和语句
- javascript 显示一定范围内的素数(质数)
- 2019年CSDN博客前十排名
- UE4 C++使用Multi Theard的教程
- 如何查看redis占用内存大小
- Pulsar:一款功能强大的可视化网络足迹扫描平台
- JSK-388 等差数列【入门】
- php为什么要创建类,php – 是否有理由为单一功能创建类?
- PHP Overview
- scoped_ref
- Unity 性能优化经验整理
- WPF ControlTemplate 仿QQ概念版CheckBox
- SVN下载安装及入门使用教程,详细到不能再详细了
- 程序员叫啥名字_网友:什么是好程序员?腾讯员工:首先起个“配”自己的网名!...
- 李白关于鸿蒙的诗,名诗欣赏:李白《把酒问月》之--青天有月来几时
- ios 系统状态栏样式修改_IOS修改状态栏的字体颜色以及修改状态栏的背景颜色...