requirejs基础

来源：互联网发布：fifa online3新数据库编辑：程序博客网时间：2024/06/06 01:56

requirejs基础

随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，有时候js文件过多会导致加载慢等一系列的问题。

常用的方法：

requirejs.config
requirejs
define

requirejs.config

这里写图片描述
requirejs.config主要是指定模块的别名，这里jquery-1.9.1.js比较长，为了方便别的模块进行引入，所以我们将jquery-1.9.1.js修改为别名jquery

//配置别名，将jquery-1.9.1配置为别名jquery//require.config方法用来指定模块的别名,方便模块的引入requirejs.config({    paths:{        jquery:'jquery-1.9.1',    }});

有时候可以直接引入网络资源：

require.config({    paths : {        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],        "a" : "js/a"       }})

requirejs

//引入对应的模块，编写我们的主代码,$和validate相当于对象的概念,requirejs(['jquery','validate'],function($,validate){    $('body').css('background-color','red');    console.log(validate.isEqual(2222,2));});

可以看到我们引入了jquery这个模块，实际上就是jquery-1.9.1.js这个文件。
另外require===requirejs

//引入对应的模块，编写我们的主代码,$和validate相当于对象的概念,require(['jquery','validate'],function($,validate){    $('body').css('background-color','red');    console.log(validate.isEqual(2222,2));});

require和requirejs里面接受一个数组参数，表示要引入的模块，然后回到一个函数，加载完成执行的代码。

define

编写一个模块

//编写模块define(['validate'], function($) {    return{        isEmpty:function(){},        checkLength:function(){},        isEqual:function(str1,str2){            debugger            return str1==str2;        }    }});

将编写的函数功能放入到return中。

引用

<!DOCTYPE html><html><head>    <title>My Sample Project</title>    <!-- data-main attribute tells require.js to load             scripts/main.js after require.js loads. -->    <script data-main="js/main" src="js/require.js"></script></head><body>    <h1>My Sample Project</h1></body></html>

这里有一个data-main,作用是引入require.js之后。接下来调用的js文件。

扩展

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？
回答是可以的。
这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

requirejs.config({    baseUrl : "/"+contextName+"/static/js/yfq",    urlArgs: "v=2016061604",    paths : {        "underscore" : "./libs/underscore-min",        "zepto" : "./libs/zepto.min",        "touch" : "./libs/touch",        "fx" : "./libs/fx",        "fx_methods" : "./libs/fx_methods",        "class" : "./libs/class",        "utils" : "./utils",        "IScroll" : "./libs/iscroll-lite",        "doT" : "./libs/doT.min"    },    shim : {        "zepto" : {exports : "$"},        "touch" : {deps : ["zepto"]},        "fx" : {deps : ["zepto"]},        "fx_methods" : {deps : ["zepto"]},        "underscore" : {exports : "_"},        "doT" : {exports : "doT"},        "IScroll" : {exports : "IScroll"},        "utils" : {            exports : "utils",            init : function() {                return(Utils)            }        },    }});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

阅读全文

0 0