RequireJS模块载入框架使用方法
⚠️ © 软件著作权归作者所有;本站所有软件均来源于网络,仅供学习使用,请支持正版!

随着鸡西网站设计的功能逐渐丰富,网页中的js也变得越来越复杂和臃肿。原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,做网站时需要团队协作、模块复用、单元测试等等一系列复杂的需求。RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有10几K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。
鸡西网站开发时找了一下网络上现有的Require教程,发现很多教程讲的都不够完善,现整理开发网站中能用到的实用RequireJS教程如下。讲解思路直接按照鸡西网站制作的Require文件进行分析。
首先下载Require主文件,将以下代码复制到Require文件的最下方。
require.config({ baseUrl: APP.STATIC + '/static/js', urlArgs: 'ver=' + APP.VERSION, paths: { 'jquery' : 'libs/jquery.min', 'fastclick' : 'libs/fastclick.min', 'baguetteBox' : 'libs/jquery.baguetteBox.min', 'iziModal' : 'libs/iziModal.min', 'main' : 'main.min', 'sign' : 'ajax-sign-script.min', 'user' : 'user.min' } }) require(['main']);
以上代码中APP.STATIC
和APP.VERSION
分别调用了RequireJS文件的路径和版本号的JS变量,可充分用CDN静态缓存进行存储调用。以下代码可放在html中,RequireJS文件调用的script之前,用于调用。
<script type='text/javascript'> /* <![CDATA[ */ var APP = {"STATIC":"URL",//URL可以替换成你的CDN存储路径 "VERSION":"V1.0"};//V1.0可随时修改用于更新CDN上的文件 /* ]]> */ </script>
path
中的数组是所有.js文件的列表,相当于给你网站所有js文件做了一个列表。鸡西做网站是将所有的js插件库,包括jquery、fastclick等都放在了js/libs子文件夹内。自己编写的main、sign等文件都放在了js文件夹内。libs里专门存放各种js库,用以区分管理。
用RequireJS最大的好处就是可以按需调用,而不是把所有用的到和用不到的js都调用在页面上。例如path中有个owl文件,这是一个幻灯片插件。可以做一个判断,当前页面如果存在幻灯片的id或者class,才调用owl文件。判断与调用代码如下:
//滚动首页广告 if($('.banner').length){ require(['owl'], function(){ var ad1Owl = $('.gg1 .owl-carousel'); ad1Owl.owlCarousel({ items: 1, loop: true, smartSpeed: 500, autoplay: true, dots:false }); }) }
以上的if判断,就是判断页面中是否存在banner这个标签,如果存在,则用require
调用owl
文件。require
函数可以放两个参数,第一个是需要调用的js文件名,第二个是调用完这个js后需要执行的函数。
通过这篇文章的例子,相信你也可以用RequireJS为网站的js文件优化归类了。