• RequireJS简单介绍即使用


    RequireJS介绍

    RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

    兼容性

     

    浏览器(browser) 是否兼容
    IE 6+ 兼容 ✔
    Firefox 2+ 兼容 ✔
    Safari 3.2+ 兼容 ✔
    Chrome 3+ 兼容 ✔
    Opera 10+ 兼容 ✔

    优点

    实现js文件的异步加载,避免网页失去响应
    管理模块之间的依赖性,便于代码的编写和维护

    快速上手

    • step 1
      • 引入require.js
      • require()中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义
      • 第二个参数是回调函数(callback),可以用来解决模块之间的依赖性
    <!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" src="require.js"></script>
            <script type="text/javascript">
                require(["js/a"], function(){
                    alert("load finished");
                });
            </script>
        </head>
        <body>
          body
        </body>
    </html>
    • step 2
      • require.config是用来配置模块加载位置
      • 如果固定的位置比较长,可以使用 baseUrl : "js",则paths中就不用写js了
    <!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" src="require.js"></script>
            <script type="text/javascript">
                require.config({
                    paths : {
                        "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"],
                        "a" : "js/a"                
                    }
                });
    
                require(["jquery", "a"], function(){
                    alert("load finished");
                });
            </script>
        </head>
        <body>
          body
        </body>
    </html>
    • step 3
      • step 2中重复出现了require.config配置,如果每个页面中都加入配置,就显得不大好了,requirejs提供了一种叫"主数据"的功能
      • 创建一个main.js把step 2中require.config放到main.js中
    <script data-main="js/main" src="js/require.js"></script>
    • step 4
      • 通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim
    require.config({
        shim: {
            "underscore" : {
                exports : "_";
            },
            "jquery.form" : ["jquery"]
        }
    });
    require(["jquery", "jquery.form"], function($){
        $(function(){
            $("#form").ajaxSubmit({...});
        })
    });

    链接

    阮一峰关于js模块化编程说明:

    所有文章如需转载请与我联系!邮箱地址shanchao@qq.com 随笔有任何问题都可以在下面评论,我会及时的回复。 如有如何文章侵权问题,我会做删除处理。
  • 相关阅读:
    BUAA2020个人博客作业小结
    BUAA2020软工热身作业小结
    个人博客作业----总结
    个人阅读作业7
    超链接按钮点击变色,原来的链接恢复原色
    setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法
    自定义网站404页面
    jQuery实现的上下滚动公告栏详细讲解
    K先生的博客
    Bootstrap4响应式布局之栅格系统
  • 原文地址:https://www.cnblogs.com/KuckBoy-shan/p/5601821.html
Copyright © 2020-2023  润新知