美文网首页前端综合专辑
如何摆脱项目命名困难的尴尬局面

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

作者: 寒剑飘零 | 来源:发表于2017-04-13 22:29 被阅读24次

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

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

    相关文章

      网友评论

        本文标题:如何摆脱项目命名困难的尴尬局面

        本文链接:https://www.haomeiwen.com/subject/gjuiattx.html