requireJS应用总结

近期在新产品的开发中，做技术预研，偶然看到了前端模块化的概念，之前做代码重构，往往只考虑到了后台代码的解耦及模块化，前端只考虑了公共方法的提取，却很少考虑对前端js文件进行统一管理，借此机会，正好在项目中实际应用了一下，遇到了不少问题，但是总体还是感觉很好使，下面分享下使用心得。

首先，用requireJS的目的是完成前端代码的模块化。使用requireJS我们目前遇到并解决的问题：

1.使用requireJS本身的语法组织js文件，格式如下

define([], function() {
  return {
    hello: function() {
      alert("hello, a");
    }
  }
}});---引用方式：require([xxx],function(xxx){xxx});

说明：多数情况下，我们需要重用之前封装好的js插件，一般都是基于jquery做的封装，因此这种方式会给我们带来多余的工作量。经过考量，我们放弃了这种方式

2.通过配置，完成requireJS与jquery的结合，具体如下

require.config({
baseUrl : "static/resources/js",
shim : {
myutils : [ "jquery" ],
echarts : [ "jquery" ],
fancyBox : ["jquery"],
fancyBoxUtils : [ "jquery" ],
bootstrap : ["jquery"]
},
paths : {
jquery : "jquery/jquery.min",
myutils : "myutils", // 公共方法
echarts : "echarts/echarts.min", //baidu echarts
fancyBox : "fancyBox/source/jquery.fancybox", //image view
fancyBoxUtils : "jq-FancyBoxUtils/jqFancyBoxUtils", //image watermark
bootstrap : "bootStrap-3.3.5/js/bootstrap.min"   //bootstrap
  }
});--这是自定义的js文件，用于统一管理js文件，并让jquery插件支持requireJS的语法调用

说明：paths是插件的实际位置，shim是为了使jquery插件兼容requireJS语法

3.页面引用

<script type="text/javascript" src="<c:url value='/static/resources/js/requireJS/require.js'/>"></script>
<script type="text/javascript" src="<c:url value='/static/resources/js/pathMapping/pathMapping.js'/>"></script>

require.js是源文件，pathMapping是统一管理文件，名字可以自取

4.调用方式

requirejs([ "static/view/levelAlarm/alarmByLevel.js" ], function() { });

alarmByLevel.js内容如下：

require(["jquery","scrollbar","jqImageTable","my97datepicker","ztreeAll", "ztreeExhide","tollSelector",
         "myutils","jqLoading",'jqPaginator',"placeHolder","easyUI","easyUILocale","fancyBox", "fancyzoom", "fancyBoxUtils","jqVehicleInfo"],function($){

  XXX

});--按照正常的使用习惯即可

通过以上步骤，我们就完成了requireJS的应用。当然了，这里我们主要用到的是第三方的模块，实际上，开发过程中，也是用到第三方的模块居多。另外，requireJS是异步加载，也可以控制js的加载顺序。在应用过程中常见问题：

a.经常会遇到js文件404的问题，这种情况就要检查文件路径是否配置正确；

b.还会经常遇到未加载成功的问题，这个时候，就需要检查js文件的依赖关系；

c.初次调用插件没效果，需要预加载一次才行，初步总结也是没控制好加载顺序的原因，导致对象找不到

d.很对js框架已经加入了对requireJS的支持，但是也有很多依然不兼容，这种情况，都需要进行对应的配置

e.既然js文件可以这样管理，css可不可以呢？答：必须可以

好了，就写这么多，抛砖引玉