高级4-require.js

题目1：为什么要使用模块化？

使用模块化可以：

解决命名冲突；
可进行依赖管理；
增强代码的可读性；
代码解耦，提高代码的复用率；

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

AMD：
是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

语法：define(id, dependences, factory);

CommonJS：
用于服务器端模块化，有一个全局性方法require()，用于加载模块。

语法：

       require(dependences) // 加载依赖模块       exports.factory = function(){ // ...};  // 使用”exports”对象来做为输出的唯一表示。

CMD：
CMD（Common Module Definition）是 SeaJS推广过程中产生的。和AMD不同的是，它并不是异步加载，而是松散加载，只有当需要加载模块的时候，再用require方法引用模块。

语法：define(factory);

// CMD// math.js define(function(requires, exports, module) {  exports.add = function(x, y) {    return x + y;  };});// inc.jsdefine(function(requires, exports, module) {  var add = require('math').add;  exports.inc = function(val) {    return add(val, 1);  };});// program.jsdefine(function(require, exports, module) {  var inc = require('inc').inc;  var a = 1;  inc(a); // 2  module.id = "program";});

require.js：

// 加载模块设置requirejs.config({  baseUrl: 'js/libs',                 // 指明模块的默认路径  paths: {    'jquery': 'jquery.min',           // 每个模块都是JS文件，即HTTP请求多    'underscore': 'underscore.min',   // 可以用require.js的优化工具合并模块    'backbone': 'backbone.min',    'jquery.scroll': 'jquery.scroll.min'    'xxx': 'https://xxx.com/libs/xxx/1.7.2/xxx.min'  }  shim: {                             // 为非规范的模块定义特征，接受配置对象    'underscore': {      exports: '_'                    // exports为外部调用模块时所用的名称    },    'backbone': {      deps: ['underscore', 'jquery'], // deps数组表明模块的依赖性      exports: 'Backbone'    },    'jquery.scroll': {      deps: ['jquery'],      exports: 'jQuery.fn.scroll'    }  }});// 加载AMD模块，并用回调函数操作requirejs(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {  //...});// 写AMD模块// 1. 不依赖其他模块，例如：math.jsdefine(function() {  var add = function(x, y) {    return x + y;  };  return {    add: add  };});// 2. 依赖其他模块，需指明依赖数组define(['mylib'], function(mylib) {  function foo() {    mylib.doSomething();  }  return {    foo: foo  };});// require.js提供了一些插件//1. domready插件，回调函数在页面DOM结构加载完成时运行require(['domready!'], function(doc) {  //...});//2. text和image插件，允许require.js加载文件和图片文件define(['text!review.txt', 'image!dog.jpg'], function(review, dog) {  console.log(review);  document.body.appendChild(dog);});// 3. 类似的插件还有json和mdown，加载json文件和markdown文件

实例

创建html文件，引入require.js库，设置data-main属性：

<!DOCTYPE html><html>    <head>      <meta charset="utf-8">      <title>task38</title>    </head>    <body>      <script src="https://apps.bdimg.com/libs/require.js/2.1.11/require.min.js" data-main="js/main"></script>    </body></html>

在html目录下新建js文件夹，创建main.js：

// main.jsrequire(['starting']);console.log("starting");

starting.js：

//starting.js define(['inc'],function(inc){     console.log(inc.getRes());     inc.add1();     console.log(inc.getRes());     inc.add1();     console.log(inc.getRes()); });

inc.js：

// inc.jsdefine(function() {  var a = 1;  var inc = {    add1: function() {      return a++;    },    getRes: function() {      return a;    }  };  return inc;});

结果：

代码题

文章转载于:https://www.jianshu.com/p/40686cb9a28c

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《高级4-require.js》

题目1： 为什么要使用模块化？

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

代码题

题目1：为什么要使用模块化？