使用 Backbone JS 样板和代码导航答案

【问题标题】：using Backbone JS boilerplate & code navigation使用 Backbone JS 样板和代码导航
【发布时间】：2012-02-21 12:45:32
【问题描述】：

一个新手问题：我已经从 https://github.com/david0178418/BackboneJS-AMD-Boilerplate 下载了使用 require.js 的主干样板，我想知道开发期间的代码导航。

这是我的问题：假设我有 2 个视图，一个像这样扩展另一个视图：

查看 1：

define([
    'underscoreLoader',
    'backboneLoader',
    'text!templates/main.html'
],
    function (_, Backbone, MainTemplate) {
        "use strict";

        return Backbone.View.extend({
            template:_.template(MainTemplate),

            initialize:function () {
                this.render();
            },

            log:function(msg){
                console.log(msg);
            },

            render:function () {
                this.$el.append(this.template({}));
                return this;
            }
        });
    }
);

查看 2：

define([
    'underscoreLoader',
    'backboneLoader',
    'text!templates/other.html',
    'views/main-view'
],
    function (_, Backbone, MainTemplate,MainView) {
        "use strict";

        // how would you navigate to MainView (main-view.js) 

        return MainView.extend({
            template:_.template(MainTemplate),

            initialize:function () {
                this.render();
            },

            render:function () {
                this.log("my message");
                this.$el.append(this.template({}));
                return this;
            }
        });
    }
);

现在，当我开发（我使用 IntelliJ）时，我想在扩展视图中单击 MainView 并导航到代码，而无需浏览项目树。

使用这个样板可以吗？有更好的方法或更好的样板吗？

【问题讨论】：

_使用这个样板是否可行？_ 我没有使用 IntelliJ，但这听起来不太可能，因为 RequireJS 将您的应用程序解耦，并且“MainView”变量可以是静态分析点的任何内容观点。并且仅在运行时 this 指向实际的 MainView。 _有更好的方法或更好的样板吗？_ 如果你想要 IntelliJ，就不要使用 RequireJS。
感谢您的回复，由于代码导航不限于某个IDE，而且是开发阶段需要的功能，所以我很想找到一个解决方案，意思是：保持文件分开并且仍然有对代码的引用。
Javascript，至少对我来说，在开发工具方面是一个完整的范式转变。我只使用记事本++。没有自动完成，没有自动错误突出显示，没有重构助手和其他我在使用 C# 等强类型语言时习惯的好东西。在我看来，你越早意识到这一点越好:)。
不完全正确，有很多好的 JS IDE，例如 NetBeans ，IntelliJ。它们确实具有自动错误突出显示、重构等功能。但这不是我的问题。我相信可以使用不同的方法来享受这两个世界。
请改写你的问题。代码无关紧要，主干无关紧要。您所需要的只是：如何将 IntelliJ 的 X 东西与 require.js 一起使用

标签： javascript backbone.js requirejs boilerplate

【解决方案1】：

我真的希望 Netbeans 的导航器向我展示所有方法：

var New_Controller = Backbone.View.extend({
    el : null, ...
}

但我似乎无法让它工作。 Google 想出了一些针对 @lends 的东西，但我什至无法让 Backbone.js 加载到代码提示缓存中。

我最终安装了 WebStorm（我在所有 egghead.io 教程中都看到了 IDE）来让导航器列出所有方法和属性。

仅供参考，Aptana Studio 和 Zend Studio 与 Netbeans 完全不同。而用于 JavaScript Web 开发人员的 Eclipse IDE 只能部分工作（在现实生活中不切实际）；它使整个层次结构变平。

【讨论】：

【解决方案2】：

我发现这对我来说很好用： Backbone 对象与我的自定义对象一起包装，这使我可以轻松导航代码、扩展对象和保存多个文件。

方法如下：

对象 1

function ItemModel() {
    ItemModel.model = (
        Backbone.Model.extend({
            initialize:function () {

            },
            defaults:{
                name:"item name"
            },
            log:function(){
                console.log("inherited method");
            }
        })
        );
    return new ItemModel.model();
}

对象 2

function ItemModel2() {
    ItemModel2.model = (
        ItemModel.model.extend({
            initialize:function () {

            },
            defaults:{
                name:"item name2"
            }
        })
        );
    return new ItemModel2.model();
}

在我的应用中：

var App = {
    item:new ItemModel(),
    item2:new ItemModel2()
};

【讨论】：