针对鸡西中小企业的网站建设,网页制作,网站优化(seo/sem),网站改版等业务定制最佳解决方案的工作室.QQ:331148(7*24H免费咨询)
本页定位

RequireJS模块载入框架使用方法

臭保安👮1.86k4 去下载A+A-

⚠️ © 软件著作权归作者所有;本站所有软件均来源于网络,仅供学习使用,请支持正版!

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.STATICAPP.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文件优化归类了。

资源下载此资源仅限注册用户下载,请先
技术交流QQ群 7717114
全部评论: 0
登录没有账号 切换注册

邮箱或名字

忘记密码 ?

用第三方帐号直接登录
注册已有账号 切换登录

请真实填写

注意:邮箱涉及账号安全,也是您在完善资料之前唯一的登陆凭证,请务必填写真实的常用邮箱