前端应该知道的基本知识

时间 2019-12-10

标签前端应该知道基本知识繁體版

原文原文链接

前端时间在部门内进行分享，准备素材时偶然发现下面的一个现象，由于和当时分享的主题无关，就先记下来了，过后从新审视，并把一些思考记录以下：html

1、问题

HTML：前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM-插入子节点</title>
</head>
<body>
<h1>第0个标题</h1>
<div id="app"></div>

<script>
    //写法1：分步调用
    var h1 = document.createElement('h1');
    var text = document.createTextNode('第1个标题');
    h1.appendChild(text); //！！！
    document.getElementById('app').appendChild(h1);

    //写法2：链式调用
    document.getElementById('app').appendChild(document.createElement('h1').appendChild(document.createTextNode('第2个标题')));
</script>
</body>
</html>

结果：node

渲染后的HTML结构编程

为何？？？api

2、缘由

写法1中浏览器

var text = document.createTextNode('第1个标题');

text是Text类型，而appendChild()方法的返回值类型取决于入参的类型，即传入什么类型的参数，此函数的执行结果就是什么类型，下面代码执行后前端框架

h1.appendChild(text);

返回值的仍然是Text类型，由于text是Text类型，因此写法2的链式写法（也不知道当时为啥想来这么一招）服务器

document.getElementById('app').appendChild(document.createElement('h1').appendChild(document.createTextNode('第2个标题')));

至关于app

document.getElementById('app').appendChild(new Text('第2个标题'));

因此第2个标题是文本节点，而不是h1元素。框架

3、引伸

最初发现此问题，百思不解，又苦于谷歌时不知道如何描述，后来在一个学习群中获得了解答，不过也被鄙视了一下下。

痛定思痛，反思本身为什会在这个问题上迷失，最终得出的结论：对于底层DOM的api不熟。

在我开始接触前端时，jQuery和各类前端框架早已大行其道，它们将繁琐的底层DOM操做封装的尽善尽美，让咱们在开发的时候爽到飞。固然也让咱们对DOM底层也生疏起来，甚至对于有些半路出家的前端而言根本不是生疏，由于历来没有熟悉过。这是一种很是危险的现象。试想，如今若是让咱们抛弃全部库和框架去实现一个组件，咱们是否可以依然游刃有余呢？我是没有信心的。

全部咱们不熟悉或者没有掌握的知识皆可称之为"知识盲区"，有知识盲区并不可怕，针对知识盲区去学习便可。

我感受对本身职业的技能要求有一个全面的认识，有一个俯视视角才是最重要的。只有这样，咱们才会准确知道本身的知识盲区所处何处，以及发现更多的知识盲区。

如下是我结合本次内容，对前端技能树的一个梳理：

1.前端技能树

其中我始终坚信JavaScript才是前端人员的核心竞争力，它决定了一个前端人员在前端领域能走多远和能达到的高度。

JavaScript是一门编程语言，与之紧密相关的三个领域：BOM、DOM、ECMAScript。

BOM（Browser Object Model，浏览器对象模型），将浏览器抽象成对象，进而能够操做浏览器。
DOM（Document Object Model，文档对象模型），将网页抽象成对象，进而能够操做网页。
ECMAScript（European Computer Manufacturers Association，欧洲计算机制造商协会），JavaScript的标准，JavaScript是它的实现。咱们对JavaScript语法的学习其实就是对此标准的学习，好比咱们成天说的ES6。

2.BOM

BOM提供了独立于内容而与浏览器窗口进行交互的对象，因为BOM主要用于管理窗口与窗口之间的通信，所以其核心对象是window。

BOM由一系列相关的对象构成，而且每一个对象都提供了不少方法与属性，这些对象的实例又都存在于window对象中。咱们平时最经常使用到的包括location、history、document，navigtor和screen不多用，了解便可。

JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM缺少标准，它最初是Netscape浏览器标准的一部分。

3.DOM

在DOM中，全部事物都是节点。DOM将HTML文档表达为树结构，DOM是被视为HTML的节点树。

节点对应的对象是Node，其余的具体节点对象全都是继承自Node对象。

DOM 定义了访问和操做HTML文档的标准方法。换言之，DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

如下为不一样类型节点对象提供的经常使用属性和方法：

（1）Node

属性
- atrributes
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibiling
- nodeType
- nodeName
方法
- appendChild()
- insertBefore()

（2）Document

属性
- body
方法
- 建立
  - createElement()
  - createAttribute()
  - createTextNode()
  - createComment()
- 遍历
  - getElementById()
  - getElementByTagName()
  - getElementByClassName()

（3）Element

方法
- 遍历
  - getElementByTagName()
  - getElementByClassName()
- 操做
  - getAttribute()
  - setAttribute()

（4）Attr

属性
- name
- value

（5）Text

4.JavaScript与Node.js的关系

（1）JavaScript是一门编程语言，Node.js是JavaScript的运行环境

（2）JavaScript目前主要有两种运行环境：

客户端：浏览器
服务器端：Node.js

（3）任何一种运行环境都要有解释JavaScript的能力，此能力由JavaScript引擎提供，最著名的当属V8引擎，Chrome浏览器和Node.js都是集成了V8引擎

（4）目前常见框架与二者的关系：

Angular、React、Vue是用JavaScript写的前端框架，编译后能够直接在浏览器中运行
Express、Koa是用JavaScript写的服务器端框架，能够直接在Node.js中运行
Webpack、Gulp、Grunt等是运行在Node.js中的构建框架

因此，若是之后再有人问你：用Node.js写过什么东西？直接鄙视他！