RequireJS 学习笔记

最新推荐文章于 2020-01-02 18:36:11 发布

左手121

最新推荐文章于 2020-01-02 18:36:11 发布

阅读量338

点赞数 1

分类专栏：前端知识文章标签： require

本文链接：https://blog.csdn.net/qq_20282263/article/details/54964866

版权

前端知识专栏收录该内容

68 篇文章 1 订阅

订阅专栏

前言

最近在学习 AngulerJS。在学习过程中，我发现 AngulerJS 都是通过路由来进行页面的跳转（实质上是将需要跳转页面的内容嵌入当前页）。而每个页面需要依赖的js文件不同，因此需要一次性将所需的文件都加载出来。这就导致了随着项目越来越大，页面打开的速度就越来越慢。因此我们一些方案来解决这个问题。

简介

在此之前我们首先要了解几个基本的概念：

模块开发：程序可以看作是一系列特定功能的模块构成。每个模块的研发和改进都独立于其他模块。通过一个或数个通用的标准界面与系统或其他模块相互连接。
JavaScript模块化开发：是目前比较火的一种JavaScript开发方式，包括 CMD 和 AMD等方式。其主要的思想就是：将js文件当成一个一个独立的模块组件，通过动态加载的方式将他们相互关联起来，形成类似模块化的JavaScript开发模式。
1. CMD（Common Module Definition–通用模块定义）：以CommonJS为代表，延迟执行，依赖就近；
2. AMD（Asynchronous Module Definition–异步模块定义）： require.js为代表，提前执行，依赖前置；
ReqireJS作用：
1. 实现js文件的异步加载，避免网页失去响应；
2. 管理模块之间的依赖性，便于代码的编写和维护。

应用

1、引入对应的JS文件：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body ng-app="Demo">
    <ul>
        <li><a href="#/">首页</a></li>
        <li><a href="#/computers">电脑</a></li>
        <li><a href="#/printers">打印机</a></li>
        <li><a href="#/blabla">其他</a></li>
    </ul>
    <div ng-view></div>
</body>

</html>
<!-- data-main 指定网页程序的主模块 -->
<script type="text/javascript" src="scripts/require.js" data-main="main.js"></script>

2、文档结构
这里写图片描述
2、配置主模块

// main.js
require.config({
    // 所有模块的查找根路径
    baseUrl: "app",
    // path映射那些不直接放置于baseUrl下的模块名
    paths: {
        "jquery": "../scripts/jquery-1.13.1/jquery.min",
        "angular": "../scripts/angular-1.4.6/angular.min",
        "angular-route": "../scripts/angular-1.4.6/angular-route.min",
        "require": "./scripts/require"
    },
    // 为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置
    shim: {
        "angular": {
            // 表明这个模块外部调用时的名称
            exports: "angular"
        },
        "angular-route": {
            deps: ["angular"], // angular-route 依赖 angular
            exports: "angular-route"
        }
    },
    // 指定要加载的一个依赖数组
    // deps: [
    //     "angular",
    //     "angular-route",
    //     "jquery"
    // ],
    // RequireJS获取资源时附加在URL后面的额外的query参数
    urlArgs: "bust=" + (new Date()).getTime()
});

require(["jquery", "route", "angular"], function() {
    // 手动启动 angular，不要使用 ng-app="Demo" 来定义
    angular.bootstrap(document, ["Demo"]);
});

详细配置参考：http://www.requirejs.cn/docs/api.html#config
3、anguler 的路由

// route.js
define(["angular-route"], function() {
    var app = angular.module("Demo", ["ngRoute"]);
    app.config(["$routeProvider", function($routeProvider) {
        $routeProvider
            .when("/", {
                template: "这是首页页面"
            })
            .when("/computers", {
                template: "这是电脑分类页面",
                resolve: {
                    load: function() {
                        require(["file"]);
                    }
                }
            })
            .when("/printers", {
                template: "这是打印机页面"
            })
            .otherwise({
                redirectTo: "/"
            });
    }]);
});

4、file.js

define(function() {
    alert("我是动态加载的文件");
});

5、效果图
这里写图片描述
点击电脑一栏自动记载file.js文件

左手121

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
RequireJS 学习笔记

前言最近在学习 AngulerJS。在学习过程中，我发现 AngulerJS 都是通过路由来进行页面的跳转（实质上是将需要跳转页面的内容嵌入当前页）。而每个页面需要依赖的js文件不同，因此需要一次性将所需的文件都加载出来。这就导致了随着项目越来越大，页面打开的速度就越来越慢。因此我们一些方案来解决这个问题。简介在此之前我们首先要了解几个基本的概念：模块开发：程序可以看作是一系列特
复制链接

扫一扫