专栏名称: SegmentFault思否
SegmentFault (www.sf.gg)开发者社区,是中国年轻开发者喜爱的极客社区,我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
程序员小灰  ·  小灰筹划6年的“仓鼠币系统”,终于上线了! ·  2 天前  
程序猿  ·  患者带着DeepSeek来看病,医学博主自嘲 ... ·  2 天前  
程序员的那些事  ·  快!快!快!DeepSeek 满血版真是快 ·  2 天前  
码农翻身  ·  中国的大模型怎么突然间就领先了? ·  昨天  
OSC开源社区  ·  Bun ... ·  2 天前  
51好读  ›  专栏  ›  SegmentFault思否

如何摆脱项目命名困难的尴尬局面

SegmentFault思否  · 公众号  · 程序员  · 2017-09-19 08:00

正文

在做一个项目的时候,我们往往遭遇命名问题的困惑,当看到一些非专业人的代码,看到他们凌乱的码法,有时候真的苦不堪言。深刻知道一个良好的命名规范的重要性,同时在项目中也会遇到一些命名的瓶颈。所以有必要写一篇关于常见命名的方式。以下是通过3年的编程经验,以及参考网上知名的开源项目总结的一点经验。希望共勉。

1.文件夹命名

1.最好用一个单词描述

常用项目命名 omi、element、master、project、test、vue、iview
二级目录 build、static、config、src、examples、base、common、issues、assert
三级目录 libs、models、plugins、skins、images、css、js

2.如果一个单词描述不了,用2个词(名词加动词)

color-pick、button-groups、date-picker、option-grounp、jquery-select、jquery-swiper

3.中间用-或者_连接为了方便归类、一目了然

node_models、async-demo、array-union、array-differ、babel-each。

2.文件命名

1.最好用一个单词描述

以下变量名可以加css、js、html,例如index.html、index.js、index.css。

常用组件命名 index、message、menu、slider(滑块)、page、progress(进度条)、tooltip(提示)、tree、upload、time、button、checkbox、dialog、cascader(三级联动)
常用文件命名 index、shopping(购物)、 share(分享)、integral(积分)、advertisement(广告)、pay(支付)、community(社区)、game、docs、bussiness

2.如果一个单词描述不了,用2个词(名词加动词)

share-to-friends,share-to-community,weex-pay,alipay-pay,user-integral, game-page,docs-page等等反正就是自我想象。

3.中间用-或者_连接为了方便归类、一目了然

在目前做的pc端和移动端,简单的对他们分个类:

  1. 移动广告(mobile-advertisement)

  2. 移动社交(mobile-social)

  3. 移动电子商务(mobile-bussiness)

  4. 手机游戏(mobile-game)

  5. 手机电视(mobile-tv)

  6. 移动电子阅读(mobile-reading)

  7. 手机搜索(mobile-search)

  8. 移动支付(mobile-pay)

  9. 手机内容共享(mobile-share)

关于以上的项目都可以用名词+需要的动词命名,达到见词知意

3.html布局命名

可以参考DIV+CSS规范命名大全集合但是我觉得写的并不是很好,很全面。因为往往比较纠结的是每一个大布局中小布局的命名。

外套 wrap #container
头部 header #head, #header,#nav,#sub-nav,#menu, #sub-menu,#branding
主要内容 main bussiness-title 、bussiness-logo、bussiness-search、bussiness-search-results
左侧 main-left #side-bar, #side-bar-a, #side-bar-b
右侧 main-right #side-bar, #side-bar-a, #side-bar-b
内容 content radio-click、radio-heightlight、radio-active、input-seach-off、input-search-on
底部 footer #service, #regsiter,#partner(合作伙伴),#joinus, #site-info

总结:

  1. 一般头部有nav、nav-event、nav-style、nav-item、nav-link。

  2. 内容:xx-title、xx-box、xx-warp、xx-item、xx-item-title、xx-item-link、xx-item-image

  3. 底部:footer-time、footer-box、footer-item、footer-item-link、footer-address。总之xx-wrap,xx-box,xx-item、xx-link、xx-title、xx-total肯定会满足你80%的需求

4.js变量命名

1.基础类型和引用数据类型

  • 基础类型

  • 字符串var s_count="",

  • 布尔类型var b_status=false,

  • 数字类型var n_total=12。

  • 引用数据类型

  • 数组var ar_bar=[],

  • 对象var o_bar={},

  • 函数var f_submit=function(){}

2.不要用关键字命名default、class、private

3.用可读的同义词代替保留词

  1. // bad

  2. var superman = {

  3.  class: 'alien'

  4. };

  5. // bad

  6. var superman = {

  7.  klass: 'alien'

  8. };

  9. // good

  10. var superman = {

  11.  type: 'alien'

  12. };

4.函数用驼峰形式(动词+名词)

login(),logout(),expandList(),getTotal(),keySearch(),submitForm(),cancel(),goMore(),searchAll>(),searchCurrent().clearContent().uploadImage().searchResult()这些都是常用事件,可以清晰知道每一项的意义。

5.当命名的构造函数和类使用PascalCase

  1. // bad

  2. function user(options) {

  3.  this.name = options.name;

  4. }

  5. var bad = new user({

  6.  name: 'nope'

  7. });

  8. // good

  9. function User(options) {

  10.  this.name = options.name;

  11. }

  12. var good = new User({

  13.  name: 'yup'

  14. });

6.不要使用尾随或前导下划线

  1. // bad

  2. this.__firstName__ = 'Panda';

  3. this.firstName_ = 'Panda';

  4. this._firstName = 'Panda';

  5. // good

  6. this.firstName = 'Panda';

7.前缀jQuery对象变量与$

  1. // bad

  2. var sidebar = $('.sidebar');

  3. // good

  4. var $sidebar = $('.sidebar');

  5. // bad

  6. $('ul', '.sidebar').hide();

  7. // bad

  8. function setSidebar() {

  9.  $('.sidebar').hide();

  10.  // ...stuff...

  11.  $('.sidebar').css({

  12.     'background-color': 'pink'

  13.  });

  14. }

  15. // good

  16. function setSidebar() {

  17.  var $sidebar = $('.sidebar');

  18.  $sidebar.hide();







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