《重学前端》学习笔记（一）

概述

该笔记主要针对时下热门课程winner老师的《重学前端》所得的一些总结。

前端发展史

静态=》动态

1994年可以看做前端历史的起点，这一年10月13日网景推出了第一版Navigator；这一年，Tim Berners-Lee创建了W3C；这一年，Tim的基友发布了CSS。
1995年网景推出了JavaScript，实现了客户端的计算任务（如表单验证）；
1996年微软推出了iframe标签，实现了异步的局部加载；
1999年W3C发布第四代HTML标准；

后端=》前端

2006年，XMLHttpRequest被W3C正式纳入标准，John Resig发布了jQuery。
谷歌v8引擎问世；
2009年AngularJS诞生；
2011年React和Ember诞生；
2014年，第五代HTML标准发布，Vue.js诞生；

前端=》全端

2009年Ryan Dahl发布了node；
Native App =》Web APP,小程序诞生。

列一份前端知识架构图

HTML 和 CSS

image

JavaScript

image

浏览器的实现原理和 API

image

前端工程实践

image

html标签语意化

页面内容结构化
无CSS样子时也容易阅读，便于阅读维护和理解
便于浏览器、搜索引擎解析。利于爬虫标记、利于SEO读屏软件等。

html语义化标签包括 body, article, nav, aside, section, header, footer, hgroup, 还有 h1-h6 address等。
示例代码

<html>
    <body>
        <article>
            <header>
                <h1>h1 - WEB 语义化</h1>
            </header>
            <nav>
                <ul>
                    <li>nav1 - HTML语义化</li>
                    <li>nav2 - CSS语义化</li>
                </ul>
            </nav>
            <section>
                <hgroup>
                    <h1>这是一个主标题</h1>
                    <h2>这是一个副标题</h2>
                </hgroup>
            </section>
            <section>
                <article>
                    这是一篇文章
                </article>
            </section>
            <time datetime="2018-03-23" pubdate>time - 2018年03月23日</time>
            <footer>
                <address></address>
            </footer>
        </article>
    </body>
</html>

Javascript类型

JavaScript 语言规定了 7 种语言类型

Undefined
Null

Q:为什么有的编程规范要求用 void 0 代替 undefined

A:undefined是js原始类型值之一，也是全局对象window的属性，在部分低级别的浏览器中可以被修改，在局部作用域中也可以被修改。

惯常用法： <a href="javascript:void(0)">xxxx</a>

Undefined跟null有一定的表意差别，null表示定义了但是为空,undefined表示变量未被赋值

Boolean
String

JavaScript中的字符串是永远无法变更的

Number

Q:console.log( 0.1 + 0.2 == 0.3)；// false

A：浮点数两边的精度问题导致左右两边的结果并不是完全相等，
可通过console.log( 0.1 + 0.2 - 0.3 <= Number.EPSILON)来比较

Symbol

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

Object

在 JavaScript 中，对象的定义是“属性的集合”。属性分为数据属性和访问器属性，二者都是 key-value 结构，key 可以是字符串或者 Symbol 类型。

类型转换

image

StringToNumber

多数情况下，Number 是比 parseInt 和 parseFloat 更好的选择。

NumberToString(用处较少)

装箱转换

每一种基本类型 Number、String、Boolean、Symbol 在对象中都有对应的类，所谓装箱转换，正是把基本类型转换为对应的对象，它是类型转换中一种相当重要的种类。

Symbol装箱

var symbolObject = Object(Symbol("a"));

console.log(typeof symbolObject); //object
console.log(symbolObject instanceof Symbol); //true
console.log(symbolObject.constructor == Symbol); //true

每一类装箱对象皆有私有的 Class 属性，这些属性可以用 Object.prototype.toString 获取：

var symbolObject = Object(Symbol("a"));
console.log(Object.prototype.toString.call(symbolObject)); //[object Symbol],Object.prototype.toString 是可以准确识别对象对应的基本类型的方法

拆箱转换（用处较少）

最后编辑于：2019.02.28 18:47:03