代码之家 › 专栏 › 技术社区 › master00

如何根据需要删除主干视图。js?

iife requirejs backbone.js javascript

master00 · 技术社区 · 7 年前

我有一个使用require的主干应用程序。js。

先前的 我的主干路由器看起来像这样。

APP.views = {};

APP.Router = Backbone.Router.extend({

routes: {

    '(/)' : 'index',
    'about(/)' : 'about'

},

initialize : function(){
    Backbone.history.start({ pushState: true });
},

index: function() {
    this.showView( new APP.Views.IndexView() );
},

about: function() {
    this.showView( new APP.Views.AboutView() );
},

showView : function( view ) {

        if ( APP.views.current ) {
            APP.views.current.remove();
        }
        APP.views.current = view;
        $( '#page' ).html( view.render().$el );

}
});

我会将“当前”视图保存在一个全局变量中,并在每次更改路线和生活良好时删除现有视图。

但是,我如何在需要的情况下实现这一点。js?

我的requirejs路由器目前看起来如下所示,但我不确定如何删除现有视图。尽管如此,我还没有注意到任何典型的“僵尸视图”症状,我觉得我应该删除现有的视图。

define( function( require ){

    // DEPS
    var $           = require('jquery'),
        _           = require('underscore'),
        Backbone    = require('backbone');

    // ROUTER
    var Router = Backbone.Router.extend({

        routes: {

            '(/)' : 'index',
            'about(/)' : 'about'

        },
        initialize : function(){

            Backbone.history.start({ pushState: true });

        },
        index: function(){

            this.showPage('index');

        },
        about: function() {

            this.showPage('about');

        },
        showPage : function( pageName ) {

            var view = 'views/pages/' + pageName;

            require( [ view ] , function( Page ) {

                var page = new Page();

                $('#page').html( page.render().el );

            });

        }

    });

    return Router ;

});

1 回复 | 直到 7 年前

Emile Bergeron Dhaval Rajpara 7 年前

甚至在使用require之前。js,不需要全局。

只需将当前视图放入路由器属性。

initialize : function() {
    this.$page = $('#page');
    Backbone.history.start({ pushState: true });
},
showView : function(view) {
    if (this.current) this.current.remove();
    this.$page.html((this.current = view).render().el);
}

然后,同样的事情也适用于异步需求情况:

showPage : function(pageName) {
    if (this.current) this.current.remove();

    var view = 'views/pages/' + pageName,
        self = this;
    require([view], function(Page) {
        self.$page.html((self.current = new Page()).render().el);
    });
}

但即使这样,我也不想要求每个视图都具有异步 require 是值得的。你只是通过大量的额外请求来减缓你的应用程序。

只需定义每个模块的依赖项。

define([
    'jquery',
    'backbone',
    'views/index', 
    'views/about'
], function($, Backbone, IndexView, AboutView){
    // ...
});

在开发过程中,每次刷新时都会看到大量的请求,但在准备生产时,可以使用 require optimizer .

还请注意,您可以将模块作用域设置为全局,它只是在模块作用域的根(IIFE或require.js)处声明的局部变量。

(function() {
    var currentView;

    var Router = Backbone.Router.extend({
        // ...snip...
        showView: function(view) {
            if (currentView) currentView.remove();
            this.$page.html((currentView = view).render().el);
        }
    });
})();