美文网首页
AMD_CMD_RequireJS

AMD_CMD_RequireJS

作者: hellowade | 来源:发表于2017-08-11 19:35 被阅读0次

    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。

    预览链接
    代码地址

    相关文章

      网友评论

          本文标题:AMD_CMD_RequireJS

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