javascript - 继承DurandalJS中的常用函数

Question

我正在寻找一种更好的方法来处理我的 DurandalJS 应用程序中的继承，从 baseViewModel.js 到其他页面。这是我当前的应用程序结构:

• baseViewModel.js
• 主壳
  • 第 1 组外壳
    • 第 1 页
    • 第 2 页
  • 第 2 组外壳
    • 第 1 页
    • 第 2 页

所有这些页面都共享一些通用功能 (baseViewModel.js)，例如:

• isLoading:用于检查页面上是否正在加载某些内容的可观察对象
• isValid:检查表单是否有效
• 添加和删除项目的 afterAdd 和 beforeRemove 效果
• 表单的键盘快捷键
• 模板切换器功能
• 等等

目前如何运作

1. baseViewModel.js 中的所有内容都声明为 self.*，其中 self 是对 Window 对象的引用，例如:

   self.showElement = function(elem) {
     if (elem.nodeType === 1) $(elem).hide().fadeIn();
   }
   
   self.fadeRemove = function(elem) {
     if (elem.nodeType === 1) $(elem).fadeOut(500, function() { $(elem).remove(); });
   }
   

2. 我在主 shell 中只定义了 baseViewModel.js 一次，然后在整个应用程序中访问它，如下所示:

   <tbody data-bind="foreach: { data: dataArr, afterAdd: showElement, beforeRemove: fadeRemove }">
   

   或在 View 模型中:

   Page1.load = function() {
     self.isLoading(true);
     // get data
   };
   

我尝试了什么

我研究了原型(prototype)继承并设法让它发挥作用，但我不确定我是如何实现它的。我在 baseViewModel.js 中创建了一个 Base 函数，并将其作为单例返回。然后在其中一个页面中，我做了:

define(['durandal/app', 'jquery', 'knockout', 'baseViewModel'], function (app, $, ko, base) {

  var Page1 = function() {};

  Page1.prototype = base;

  return Page1;

});

在 Base 中声明的函数在 Page1 的 View 和 View 模型中工作得很好，但问题是我需要它们在与 Page1 一起加载的所有模块中工作。这包括:

• 第 1 组 shell View (有一个按钮可以激活 Base 中的功能)
• 主 shell View (根据 Base 内部可观察到的 isLoading 的值，加载条是否可见)

为了让这些工作正常，我必须定义文件并在每个 View 模型中应用相同的 *.prototype = base;。

那么有没有更好的方法来处理继承呢？如果没有，有没有办法只声明一次基础并将其应用于所有子页面？

谢谢!

Answer 1

我将原型(prototype)继承与工厂方法结合使用，到目前为止它似乎运行良好。我只想要简单的继承，所以这不是像某些继承库那样的全功能继承方法。

正如 PW 所建议的，我确实将我的基本 View 模型包装在 requireJs 模块中。

这是一个简化的代码示例，但它应该是功能性的。如果它没有意义，请告诉我，我可以详细说明。

基础 View 模型

define(function (require) {
    "use strict";

    function ViewModelBase() {

        //this is the activate function that Durandal will call
        function activate() {

            //call activate on derived vm
            if (this.onActivate) {
                return this.onActivate.apply(this, arguments);
            } else {
                return true;
            }
        }

        //validate view model and display all remaining errors
        function validate() {
            // passing 'this' so that the viewmodel instance is evaluated at the time it's needed 
            return validation.validateViewModel(this);   //this is knockout validation
        }

        //exports
        this.activate = activate;
        this.validate = validate;
    };

    //return the constructor (non-singleton)
    return ViewModelBase;
});

工厂

define(function (require) {
    "use strict";

    return {
        createViewModel: function (ctor) {
            ctor.prototype = new (require("view-model-base"))();
            ctor.prototype.constructor = ctor;
            return ctor;
        }
    };

});

派生 View 模型

define(function (require) {
    "use strict";

    var factory = require("fusion/factory");
    var HomeViewModel = factory.createViewModel(function () {
        var __viewModel = this; //use __viewModel variable to access this view model instance.

        function onActivate() {
            //add application startup logic here

            //access public functions on the base view model like this:
            __viewModel.validate();

            return true;
        }
        this.onActivate = onActivate;
    });

    //returns the constructor (non-singleton)
    return HomeViewModel;

    //to return a singleton instead, do this
    return new HomeViewModel();


}); // END :: define statement