前端开发需要了解的东西

琐碎点

可读性高的代码如何理解

表层上的改进：在命名方法（变量名，方法名），变量声明，代码格式，注释等方面的改进。
控制流和逻辑的改进：在控制流，逻辑表达式上让代码变得更容易理解。使用符合人类自然语言的表达习惯
结构上的改进：善于抽取逻辑，借助自然语言的描述来改善代码。

浏览器内核(渲染引擎)

IE/360/搜狗浏览器: Trident
Chrome/Safari/Opera: WebKit(KHTML 的一个开源的分支) (虽然我们称 WebKit 为浏览器内核，但不太适合直接称渲染引擎，因为 WebKit 本身主要是由两个引擎构成的，一个正是渲染引擎“WebCore”，另一个则是 javascript 解释引擎“JSCore”，它们均是从 KDE 的渲染引擎 KHTML 及 javascript 解释引擎 KJS 衍生而来。) (在 13 年发布的 Chrome28.0.1469.0 版本开始，Chrome 放弃 Chromium 引擎转而使用最新的 Blink 引擎（基于 WebKit2——苹果公司于 2010 年推出的新的 WebKit 引擎），Blink 对比上一代的引擎精简了代码、改善了 DOM 框架，也提升了安全性。) (为了减少研发成本，Opera 在 2013 年 2 月宣布放弃 Presto，转而跟随 Chrome 使用 WebKit 分支的 Chromium 引擎作为自家浏览器核心引擎)
Firefox/SeaMonkey: Gecko

HTML 语义化的理解？

用正确的标签做正确的事情。

html 语义化让页面的内容结构化，便于对浏览器、搜索引擎解析
即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

列举几条 JavaScript 的基本代码规范

不要在同一行声明多个变量
如果你不知道数组的长度，使用 push
请使用 ===/!== 来比较 true/false 或者数值
对字符串使用单引号 ''(因为大多时候我们的字符串。特别 html 会出现”)
使用对象字面量替代 new Array 这种形式
绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同
不要使用全局函数
总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间
Switch 语句必须带有 default 分支
使用多行注释，包括描述，指定类型以及参数值和返回值
函数不应该有时候有返回值，有时候没有返回值
语句结束一定要加分号
for 循环必须使用大括号
if 语句必须使用大括号
for-in 循环中的变量应该使用 let 关键字明确限定作用域，从而避免作用域污染
避免单个字符名，让你的变量名有描述意义
当命名对象、函数和实例时使用驼峰命名规则
给对象原型分配方法，而不是用一个新的对象覆盖原型，覆盖原型会使继承出现问题

检测浏览器版本版本有哪些方式？

功能检测、userAgent 特征检测

比如：navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"

上一页js-xlsx实现纯前端导出excel表格下一页打造高性能网站

最后更新于3年前

琐碎点

可读性高的代码如何理解

表层上的改进：在命名方法（变量名，方法名），变量声明，代码格式，注释等方面的改进。

控制流和逻辑的改进：在控制流，逻辑表达式上让代码变得更容易理解。使用符合人类自然语言的表达习惯

结构上的改进：善于抽取逻辑，借助自然语言的描述来改善代码。

浏览器内核(渲染引擎)

IE/360/搜狗浏览器: Trident

Chrome/Safari/Opera: WebKit(KHTML 的一个开源的分支) (虽然我们称 WebKit 为浏览器内核，但不太适合直接称渲染引擎，因为 WebKit 本身主要是由两个引擎构成的，一个正是渲染引擎“WebCore”，另一个则是 javascript 解释引擎“JSCore”，它们均是从 KDE 的渲染引擎 KHTML 及 javascript 解释引擎 KJS 衍生而来。) (在 13 年发布的 Chrome28.0.1469.0 版本开始，Chrome 放弃 Chromium 引擎转而使用最新的 Blink 引擎（基于 WebKit2——苹果公司于 2010 年推出的新的 WebKit 引擎），Blink 对比上一代的引擎精简了代码、改善了 DOM 框架，也提升了安全性。) (为了减少研发成本，Opera 在 2013 年 2 月宣布放弃 Presto，转而跟随 Chrome 使用 WebKit 分支的 Chromium 引擎作为自家浏览器核心引擎)

Firefox/SeaMonkey: Gecko

HTML 语义化的理解？

用正确的标签做正确的事情。

html 语义化让页面的内容结构化，便于对浏览器、搜索引擎解析

即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的

搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

列举几条 JavaScript 的基本代码规范

不要在同一行声明多个变量

如果你不知道数组的长度，使用 push

请使用 ===/!== 来比较 true/false 或者数值

对字符串使用单引号 ''(因为大多时候我们的字符串。特别 html 会出现”)

使用对象字面量替代 new Array 这种形式

绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同

不要使用全局函数

总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间

Switch 语句必须带有 default 分支

使用多行注释，包括描述，指定类型以及参数值和返回值

函数不应该有时候有返回值，有时候没有返回值

语句结束一定要加分号

for 循环必须使用大括号

if 语句必须使用大括号

for-in 循环中的变量应该使用 let 关键字明确限定作用域，从而避免作用域污染

避免单个字符名，让你的变量名有描述意义

当命名对象、函数和实例时使用驼峰命名规则

给对象原型分配方法，而不是用一个新的对象覆盖原型，覆盖原型会使继承出现问题

检测浏览器版本版本有哪些方式？

功能检测、userAgent 特征检测

比如：navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"