RequireJS插件应用到自己的网页中的新手入门实例原创

文章标签: 使用实例
  • :
  • 03-25 11:43
  • :
  • 21次
  • :
  • 0条
  • 4赞

简介本文讲的是requirejs插件的一个非常简单和基础的入门实例,没有太过复杂的设置,只有最简单和基础的引用,通过这个最简单的例子,让你在使用requirejs插件更容易上手和入门。l

我们如果想要在自己的web网页或网站里引用requirejs插件,是非常简单的,下面站长一步一步的来介绍给大家:

第一步引入requirejs插件的源方件:

<script language="javascript" src="/Inc/require.min.js">

还没有源文件的朋友,可点这里下载:Requirejs插件的官网及下载地址

站长现在习惯了用CDN来加载自己网页里用的那些插件,所以站长自己的网站里在使用的时候,是这样写的:

<script language="JavaScript" src="//cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>


PS:
我们在引入requirejs的源文件时,可以再加上一个data-main属性,如:

<script language="javascript" data-main="/Inc/config" src="/Inc/require.min.js">

意思是加载完成require.min.js这个源文件后,就去加载/Inc/config.js这个文件,一般我们都把第二步里的配置信息放到这个文件里。

注意:在这里有一个误区,按一般的思路,我们可能会这样写:

<script language="JavaScript" data-main="/Html/aijquery/Config" src="//cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script language="javascript">
require(["jquery"],function($){	
    $("button#aijquery").click(function(){    	
        alert("aijquery按钮被点击了!");    
    });
});
//本文原创首发 爱jQuery www.aijquery.cn
</script>

这样写的直观意思就是先加载require.js这个基文件,然后再去加载Config配置文件,然后再开始执行下面具体的代码,但是这样的写法是错误的,在实际中,下面的代码会优先于上面的代码而执行,这样就会报404的错误,因为我们下面代码调用里的jquery,是配置在上面的Config.js文件里的,因为顺序不正确,所以就会报错。

因此,我们可以调换一下位置,把我们自己的js代码放到一个文件里,然后用下面这样的格式来调用:

<script language="JavaScript" data-main="/Html/aijquery/Main" src="//cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script language="javascript" src="/Html/aijquery/Config.js"></script>

另外还有一种方法就是把我们自己的代码全都写到Config.js文件里,然后在不同的页面里直接调用!

PS:在本文的最下面,有站长提供的在线实例演示,大家可以把上面的代码复制到在线演示里,查看具体的效果!


第二步
配置,把一些我们要用到的插件配置到requirejs的config里,方便我们的调用,比如jquery:

require.config({	
    paths:{    	
        "jquery":"//cdn.bootcss.com/jquery/1.9.1/jquery.min"    
}});

PS:很有用的小技巧,我们在配置的时候,可以使用数组,为“jquery”配置多个地址,这样我们在用require调用jquery时,如果第一个地址失败或错误了,就会自动加载第二个地址,如:

require.config({	
    paths:{    	
        "jquery":["//cdn.bootcss.com/jquery/1.9.1/jquery.min",
                  "/Inc/jquery.min"]    
}});

第一个地址是CDN地址,第二个是我们本地的源文件地址,这样我们就不会担心哪一天,CDN停用了后,我们的网站会打不开了。

PSrequirejs中文API帮助文档

第三步应用,前面两步都是配置和准备的工作,完成后,我们就能直接在我们的网页里应用了

require(["jquery"],function($){	
    $("button#aijquery").click(function(){
    	alert("aijquery按钮被点击了!");    
    });
});

好了,本文就介绍到这里了,下面是站长给你提供的在线实例演示,内容就是上面站长写的这些:

requirejs应用的一个基础入门实例演示



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-15 14:44:53