论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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php 删除数组元素
2009/01/16 PHP
php不写闭合标签的好处
2014/03/04 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
理解javascript模块化
2016/03/28 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
初步理解Python进程的信号通讯
2015/04/09 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
如何基于python实现脚本加密
2019/12/28 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
教师简历自我评价
2014/02/03 职场文书
表彰大会策划方案
2014/05/13 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
销售员试用期自我评价
2014/09/15 职场文书
学习与创新自我评价
2015/03/09 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
惊天动地观后感
2015/06/10 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书