重構大型JavaScript方法的建議

在這種情況下，該網站是隻能在IE6上查看的內部網站。目標是讓它在IE9中可見。有幾個IE瀏覽器專有腳本編寫，例如使用xml data islands，以點符號訪問文檔元素，即resulttable.style.display = "block";等等。上述內容對於手頭的問題可能有點多餘，但它可以提供一些見解。重構大型JavaScript方法的建議

在整個網站中，有大量的JavaScript方法非常大，很難調試。給你一個想法，有100個以上的JS文件，每個平均大約1000行。

以下是省略了所有名稱/邏輯的實際方法。所有的返回值都是依賴於以前的邏輯：

function someMethod() { 
if (stuff) { 
    // operations 
    if (stuff) { 
     // operations 
     for (loop) { 
      // operations 
      if (stuff) { 
       // operations 
       if (stuff) { 
        // operations 
        for (loop) { 
         if (stuff) { 
          // operations 
         } 
        } 
        // operations 
       } 
       else { 
        // operations 
        if (stuff) { 
         // operations 
        } else { 
         // operations 
        } 
       } 
       // operations 
      } 
     } 

     // operations 

     if (stuff) { 
      // operations 
      if (stuff) { 
       // operations 
       if (stuff) { 
        // operations 
        for (stuff) { 
         // operations 
         if (stuff) { 
          // operations 
         } else { 
          // operations 
         } 
        } 
        if (stuff) { 
         // operations 
         if (stuff) { 
          // operations 
          for (loop) { 
           // operations 
          } 
          // operations 
          for (loop) { 
           if (stuff) { 
           // operations 
           } 
          } 
         } 
         // operations 
         if (stuff) { 
          // operations 
         } 
         return something; 
        } 
        else { 
         // operations 
         return something; 
        } 
       } 
       else { 
        // operations 
        if (stuff) { 
         // operations 
         return something; 
        } 
        else { 
         // operations 
         if (stuff) { 
          // operations 
         } 
         // operations 
         return something; 
        } 
       } 
      } 
     } 
     return something; 
    } 
    else { 
     // operations 
     return something; 
    } 
} 
return something; 
}

當與傳統的網站打交道，你有什麼建議打破JavaScript方法爲更易管理的片段？

免責聲明：我的JS技能是事物的平均水平。我們現在想避開JQuery。

來源

2012-07-18 Metro Smurf

jQuery將做這些地段IFS爲你的（我假設你說的這些IFS彼此相關的瀏覽器特性），所以我認爲應該很好學習它，並將其用於重構代碼。 – davidbuzatto 2012-07-18 03:27:56

我建議你使用一個工具。看到我的[問題]（http://stackoverflow.com/questions/11364605/procedure-or-tool-to-refactor-section-of-javascript-to-function）和提供的答案 – OnesimusUnbound 2012-07-18 03:29:07

@davidbuzatto - 這些都是大邏輯流程報表;與瀏覽器的特性無關。也許這個帖子沒有傳達，但是當前的網站是爲IE6設計的，沒有其他瀏覽器。 – 2012-07-18 05:00:55

您可以簡單地將someMethod（）分解爲可以重複邏輯的單個函數。

還沒有尋找到你有特定的邏輯，並找到最適合的邏輯樣板的一般模式，可以幫助有

模塊模式如

var MyModule = function() { 
    function privateFn() { 
    } 
    function publicFn() { 
    } 
    function doWork(args) { 
    } 

    return { 
     publicFn: publicFn, 
     doWork: doWork, 
    }; 
}(); 
MyModule.doWork({ param1: 'test', param2: true});

原型繼承可以類似於c＃/ Java中的類使用，例如，

var MyClass = function(args) { 
    this.prop1 = 'test' 
    this.prop2 = args.param1; 
}; 
MyClass.prototype.doWork = function(args) { 
}; 
var myInstance = new MyClass({ param1: 'test' }); 
myInstance.doWork({ param1: true });

您可以使用名稱空間來組織這些命名空間，例如，

if (window.MyNamespace === undefined) window.MyNamespace = {}; 
MyNamespace.MyModule = function() { ... }; 
MyNamespace.MyClass = function() { ... }; 
MyNameSpace.MyModule.doWork();

附加模式，可以幫助可以在這裏找到http://shichuan.github.com/javascript-patterns/

來源

2012-07-18 06:00:16

這些都是很好的方法;我並不完全知道在基於類的結構中使用JS。在你的模塊模式的第一個例子中，你已經包含了'privateFn';是一種真正的私人方法，只能在「MyModule」中訪問？我不確定我看到它與「publicFn」有什麼不同。他們如何訪問不同？ – 2012-07-18 13:26:51

偉大的鏈接到js模式，順便說一句！ – 2012-07-18 13:27:07

模塊模式創建在包裝功能範圍內的功能。此方法的返回值僅包含要公開的函數，因此其他函數不能從MyModule對象中獲得。例如，請參閱http://jsfiddle.net/chrish/Wvh2H/ – 2012-07-18 23:30:13

重構大型JavaScript方法的建議

回答

相關問題