JavaScript模块化编程之AMD

requireJS基础使用

标签（空格分隔）： JavaScript

参考文章

AMD规范

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

require.js作用

  • 实现js文件的异步加载，避免网页失去响应；
  • 管理模块之间的依赖性，便于代码的编写和维护。

首先引入requireJS文件，并在script标签上指定入口文件(主模块)：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript模块化编程</title>

</head>

<body>

<script type="text/javascript" src="https://cdn.bootcss.com/require.js/2.3.5/require.js" defer async data-main="js/main.js"></script>

</body>

</html>

接下来需要对main.js进行一些配置：

// 模块加载的配置

require.config({

    // 基目录 如果每个模块不在一个基目录

    // 不使用baseUrl直接在paths中具体指定

    baseUrl: "lib",

    paths: {

        'jquery': 'jquery',

        'vue': 'vue.min',

        'pagination': 'my-pager'

    },

    // shim属性 专门用来配置不兼容的模块 每个模块要定义:

    // (1) exports值（输出的变量名）表明这个模块外部调用时的名称

    // (2) deps数组 表明该模块的依赖性

    // 比如jq的插件可以这样定义

    shim: {

        'jquery.scroll': {

            deps: ['jquery'],

            exports: 'jQuery.fn.scroll'

        }

    }

    // requireJS还有一系列插件 不再赘述

    // [Plugins](https://github.com/requirejs/requirejs/wiki/Plugins)

});

// 主模块依赖于其它模块，这时就需要使用AMD规范定义的require()函数

// require([modules], function (modules) { });

require(['jquery', 'vue', 'pagination'], function ($, Vue, pagination) {

    console.log($);

    console.log(Vue);

    console.log(pagination);

});

关于自己定义符合AMD规范的模块，比如上面例子中的pagination:

;(function (factory) {

    if (typeof exports === 'object') {

        // Node/CommonJS

        factory(require('document'), require('window'));

    } else if (typeof define === 'function' && define.amd) {

        // AMD

        define(factory(document, window));

    } else {

        // Browser globals

        factory(document, window);

    }

}(function (document, window) {

    var Test = {

        a: 1

    }

    if (typeof module != 'undefined' && module.exports) {

        module.exports = Test;

    } else if (typeof define == 'function' && define.amd) {

        define(function () { return Test; });

    } else {

        window.Test = Test;

    }

}));

源码地址

The end...    Last updated by: Jehorn, Jan 04, 2018, 10:35 AM

JavaScript模块化编程之AMD - requireJS基础使用的更多相关文章

  1. JavaScript模块化编程之AMD

    简单的说一下AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义".它采用异步方式加载模块,模块的加载不影响它 ...

  2. Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...

  3. （转）JS模块化编程之AMD规范

    模块的规范 原文地址 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有 ...

  4. JS模块化编程之AMD规范（转）

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...

  5. JavaScript模块化编程之require.js与sea.js

    为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内 ...

  6. Javascript模块化编程之Why

    说到模块化编程,大家比较容易想到Java, C++等语言,感觉这事和Javascript沾不上一丁点边.虽说Javascript看上去好像同Java有莫大的关系,但那也只是一厢情愿,不过是挂羊头卖狗肉 ...

  7. Javascript异步编程之setTimeout与setInterval详解分析(一)

    Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...

  8. 【转】Javascript异步编程之setTimeout与setInterval

    Javascript异步编程之setTimeout与setInterval 转自:http://www.tuicool.com/articles/Ebueua 在谈到异步编程时,本人最主要会从以下三个 ...

  9. javascript 元编程之 method_missing

    javascript 元编程之 method_missing 引言 要说元编程 ruby 中技巧太多了,今天来写的这个技术也来自于 ruby 中的灵感. method_missing 这个在 ruby ...

随机推荐

  1. hdu6437 Videos 费用流

    题目传送门 题目大意: 给出n,每天有n个小时.有m种电影,每个电影有开始时间和结束时间,和01两种种类,k个人,每一部电影只能被一个人看,会获得一个快乐值wi,如果一个人连续看两部相同种类的电影,快 ...

  2. [转] 使用 Java8 Optional 的正确姿势

    [From] https://unmi.cc/proper-ways-of-using-java8-optional/ 我们知道 Java 8 增加了一些很有用的 API, 其中一个就是 Option ...

  3. Python Flask框架之页面跳转

    IDE用的PyCharm(还是vs强大啊). 项目结构: 2:页面: <!doctype html> <html lang="zh"> <head&g ...

  4. 2.rabbitmq 系列教程

    rabbitmq系列教程-文章[转] 视频分享: 链接:https://pan.baidu.com/s/1s_Qr2A1o0s8Ru0exK62jqg 提取码:eb68

  5. Java 继承初探

    Java继承的基础 Java中,被继承的类叫做超类,继承超类的类叫子类.(一个子类亦可以是另一个类的超类) 继承一个类,只需要用关键字 extends 把一个类的定义合并到另一个类中就可以了. 例子中 ...

  6. 三大视频网站Url的处理保存(视频和图片二选一操作)

    前台Js // 视频处理 var textVideoLink=$("input[name='textVideoLink']").val(); // 去除所有有的引号和空格 var ...

  7. 引导篇之web结构组件

    web结构组件有如下几种: 代理 HTTP代理服务器,是Web安全.应用集成以及性能优化的重要组成模块.代理位于客户端和服务器之间,接收所有客户端的HTTP请求,并将这些请求转发给服务器(可能会对请求 ...

  8. Android IntentFilter 匹配原则浅析

    1 Intent分为两大类,显式和隐式. 显式事件,就是指通过 component Name 属性,明确指定了目标组件的事件. 比如我们新建一个Intent,指名道姓的说,此事件用于启动名为" ...

  9. Eclipse的企业开发时常用快捷键使用、优化配置（博主推荐）

    不多说,直接上干货! 一.简介 eclipse可谓是Java开发界的神器,基本占据了大部分的Java开发市场,而且其官方还对其他语言提供支持,如C++,Ruby,JavaScript等等.为什么使用它 ...

  10. Hashtable和HashMap的区别，Properties类的简单使用

    一.Java Properties类 Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支持的配置文件,配置 ...