RequireJS 学习笔记

来源：互联网发布：淘宝ued团队编辑：程序博客网时间：2024/05/21 01:43

前言

最近在学习 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.jsrequire.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.jsdefine(["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文件

0 0