前言

之前在公司用JS写前端页面，本来自己是一个写后端的，但是奈何人少，只能自己也去写了。但是自己对前端基本不懂，基本就是照着前人写的照着抄，反正大体意思是明白的，但是出现问题了，基本上也是吭哧吭哧好几天，也能解决，但是由于自己对前端这一套是一点都不懂，导致效率很低，而且经常返工。后来稍微学习了一波，了解了这个AMD规范和require.js。

因为公司用的是这个require.js，所有这里就好好的把这个re服务器托管网quire.js总结一下，只为工作需要。

下面我通过三个模块来把整个知识点穿起来。

• calculator.js：定义calculator模块
• author.js：定义author模块
• main.js：主模块，依赖calculator模块和author模块

定义无依赖的模块

定义无依赖的模块语法如下：

define(function() {
    return 导出的内容
})

样例代码：

// calculator.js
define(function() {
  // 欢迎关注微信公众号：果冻想
  let add = function(x, y) {
    return x + y;
  };

  let sub = function(x, y) {
    return x - y;
  };

  let multi = function(x, y) {
    return x * y;
  };

  let div = function(x, y) {
    return x / y;
  };

  // 对外暴漏模块
  return {
    add: add,
    sub: sub,
    multi: multi,
    div: div
  }
});

再来一个模块定义，方便下面依赖引入：

// author.js
define(function() {
  let name = "果冻想";
  let sex = "男"

  function getName() {
    return name;
  };

  function getSex() {
    return sex;
  };

  return {
    getName: getName,
    getSex: getSex
  }
});

定义有依赖的模块

定义有依赖的模块语法如下：

define(["module1", "module2"], function(m1, m2) {
	return 模块
})

样例代码：

// main.js，分别依赖上面的calculator和author模块
define([
  'calculator',
  'author'
], function(calculator, author) {
  console.log(calculator.add(1, 1));
  console.log(calculator.sub(5, 2));
  console.log(calculator.multi(2, 3));
  console.log(calculator.div(4, 2));
  console.log(author.getName());
  console.log(author.getSex());
});

使用模块

使服务器托管网用require.js的第一步，是先去官方网站下载最新版本。下载后，假定把它放在js子目录下面，就可以加载了。下载地址：Download RequireJS

其实，加载这个文件，也有可能会造成网页失去相应，我们一般的做法是把这个加载语句放在网页的底部加载；其实，还有另一个方案，可以这个样子：

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

加载require.js以后，下一步就要加载我们自己的代码了。

data-main属性的作用是指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

这样，我们的代码就可以直接在浏览器中运行喽。

模块的加载

默认情况下，require.js会默认认为模块与data-main指定的文件在同一个目录下，然后自动加载它们。有的时候，这些模块都不在一个目录下，又或我们在加载模块时，想对模块进行重命名，这些肿么搞？

这些我们都可以使用require.config()方法，我们可以对模块的加载行为进行自定义。比如这个样子：

require.config({
 baseUrl: "js/lib",
  paths: {
   "jquery": "https://xxx/jquery.min",
   "underscore": "underscore.min",
   "backbone": "backbone.min"
  }
});

baseUrl是可以直接定义基目录。

非标准模块的加载

对于那些遵循AMD规范的模块，使用require.js来加载，当然是非常舒服的了；即使很多流行的函数库符合AMD规范，但是仍有很多库并不符合，针对这些不符合的库，我们该如何使用呢？

针对这些不符合AMD规范的模块，需要使用时，仍是需要在require.config中进行配置。require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块，具体配置字段说明如下：

• exports值（输出的变量名），表明这个模块外部调用时的名称；
• deps数组，表明该模块的依赖性。

比如，jQuery的插件可以这样引入：

shim: {
 'jquery.scroll': {
  deps: ['jquery'],
  exports: 'jQuery.fn.scroll'
 }
}

总结

好了，关于AMD和CommonJS就总结到这里了，希望对大家有帮助。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 失落的艺术：无着色器3D渲染

假设你想创建一个甜蜜的弹跳立方体，如下所示： 一个弹跳的立方体 你可以使用 3D 框架，例如 OpenGL 或 Metal。 这涉及编写一个或多个顶点着色器来变换 3D 对象，以及编写一个或多个片段着色器来在屏幕上绘制这些变换后的对象。 然后，该框架采用这些着…