记JS模块化工具RequireJS的一次基本的使用方法及实现

记一次RequireJS的最基本的使用方法及实现

早期js脚本往往都是写在一个js文件里 所以一个页面加载一个文件就可以了,但随着技术的发展以及代码量的增加一个文件都不够用了,最具代表性的就是各类特效的js组件,导致一个页面往往需要引用n个js脚本文件才能达到预期效果,RequireJS在一定程度上很好的解决了这个问题

上一次升级博客网站程序前端做了较大改动,首先是页面换了模板,直观表现就是观感上升了一大截,但随之而来的的js文件引用量也上来了,每个页面平均的引用5个以上的js脚本,因为模板问题部分页面还迫于无奈引用到了本页面并不需要的js脚本文件,最坑的就是每次删除或新增修改引用都要重新发布程序,困扰了挺久偶然间解到了RequireJS 这个组件,帮我解决了这一大难题

下面是最基本的一个使用例子

首先 前端html引用 RequireJS脚本 (建议尾部引用)

<script src="~/require.min.js" data-main="/script/main.js" defer async="true"></script>

这里的 data-main属性就是执行的入口js文件相对路径

入口js文件里的使用方法 这里以jQuery为例

define(function () {

    requirejs.config({
        baseUrl: '/',
        paths: {
            'jquery': 'static/js/jquery-1.8.3.min',//这里地址去掉.js后缀
            'layer': 'static/js/layer',
        }
    });

    //初始化加载jquery
    require(['jquery','layer'], function () {

        //这里就可以直接是Jquery和layer的语法了

    });
});

如果后续新增js引用无需修改前端页面,直接添加相关依赖引用即可,无需重新发布网站项目只需替换入口main.js文件即可,维护难度也降低了很多.