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可不可以呢?答:必须可以


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

你可能感兴趣的:(前端,模块化,requirejs)