小方分享 javascript 松耦合开发之新途径

By Paul Lan, Senior user experience engineer, TIBCO CDC
本文版权属于小方（xiaofang.me, TIBCO CDC  高级用户体验工程师），转发请注明出处。

Loosely couple mechanism of Javascipt

在ajax程序开发中，很多时候，我们并不能确定某个 Dom 条件是否已经ready。而且，在团队开发中，我们也不容易让每个队员之间都能保持良好的沟通合作——这是费时费力又让人尴尬的事。
While developing program with heavily AJAX, it’s a pretty common thing that we need to execute something on some DOM which may be not ready.  And we agree that it’s pretty time consuming on communication of API definition between javascript component.

于是，我们考虑采用 Publish/Subscribe 的方式来进行松耦合开发。
So, someone tried to utilize Publish/Subscribe to implement loosely couple development.

可是，即便如此，Publish/Subscribe 也有局限性：
But, P/B is not almighty

1. 团队成员需要事先商量 P/S 参数格式，而且之后变动的概率也大，沟通成本高
   Team members need to negotiate so much on the parameters/returns. And, it always happens, that things are changed all the time.
2. 要让两个组件实现松耦合，他们之间必须彼此协商并改动代码
   To loosely couple between two component, they need to “invade” each other to do all the trick.

// this code is developed under jQuery
  /*
   * execute a function conditionally and loose coupledly
   *
   * @param Function condition to check whether to execute the main function (second @param)
   * @param Function main function to execute
   * @param time interval (gap)
   *
   * @return void
   */
.doOnce = function(conditionFunc, mainFunc, gap) {
            var gap = arguments[2];
            if (!gap) {
              gap = 200;
            }
            var i = 0;
            var x = setInterval(function() {
              // time out, if check more than 100 times,
              // dom still can't be found, then escape to save system resource
              if (i == 100) {
                clearInterval(x);
              }
              var conditionReturn =.isFunction(conditionFunc) && conditionFunc();
              if (conditionReturn) {
                setTimeout(function(){
                  window.console && console.log('.doOnce executed at ' +.now());
                  mainFunc();
                }, gap)
                clearInterval(x);
              }
              i++;
            }, 500);
          },

正如上面的注释所说：
As commented:

• 第一个参数是条件函数，是用来判断是否执行主函数（也就是第二个参数）
  the first parameter is a conditional checking function, which is a prerequisite for execute the main fucntion (the second parameter)
• 第二个参数就是要执行的主函数
  the second parameter is the main function to be executed
• 第三个参数是当条件函数判断成功时，要延时多长时间来执行主函数。默认是200毫秒
  the third parameter is a time delay to execute main function even the  conditional checking function is passed.

如此，我们就可以在不需要“侵入”其他组件的前提下，在页面执行我们想执行的，但又需要依赖于其他组件执行结果的函数。
See, we don’t need to “invade” any other component to execute functions under this kind of loosely couple mechanism.

需要提到的一点就是，这个函数采用循环执行条件函数的方式来决定是否执行主函数，默认每500毫秒检查一次，所以你的检查函数不应当太复杂，否则你应当延长检查的次数。
One thing need to be mentioned: the conditional checking function is executed periodly, default 500 millisecond/time. So, if your conditional checking function is too resource consuming, it’s better for you to extend the time interval.

另外，当检查了100次之后，条件函数仍然不返回真，那么此函数将会被从内存中释放，防止使用过多的系统资源。
Besides, the maximum tries is 100. If the conditional checking function never returns true among this period, the doOnce function will be cleared to preventing resource occupying. 

还有，这个函数并不是用来取代 Publish/Subscribe 的，而只是一个补充。
Last, this function is NOT developed to substitute   Publish/Subscribe, it’s just a simple approach, somehow.