require.js入门

requirejs的概念

RequireJS是一个JavaScript模块加载器。它非常适合在浏览器中使用，同时它也可以用在其他的脚本环境中如Node(不如SeaJS专一，主攻浏览器)。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

requirejs产生的原因

现代的前端项目越来越复杂，js的代码量越来越大，前端工程师需要协同工作js代码之间了关系很难维护，存在常见的全局变量污染，js脚本的加载影响界面的渲染速度等。正式这些问题促使了新的前端代码的编写形式，requirejs、seajs等模块加载机制的出现。

requirejs的使用

模块入口点data-main

上面的代码为Requirejs必备的部分。相当于C或Java语言中的main函数，程序的入口。

模块定义define(...)

模块不同于传统的脚本文件，它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系。

一个文件对应一个模块，在模块引用的时候可以省略.js的文件扩展名

显示依赖声明

在定义模块的时候可以显示的进行依赖声明，下面的数组就是需要依赖的模块们。此处的依赖注入和AngularJS的依赖注入好像啊( ^_^ )

require(['helper/print'], function (print) {...});

一个简单的实例

文件结构：

程序一共分为3个模块(每个只有几行代码)
const.js常量模块 print.js打印的功能模块 main.js requirejs的主模块

1. main.js程序的入口，可以进行一些文件路径等的设置暂不使用

/*依赖print模块*/require(['helper/print'], function (print) {    'use strict';    print.printColor();});

1. print.js

/*依赖const模块 const不小心和js的关键字冲突了所以命名为const1*/define(['helper/const'], function (const1) {    return {        printColor: function () {            console.log(const1.color);        }    };});

1. const.js

/*最最简单的一个模块定义了*/define(function () {    return {        color: 'black',        size: '10'    };});

1. html文件用来预览效果

    my first requirejs demo    # My first demo

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

demo的代码地址

关键字：requirejs, 模块化, 模块, print

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！