论JavaScript模块化编程


Posted in Javascript onMarch 07, 2016

JavaScript模块化编程的重要性

JavaScript的原型是java,它也是一种面向对象编程语言,属于一种弱类型语言,它具有更大的灵活性。以往在编写javascript代码时,都是直接编写一个个.js文件,然后用script标签在html页面中引用,这样就会带来几方面的问题:

1、出现大量的全局变量
js在每个地方都可以定义一个全局变量,编写不符合规范将导致大量全局变量的出现,最终程序将难以维护。
2、js加载顺序要按照代码的依赖顺序
最简单的,例如a.js依赖于b.js文件,那么在html中引入脚本时,b.js必须要在a.js前面引入,否则将会报错。如果一个项目分工编写了几十个js文件,如果不按照一定的规范,将会出现大量的全局变量(也可能有重复的存在);其依赖关系也将难以维护
3、html一次性加载过多js脚本页面出现假死
初始化时一次性加载过多js脚本,很有可能会导致页面出现假死状态
使用RequireJS实现js模块化编程

  • RequireJS的目标是鼓励代码的模块化,它使用了不同于传统script标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。 —— [ RequireJS官网 ]

关于RequireJS的使用不过多阐述,详细请自行搜索或者在官网学习。这里记录下自己使用RequireJS模块化编程的一些心得。

应用场景是你的项目中使用了第三方开源库,但是呢,很多非GIS专业的IT选手对一些基本的概念可能会看不懂,这时候能可能就需要对第三方库进行更上一层的包装,这样接口就会更加容易理解一些,并且也可以做到分工协作,每个人都按照RequireJS的规范编写代码,只需要编写好自己的模块,预留好接口就可以了。下面是我封装的一个小例子,封装的还不是很彻底,目前仅处于学习js模块化阶段,后面无论大小都按照这种规范来写,相信一定会受益匪浅。

这里我采用的leaflet,一个轻量级开源地图库。需求是编写一个绘制图形类,实现点、线、面的绘制。直接给出代码了:

define(['leaflet'], function(){
  /**
   * 绘制多段线
   * @param options
   * @returns {*}
   * @private
   */
  var _drawLine = function(latlngs, options){
    return L.polyline(latlngs, options);
  };

  /**
   * 绘制多边形
   * @param options
   * @private
   */
  var _drawPolygon = function(latlngs, options){
    var polygon;
    if(latlngs.length < 3){
      console.log("点数少于3,无法绘制多边形!");
    } else {
      var firstPt = latlngs[0];
      var lastPt = latlngs[latlngs.length - 1];
      if(firstPt.equals(lastPt)){
        latlngs.pop();//移除与起点相同的终点
      }
      polygon = L.polygon(latlngs, options);
      return polygon;
    }
  };
  /**
   * 绘制矩形
   * @param bounds
   * @param options
   * @returns {*}
   * @private
   */
  var _drawRect = function(bounds, options){
    return L.rectangle(bounds, options);
  };
  /**
   * 绘制圆形
   * @param center
   * @param radius
   * @param options
   * @returns {*}
   * @private
   */
  var _drawCircle = function(center, radius, options){
    return L.circle(center, radius);
  };

  /**
   *封装,暴露公共方法
   */
  return {
    drawLine : _drawLine,
    drawPolygon : _drawPolygon,
    drawRect : _drawRect,
    drawCircle : _drawCircle
  }
})

调用时代码:

require(['drawHelper'], function(drawHelper){

 function drawLine(){
  var latlngs = new Array();
  for(var i = 20; i < 30; i++){
   for(var j = 100; j < 110; j++){
    latlngs.push(new L.latLng(i, j));
   }
  }
  var polylineOpt = {
   color : 'blue',
   weight : '2',
   opacity : 0.8,
   smoothFactor : 2.0
  };
  var polyline = drawHelper.drawLine(latlngs, polylineOpt);
  polyline.addTo(mainmap);
 };

 function drawPolygon(){
  var latlngs = new Array();
  latlngs.push(L.latLng(31, 110), L.latLng(31, 111), L.latLng(32, 111), L.latLng(32, 110), L.latLng(32, 109));
  var Opt = {
   stroke : true,
   color : 'blue',
   weight : '2',
   opacity : 0.8,
   fill : true,
   fillColor : 'red',
   fillOpacity : 0.6
  };
  var polygon = drawHelper.drawPolygon(latlngs, Opt);
  polygon.addTo(mainmap);
 }

 function drawRect(){
  var bounds = [[33, 110], [36, 113]];
  var Opt = {
   stroke : true,
   color : 'blue',
   weight : '2',
   opacity : 0.8,
   fill : true,
   fillColor : 'yellow',
   fillOpacity : 0.6
  };
  drawHelper.drawRect(bounds, Opt).addTo(mainmap);
 }

 function drawCircle(){
  var center = L.latLng(32, 116);
  var Opt = {
   stroke : true,
   color : 'red',
   weight : '2',
   opacity : 0.8,
   fill : true,
   fillColor : 'green',
   fillOpacity : 0.6
  };
  drawHelper.drawCircle(center, 200000, Opt).addTo(mainmap);
 }

 drawLine();
 drawPolygon();
 drawRect();
 drawCircle();
})

实现效果如下。这里我封装的还不彻底,但是已经够用了。像基础的地图操作,图层控制都可以写一个mapcontrol进行统一的管理

论JavaScript模块化编程

以上就是关于JavaScript模块化编程的论述,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
SVG描边动画
Feb 23 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 #Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 #Javascript
javascript数组去重小结
Mar 07 #Javascript
详解JS正则replace的使用方法
Mar 06 #Javascript
浅谈javascript中的call、apply、bind
Mar 06 #Javascript
一波JavaScript日期判断脚本分享
Mar 06 #Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 #Javascript
You might like
教你如何把一篇文章按要求分段
2006/10/09 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
js控制input输入字符解析
2013/12/27 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
jquery实现图片预加载
2015/12/25 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
Vue实现购物车功能
2017/04/27 Javascript
vuex的简单使用教程
2018/02/02 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
Element Notification通知的实现示例
2020/07/27 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
助学贷款贫困证明
2014/09/23 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
2015年新农合工作总结
2015/03/30 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android