论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 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
python模块之re正则表达式详解
2017/02/03 Python
python计算auc指标实例
2017/07/13 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
快速查找Python安装路径方法
2020/02/06 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
群众对十八届四中全会的期盼
2014/10/17 职场文书
2015年教研员工作总结
2015/05/26 职场文书