AngularJS实际项目应用——命名规范概览

发布时间：2020-12-17 09:40:07 所属栏目：安全来源：网络整理

导读：有一条好的软件设计原则叫CoC（Convention over Configuration），即惯例优于配置原则，详见：wiki 项目需要一个好的命名规范，这样可以大大降低学习成本以及查找成本，通过对文件名以适当的形式命名，可以非常快速的知道这个文件的类型，作用以及用来实现的

有一条好的软件设计原则叫CoC（Convention over Configuration），即惯例优于配置原则，详见：wiki

项目需要一个好的命名规范，这样可以大大降低学习成本以及查找成本，通过对文件名以适当的形式命名，可以非常快速的知道这个文件的类型，作用以及用来实现的功能。在本项目开发的过程中，主要参考了两个命名规范：一个是github上关于angularjs的规范，一个是google自己的angularjs规范，一般他们都叫style guide：

https://github.com/mgechev/angularjs-style-guide

https://google.github.io/styleguide/angularjs-google-style.html

下面具体说一下，对于angularjs项目主要有两种：1）如何命名文件名，2）如何命名angularjs各种模块，当然了还有许多更详细的方面，有兴趣的请仔细阅读上面给出的两个参考。

（一）文件名

总体原则：英文全部小写，用‘-’进行单词分割，这样比较利于人眼阅读，比如：disk-creation.html，add-disk-dialog.html。其实最好全用名词性短语起名，但是英语水平有限，用动宾短语形式也可以接受。

还有就是一个文件代表一个angularjs模块，尽量不要在一个文件里写多个模块，比如在一个文件里写多个controller，这样非常不好查找，不利于后来新人快速学习。

controller模块以“.controller”结尾，例如server.controller.js，add-disk.controller.js
service模块以“.service”结尾，例如：server.service.js
module模块以“.module”结尾，例如app.module.js，app-hardware.module.js
路由文件以“.routes”结尾，例如hardware.routes.js，这里看项目对路由是如何处理的，根据自己项目需要
directive模块以“.directive”结尾，例如menu-list.directive.js，如果一个文件里写了多个小directive，用复数（directives）形式结尾
filter模块以“.filter”结尾，同理多个filter写在一个文件的用filters结尾
压缩过的模板文件用“.templates”结尾，例如app.templates.js

上面应该覆盖了主要的angularjs各种模块，还有其它的可以根据这个原则处理。这里说一下为什么会把多个directive放在一个文件里，因为有的directive比较小，可能就5-6行代码，如果一个directive写一个文件，会造成文件数的快速增长，虽然发布的时候可以都压缩在一起，但维护起来仍然比较繁琐。所以可以折中一下，根据自己的项目安排即可。

（二）angularjs模块名

总体原则：驼峰方式命名

Controller名称以Ctrl结尾，开头单词大写，因为angularjs中的Controller是个类概念，在使用的时候会被实体化，所以遵循类的命名范式。例如ServerCtrl，ServerCreationCtrl
Service名称以Srv结尾，开头单词小写，因为angularjs中的Service是个单例概念，不需要被实例化。例如serverSrv
Directive没有做强制要求，能描述功能就可以，但其实开头应该加上项目名称简写的前缀，这样在使用的时候非常容易区别到底是自己写的还是导入第三方库的directive，例如项目叫console，应该以cs开头命名，就像angularjs内置的directive都以ng打头一样
Filter没有强制要求，可以参考上面的两个style里有啥说法
Module的名称，本项目中都以小写命名了，并且用点分割父子关系，比如hardware子模块叫app.hardware
Utils，这里所谓的Utils还是Service，就是叫习惯了，所以有些通用的功能需要封装的，就叫Utils了。比如httpUtils，domUtils。当然了文件名还是以“.service.js”结尾，如果觉得会有困扰，根据自己的需求，可以改成Srv结尾

上面大概介绍了一下本人感觉还可以的命名方式，好不好可以根据自己的项目进行调整，只要项目成员觉得易懂，容易查找就可以。至于具体的js代码怎么写，上面的两个参考style中也都有介绍，比如是用：

module.controller('DiskCreationCtrl',['$scope','$uibModalInstance',function($scope,$uibModalInstance){}])

还是用$inject形式，就仁者见仁智者见智的问题了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!