其它

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > 其它 > require.js

require.js使用方法的简单代码讲解笔记

投稿:yin

页面需要加载多个js文件时,加载时浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;由于js文件之间存在依赖关系,必须严格保证加载顺序,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。这种情况下require.js插件应运而生。

页面需要加载多个js文件时,加载时浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;由于js文件之间存在依赖关系,必须严格保证加载顺序,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。这种情况下require.js插件应运而生。

目的:

这个插件的体积非常小14k左右,主要是解决目前我们js文件引入臃肿的问题,它可以将我们需要的js文件定义成一个模块的方式,只要我们想引入某个模块,我们声明引入就可以了。而且是异步加载的模式,对浏览器体验也非常好,不会阻塞渲染。

基本API

require定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短

第一步:a.js定义

define(function(){
    function fun1(){
      alert("it works");
    }
    fun1();
})

第二步:引入这个模块

require(["js/a"],function(){
    alert("load finished");
})

注意:a.js引入在js文件下,同时a.js中后缀不要了。

加载文件

加载本地是上面的那个样子,如果我们要加载其他网站要用到require.config这个方法

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

这样配置后,当百度的jquery没有加载成功后,会加载本地js目录下的jquery

讲讲data-main这个属性:

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

其实就是引入require.js后,再引入js文件夹下的main.js文件

您可能感兴趣的文章:
阅读全文