requireJS模块化编程的使用

前些日子搞了一个类似淘宝的电商项目，用的就是requirejs模块化加载模块化脚本将提高代码的加载速度和质量

优点：实现js文件的异步加载，避免网页失去响应

  管理模块之间的依赖性，便于代码的编写和维护

复用和效率都非常好

<script id="script" src="/js/require.min.js" defer async="true" require-module="/js/html/index.js"  data-main="/js/config"></script>

这便是requirejs主模块的引用，（虽然requirejs默认可以不用写.js，不过写上还是没毛病的）

defer是html4.0中定义的，该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。也就是说defer属性的<script>就类似于将<script>放在body的效果。
async是HTML5新增的属性，IE10和浏览器都是支持该属性的。该属性的作用是让脚本能异步加载，也就是说当浏览器遇到async属性的<script>时浏览器加载css一样是异步加载的。

require-module 是可以指定加载自定义js的，没有必要每个html都加载不相关的js

data-main指定入口点：config.js的配置如下：

if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
    alert("您的浏览器版本过低，请下载IE9以上版本或使用其他浏览器");
    window.close();
}

requirejs.config({
    paths: {
        jquery:"/js/jquery.min",
        template:"/js/template"
    },
    shim: {

    }
});

//按scripts标签id加载相应脚本
define(["jquery"], function(jquery) {
    console.log("start")
    var module = $("#script").attr("require-module");
    console.log(module)
    if (module !== undefined && module !== "") {
        require([module]);
    }
});

require.config对模块的加载进行自定义

path指定各个模块的路径

shim对不符合AMD规范的js脚本使用shim做导出配置

最下面可以自定义加载相应脚本

给出index.js

define(['jquery', "template"], function(jquery, template) {
    alert("加载成功")
    $("#div1").click(function () {
        alert("success")
    })
})

定义加载模块jquery和template，这样加载后就可以使用jquery.js和template.js

看得出来，加载requirejs后加载config后加载其他

基于springboot的一个小demo：https://gitee.com/tickingbomb/tickingbomb/tree/mtgg/

优点：实现js文件的异步加载，避免网页失去响应

  管理模块之间的依赖性，便于代码的编写和维护

requireJS模块化编程的使用

猜你喜欢