模块化基础

为什么要使用模块化？

1. 解决命名冲突，避免全局污染
2. 解决依赖管理
3. 提高代码可读性
4. 代码解耦，提高复用性

---

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

• CMD即是Common Module Definition 通用模块定义,主要是sea.js在推广过程中对模块化定义的规范化产出，中它推崇一个文件一个模块,经常用文件名做为模块ID,以及推崇依赖就近,主要应用为sea.js ，例子：

define(function(require,exports,module){
    var $ = require('jquery.js')
    $('div').addClass('active');
});
//cmd推崇就近依赖，所以依赖写在函数中，require是一个方法，exports是一个对象，提供对外接口，module是一个对象，存储与当前模块相关的属性和方法。

• AMD即是Asynchronous Module Definition 异步模块定义，主要是require.js在推广过程中对模块定义的规范化产出，它解决了多个js文件的依赖问题和加载js文件较多时的页面等待问题，推崇依赖前置，主要应用为require.js，例子：

define('modal',['jQuery'],function($){
    $('modal').show();
})
//define为定义关键字，modal为定义的模块名字，一般可以省略，[]内为要加载的依赖模块，紧跟回调函数。

• CommonJS主要指的是运行在浏览器端的模块规范，主要应用是node.js。
• 一个文件对应一个模块，每一个模块都是单独的作用域，加载模块是同步加载的。
• 在一个模块中只有一个出口，moudle.exports对象，将模块希望输出的对象放入该模块。
• 加载模块使用require方法。例子：

//模块定义  myMode.js

var name = 'jiuyi';

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

functionprintFullName(firstName){
    consoele.log(firstName+name);
}

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

//加载模块

var nameModule = require('./myMode.js')

nameModule.printName();

---

如下requirejs配置中, baseUrl 有什么作用？以什么作为基准? paths 的作用和用法是什么?

requirejs.config({
  baseUrl: "src/js",  
  paths: {
    'jquery': 'lib/bower_components/jquery/dist/jquery.min'
  }
});

baseUrl的作用是设置require加载JS文件的基础路径，以html所在的路径为基准，paths作用是设置baseUrl基础路径之外，设置某些特定文件的路径，以baseUrl路径为基准。

---

如下 r.js 的打包配置中 baseUrl 是什么? name 是什么

({
    baseUrl: "./src/js",
    paths: {
        'jquery': 'lib/bower_components/jquery/dist/jquery.min'
    },
    name: "main",
    out: "dist/js/merge.js"
})

• 在这里baseUrl指的是以自身文件路径为基准，寻找require.js的配置文件的baseUrl
• name指的是入口的主模块名字
• out指的是打包输出的路径

• 本博客版权归羞涩的涩和饥人谷所有，转载请注明出处