侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

requireJS详解

2024-05-13 星期一 / 0 评论 / 0 点赞 / 87 阅读 / 3609 字

1、引入文件 必须要引入requireJS包,下载地址:http://requirejs.org/ <script src="js/require.js"data-main="js/main"></s

1、引入文件

必须要引入requireJS包,下载地址:http://requirejs.org/

<script src="js/require.js" data-main="js/main"></script>

data-main表示要加载的第一个JS文件,放到网页底部。不放入底部可以这样实现:

 <script src="js/require.js" defer async="true" ></script>

async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。

2、模块的加载

require.js假定这这个模块与main.js在同一个目录,文件名为jquery.js然后自动加载。

require.config({  baseUrl: "js/lib",    paths : {        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"] ,    "underscore": "underscore.min"  = = ("underscore": "lib/underscore.min")    }})

require.config主要是配置加载文件,如果这些模块在其他目录,比如js/lib目录,则有两种写法。一种是逐一指定路径。还有一种就是设置baseUrl改变文件基目录。

3、AMD模块的写法

define(function (){

    var add = function (x,y){

      return x+y;

    };

    return {

      add: add
    };

  });

该文件是私有的匿名函数,必须return才能被外部调用。

4、加载非规范的模块

require.config({

    shim: {

      'underscore':{
        exports: '_'
      },

      'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      }

    }

  });

如果是非规范的模块,比如没有该模块没有使用AMD模块的写法(define),如果要加载它的话必须要先定义它的特征。

5、主模块的写法

require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

    // some code here

  });

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
写的不够详细,有待完善。

 

广告 广告

评论区