require的学习

最新推荐文章于 2024-01-26 00:00:00 发布

toumingyumaohuiyi

最新推荐文章于 2024-01-26 00:00:00 发布

阅读量411

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/toumingyumaohuiyi/article/details/53610087

版权

前端同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

requirejs是种比较流行的框架，因为前期一直未有时间整理下，今天正好工作不太忙，决定整理下：

在简单的网页实现中，我们常常通过<scripttype="text/javascript"src="firsttest.js"></script>的方式将js文件导入，但是这种导入随着网页的复杂程度的提高，已经不能满足现在互联网开发模式。

问题描述：

加载js会堵塞浏览器浏览器渲染

例如：

index.html

<!DOCTYPE html>

<html>

<head>

<scripttype="text/javascript"src="firsttest.js"></script>

</head>

<body>

<span>hello world</span>

</body></html>

firsttest.js:

(function(){

function fun1()

{alert("nihao");

}

fun1();})()

我们注意到alert执行的时候，html内容是一片空白的，即<span>hello world</span>并未被显示，当点击确定后，才出现，这就是JS阻塞浏览器渲染导致的结果。于是有了AMD的概念

（AMD）

Asynchronous Module Definition，用白话文讲就是异步模块定义，对于 JSer 来说，异步是再也熟悉不过的词了，所有的模块将被异步加载，模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。

问题二：

<scripttype="text/javascript"src="first.js"></script>

<scripttype="text/javascript"src="test.js"></script>

<scripttype="text/javascript"src="firsttest.js"></script>

使用程序加载js时，上述js让页面变得不够人性化，如果first.js还需依赖test.js，则需先写test.js

上述两个问题，有了requirejs使得问题解决，当然requirejs的好处还不止如此

下面详细描述如何使用requirejs：

常用API:require .define（

define 是用来定义一个模块

require加载依赖模块，执行加载模块后有回调函数

）

因为在最近的web项目中有用到这个，所以在这篇文章中，以工作中应用为主

web项目首页index.html

在index.html中

首先加载requirejs文件

defer async="true"指的是异步加载，defer因为只有IE支持

然后<script src='js/require.js' data-main='js/main'></script>

data-main作用是指定网页程序的主模块，requirejs加载的文件后缀名为js，所以此处的main指的是main.js

主模块写法

main.js是主模块，整个index.html的主页面

如果我们的主模块不依赖任何模块，则直接写入

//main.js

console.log('main.js未依赖于其他模块');

alert('success');

但是此时因为没有依赖于其他模块，所以不需要用到require

但是通常情况下是有依赖

require(['firstmodule,secondmodule,thirdmodule'],function(firist,second,third){

//your code here

});

require()函数需要两个参数，第一个参数为数组，不管只是依赖于一个模块后多个模块，都统一用数组，上文指的是主模块依赖于这三个模块，第二个参数是回调函数，指的是当这三个模块都加载成功后，后面的这个函数都会被调用。加载的模块以参数形式传入该函数，从而在回调中使用这些模块，因为是回调函数，则前面的模块都加载完成后才会运行，解决了依赖问题

模块的加载

上个模块举的例子，对依赖模块没有自定义，常常现实情况是依赖模块可能与main.js并不在一个文件夹下或者存在不同版本问题，所以针对这个问题，使用require.config)方法，我们对模块的加载行为进行自定义。require.js写下main.js的头部，参数就是一个对象，这个对象的paths属性指定各个模块的加载路径

require.config(

paths:{

'jquery':'a/jquery.min',

'backbone':'a/backbone.min'

}

);

这种情况对于每一个依赖库都需要修改路径，我们可以用另一种方法即直接改变基本目录（baseUrl）

require.config(

baseUrl:'js/a',

paths:{

'jquery':'jquery.min',

'backbone':'backbone.min'

}

);

当模块不在自己的主机上时候，我们可以指定它的网址

require.config({

path:{

'backbone':'www.baidu.com/js/backbone.js'

}

});

require.js要求，每个模块是一个单独的js技术，这样的话，如果加载多个模块，就会发出多次http请求，会影响网页的加载速度，因此require.js提供了优化

工具（http://requirejs.org/docs/optimization.html）？？？？？？？，当模块部署完毕后，可以用这个工具将多个模块合并为一个文件中，减少HTTP请求

AMD模块的写法

所谓amd规范指的是异步加载，具体来说，模块本身必须采用define()函数来定义，如果一个模块不依赖于其他模块，则直接定义在

define()函数中

假定现在有一个secondtest.js文件，它定义了一个secondtest模块。那么，secondtest.js就要这样写：

sescondtest.js

define(function(){

var add=function(x,y){

return x+y;

};

return {

add:add

};

});

加载方法：

main.js

require(['secondtest'],function(second){

alert(secondtest.add(1,1));

});

如果这个模块依赖于其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性

define(['myLib'],function(myLib){

　function foo(){

myLib.doSomething();

　　　　}

　　　　return {

　　　　　　foo : foo

　　　　};

});

加载非规范模块

理论上，requirejs加载模块，必须是按照AMD规范，用define函数定义的模块，但是遗憾的是很多现在流行的js并不是符合AMD规范，那么requirejs在加载非规范的模块时需要做处理

这样的模块在用require1加载前，要先用requre.config()定义一些特性

require.config({

shim:{

"underscore": {
"exports": "_"
},

"handlebars" : {
"deps" : ["jquery"],
"exports" : "Handlebars"
}

}

});

require.config()接受一个配置对象，这个对象除了前面说过的paths属性外，还有一个shim属性，专门用了配置不兼容的模块，exports定义的是输出的变量名，可以用简称，表明这个模块外部调用的名称deps数组，表明该模块的依赖性

比如，jQuery插件可以这样定义：

shim:{

'jquery.scroll':{

deps:['jquery'],

exports:'jquery.fn.scroll'

}

require.js插件

text和image插件，则是允许require.js加载文本和图片文件。

　　define([

　　　　'text!review.txt',

　　　　'image!cat.jpg'

　　　　],

　　　　function(review,cat){

　　　　　　console.log(review);

　　　　　　document.body.appendChild(cat);

　　　　}

　　);

自己工作中的应用：

require.config({

waitSeconds: 0,

baseUrl: '../default/',

paths: {
// Core Libraries
"jquery": "framework/lib/jquery-1.9.1.min",
"underscore" : "framework/lib/underscore",
"backbone" : "framework/lib/backbone",
"handlebars" : "framework/lib/handlebars-v1.3.0",
"tinypubsub" : "framework/lib/ba-tiny-pubsub.min",
"swipeview": "framework/lib/swipeview",
  "iscroll5": "framework/lib/iscroll-zoom",

"text" : "framework/lib/requirePlugin/text",
"css" : "framework/lib/requirePlugin/css",
"json" : "framework/lib/requirePlugin/json",
"_fetchText": "framework/lib/requirePlugin/_fetchText",

  "chineseTopinyin" : "framework/lib/jQuery.Hz2Py-min",
},

shim: {
"backbone": {
"deps": [ "underscore"],
"exports": "Backbone"
},

"underscore": {
"exports": "_"
},

"handlebars" : {
"deps" : ["jquery"],
"exports" : "Handlebars"
},
}
});