首页 > 代码库 > 项目命名规范（二）

项目命名规范（二）

2024-09-26 02:22:38   203人阅读

项目命名规范

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端和移动端，简单的对他们分个类：

  • 移动广告(mobile-advertisement)

  • 移动社交(mobile-social)

  • 移动电子商务(mobile-bussiness)

  • 手机游戏(mobile-game)

  • 手机电视(mobile-tv)

  • 移动电子阅读(mobile-reading)

  • 手机搜索(mobile-search)

  • 移动支付(mobile-pay)

  • 手机内容共享(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  3 var superman = { 4  5  class: ‘alien‘ 6  7 }; 8  9 // bad10 11 var superman = {12 13  klass: ‘alien‘14 15 };16 17 // good18 19 var superman = {20 21  type: ‘alien‘22 23 };

 

4)函数用驼峰形式（动词+名词）

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

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

// badfunction user(options) { this.name = options.name;}
var bad = new user({ name: ‘nope‘});// goodfunction User(options) { this.name = options.name;}
var good = new User({ name: ‘yup‘});

 

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

// badthis.__firstName__ = ‘Panda‘;this.firstName_ = ‘Panda‘;this._firstName = ‘Panda‘;// goodthis.firstName = ‘Panda‘;

7)前缀jQuery对象变量与$

// badvar sidebar = $(‘.sidebar‘);// goodvar $sidebar = $(‘.sidebar‘);// bad$(‘ul‘, ‘.sidebar‘).hide();// badfunction setSidebar() { $(‘.sidebar‘).hide(); // ...stuff... $(‘.sidebar‘).css({   ‘background-color‘: ‘pink‘ });}// goodfunction setSidebar() { var $sidebar = $(‘.sidebar‘); $sidebar.hide(); // ...stuff... $sidebar.css({   ‘background-color‘: ‘pink‘ });}// bad$(‘.sidebar‘).find(‘ul‘).hide();// good$(‘.sidebar ul‘).hide();// good$(‘.sidebar > ul‘).hide();// good$sidebar.find(‘ul‘).hide();

5.css命名

公共的common.css
其实和common差不多base.css
动画animation.css
皮肤skin.css
文字font.css
主题themes.css
打印样式print.css
颜色color.css

6.图片命名

　　1)第一部分是图片的逻辑归属分类 
　　2)第二部分是图片的表现内容 
　　3)第三部分是图片的内容的类型（有些图片还会有第四部分，表示图片表现的状态。） 
　　4)tabbar_home_icon, navigationbar_showtime_icon@2x.png，tabbar_categories_icon

 

原文链接：https://segmentfault.com/a/1190000008777858#articleHeader0

项目命名规范（二）


联系
我们