前端的命名规则与常用表

大家好,我是刚开始学前端的小白: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或其他使用$的类库中获取的内容

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

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


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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容