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

Rocko 发布于2019-08-29 12:17 / 1736人阅读

摘要：如何高效的命名你的项目。在做一个项目的时候，我们往往遭遇命名问题的困惑，当看到一些非专业人的代码，看到他们凌乱的码法，有时候真的苦不堪言。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。当命名的构造函数和类使用。

如何高效的命名你的项目。

在做一个项目的时候，我们往往遭遇命名问题的困惑，当看到一些非专业人的代码，看到他们凌乱的码法，有时候真的苦不堪言。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。所以有必要写一篇关于常见命名的方式。以下是通过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.用可读的同义词代替保留词。

// bad
var superman = {
  class: "alien"
};

// bad
var superman = {
  klass: "alien"
};

// good
var superman = {
  type: "alien"
};

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

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

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

// bad
function user(options) {
  this.name = options.name;
}

var bad = new user({
  name: "nope"
});

// good
function User(options) {
  this.name = options.name;
}

var good = new User({
  name: "yup"
});

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

// bad
this.__firstName__ = "Panda";
this.firstName_ = "Panda";
this._firstName = "Panda";

// good
this.firstName = "Panda";

6.前缀jQuery对象变量与$。

// bad
var sidebar = $(".sidebar");

// good
var $sidebar = $(".sidebar");

// bad
$("ul", ".sidebar").hide();

// bad
function setSidebar() {
  $(".sidebar").hide();

  // ...stuff...

  $(".sidebar").css({
    "background-color": "pink"
  });
}

// good
function 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

7.分享demo

1.饿了么部分组织构架

2.腾讯omi

es5的语法规范

私有云服务器托管开创新局面困难 webrtc的命名空间公司域名的命名规则

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111798.html

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

摘要：如何高效的命名你的项目。在做一个项目的时候，我们往往遭遇命名问题的困惑，当看到一些非专业人的代码，看到他们凌乱的码法，有时候真的苦不堪言。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。当命名的构造函数和类使用。如何高效的命名你的项目。在做一个项目的时候，我们往往遭遇命名问题的困惑，当看到一些非专业人的代码，看到他们凌乱的码法，有时候真的苦不堪言。深刻知道一...

justCoding 2019-08-05 10:57 评论0 收藏0
如何摆脱项目命名困难的尴尬局面

摘要：如何高效的命名你的项目。在做一个项目的时候，我们往往遭遇命名问题的困惑，当看到一些非专业人的代码，看到他们凌乱的码法，有时候真的苦不堪言。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。当命名的构造函数和类使用。如何高效的命名你的项目。在做一个项目的时候，我们往往遭遇命名问题的困惑，当看到一些非专业人的代码，看到他们凌乱的码法，有时候真的苦不堪言。深刻知道一...

zhangxiangliang 2019-08-20 15:15 评论0 收藏0
如何摆脱项目命名困难的尴尬局面

摘要：如何高效的命名你的项目。在做一个项目的时候，我们往往遭遇命名问题的困惑，当看到一些非专业人的代码，看到他们凌乱的码法，有时候真的苦不堪言。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。当命名的构造函数和类使用。如何高效的命名你的项目。在做一个项目的时候，我们往往遭遇命名问题的困惑，当看到一些非专业人的代码，看到他们凌乱的码法，有时候真的苦不堪言。深刻知道一...

airborne007 2019-08-01 16:32 评论0 收藏0
你不知道的h5

摘要：目前，常用的模块规范主要有两种和。拦截全局请求一直接引入脚本拦截需要的回调或函数。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。基于 Three.js 的超快的 3D 开发框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 应用 3D 开发框架。它为普通的 Three.js 任务提供封装、使搭建环境、...

li21 2019-08-05 12:32 评论0 收藏0
你不知道的h5

摘要：目前，常用的模块规范主要有两种和。拦截全局请求一直接引入脚本拦截需要的回调或函数。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。基于 Three.js 的超快的 3D 开发框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 应用 3D 开发框架。它为普通的 Three.js 任务提供封装、使搭建环境、...

IntMain 2019-08-21 17:57 评论0 收藏0