requireJS 探索（一）

2016-08-26  本文已影响325人  阿波罗程序猿

什么是requireJS？

requireJS
requireJS是JavaScript和模块的加载器，它适合在浏览器中使用，也可以在其他JavaScript环境中使用，比如Rhino and Node。requireJS使用像组件式的模块加载器，将改善你代码的相应速度和质量。

requireJS发挥的作用

简单总结起来就2点

为什么使用requireJS

从前我们的代码是这样的
首先加载全部的js文件，加载js文件时浏览器会对html页面停止渲染，加载的js文件越多，网页卡的时间越久，影响用户体验。还有有的时候各个网页中js文件是相互依赖的比如如下代码必须先加载jquery.js才能加载后面的js不然会报错，而且每个页面都要这么写很麻烦。而且js也是写在html页面里，有洁癖的人很是不愿意看下去把这样2种风格的代码糅杂在一起。而且js与js之间依赖越大代码越不好编写与维护。对以后的重构之路简直就是自掘坟墓。所以我们要使用requireJS帮助我们管理js包依赖，帮助我们解耦合，帮助我们重构业务方法，帮助我们改善用户体验。

<!DOCTYPE html>
<html>
<head>
    <title>未来降雨图分布</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../common/jqwidgets-ver3.0.3/jqwidgets/styles/jqx.base.css" type="text/css"/>
    <link rel="stylesheet" href="../../common/jqwidgets-ver3.0.3/jqwidgets/styles/jqx.metro.css" type="text/css"/>
    <script type="text/javascript" src="../../common/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../js/util.js"></script>
    <script type="text/javascript" src="../../common/json2.js"></script>
    <script type="text/javascript" language="javascript" src="/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="../../common/jqwidgets-ver3.0.3/scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../common/jqwidgets-ver3.0.3/jqwidgets/globalization/localizestrings.js"></script>
    <script type="text/javascript" src="/jxfffcs/js/rainMethod.js"></script>
    <script type="text/javascript" src="/jxfffcs/js/TimeUtil.js"></script>
    <script type="text/javascript" src="/jxfffcs/common/My97DatePicker/WdatePicker.js"></script>
    <!--<script data-main="/jxfffcs/forecast/realTimeForecast/js/main_futureRainfallWindow.js" src="/jxfffcs/common/require.js"></script>-->
    <script>
        $(function () {
            var url = location.search;
            var Request = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1) //去掉?号
                //strs = str.toLowerCase();
                var strs = str;
                strs = strs.split("&");
                for (var i = 0; i < strs.length; i++) {
                    Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            var data = JSON.parse(Request.dataString.replace(/_/g, "至"));
            var unitname = Request.unitname;
            var listInfo = data.listInfo;
            var fymdh = data.fymdh.substring(0, 16);
            $("#fymdhDiv").html("发布时间：" + fymdh);
            $("#dropDownListJqx").jqxDropDownList({
                source: listInfo,
                placeHolder: "请选择",
                selectedIndex: 1,
                displayMember: 'ftIntv',
                valueMember: 'ymdh',
                width: '280',
                height: '25',
                theme: "metro"
            });
            $("#dropDownListJqx").on('change', function (event) {
                if (event.args) {
                    var item = event.args.item;
                    if (item) {
                        var value = item.value;
                        //top.showLoading();
                        $("#gridImg").attr("src", "/jxfffcs/rest/situationAnalysis/reports/getRealTimeForecastGrid?width=" + 800 + "&height=" + 800 + "&ymdh=" + value + "&fymdh=" + fymdh + "&unitname=" + unitname + "&t=" + new Date().getTime());
                        //top.hideLoading();
                    }
                }
            });
            $("#dropDownListJqx").jqxDropDownList('selectedIndex', 0);
        });
    </script>
</head>
<body>
<div id='dropDownListJqx' style="float:left;"></div>
<div id="fymdhDiv" style="float:left;font-family: '宋体';font-size: 14PX;margin-top:5px;margin-left:5px;"></div>
<img id="gridImg" style="clear:both;" width="500px" height="500px" alt="" src="">
</body>
</html>

如何使用requireJS

至此使用requireJS异步加载js和管理依赖包添加完毕

什么是AMD规范

requireJS是参照AMD规范编写的。那么什么是AMD规范？AMD（ Asynchronous Module Definition ）规范又称“异步模块定义规范”AMD制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应（浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题）。

define(id?, dependencies?, factory);
id:第一个参数，id，是个字符串。它指的是定义中模块的名字，这个参数是可选的。如果提供了项目中不允许重名。
dependencies：第二个参数，dependencies，是个定义中模块所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行，并且执行的结果应该按照依赖数组中的位置顺序以参数的形式传入（定义中模块的）工厂方法中。
factory：第三个参数，factory，为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

requireJS配置文件结构

paths：
所引用的模块名不在baseUrl中时使用paths。paths使用相对路径进行资源的引用。
shim：
配置依赖、导出、较老版本的自定义初始化版本（此方法不支持jquery），传统的浏览器全局脚本不能使用define()来的定义依赖和为模块设置一个值。

根据api中的描述，如果你想在html中使用require()，而且仅有一个main entry point，那么在该页面中调用require()最好使用内嵌的require()来调用，如上面的代码那样。

最后在html页面中加入
<script data-main="/jxfffcs/forecast/realTimeForecast/js/main_futureRainfallWindow.js" src="/jxfffcs/common/require.js"></script>

至此全部关于requireJS初探结束。

参考

http://requirejs.org
https://github.com/amdjs/amdjs-api/wiki/AMD

上一篇 下一篇

猜你喜欢

热点阅读