论JavaScript模块化编程_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模块化开发、javascript模块化写法、javascript的模块化,以便于您获取更多的相关知识。

时间: 2016-03-07

论JavaScript模块化编程_javascript技巧的相关文章

详解JavaScript模块化开发_javascript技巧

什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前端开发得到重视,也使得前端项目越来越复杂,然而,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,那么什么是模块呢? 一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块.模块开发

理解javascript异步编程_javascript技巧

一.异步机制 JavaScript的执行环境是单线程的,单线程的好处是执行环境简单,不用去考虑诸如资源同步,死锁等多线程阻塞式编程等所需要面对的恼人的问题.但带来的坏处是当一个任务执行时间较长时,后面的任务会等待很长时间.在浏览器端就会出现浏览器假死,鼠标无法响应等情况.所以在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应.所谓异步执行,不同于同步执行(程序的执行顺序与任务的排列顺序是一致的.同步的),每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一

深入剖析JavaScript面向对象编程_javascript技巧

二. Javascript 面向对象编程:构造函数的继承 本节主要介绍,如何生成一个"继承"多个对象的实例. 比如,现在有一个"动物"对象的构造函数, function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数, function Cat(name,color){ this.name = name; this.color = color; } 怎样才能使"猫&qu

javascript异步编程_javascript技巧

setTimeout (slow, takes about 10 sec) function async(callback) { setTimeout(callback, 0); } img.onerror (data:uri) function async(callback) { var img = new Image; img.addEventListener('error', callback, false); img.src = 'data:,foo'; } script.onready

浅谈javascript函数式编程_javascript技巧

函数式编程,属于编程范式的一种 1 函数是第一公民,可以返回值,也可以作为其他函数的参数 //console是一个函数 function con(v){ console.log(v) } // execute 也是一个函数 function execute(fn){ fn(1) } //将con函数作为参数传进execute函数 execute(con) // 1 2 接近自然语言的写法   晓池吃完饭然后就去洗澡 可以表现为eat().bathe() // 吃饭函数 function eat(

再谈JavaScript异步编程_javascript技巧

随着前端的发展,异步这个词真是越来越常见了.假设我们现在有这么一个异步任务: 向服务器发起数次请求,每次请求的结果作为下次请求的参数. 来看看我们都有哪些处理方法: Callbacks 最先想到也是最常用的便是回调函数了,我们来进行简单的封装: let makeAjaxCall = (url, cb) => { // do some ajax // callback with result } makeAjaxCall('http://url1', (result) => { result =

详解Javascript事件驱动编程_javascript技巧

一.基本概述     JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数来处理. PS:这种方式和Java GUI中的事件监听机制很像,都是需要注册监听,然后再处理监听,只不过实现的方式不同而已. 二.事件驱动原理 事件源:产生事件的地方(html元素) 事件:点击/鼠标操作/键盘操作等等 事件对象:当某个事件发生时,可能会产生一个事件对象,该时间对象会封装好该时间的信息,传递给事件处理程序 事件处理程序:响应用户事件的

详谈javascript异步编程_javascript技巧

异步编程带来的问题在客户端Javascript中并不明显,但随着服务器端Javascript越来越广的被使用,大量的异步IO操作使得该问题变得明显.许多不同的方法都可以解决这个问题,本文讨论了一些方法,但并不深入.大家需要根据自己的情况选择一个适于自己的方法. 本文为大家详细介绍js中的异步编程,具体内容如下 一 关于事件的异步 事件是JavaScript中最重要的一个特征,nodejs就是利用js这一异步而设计出来的.所以这里讲一下事件机制. 在一个js文件中,如果要运行某一个函数,有2中手段

javascript 函数式编程_javascript技巧

JavaScript的函数式编程的对象本质: function a() {     var x="sth";       return b(){         //do with x;      } } var c = a(); 等价于 function a() {         this.x = "dosth";         this.b = function(){               //do with this.x         } } va