How to name your project effectively

When working on a project, we often encounter the confusion of naming problems. When we see some non-expert code and see their messy coding, sometimes it is really painful. The importance of a good naming convention is well understood, but there are also naming bottlenecks in the project. So it is necessary to write an article about common naming methods. Here are some lessons learned from 3 years of programming experience and reference to well-known open source projects on the Internet. I hope ‘

1. Name the folder

  • 1. It’s best to describe it in one word
Common project names Omi, Element, Master, Project, Test, vue, iView
The secondary directory Build, static, config, SRC, examples, base, common, issues, assert
Three directories Libs, Models, plugins, skins, images, CSS, JS
  • 2. If a word doesn’t describe it, add a noun and a verb

Color -pick, button-groups, date-picker, option-grounp, jquery-select, jquery-swiper

  • 3. Use – or _ link in the middle to facilitate classification and be clear at a glance

    Node_models, async-demo, array-union, array-differ, and babel-each.

2. Name the file

  • 1. It’s best to describe it in one word

The following variable names can be added with CSS, js, and HTML, such as index.html, index.js, and index.css.

Common Component naming Index, Message, Menu, Slider, Page, Progress, Tooltip, Tree, Upload, Time, button, checkbox, Dialog, Cascader
Common file naming Index, shopping, share, Integral, advertisement, pay, community, game, Docs, bussiness
  • 2. If a word doesn’t describe it, add a noun and a verb

Share-to-friends, Share-to-community, Weex-Pay, Alipay, User-integral, Game-Page, Docs-Page, etc.

  • 3. Use – or _ link in the middle to facilitate classification and be clear at a glance

In the current PC and mobile terminals, they are simply divided into categories:

  • 1. Mobile advertisement
  • 2. Mobile social
  • 3. Mobile-business iness
  • 4. Mobile games
  • 5. Mobile-tv
  • 6. Mobile-reading
  • 7. Mobile-search
  • 8. Mobile-pay
  • 9. Mobile-share

All the above items can be named with nouns + verbs needed to achieve the meaning of the word

3. HTML layout naming

You can refer to the DIV+CSS specification for naming the daquan collection but I don’t think it’s written very well and very comprehensive. Because often more tangled is each big layout small layout of the name.

Coat wrap #container
The head the header #head, #header, #nav, #sub-nav, #menu, #sub-menu, #branding
Main contents Bussiness -title, bussiness-logo, bussiness-search, and bussiness-search-results
On the left side of the main – left #side-bar, #side-bar-a, #side-bar-b
On the right side of the main – right #side-bar, #side-bar-a, #side-bar-b
Content of the content Radio-click, radio-heightlight, radio-active, input-seach-off, input-search-on
At the bottom of the footer Service, regsiter, partner, joinus, site-info

conclusion

  • 1. Generally, there are nav, nav-event, nav-style, nav-item and nav-link headers.
  • 2. Contents: xx-title, xx-box, XX-warp, xx-item, xx-item-title, XX-item-link, xx-item-image
  • 3. Bottom: footer-time, footer-box, footer-item, footer-item-link, footer-address. In short, XX-wrap, XX-box, XX-item, XX-link, XX-title and XX-total will definitely meet 80% of your needs

4. Name the js variable

  • 1. Base and reference data types
> * Base type > * stringvar s_count=""> * Boolean typevar b_status=false, > * Number typevar n_total=12. > * Reference data type > * arrayvarAr_bar =[], > * objectvarO_bar ={}, > * functionvar f_submit=function(){})Copy the code

  • 2. Do not use keywords such as default, class, and private

  • 3. Replace reserved words with readable synonyms.

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

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

// good
var superman = {
  type: 'alien'
};Copy the code
  • 4. Use the hump form (verb + noun)

login(),logout(),expandList(),getTotal(),keySearch(),submitForm(),cancel(),goMore(),searchAll(),searchCurrent().clearCon Tent ().uploadimage ().searchResult() these are common events, you can clearly know the meaning of each item.

Es5 syntax specification

  • 5. When named constructors and classes use 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'
})Copy the code
  • 6. Don’t use trailing or leading underscores.
// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';
// good
this.firstName = 'Panda';Copy the code
  • 6. Prefix jQuery object variables with $.
// 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();Copy the code

5. CSS

The public common.css
It’s very similar to Common base.css
animation animation.css
The skin skin.css
The text font.css
The theme themes.css
Print styles print.css
color color.css

6. Picture naming

  • 1. The first part is the logical attribution classification of pictures
  • 2. The second part is the presentation content of the picture
  • 3. The third part is the type of content of the picture (some pictures also have a fourth part, indicating the state of the picture.)
  • 4. Tabbar_home_icon, [email protected], tabbar_categories_icon
Paste_Image.png

7. Share the demo

  • 1. Partial organizational structure of Ele. me
Paste_Image.png

  • 2. Tencent omi
Paste_Image.png