使用Angular组件的四个技巧

正文

请到「今天看啥」查看全文

Angular 组件的命名也不例外。完美情况下，组件的命名应具备高“可读性”，把它们放到你的代码中看起来就像英语一样流畅。更重要的是，在几个月后你重读代码时，还能弄懂它实际是做什么的。而且即便你想不起来，但还可以弄懂它们之前调用了什么，这样不是很好吗？

一个常见的命名约定就是在特征后面加上类型（例如：feature.type.js）。在注册组件名称时，使用驼峰式拼写法，例如 FeatureType。这样做很简单，而且逻辑上说得过去。你也可以选择其他方法，但是注意一定要保持一致，疯狂背后也要保持某些条理。

当然，在编写组件内的脚本时，你也应当坚持同样的逻辑。所有的变量都应该易于理解且明显区别于指令，并在必要时做好注释。即便你是在创建一个个人项目，并且从未打算公诸于世，你也应该使用逻辑化的输入和输出，为你的组件定义一个良好的公共接口。

同样的，为组件定义良好的生命周期，并实现生命周期钩子（lifecycle hook）以提供合理的结构。

所有这些都需要花费更多一点的时间，而当你在构建必要但无趣的组件时可能会急于求成。也许你是一个拥有“全局观”的程序员，不想在小问题上费力。就算如此，花点时间用完整命名（和注释）编写好组件将会在后期为你节省大量的时间。如果你是团队中的一员，无论团队大小，这都尤为关键。

2. 以正确的方式使用事件

除了保持良好的命名规范和定义良好的 API 之外，确保你的组件所触发的事件也应该具有良好的命名，这样它们可以更好地与其他组件发生交互。想清楚你想要暴露出哪些东西，相比于使用双向数据绑定（稍后会讨论更多），这可能是个更好的选择。使用 $emit 或者 $broadcast，要知道，有时候你需要与你不了解的组件发生交互，而且你也没有必要了解它们。使用 $rootScope 在整个组件树中触发事件。请记住，如果另一个组件使用了相同的事件名称，可能会导致意外的 bug。

请到「今天看啥」查看全文