一个改变JAVASCRIPT编程模式的函数库

做为一个老程序，有着20年的编程经验，常年从各个社区以及互联网吸取各种知识，付出甚少，常常抱着羞愧的心。其实很重要的一个问题是文笔太差，而且太忙于技术，总是闲不下来把自己的知识分享给大家。

今天，痛下决心，拿出一个产品奉献给社区，因为特别感谢CSDN，所以决定把第一篇文章奉献给CSDN社区的朋友们。

其实，我非常不喜欢JAVASCRIPT，虽然早在10多年前就开始接触JS，但是当我做项目的时候，尽量排除使用JS，因为JS有着太多的缺陷，JS很难实现类似JAVA/C#等OOP语言的封装，继承，抽象等特性，因为一开始，就不是按照OOP来设计的。但是，随着互联网的不断扩大，JS成为了前台开发的首选，我这两年也转向了手机开发，现在的公司使用Phonegap来实现主要的业务逻辑，看着一个巨大无比的JS文件，实在是疑惑，难道真的只能这样写JS的代码吗？几个月前，领导开发一个项目，不可避免的使用JS/HTML来完成前端的开发任务，程序做了一半的时候，看着大家写的代码，实在是问题多多。我从业20年了，在代码方面追求完美，我容不下那些混乱的代码。下定决心，做一套JS函数款来实现JAVASCRIPT的面向对象的编程，根据我工作中所遇到的问题，我希望能实现以下一些功能：

1. 封装，可以把需要保护的代码限制
2. 继承，可以在子类重复使用父类的代码
3. 抽象，通过抽象父类及内部的方法，实现代码的重用
4. 解决this的问题，因为this总是会根据环境发生变化
5. 解决对象间引用和动态加载的功能

在我开始做之前，我也考察了一些文章，分析了其他的OOP的程序，特别是JSOOP函数库，从中吸取一些经验，在今年的复活节假期，利用这4天的时间完成了这套函数库，并通过使用这套函数库完成了一套应用程序的框架，我先使用一些代码来说明来讲述如何实现OOP的编程方法：

通过一段真正的代码，用来说明如果实现抽象，封装，继承等方法。我来一一解释：

这个类是一个抽象类，所有从这个类继承的子类，需要定时从服务器读取数据，然后显示返回的数据。但是，如果从服务器读取数据发生错误以后，就停止读取，并在widget内显示相应的错误信息，允许手动启动再次开始定时读取数据。

(function() {
  var controller = function() {
    var self = arguments[0] || this;
    var _super = ExtendClass(this, JsLibrary.classForName(Const.BaseController), self);
 
    var timer = null;

    this.getInterval = function() {
      return 5; //default interval is 5 minutes
    } 

    this.initializeData = function(param) {
      startTimer();
    };

    this.deattach = function() {
      self.stopTimer();
      _super.deattach();
    }

    this.refresh = function() {
      internalLoadData();
      startTimer();
    }

    var stopTimer = function() {
      if (timer != null) {
        if (forex.DEBUG) {
          console.log("Stop the timer.");
        }
        clearInterval(timer);
        timer = null;
      }
    }

    var internalLoadData = function() {
      self.showIndicator("Reload data......");
      var callback = new ContextCallback(self, function(code, result) {
        self.hideIndicator();
        self.onDataUpdated(result);
      }, function(code,result) {
        stopTimer();
        self.showError(code, result);
      });
      self.loadData(callback);
    }

    var startTimer = function() {
      if (timer == null) {
        if (forex.DEBUG) {
          console.log("Create a timer to refresh data.");
        }
        var interval = self.getInterval() * 60 * 1000;
        timer = window.setInterval(internalLoadData, interval);
      } else if (forex.DEBUG) {
        console.log("Timer has been started.");
      } 
    };

    this.loadData = function(callback) {
      //抽象方法，在子类实现读取数据
    };

    this.onDataUpdated = function(result) {
      //抽象方法，在子类实现试图的更新
    };
  };

  JsLibrary.import([Const.BaseController], function() {
      console.log("Create SiderController");
      JsLibrary.register(Const.SiderController, controller);
    }, function(error) {
      throw error;
    }); 
})();

getInterval方法，返回读取的时间间隔，允许子类覆盖，返回子类读取时间的特定间隔。

deattach方法，继承父类并调用父类里面的方法，并且停止定时器的工作。

refresh方法，手工从新激活timer来读取数据

stopTimer，停止读取数据

internalLoadData，调用从服务器读取数据的方法

startTimer 如果timer不存在，启动timer

loadData 抽象方法，在子类实现读取数据

onDataUpdated 抽象方法，在子类实现试图的更新

在子类中，我们就不用重复完成启动timer，停止timer等操作，通过共用代码来减少错误。

源代码已经提交到GitHub上，采用MIT协议，允许分发。相关的文档还在制作中，尽量在这个周末完成。作为中国人，将首先完成中文版的教程。

我将继续完善这个产品，将JS的OOP做到完美。

另外，还在完成一个MVC的框架，是基于这个OOP的概念的。这个框架已经应用于一个产品，在未来几周，我会完善这个框架，然后奉献给社区。

初次发博，居然忘记了最重要的事情，Github的链接，

https://github.com/henryfeng/easyjs

把里面WebContent下面的目录拷贝到你apache服务器上，就可以测试了，具体的测试方法我会在教程里面写下来。

作者：冯辉利

邮件：huili.f@gmail.com

转发请标明源作者