经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
AMD、request.js,生词太多,傻傻搞不清
来源:cnblogs  作者:^_^果冻^_^  时间:2024/3/25 8:52:51  对本文有异议

前言

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

因为公司用的是这个require.js,所有这里就好好的把这个require.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

<script src="js/require.js"></script>

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

  
<script src="js/require.js" defer async="true" ></script>

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

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

<script src="js/require.js" data-main="js/main"></script>

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就总结到这里了,希望对大家有帮助。

原文链接:https://www.cnblogs.com/vipygd/p/18093051

 友情链接:直通硅谷  点职佳