使用控制器 - 角JS中的VM(视图模型)变量符号

Question

我正在执行Angular JS教程。我不知道为什么使用了这种符号。谁能解释这里发生的事情？

controller.js文件中的代码：

var vm = this;
vm.openSideBar = openSideBar; // Did not understand this line
function openSideBar() {
    $mdSidenav('left').open();
};

Answer 1

您发布的代码纯粹是样式的分开并进一步指定文件。

好处

这种方法的好处更为明显，因为控制器中可约束功能的数量增加：

• 易于阅读（重要的是）。由于控制器的目的是支持视图并为其提供绑定，因此比如何重要控制器的工作方式。您可以在打开文件时立即看到控制器可以为视图做些什么。

• 易于查找（详细信息）。在文件顶部具有可约束功能就像文件的目录页面一样。如果将光标放在它们上，大多数IDE都会突出显示匹配变量，这有助于在文件下进一步找到实现详细信息。

• 鼓励单个责任。您的控制器应为视图提供绑定，只有一个视图。如果您开始建立许多无关的可绑定功能，您可以在文件的顶部看到这些功能，这些功能有不同的目的，您可能会尝试在一个控制器中做太多的功能。

• 鼓励命名函数。这对于调试特别有用，因为这意味着您在应用程序中的匿名功能较少，这又使开发人员工具中的呼叫堆栈更加容易。

进一步阅读

查看约翰·帕帕（John Papa）的Angular 1样式指南，该指南已获得Angular团队的批准。您可以在控制器部分的顶部读取该方法背后的所有思想（尽管也可以应用于工厂/服务/指令）。

Answer 2

opensidebar被添加到视图模型中。可以从视图中运行此功能，例如<someElement ng-click="$ctrl.openSideBar()"></someElement>

Answer 3

VM模型或执行方式很旧...在ES6出现之前。

如今，我建议您学习ES6，看看Todd Motto的Angularjs样式指南https://github.com/toddmotto/angularjs-styleguide。

，但这里有一个答案：

// OLD WAY
function MyAppController() {
    var vm = this;
    vm.colors = ['red', 'blue', 'green'];
    vm.getBlue() {
        return vm.colors[1];
    }
    vm.handleClickEvent(e) {
        // this keyword is now the dom element, not your controller
        // this is why the VM pattern came to life.
        this.classList.add(vm.getBlue());
    }
}
// NEW WAY
class MyAppController {
    $onInit() {
        this.colors = ['red', 'blue', 'green'];
    }
    getBlue() {
        return this.colors[1];
    }
    handleClickEvent(e) {
        // Here this keyword is still your controller, NOT the dom
        // element (provided you used angular's ng-click directive
        const elem = e.target;
        elem.classList.add(this.getBlue);
    }
}

使用ES6，很少需要对this的引用，因为您可以使用箭头功能。您还应该熟悉bind()，call()和apply()的方法，以控制要应用于功能的上下文。