AMD_CMD_RequireJS

1.为什么要使用模块化?

如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀。
这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码

模块化优点

  • 解决命名冲突,各模块内部变量,无法被其他模块读取(全局变量除外)。
  • 依赖管理
  • 提高代码可读性
  • 代码解耦,提高复用性

2.CMD、AMD、CommonJS 规范分别指什么?有哪些应用

CMD:通用模块定义(Common Module Definition)
应用:SeaJS

// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});
// 加载模块
seajs.use(['myModule.js'], function(my){
});

AMD:异步模块定义(Asynchronous Module Definition)
应用:RequireJS

// 定义模块  myModule.js
define(['jquery'], function($){   //引入jquery
   function Button($ct){
       this.$ct = $ct
       this.bind()
   }
   Button.prototype = {
       bind: function(){
           this.$ct.click(function(){
               $('.box').css({'background': 'red'})
           })
       }
   }
   return Button    //一定要return出去
})
// 加载模块
require(['jquery', 'app/myModule'],function($, Button){
   new Button($('.button'))  //构造函数实例化
})

CommonJS:CommonJS 扩展了JavaScript声明模块的API.
CommonJS模块可以很方便得将某个对象导出,让他们能够被其他模块通过 require 语句来引入。通过CommonJS,每个JS文件独立地存储它模块的内容(就像一个被括起来的闭包一样)。主要应用node.js

3.使用 requirejs 完善入门任务15。

预览链接
代码地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 题目1: 为什么要使用模块化? 模块的由来:嵌入网页的JS代码越来越庞大,越来越像桌面程序,需要一个团队去分工协作...
    萧雪圣阅读 284评论 0 0
  • 为什么要使用模块化? 最主要的目的:解决命名冲突依赖管理 其他价值提高代码可读性代码解耦,提高复用性 CMD、AM...
    Eazer阅读 685评论 3 1
  • 题目1:为什么要使用模块化? 最主要的目的:解决命名冲突依赖管理其他价值提高代码可读性代码解耦,提高复用性 在Ja...
    无目的阅读 374评论 0 0
  • 题目1: 为什么要使用模块化? 在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今C...
    南山码农阅读 194评论 0 0
  • «牵着蜗牛去散步»读后感悟:我身边有很多的蜗牛在缓慢地行走。我的孩子是蜗牛,我总是感觉他学习时不够专注,讨厌他的打...
    青的美好时光阅读 250评论 3 5