概述
该笔记主要针对时下热门课程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 是可以准确识别对象对应的基本类型的方法
网友评论