拆分knockoutjs

时间:2012-02-09 11:43:36

标签: javascript knockout.js

我的应用视图模型越来越大。如何正确地将其拆分为文件和命名空间?我是否创建了第二个名称空间对象并将视图模型作为参数传递?

var BALL = {};
BALL.roll = function(avm) { // function code };

1 个答案:

答案 0 :(得分:11)

我个人的偏好不是拆分我的applyBindings调用,而是使用单个全局命名空间分支。

我的理由是,为了使多个绑定正常工作而不是冲突,您需要非常小心,您选择的目标dom元素不会改变。不幸的是,标记有一个随着时间的推移而变化的恶习,这可能会让你以后的viewModel出现问题。

我在一个非常大的KO项目中使用的一般方法是

  1. 整个应用程序的一个全局顶级命名空间,例如myapp
  2. 将单独的功能块拆分为单独的文件。通常有自己独特的命名空间。例如`myapp.navigation'
  3. 如果某个名称空间特别大,则将其拆分为更多的子名称空间,或者如果不合适,则将相同的名称空间拆分为多个文件。
  4. 将所有文件粘贴到最后以保持性能。
  5. 我最近使用的一些命名空间代码

    var Namespace = (function() {
        var namespace, global, root;
    
        namespace = function(identifier, contents) {
            if (!identifier || identifier.length == 0) {
                throw Error("A namespace identifier must be supplied");
            }
            global = window;
    
            // create the namespace
            var parts = identifier.split(".");
            for (var i = 0; i < parts.length; i += 1) {
                if (!global[parts[i]]) {
                    global[parts[i]] = {};
                }
                if (i == 0) {
                    root = global[parts[i]];
                }
                global = global[parts[i]];
            }
    
            // assign contents and bind
            if (contents) {
                global.$root = root;
                contents.call(global);
            }
        };
    
        return namespace;
    })();
    

    所以在你的myapp.navigation文件中你会有

    Namespace("myapp.navigation", function() {
         var self = this; // your myapp.navigation object
    
         this.someFunction = function() {
         }       
    });
    

    这只是使用自调用函数传递手动构造的命名空间的简写。它为您提供了一个私有闭包,您可以在不同的js文件中使用具有相同名称空间的多个Namespace调用。

    您的applyBindings调用现在始终可以

    ko.applyBindings(myapp);
    

    希望这有帮助。