前端的命名规则与常用表

大家好,我是刚开始学前端的小白:will-black,今天我开始第一篇文章记录。

做一个想做前端的人我尝试过自学,其实像html与CSS这些语言逻辑都不难,但并不知道从何入手,就像手里拿着屠龙刀不知道如何去打怪兽,只能天天用它切菜。

随着报了一个培训班,我已经了解了如何去使用哪些div、section、header、main、footer……这些标签的使用场景也清晰了很多,也梳理了外链式css的使用流程,目前来说在没有js的情况下可以很有思路的完成一个作品。

我相信很多自学者都能完成这样的事情,但是如果这样就安安心心的去自学js、Ajax、vue总会觉得少一点什么。尤其是在我们写一个网页时,需要用到class类名的时候,我们脑子里就会出来box1、box2、title、info、banner……等有限的词汇,在嵌套div的时候时不时加一个left、right让我们自己觉得这种命名方式很不专业,很不通用。

当然,我们可以跳过这些在以后的慢慢编程路上去一点点改,本质上不会影响我们对网站编写的认知,但如果你有一点点强迫症,或是多次被命名的事情打断编程思路不妨看一看我下面整理的一些我认为比较有帮助的文件。


常见的前端单词

这是我从一个一同培训,在大学专业也是计算机的一位同学所记的笔记中抄录出来的,总共分为三类名词

页面结构

容器    container    页头    header     内容    content/container    页面主体    main     页尾    footer   

导航    nav             侧栏    sidebar    栏目    column        页面外围控制整体布局宽度    wrapper

左中右    left/center/center

导航

导航    nav     主导航    mainNav    顶导航    topNav    子导航    subNav     边导航    sideBar

左导航     leftSideBar       右导航    rightSideBar     菜单    menu    子菜单    subMenu    

标题    title    摘要    summary

功能

标志    logo    广告    banner    登录    login    登录条    loginBar    注册    regsiter     搜索    search

功能区    shop    标题    title    加入    joinus    状态    status    按钮    btn    滚动    scroll        

标签页    tab    文章列表    list    标识信息    msg    当前的    current    小技巧    tips    图标    icon    

注释    note    指南    guild    服务    service    热点    hot    新闻    news     下载    download    

投票    vote    合作伙伴    partner    友情链接    link    版权    copyright


        关于命名我只抄了这么多名词,那英语不错的同学会发现这些就是普通的英语单词,所以本身来讲命名并不难,我们在制作网页的时候给这些类名或ID名起对意思就可以了,在职场中,我相信技术人员更希望同事用相同的命名进行编码,这样看别人的代码就会清晰易懂。

        除了以上的常用单词以外,我们会发现上面单词会有一些大写字母,比如topNav。这是由top与nav两个单词构成的,意思时顶部导航。在抄原名的时候,笔记中时小写的,即topnav。但今天我学习了JavaScript的变量命名方法,便改写成这种形式。

        变量是可以作为一个名字的代号,我们可以给很多东西起名字,比方说数学中的x代表水平方向,x代表水平方向,x=0代表是在画面水平方向的正中间,这里的x,就是人们给水平方向起的名字。x的变化代表水平位置的变化。

        那么如果编程中,我起名字都用x的话,同事在看到代码的时候很难理解这个x代表什么,需要阅读你的代码去猜测x的含义。为了减少这种不必要的麻烦,程序员在写名字的时候都会用有含义的单词进行变量命名。比如我们需要一个变量来代表张三写的这个列表,文章列表的英文单词是the article lists,在编写时,我们就可以简写成list,而不是用x。

        如果说不同列表的功能不一样,为了区别不同的列表,我们要给张三的列表加一个特殊的地方来区分。这个时候我们可以看一下列表的内容,我们发现张三的列表记录的是班级里男生的名字。我们就可以在原有list的前面增加一个boy。来代表张三的列表——boylist。

        意思是搞对了,但是不一定每个人都能看出这是两个单词组合成起来的,突然看到boylist的人可能会觉得这是一个单词,这样他就不认识了。为了告诉阅读者这是两个单词,我们有一下几种办法:

1、驼峰法

        把第二个单词的首字母进行大写:boyList

2、下划线方法

        在两个单词中间加上下划线:boy_list

        


以上是我们常用的命名逻辑,我也没有学习的太过深入,希望以上的内容对你有帮助。

下面是命名知识的一些拓展。


$在名字前面,通常代表这个名字内容来JQ或其他使用$的类库中获取的内容

_在名字前面,通常代表这个变量是个全局变量

在名字的后面增加一个数字,是一种基于数字区分相似名称的变量


在命名时,我们的命名只能出现$、_、驼峰命名。并且数字不能开头,也不能用关键字保留字进行命名。

好了,今天的分享就到这里了,我们下次见

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容