使用Javascript / jQuery AJAX的ASP.NET MVC 3單頁面應用程序：內存和分離的DOM問題

Question

我最近構建了一個帶有JS / jQuery UI的單頁ASP.NET MVC 3（在視圖的HTML之上），Javascript工作的一般概念如下。 我遇到了GC沒有正確釋放內存的問題，並且在Detached DOM中留下了大量元素（最大格式24,000，15-20k和1k，具體取決於加載/卸載的格式）（可在Chrome的開發人員工具Heap Profiler中查看） ）。

 var MainApp = function () {
    var meBase = this;
    this.activeObject = undefined;

    this.someFunc = function (val1, val2, etc) {
        //Some operation here
    }
    this.GetView(x, y, z)
    {
        if (meBase.activeObject != null) {
            meBase.BustActive(x, y, z);
        } else {
            if (condition) {
                //Load static html via $.get
            } else {
                switch (activeObjectSelector) {
                    case CASEHERE:
                        self.activeObject = new SomeObject();
                        self.activeObject.BeginInit();
                        break;
                    case .....
                }
            }
        }
    }
    this.BustActive = function (x, y, z) {
        if (meBase.activeObject.Destroy()) {
            meBase.activeObject = null;
            meBase.GetView(x, y, z);
        }
    }
}
var SomeObject = function () {
    var meBase = this;
    this.Bindings = [];
    this.Container = "#somecontainer";
    //Some Properties

    this.Unbind = function () {
        $("#Somecontainer .bound").each(function () {
            if ($(this)["click"] && $.isFunction($(this)["click"])) {
                $(this).unbind('click');
            }
            if ($(this)["blur"] && $.isFunction($(this)["blur"])) {
                $(this).unbind('blur');
            } if ($(this)["change"] && $.isFunction($(this)["change"])) {
                $(this).unbind('change');
            }
            if ($(this)["mouseenter"] && $.isFunction($(this)["mouseenter"])) {
                $(this).unbind('mouseenter');
            } if ($(this)["mouseleave"] && $.isFunction($(this)["mouseleave"])) {
                $(this).unbind('mouseleave');
            }
        });

        //iterate through meBase.Bindings to remove any 'special' bindings such as 'live/die'
    }
    this.MapEvents = function () {
        //For Example

        $("#Somecontainer #element").click(meBase.SomeAction).addClass('bound');

        // create object with removal function for 'special' bindings such as 'live/die'
        // and push it into meBase.Bindings;
    }
    this.InitUI = function () {
        //Setup tabs, datepickers, etc
    }
    this.Destroy = function () {
        meBase.Unbind();

        //remove object fields and methods
        delete meBase.someProp;

        $(meBase.Container).empty();
        delete meBase.BeginInit;
        delete meBase.InitUI;
        delete meBase.MapEvents;
        delete meBase.SomeAction;
        delete meBase;
        return true;
    }
    this.SomeAction = function () {
        //Do something productive..hopefully
    }
    this.ProcessView = function (data) {
        $("#MainContainer").fadeOut(150, "swing", function () {
            $(this).empty().append(data);
        });
    }
    this.LoadView = function () {
        $.ajax({
            url: '/somewhere/something',
            type: 'GET',
            success: meBase.ProccessView, error: SomeGlobalObject.LogAjaxError
        });
    }
    this.BeginInit = function () {
        //Load pages via ajax
        meBase.LoadView();
        meBase.InitUI();
        meBase.MapEvents();
        return true;
    }

}

我嘗試使用javascript進行迭代以刪除.Destroy（）函數中的事件和元素，並且它大大減少了Detached DOM中剩余的元素數量，而不是$（容器）.empty（）或$（容器）.remove（）。 但是我的記憶永遠不會正常收集，它會在每次加載/卸載期間不斷上升。 隨機間隔有下降，但不是我預期的數量。 這么多元素保持掛起是否正常，或者我的代碼運行方式是否存在一些基本問題？

感謝您抽時間閱讀！

第一篇文章，請溫柔......

Answer 1

我最近也在.Net MVC3中構建了一些單頁應用程序。 我懷疑你的問題正在發生，因為微軟試圖讓開發人員遠離JS和C＃，在你的頁面上使用Javascript和Jquery非常糟糕。

我能給你的最好的建議是，你需要拋棄微軟的所有瑕疵，並構建應用程序的html / js部分，就好像它完全獨立於平台一樣。 這意味着你將主要使用MVC中的M，並且你只需要足夠的C來管理你的女士如果View是全部HTML和Javascript，生活會變得更加簡單。 以下是如何入門：

• 刪除所有預先打包的服務器端代碼，包括Razor或ASPX頁面。
• 切換到靜態HTML文件，靜態JS文件
• （可選）使用Require.js來管理你的JS依賴項（仔細閱讀文檔，一開始看起來很奇怪，但它非常強大）
• （可選）使用Spine.js為您的JS代碼提供一些結構
• （可選）將Handlebars.js用於客戶端模板引擎

Require和Spine很快成為我最喜歡的構建單頁應用程序的工具。 它們為您提供了一些非常強大且靈活的工具，可幫助您管理您將在任何單頁應用程序中編寫的增加的Javascript代碼量。

一旦你的客戶端代碼與微軟破壞Javascript的嘗試完全脫節 ，你就可以專注於你的數據，這應該在MVC3中使用基於JSON的Rest服務。 你可以在這里和這里得到幫助。

祝好運！