发表于: 2017-06-25 22:11:00
1 997
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
了解AngularJS应用的最佳实践和风格指南。 这些最佳实践来自于:
- AngularJS项目源码
- 本人阅读过的源码和文章
- 本人的实践经历
明天计划的事情:(一定要写非常细致的内容)
优化代码结构,遵守项目代码风格
遇到的问题:(遇到什么困难,怎么解决的)
收获:(通过今天的学习,学到了什么知识)
目录结构
由于一个大型的AngularJS应用有较多组成部分,所以最好通过分层的目录结构来组织。 有两个主流的组织方式:
- 按照类型优先,业务功能其次的组织方式
- 按照业务功能优先,类型其次的组织方式
- 当目录里有多个单词时, 使用 lisp-case 语法:
- 在创建指令时,合适的做法是将相关的文件放到同一目录下 (如:模板文件, CSS/SASS 文件, JavaScript文件)。如果你在整个项目周期都选择这种组织方式,
那么,上述的两种目录结构均能适用。
- 组件的单元测试应与组件放置在同一目录下下。在这种方式下,当改变组件时,更加容易找到对应的测试。同时,单元测试也充当了文档和示例。
app.js
文件包含路由定义、配置和启动说明(如果需要的话)。- 每一个 JavaScript 文件应该仅包含 一个组件 。文件名应该以组件名命名。
- 使用 Angular 项目模板,如 Yeoman, ng-boilerplate.
组件命名的约定可以在每个组件中看到。
标记
保持标签的简洁并把AngularJS的标签放在标准HTML属性后面。这样提高了代码可读性。标准HTML属性和AngularJS的属性没有混到一起,提高了代码的可维护性。
命名约定
下表展示了各个Angular元素的命名约定
元素 | 命名风格 | 实例 | 用途 |
---|---|---|---|
Modules | lowerCamelCase | angularApp | |
Controllers | Functionality + 'Ctrl' | AdminCtrl | |
Directives | lowerCamelCase | userInfo | |
Filters | lowerCamelCase | userFilter | |
Services | UpperCamelCase | User | constructor |
Factories | lowerCamelCase | dataFactory | others |
评论