论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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
vue-cli 关闭热更新操作
Sep 18 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
PHP Session机制简介及用法
2014/08/19 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
总结对比php中的多种序列化
2016/08/28 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
构建高效的python requests长连接池详解
2020/05/02 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
项目计划书范文
2014/01/09 职场文书
师范教师毕业鉴定
2014/01/13 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
合作合同协议书范本
2015/01/27 职场文书
干部培训工作总结2015
2015/05/25 职场文书
红色革命电影观后感
2015/06/18 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
Redis分布式锁的7种实现
2022/04/01 Redis
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android