继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

require.js使用方法整理

五爷憨憨
关注TA
已关注
手记 2
粉丝 9
获赞 55

一、使用原因
1、实现js异步加载,避免网页失去响应;
2、管理模块之间的依赖性,便于代码编写和维护;

二、使用说明

1.加载require.js

加载这个文件,也可能造成网页失去响应。解决办法有两个,一个是把它放在网页底部加载,另一个是写成下面这样:
<script src="js/require.js" defer async="true" ></script>
async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。

2.主模块

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

(1).config

require.config({
baseUrl: "js/lib",//基目录

shim: {//加载没有采用AMD规范的模块 (例如:jquery插件) ,没有用define()定义的模块方法

    'jquery.scroll': {

      deps: ['jquery'],//依赖于jquery

      exports: 'jQuery.fn.scroll'//输出名字

    }

  },

    paths: {//路径

      "jquery": ["https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min" ,“jquery.min”],
// 远程cdn库没有加载成功,可以加载本地的库

      "underscore": "underscore.min"
}

  });

3.定义模块

define(function (){

    var add = function (x,y){

      return x+y;

    };

    return {

      add: add
    };

  });
//如果这个模块还依赖于其他模块

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

    function foo(){

      myLib.doSomething();

    }

    return {

      foo : foo

    };

  });

4.加载模块方法

require(['模块名称'], function ( 输出变量 ){

    //加载成功后执行

  });

require(["jquery","underscore"],function($, ){
$(function(){
.each([1,2,3],alert);
})
})

打开App,阅读手记
8人推荐
发表评论
随时随地看视频慕课网APP