如何高效的为你的项目命名。在做项目的时候，我们经常会遇到命名问题的困惑。当我们看到一些非专业人士的代码，看到他们乱七八糟的编码时，有时候真的很惨。深刻体会到良好命名规范的重要性，同时在项目中也会遇到一些命名瓶颈。所以有必要写一篇关于常用命名方法的文章。下面是通过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、js2。如果一个词无法描述，就用2个词（名词加动词）color-pick,button-groups,date-picker,option-group,jquery-select,jquery-swiper3。中间使用-或_连接，方便分类清晰node_models、async-demo、array-union、array-differ、babel-each。二、文件命名1、下面的变量名最好用一个词来描述。可以添加css、js、html，比如index.html、index.js、index.css。常用组件名称index、message、menu、slider（滑块）、page、progress（进度条）、tooltip（提示）、tree、upload、time、button、checkbox、dialog、cascader（三级联动）常用文件命名索引、shopping（购物）、share（分享）、integral（积分）、advertising（广告）、pay（支付）、community（社区）、game、docs、bussiness2。如果一个词无法形容，就用2个词（名词加动词）share-to-friends,share-to-community,weex-pay,alipay-pay,user-integral,game-page,docs-page等都是反正自己想象。3、中间用-或_连接。为了分类方便，一目了然，目前PC端和移动端简单分为几类：1.移动-广告2.移动-社交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规范命名合集但是我觉得写的不是很好，很全面。因为往往比较纠结的是各个大布局中小布局的命名。Coatwrap#containerheadheader#head,#header,#nav,#sub-nav,#menu,#sub-menu,#branding主要内容mainbussiness-title,bussiness-logo,bussiness-search,bussiness-search-resultsLeftmain-left#side-bar,#side-bar-a,#side-bar-bRightmain-right#side-bar,#side-bar-a,#side-bar-bContentradio-click,radio-heightlight,收音机-active,input-seach-off,input-search-onbottomfooter#service,#regsiter,#partner(合作伙伴),#joinus,#site-info总结1.一般head有nav,nav-event,nav-风格，导航项目，导航链接。2.Content:xx-title,xx-box,xx-warp,xx-item,xx-item-title,xx-item-link,xx-item-image3.Bottom:footer-time,footer-box,footer-项目，页脚项目链接，页脚地址。总之，xx-wrap、xx-box、xx-item、xx-link、xx-title、xx-total绝对能满足你80%的需求四、js变量命名1、基本类型和引用数据类型基本类型字符串vars_count=""，布尔类型varb_status=false，数字类型varn_total=12。引用数据类型arrayvarar_bar=[],objectvaro_bar={},functionvarf_submit=function(){}2.不要使用关键字命名default,class,private3.用易读的同义词替换保留字。//badvarsuperman={class:'alien'};//badvarsuperman={klass:'alien'};//goodvarsuperman={type:'alien'};4.函数使用驼峰式大小写（动词+名词）login(),logout(),expandList(),getTotal(),keySearch(),submitForm(),cancel(),goMore(),searchAll>(),searchCurrent().clearContent().uploadImage().searchResult()这些都是普通的事件，可以清楚的知道每一项的含义。5.命名构造函数和类时使用PascalCase。//badfunctionuser(options){this.name=options.name;}varbad=newuser({name:'nope'});//goodfunctionUser(options){this.name=options.name;}vargood=newUser({name:'yup'});6.不要使用尾随或前导下划线。//badthis.__firstName__='熊猫';this.firstName_='熊猫';this._firstName='熊猫';//goodthis.firstName='熊猫';6.给jQuery对象变量加上$前缀。//badvarsidebar=$('.sidebar');//goodvar$sidebar=$('.sidebar');//bad$('ul','.sidebar').hide();//badfunctionsetSidebar(){$('.sidebar').隐藏();//...stuff...$('.sidebar').css({'background-color':'pink'});}//goodfunctionsetSidebar(){var$sidebar=$('.sidebar');$sidebar.hide();//...东西...$sidebar.css({'background-color':'pink'});}//bad$('.sidebar').find('ul').hide();//good$('.sidebarul').hide();//good$('.sidebar>ul').hide();//good$sidebar.find('ul').hide();5.css命名为publiccommon.css其实类似于commonbase.cssanimationanimation.cssskinskin.csstextfont.cssthemethemes.cssprintstyleprint.csscolorcolor.css6。图片命名1.第一部分是图片的逻辑属性分类2.第二部分是图片的表现内容3.第三部分是图片的内容类型（有的图片还会有第四部分，就是表示图片的状态。）4.tabbar_home_icon,navigationbar_showtime_icon@2x.png,tabbar_categories_icon7。分享演示1。饿了么部分组织结构2．腾讯omies5语法规范
