论JavaScript模块化编程

 更新时间:2016年03月07日 10:26:41   投稿:lijiao  
这篇文章主要介绍了论JavaScript模块化编程,感兴趣的小伙伴们可以参考一下

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实现页面刷新时自动清空表单并选中的方法

    这篇文章主要介绍了javascript实现页面刷新时自动清空表单并选中的方法,涉及javascript中reset与focus方法的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 详解javascript高级定时器

    详解javascript高级定时器

    这篇文章主要介绍了javascript高级定时器,针对javascript的代码队列进行详细解析,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JS简单获取客户端IP地址的方法【调用搜狐接口】

    JS简单获取客户端IP地址的方法【调用搜狐接口】

    这篇文章主要介绍了JS简单获取客户端IP地址的方法,通过调用搜狐接口来简单实现获取访客IP地址的功能,非常简便实用,需要的朋友可以参考下
    2016-09-09
  • javascript实现日历效果

    javascript实现日历效果

    这篇文章主要为大家详细介绍了javascript实现日历效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

    JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

    这篇文章主要介绍了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果,可实现鼠标滑过菜单项呈现弹性移动显示的效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • clipboard.js在移动端复制失败的解决方法

    clipboard.js在移动端复制失败的解决方法

    最近在使用clipboard.js碰到的一个小问题,通过查找相关资料解决了,所以下面这篇文章主要给大家介绍了关于clipboard.js在移动端复制失败的解决方法,需要的朋友可以参考借鉴,下面来一起学习学习吧
    2018-06-06
  • JS实现根据密码长度显示安全条功能

    JS实现根据密码长度显示安全条功能

    这篇文章主要介绍了基于JS实现根据密码长度显示安全条功能,非常不错,在一些网站上经常会遇到此功能,需要的的朋友参考下实现代码吧
    2017-03-03
  • JavaScript接入百度地图API的方法步骤

    JavaScript接入百度地图API的方法步骤

    在网站开发过程中,经常会调用到地图,百度地图JavaScript API可帮助您在网站中构建功能丰富、交互性强的地图应用,本文就详细的介绍一下,感兴趣的可以了解一下
    2021-07-07
  • bootstrap基本配置_动力节点Java学院整理

    bootstrap基本配置_动力节点Java学院整理

    这篇文章主要介绍了bootstrap基本配置,详细讲解如何下载并安装 Bootstrap,讨论 Bootstrap 文件结构,并通过一个实例演示它的用法。
    2017-07-07
  • javascript实现简单的鼠标拖动效果实例

    javascript实现简单的鼠标拖动效果实例

    这篇文章主要介绍了javascript实现简单的鼠标拖动效果,实例分析了javascript鼠标拖动效果的相关要点与实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04

最新评论