技能提高

TIP

整理杂七杂八的词汇

字数:19157

状态管理

TIP

仅仅懂得一个Vuex就是状态管理,这当然不行,最起码要多懂几个

这里不会做过多描述和详解,只是列举出来让大家知道,如果想要仔细学习,请参考本站其他文章

重点推荐阅读资料

Flux

应该是 Flux 的一个比较官方”的实现,显得中规中矩,实现了 Flux 架构文档里的基本概念

Reflux

Reflux 是在 Flux 的基础上编写的一个 Flux 实现

官方描述:

一个简单的单向数据流架构库,灵感来自ReactJS Flux

Redux

JavaScript应用程序的可预测状态容器

Relay

用于构建数据驱动的React应用程序的JavaScript框架

注意:Relay是一个JavaScript框架,用于构建由GraphQL支持的数据驱动的React应用程序,意味着它的使用需要GraphQL支持

  • 关键词:
    • React
    • Facebook
  • 参考资料:

Vuex

Vue开发者最常见最官方的一个状态管理工具了

MobX

前身是 Mobservable,实际上 MobX 相当于是 Mobservable 的 2.0 版本

Immutable

JavaScript的不可变集合,

  • 关键字:
    • Facebook
  • 参考资料:

基础UMD实现

/**
 * 匿名函数自调用
 */
(function(root,factory){

    if(typeof define === 'function' && define.amd) {
        // AMD环境
        define(factory)
    }
    else if(typeof exports === 'object'){
        // Nodejs CommandJs之类的
        module.exports = factory()
    }
    else {
        // 浏览器全局变量(root 即 window)
        // 对外调用dk
        root.factory = factory()
    }
}(this,(function(){
    'use strict';
    function AMixin(e){ }
    function BMixin(e){ }
    function CMixin(e){ }
    function DMixin(e){ }
    // 组合
    function fnMixin(e){
        AMixin(e);
        BMixin(e);
        CMixin(e);
        DMixin(e);
    }
    // 对外导出的对象
    var factory = {}
    // 合并
    fnMixin(factory)
    factory.VERSION = "1.0.0"
    factory.NAME = "XXX"
    return factory;
})));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

CI/CD/自动化

CI

  • 持续集成(Continuous Integration,CI)
  • 代码合并,构建,部署,测试都在一起,不断地执行这个过程,并对结果反馈
  • 每次代码集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误

CD

  • 持续部署(Continuous Deployment, CD): 部署到测试环境、预生产环境、生成环境
  • 持续部署(Continuous Delivery, CD): 将最终产品发布到生成环境、给用户使用

涉及软件

gitlab

  • 用于代码版本管理,并通过其提供的 webhook 功能,触发 jenkins job 的运行

jenkins

  • 用来执行项目中 单元测试,编译打包相关 npm 命令,并发送反馈邮件,执行远程部署脚本

nodejs

  • 用于提供单元测试,编译打包功能的 npm 命令

参考资料

自动化编译与部署

自动化部署测试环境

  • 通过搭建gitlab服务器从而在gitlab上管理项目代码
  • 在gitlab上分别建立master,release/test分支
  • 每次开发前需要从master分支上拉取新的开发分支feature
  • 开发完后提交开发分支并将其合并到测试分支release/test上
  • 合并操作通过webhook触发jenkins上已写好的webpack编译脚本
  • 从而达到自动编译并部署到测试环境

自动化部署线上环境

  • 我们先从master分支上拉取新的发布分支release/prod
  • 然后将开发分支feature合并到发布分支release/prod上
  • 合并操作同发布测试一样会触发自动编译与部署

Web语义化

不得不提的Web标准

什么是Web标准

  • Web标准是由一系列的标准组合而成
  • 其核心思想就是将网页的结构(Structure)、样式(表现:Presentation)和行为(Behavior)分离开来
  • 百度百科Web标准

Web标准描述

  • Web标准可以分为三大类:
    • 结构部分
      • XML标准
      • XHTML标准
    • 样式部分
      • CSS标准
    • 行为部分
      • DOM标准
      • ECMAScript标准

什么是Web语义化

  • 学术界将web语义化称为Web3.0的核心

  • 目标是:提高计算机和人对于web代码的可读性

  • 简单来说:Web语义化是指使用恰当语义的html标签、class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容

为什么要做Web语义化(优点)

  • 便于团队开发和维护
    • 语义化更具可读性
    • 在团队中大家都遵循同一个标准,可以减少差异化,提高开发效率和质量
  • 有利于SEO
    • Web语义化和搜索引擎建立良好沟通
    • 有助于爬虫抓取更多的有效信息
    • 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
  • 清晰的页面结构
    • 判断标准:去掉或样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性
  • 支持更多的设备
    • 屏幕阅读器会完全根据你的标记来“读”你的网页
    • 更好的支持浏览器的阅读模式等
    • 便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页

TIP

Web语义化不仅仅是针对于机器而言,虽然这个是最重要的标准,但是Web语义化在实际开发过程中对于我们开发人员是很有帮助的,所以很多公司都在积极突进Web语义化

HTML语义化

HTML标签语义其实就是各种标签的语义化,而不是一味的采用 DIV + CSS 的形式去做,我们下面列举一些常见标签的语义化应用

HTML语义化注意事项

  • 尽可能少的使用无语义的标签div和span
  • 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利
  • 不要使用纯样式标签,如:b、font、u等,改用css设置
  • 需要强调的文本,可以包含在strong或em标签中,strong默认样式是加粗(不要用b),em是斜体(不要用i)
  • 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td
  • 表单域要用fieldset标签包起来,并用legend标签说明表单的用途
  • 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来

标题h1-h6和hgroup元素

  • 之前:一篇文章应该只有一个总标题即h1,然后根据文章的具体内容,会有若干个h2及嵌套的h3
  • hgroup元素代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合
  • 现在:
    • 如果只需要一个h1-h6标签就不用hgroup
    • 如果有连续多个h1-h6标签就用hgroup
    • 如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签

HTML5结构化标签

main标签

  • 页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能

TIP

以下内容来源:标点符博客

文本内容标签

使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构,而这对于 accessibility 和 SEO 很重要

标签名 英文全拼 中文翻译
<p> paragraph 段落
<blockquote> block quotation 块级引用
<hr> horizontal rule 水平分割线
<ul> unordered list 无序列表
<ol> ordered list 有序列表
<li> list item 列表项目
<dl> definition list 定义列表
<dt> definition term 定义术语
<dd> definition description 定义描述
<div> devision 分区
<figure> figure 独立单元
<figcaption> figure caption 单元名称
<main> main 主要内容
<pre> preformatted 预格式

内联文本语义

使用 HTML 内联文本语义(Inline text semantics)定义语句,结构,可以是一个词,一段,或任意风格的文字。

标签名 英文全拼 中文翻译
<q> quotation 引用
<cite> citation 引自
<code> code 代码
<a> abchor
<br> break 换行
<span> span 范围
<b> bold 粗体
<strong> strong 加重
<i> italic 斜体
<em> emphasized 加重
<u> underlined 下划线
<s> strikethrough 删除线
<mark> marked 标记
<sub> subscripted 上标
<sup> superscripted 下标
<abbr> abbreviation 缩写
<dfn> definition 定义

编辑标识

这些元素能标示出某个文本被更改过的部分。

标签名 英文全拼 中文翻译
<del> delete 删除
<ins> insert 插入

理解上容易产生误用的标签:

blockquote、q和cite的区别

  • blockquote:引用长文本,包含换行。
  • q:引用短文本,不包含换行。
  • cite:注明引用出处

参考资料:http://html5doctor.com/blockquote-q-cite/

figure和figcaption标签的作用

figure用于对元素进行组合,行程单元,figcaption对组合内容进行标识,如设定单元名称,具体应用场景

  • 文章中的附加图片,添加图片及图片名称描述
  • 文章中的代码示例,添加代码示例和代码示例的名称

参考资料:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure

main标签的作用

main标签主要是用来标识出文档<body>或应用的主体部分。主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的,不包含任何在一系列文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框等。

pre与code标签之间的区别和联系

  • <code>标签, 用于表示计算机源代码。code标签内的文本将用等宽字体显示出来。
  • <pre>标签用来定义预格式化的文本,被包围在pre标签中的文本通常会保留空格和换行符, 而文本也会呈现出等宽字体。同样,pre标签的一个常见的应用便是用来保存计算机中的源代码文本。

通过定义我们可以知道code标签和pre标签之间的关系,两者的共同点是应用上类似,都主要应用于浏览器显示计算机中的源代码。但是两者之间还是有很大不同的,code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码,pre标签则没有这项功能,但是pre标签可以保留文本中的空格和换行符,保留文本中的空格和换行符是计算机源代码显示所必须的样式。基于这样的特性如果是单行代码,则使用<code>标签即可,如果是多行代码,则可以使用<pre>内再嵌套<code>的方式。

<b>、<strong>、<i>、<em>的区别

<b>、<i> 是视觉要素(presentationl elements),分别表示无意义的加粗,无意义的斜体,仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」,此两个标签在HTML4.01中并不被推荐使用。

<em>、<strong>是表达要素(phrase elements)。<em> (emphasized text)表示一般的强调文本,而 <strong> (strong emphasized text)表示比< em > 语义更强的的强调文本。

在新的HTML5工作草案中:<em>和<strong>仍旧是表达要素(phrase elements)。但这时的<strong>表示html页面上的强调(emphasized text),<em> 表示句子中的强调(即强调语义)。

<s>与<del>、<u>与<ins>的区别

  • <s>元素 使用删除线来渲染文本。使用<s>元素来表示不再相关,或者不再准确的事情。但是当表示文档编辑时,不提倡使用<s>,提倡使用<del>和<ins>元素。
  • <del>表示已经从文档中删除的文本范围。此元素通常是(但不必)呈现删除线的文本。
  • <u> 元素使文本在其内容的基线下的一行呈现下划线。<u> 在 HTML 4 和 XHTML 1 中废弃,但是在 HTML 5 中使用其它语义引入。如果你想要使用非语义的方式,给文本添加下划线,你应该使用 <span> 元素,或者其它语义适当的元素,并且使用 CSS text-decoration 属性和 underline 值为其排版。
  • <ins>元素定义已经被插入文档中的文本。此元素通常是(但不必)呈现下划线的文本。

<mark>的使用场景是什么?

<mark> 标签代表突出显示的文字。举个例子,它可以用来显示搜索引擎搜索后关键词。

<dfn>和<abbr>标签

<dfn> 元素标记了被定义的术语;术语定义应当在 <p>, <section>或定义列表 (通常是<dt>, <dd> 对)中给出。被定义术语的值由下列规则确定:

  • 如果 <dfn> 元素有一个 title 属性,那么该术语的值就是该属性的值。
  • 否则,如果它仅包含一个 <abbr> 元素,该元素拥有 title 属性,那么该术语的值就是该属性的值。
  • 否则,<dfn> 元素的文本内容就是该术语的值。

abbr标签用于标记缩略语,其title属性则表示该缩略语相应的全称。标准规定,在HTML文档中所有的abbr标签都是独立的,也即如果文档中存在两个文本内容一致的abbr标签(标记的缩略语相同),则一个abbr标签的title属性值不会对另一个abbr标签产生任何影响 — 这一点很好理解,因为在现实生活中,同样的缩略语可以表达多个不同的意思。

参考资料:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn

内容分区

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素,来为页面内容创建明确的大纲,以便区分各个章节的内容。

元素 描述
<address> <address>可以让作者为它最近的<article>或者<body>祖先元素提供联系信息。在后一种情况下,它应用于整个文档。
<article> <article>表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。
<aside> <aside>表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条,例如来自词汇表的定义。也可能有其他类型的信息,例如相关的广告、笔者的传记、web 应用程序、个人资料信息,或在博客上的相关链接。
<footer> <footer>表示最近一个章节内容或者根节点(sectioning root)元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<header> <header>表示一组引导性的帮助,可能包含标题元素,也可以包含其他元素,像logo、分节头部、搜索表单等。
<h1>~<h6> 标题(Heading)元素拥有六个不同的级别,<h1>是最高级的,而<h6>则是最低的级别。一个标题元素能简要描述该节的主题。标题信息可以由用户代理可以使用,例如,自动构造某个文档中的内容表(就像本文档右边浮动栏一样)。
<hgroup> <hgroup>代表一个段的标题。它规定了在文档轮廓里(the outline of the document )的单一标题是它所属的隐式或显式部分的标题。
<nav> <nav>描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表。
<section> <section>表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading)。一般通过是否包含一个标题 (<h1>-<h6>) 作为子节点 来辨识每一个<section>。

hgroup的作用是什么?

<hgroup> 标签被用来对标题元素进行分组。当标题有多个层级(副标题)时,<hgroup> 元素被用来对一系列 <h1> – <h6> 元素进行分组。应用场景,比如一篇文章有主标题和副标题,则可以将主标题和副标题分在一个组。

hgroup使用注意:

  • 如果只需要一个h1-h6标签就不用hgroup
  • 如果有连续多个h1-h6标签就用hgroup
  • 如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签

图片和多媒体

HTML 支持各种多媒体资源,例如图像,音频和视频。

元素 描述
<img> <img>代表文档中的一个图像。
<audio> <audio>用于在文档中表示音频内容。
<video> <video>用于在HTML或者XHTML文档中嵌入视频内容。
<track> <track>被当作媒体元素<audio>和<video>的子元素来使用。它允许指定计时字幕(或者基于事件的数据),例如自动处理字幕。
<area> <area>在图片上定义一个热点区域
<map> <map>属性与<area>属性一起使用来定义一个图像映射(一个可点击的链接区域).

表格内容

这里的元素用于创建和处理表格数据。元素在一个 元素中可以出现一个或者更多。

标签名 英文全拼 中文翻译
<table> table 表格
<caption> caption 表格标题
<tr> table row 表格行
<th> table heading 表头
<td> table data 表值
<thead> table header 表头
<tbody> table body 表内容
<tfoot> table footer 表尾

表单

标签名 英文全拼 中文翻译
<form> form 表单
<fieldset> field set 分类
<legend> legend 分类标题
<label> label 标签
<select> select 选项
<option> option 选项分组
<optgroup> option group 选项清单
<datalist> data list 选项数据
<input> input 输入框
<output> output 输出内容
<textarea> text area 文本域
<button> button 提交按钮

<optgroup>和<datalist>如何使用?

<optgroup> 会创建包含在一个 <select> 元素中的一组选项。label为选项组的名字,案例:

如果需要对选项内容分级,则使用<optgroup>,否则可使用<datalist>。

output有什么如何使用?

<output> 标签表示计算或用户操作的结果。案例:

总结:

  • 尽可能少的使用无语义的标签div和span。
  • 不要使用纯样式标签,如:b、u等,改用css设置。

更多参考:

CSS语义化

  • CSS语义就是class和ID命名的语义
  • class属性作为HTML与CSS衔接的纽带,其本意是用来描述元素内容的
  • 指用易于理解的名称对html标签附加的class或id命名
  • 如果说HTML语义化标签是给机器看的,那么CSS命名的语义化就是给人看的
  • 良好的CSS命名方式减少沟通调试成本,易于理解
  • CSS命名首先要满足W3C的命名规范和团队的命名规范,其次是高效和可重用性

常见css命名

  • 头:header
  • 内容:content .container
  • 尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围布局:wrapper
  • 左右中:left right center
  • 登录条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:friendlink
  • 页脚:footer
  • 版权:copyright
  • 滚动:scroll
  • 内容:content
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 指南:guild
  • 服务:service
  • 注册:regsiter
  • 状态:status
  • 投票:vote
  • 合作伙伴:partner

知识拓展——ARIA

  • ARIA即Accessible Rich Internet Application,中文译为无障碍富互联网应用

  • 可以为一些有功能障碍(如听力,视力)的人群通过屏幕阅读器例如voiceover等,提供无障碍访问动态、可交互Web内容。

  • 应用于HTML的ARIA有两部分组成:

    • role
      • role标识了一个元素的作用
    • aria-*
      • 描述了与之有关的事物特征及其状态

使用微格式标记数据

  • 语义网里面描述数据的方式之一是RDF
  • RDF基于XML,而HTML中的XHTML是一种XML
  • 通过HTML的attribute储存语义网数据叫RDFa(Resource Description Framework – in – attributes),这就把HTML/XHTML和语义网技术拉到了一起

TIP

扩展部分这里不再赘述,大家可以根据兴趣去研究,主要还是HTML语义化和CSS语义化部分