其实之前已经把《你不知道的 JavaScript》上卷读完了，但是其实只是囫囵吞枣，看的很初略，没有自己的思考，再到今天其实有点忘得差不多，这次重新精读一次，记录下自己的思考。

JS 是如何处理变量声明的？

js 入门会遇见很多很神奇的点，很著名的就是变量提升

• var 变量提升

  1 2 3

  b = 3; var b; console.log(b); // 3

• 函数声明提升

  1 2 3 4 5

  hosting(); // 'function hosting' function hosting() { console.log("function hosting"); } var hosting = 0;

  在这里使用var声明的变量标志符被提升了，甚至可以在声明前调用它，函数也是同理，并且函数声明的值也被一同提升了。

上面的代码可以翻译成类似的同理代码:

• var 变量提升

  1 2 3

  var b = undefined; b = 3; console.log(b); // 3

• 函数声明提升

  1 2 3 4 5

  var hosting = function hosting() { console.log("function hosting"); }; hosting(); // 'function hosting' hosting = 0;

  了解了之后，其实我们还会冒出更多的疑问，为什么会这样？为什么这么设计？
  《你不知道的 JavaScript》正好解答了这一部分。

编译原理

在了解 JS 如何变量声明前，我们还需要一些预先的知识，了解代码是如何编译的。编译器前端大致有下面几个流程：

• 词法分析

词法分析就是将字符串分解成适合理解的词法单元，例如 23 + 10 * 2 就应该是 5 个词法单元23 + 10 * 2，词法分析有两种方式，一种是基于状态机的，另一种是基于正则的，两者是等同的。

想想已经 N 久没有写文章了，有点怠惰，之后还是尽量学了什么，就写文章记录下来；写文章的过程也是自己把知识联系起来的过程。
写这篇文章主要原因还是之前字节跳动三面，面试官一开始就要去写一个深拷贝，然而之前对这方面了解的很少很少，面试表现可以说相当差了，结果也是直接挂掉…
之后重新学习了，这里就记录下吧

怎样定义深拷贝？深拷贝到底要拷贝什么？

说起深拷贝，就得说下内存结构了，内存就是一断特殊的电路，我们通过对内存的储存结构进行编码，某个内存地址对应内存某一个储存数据的地方，最小储存单元是 8 个 bit; 我们甚至可以把最小储存单元定义为 1 个 bit，但是这通常没有必要，因为我们需要针对每一个储存单元设置清除电路，而现实使用时的数据大多都会超过 1 个 bit，为了更小的储存单元而把电路变得更复杂完全不值得。
如果我们使用的数据超过最小储存单元，我们就把连续几个内存地址一起用了，记录首个地址，记录它使用个几个内存地址，也就是它的类型，比如int, 在大多数实现上，一般是 4 个字节，也就是连续占用 4 个地址，这些我们称之为基本类型。

而如果我们要储存的数据包含多种类型，我们也可以按照这种方式，按顺序存储下来，记录首个地址，记录它使用了那些地址，通常我们还会有一些对应的函数来操作这些对应的数据，我们通常把这种结构称作为对象，相关的操作函数就被称作方法。

当数据被作为函数的参数传递时，基本类型和对象有很明显的差异

1
2
3
4
5
6
7
8
9
10
11

let number = 4;
let obj = { num: 5 };

function test(a, b) {
  a = 0;
  b.num = 0;
}

test(number, obj);
console.log(number); // 4
console.log(obj); // {num: 0}

如果值是一个基本类型，那传递给函数的是它直接的值，也就是值的拷贝；而如果是对象，我们传递的是它的储存位置，也就是地址值，或者更抽象的说法，对象的引用，通过这个引用操作到真正的对象。

不过这其中有一个类型是个特例，那就是string，在 java 中string是一个对象，有各种操作方法，然而却表现的像基本类型一样，像是一个怪胎。在知乎中有许多相关的提问

• [Java 语言中 String a=”a”;String b=”a”; 为什么 a==b 值为 true？]
• [Java 到底是值传递还是引用传递？]
• [如何理解 String 类型值的不可变？]

而在 js 中string中直接被定义为基本类型

前言

自己之前在Windows一直使用cmder作为自己的终端使用，主要就是自带颜值比git-bash这些高很多，不过在把Windows升级到1909版本，cmder不知为何无法连接到wsl了, 正好也想试试微软新出的Windows Terminal

下载安装

直接在应用商店里安装就可以了

个性化Windows Terminal

默认的Windows Terminal各个终端都是默认样式，劝退级别233。点击下拉菜单，点击设置就会打开Vscode来自己配置Windows Terminal了

添加新的终端需要在profiles属性下添加，类似下面这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
    "guid": "{156bea93-de01-48ff-bce0-860cc70a73d5}", //uuid 用于区分不同终端
    "background": "#282c34", //背景颜色
    "closeOnExit": true, 
    "colorScheme": "Chester", //配色方案
    "commandline": "\"%PROGRAMFILES%\\git\\usr\\bin\\bash.exe\" -i -l", // 终端位置
    "cursorColor": "#FFFFFF",
    "cursorShape": "bar",
    "fontFace": "Consolas",
    "fontSize": 12,
    "historySize": 9001,
    "icon": "%SystemDrive%\\Program Files\\Git\\mingw64\\share\\git\\git-for-windows.ico", 
    "name": "Bash",
    "padding": "10, 10, 10, 10",
    "snapOnInput": true,
    "startingDirectory": "%USERPROFILE%",
    "useAcrylic": true, // 是否启用毛玻璃特效
    "acrylicOpacity": 0.85 // 透明度 仅在启用毛玻璃特效后有效
}

想要终端变得好看，配色是第一步，可以去iTerm2-Color-Schemes上找一个自己喜欢的主题，复制windowsterminal同名文件的内容到schemes，比如我选择的Chester

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{
    "name": "Chester",
    "black": "#080200",
    "red": "#fa5e5b",
    "green": "#16c98d",
    "yellow": "#ffc83f",
    "blue": "#288ad6",
    "purple": "#d34590",
    "cyan": "#28ddde",
    "white": "#e7e7e7",
    "brightBlack": "#6f6b68",
    "brightRed": "#fa5e5b",
    "brightGreen": "#16c98d",
    "brightYellow": "#feef6d",
    "brightBlue": "#278ad6",
    "brightPurple": "#d34590",
    "brightCyan": "#27dede",
    "brightWhite": "#ffffff",
    "background": "#2c3643",
    "foreground": "#ffffff"
}

前言

其实之前只知道 Promise 很方便，大家也都是这么用的，generate 函数也一知半解，直到最近看了阮一峰的ES6 入门和在知乎看的一篇工业聚的文章,才了解整个的发展历程，我也推荐你去看看他们的文章。

js 异步编程模型

js 作为一门浏览器的脚本语言，出生的时候就希望它尽可能的简单，易用，即使是非专业人员也能迅速掌握，而且 js 最初的应用场景并不复杂，所以单线程的 js 就确定了下来。
虽然 js 是单线程的，但浏览器却不是，对于很多耗时过长的任务，比如发起 ajax 请求，设置定时器，会由浏览器来做，js 只需要注册回调函数，声明浏览器完成异步后需要要做什么就可以了，js 只要有异步的地方，都有回调函数。

1
2
3
4
5
6
7
8
9

let xhr = new XMLHttpRequest();

xhr.open("GET", "/cccc");
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

原始回调函数

最早的回调函数方式就是直接在参数中传递一个回调函数

1
2
3

setTimeout(() => {
  console.log("1000 delay");
}, 1000);

执行 setTimeout 后，这个计时任务会交由其它线程处理以避免阻塞 js 主线程,例如在浏览器会交由一个单独的计时线程处理；在时间超时后，浏览器会向 js 任务队列中插入新的任务，而 js 主线程在在同步任务完成后会不断检测队列中是否有新任务，并执行，此时这个回调函数也就被执行了。

回调函数的一大缺点就是在大量异步任务时，会嵌套下去，代码会逐渐横向发展，也即回调地狱。

1. 起因

最近想制作一个在散开的纸面画画的效果，纸面会按一定角度倾斜，就像下面这样↓

也就是给canvas元素加了transform: roate(-2deg)

2. 电脑端实现

在电脑端很容易实现,鼠标事件中有offsetX Y，能够获得鼠标位置相对于目标节点的位置，可以简单理解为相对于元素左上角的坐标。获得坐标后，再按坐标绘制到Canvas上，一切就OK了，不过到了移动端就有点麻烦了。

3. 移动端实现

移动端touch事件有以下几个属性

• ClientX Y 相对于视口的坐标
• pageX Y 相对于页面左上角原点的坐标
• screenX Y 相对于屏幕的坐标标
• movementX Y 相对于上一次坐标的坐标

然而就是没有offsetX Y，怎么办，自己模拟试试？

3.1 第一次模拟

1. 获得pageX Y
2. 通过offsetTop left计算元素左上角的顶点位置vertex
3. 计算相对坐标

虚拟DOM是什么？

虚拟DOM其实就是在原有DOM的基础中，在js中再做一层DOM的抽象。

虚拟DOM有什么用？

在一些需要大量更改DOM的情况下，比如更新表格内的内容，重新排序等，会引起重绘、重排、引起大量的性能消耗，虚拟DOM就是针对这个问题的一个解决方案，在更改前都是针对虚拟DOM进行操作，不对真实DOM进行更改，更改完成后使用diff算法对比DOM树，只操作需要更改的DOM节点，减小 性能开销。

虚拟DOM怎么用？

首先需要创建一个类似的虚拟DOM抽象数据结构

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

class VNode {
  constructor(tag, children, text) {
    this.tag = tag
    this.text = text
    this.children = children
  }

  render() {
    if(this.tag === '#text') {
      return document.createTextNode(this.text)
    }
    let el = document.createElement(this.tag)
    this.children.forEach(vChild => {
      el.appendChild(vChild.render())
    })
    return el
  }
}

function v(tag, children, text) {
  if(typeof children === 'string') {
    text = children
    children = []
  }
  return new VNode(tag, children, text)
}

这里定义一个简单虚拟node类，拥有本元素和子节点，拥有render()函数。

改变使用diff算法对比

1
2
3
4
5
6
7
8
9
10
11
12
13

function patchElement(parent, newVNode, oldVNode, index = 0) {
  if(!oldVNode) {
    parent.appendChild(newVNode.render())
  } else if(!newVNode) {
    parent.removeChild(parent.childNodes[index])
  } else if(newVNode.tag !== oldVNode.tag || newVNode.text !== oldVNode.text) {
    parent.replaceChild(newVNode.render(), parent.childNodes[index])
  }  else {
    for(let i = 0; i < newVNode.children.length || i < oldVNode.children.length; i++) {
      patchElement(parent.childNodes[index], newVNode.children[i], oldVNode.children[i], i)
    }
  }
}

简介

本文主要简单介绍一下风景园林/环境设计专业软件需要啥子具体要求，顺带科普一下参数具体有什么用

软件篇

我们专业主要使用的软件是以下几个

• CAD
  2019版本官方配置表

  • cpu 2.5-2.9Ghz处理器 建议：3+Ghz处理器
  • 内存 8GB 建议：16GB
  • 显卡 显存1Gb,29Gb/s带宽,与DirectX 11 兼容 建议：显存4GB，106GB/s带宽，与 DirectX 11 兼容
    来源：AutoCAD系统要求

  总结：cpu这里的意思就是CPU主频尽可能的高，多核心多线程对于速度不会有太大提升，对于显卡的要求很粗略，只是需要一个快速且大的显存，目前一般的独立显卡都能满足这个要求，实际上显卡对于CAD来说并不重要。内存自然是越大越好，8G温饱，16G小康

• PS
  2018版本官方配置表

  • cpu Intel® Core 2 或 AMD Athlon® 64 处理器；2 GHz 或更快处理器
  • 内存 2GB或更大RAM，推荐8GB
  • 显卡 支持OpenGL 2.0
    在其帮助页面还给出了更多的解释
    • 最小显存512MB,建议显存2GB
      来源：系统要求|Photoshop

  总结：PS的cpu这里给出的配置相当模糊，我去查询了第三方测评。第三方测评的意见认为，PS多线程优化仍然不够好，大量的核心并不能明显提升PS性能，但是第8代CPU由于直接多了两个物理核心，尽管优化不好，但仍然有看见的提升，Core i7 8700K比Core i7 7700K快9-14%

  由于PS需要处理大量高质量素材文件，非常占用内存和暂存盘空间，对于PS来说，更大的内存空间，更高的内存频率能够明显提高其性能表现。由于内存条较为昂贵，在不升级的情况下，把固态硬盘作为PS的暂存盘也是提高其性能的一个手段.

  PS对于显卡的要求并不高，参考官方的帮助页面，部分对于图像变形，模糊，选择和蒙版会使用GPU进行加速，一些滤镜效果必须使用显卡，但是要求并不高，集成显卡就已经能较好完成大部分的工作，一般的独立显卡，如1050，部分功能的确会相比集成显卡有更大的提升（30%），但更高的显卡，对于提升整体性能表现的帮助相当小。

• SU
  SketchUp Pro 2018官方配置表

  • cpu 1Ghz处理器 推荐2G+hz处理器
  • 内存 4GB 推荐8+GB
  • 显卡 OpenGL 3.0或更高，显存512MB及以上
    来源：SketchUp Hardware and Software Requirements

  总结：su做为一个3D建模软件，把一个任务拆开由多个线程负责的优化是十分困难的，多核CPU不会为它带来提升，单核性能决定了它的性能表现。SU对于显卡的要求很模糊，我去其官方社区找到了答案，SU在大多数情况下，中档的显卡和顶级的显卡，差别是很轻微而不明显的，在SU中视窗内显示的模型由显卡和CPU共同管理，显卡负责模型的光线显示效果（例如阴影，纹理等），cpu负责几何体的生成（如面，边缘），当模型越来越多时，cpu性能就会构成瓶颈。
  除此之外，绘图卡（专业卡）与游戏卡相比，不会带来更好的性能变现，反而贵很多。

• v-Ray

  • cpu 奔腾4及以上，所有支持SSE3指令集的CPU
  • 内存 4GB和最低4GB的虚拟内存 ，推荐8GB及以上和8GB以上虚拟内存
  • 显卡 无
    来源：System Requirements - V-Ray for SketchUp

  总结：这个配置实际上是一个能装vray的配置，实际上要看具体硬件。v-ray有两种渲染模式，CPU渲染和GPU渲染，CPU渲染模式很成熟了，目前大多都是CPU渲染模式，vray利用CPU进行渲染时，会充分利用所有线程，榨干cpu所有性能，对于vray cpu 渲染来说，在频率差不多的情况下，选择具有多核多线程的cpu能更好的提高渲染速度。
  v-ray还支持使用GPU渲染，使用GPU渲染速度更快（如果显卡比较好的话），但兼容性没有传统的CPU渲染好，可能出现不正确的渲染结果，不过可以使用这个模式来快速预览渲染效果。

  无论那种模式，在渲染时都会使用大量贴图文件和产生渲染后的数据，使用cpu渲染会去占用大量的内存和虚拟内存，使用GPU渲染会占用大量的显存。建议至少8G的内存，高参数、大场景的情况下会占用更多的内存。

• Lumion
  Lumion8 官方配置表

  • 显卡 最低2,000 PassMark得分，2GB显存，支持DirectX 11或更高，推荐8,000 PassMark得分，6GB或更多显存
  • cpu
    最低:理想主频为3.0+ Ghz
    推荐:尽可能高的主频，理想主频为4.0+ GHz， 更低的主频会对GTX 1080 或 Titan X构成瓶颈，超过四个cpu核心不会带来性能提高，像 i7-4790K i7-6700K i7-7700K这种主频为4.0+Ghz的CPU是个好的选择，低于3.4G+的至强系列处理器则不被推荐。
  • 内存
    最低 8Gb(简单场景)，并且尽可能高的内存频率
    推荐 16GB，尽可能高的内存频率
  • more
    Lumion 官方非常棒，给出了相当详尽的配置建议，他们自己也推荐了笔记本，pc配置，品牌台式机，甚至配件价格，推荐去看看他们的原文。
    来源：system-requirements

  总结：官方非常棒，不需要总结了，这里我单独说下PassMark得分，可以去

• 3Ds MAX

  • cpu 支持 SSE4.2 指令集的 64 位 Intel® 或 AMD® 多核处理器
  • 显卡 官方给了一个建议显卡列表
  • 内存 至少 4 GB RAM（建议使用 8 GB 或更大空间）

  总结：3dmax官方这里给出的数据也很少，主要因为3ds Max自带渲染引擎，渲染引擎对cpu的要求自然没有上限了，3dmax在建模的时候仍然主要依靠单个CPU核心，不过显卡能够提供更多的帮助。渲染的话同vray,可以GPU和CPU，值得注意的是同价格的游戏卡与专业卡的表现几乎差不多，你不应该选择专业卡。

• more 还有许多其它软件，这里不再列举，如果你想可以去自己查询哟~ 网络最大的百科全书！

硬件篇

总体来说，计算机的核心功能只有两个，计算和储存，计算机的大量部件都是为这两者服务的。计算机的计算功能一般是由cpu(中央处理器)和显卡提供的，而储存功能则有多个部件实现。

• cpu(中央处理器)
  cpu是计算机的核心，就像人的大脑一样，处理各个部件传来的数据，对数据进行计算后返回结果；影响cpu快慢有很多因素，架构，指令集，主频，物理核心数等，但是一般来说同代处理器相同系列，主要看的是主频和核心数。

  • 主频
    主频以Hz为单位，我们常常见到的是2.6Ghz，4.0Ghz这种，对于主频的理解，可以理解为cpu就是一个大工厂，主频就是这个大工厂的的工人生产一个东西有多快。

  cpu的频率不是固定的，可以在一定范围内自动或手动调节，频率越高，会带来更高的功耗和更多的热量。笔记本由于各个厂商的设计不同，散热能力强弱不一，能够提供的功耗也不一样，同一cpu的性能表现也会不一样。

  • 核心数
    核心数就是通常说的几核cpu，代表的是cpu工厂有几个工人一起生产，值得注意的是有多少个核心并不意味着能力的翻倍提高，因为一个软件运行时的工作，很难分配给不同核心，往往还是只由少数几个核心负责，多核心对于优化差的软件来说没有明显提高。

    • 睿频
      睿频就是多核cpu提高那些优化差的软件的方法，通俗的来说，就是cpu这个大工厂接了个只能一个人（单核心）单独干的活，而其它工人就闲着了，cpu觉得这不行，干脆让其它几个工人不干了，把工资（能提供的功耗）交给正在干活的工人（核心），让工人干的更起劲（单核的主频就提高了），也就干的更快了。

    • 超线程
      超线程技术和睿频技术相反，是把一个核心分成两个线程（之前是一个核心对应一个线程），通俗来说，就是给工人（核心）点工具，让它一个人做两个人的活，虽然干的没一个人做一件事那么快，但总体来说做的更多了（无情老板压榨员工），超线程技术会略微降低cpu主频。

• 内存
  内存也是电脑至关重要的部件，也是程序运行时所在的空间。计算机计算首先得得到数据，就像工人工作必须得到零件一样，快速的得到数据对于提高计算机速度有很大的帮助，对于我们平时一些小操作卡顿，往往并不是cpu算的太慢了，而是数据传给cpu的时间太久了。

  但是储存的价格实际上极其昂贵，比如位于cpu上速度极快的L1缓存大概只有几十kb，稍微慢一点的L2缓存有几百kb，更大更慢的的L3则有几MB的样子，那我几百G的小姐姐怎么办？这里就要引入计算机存储的局部性原理了，局部性原理表示计算机中使用的数据，如果第一次被使用，第二次被使用，那块数据第三次也会被使用，简单的说就是计算机使用的数据大量都是重复的，我们可以只把最经常用到的数据存在最快的空间中，不经常的存在慢一些的空间中，这样就可以省储存空间了。

  运用这个原理，现代计算机就设计出了分级的储存架构。cpu自己拥有一部分缓存的能力，分为L1,L2,L3,速度分别递减，容量递增，随后是内存，容量很大多了，比如4G 8G 16G，但是比cpu的缓存慢多了(差了几个量级)，不过价格也降下来了，几百元不等，以上都是缓存，由于物理上的设计，其实并不能长久储存数据，一断电（关机）数据就会消失，真正储存数据的是硬盘，详细看硬盘章节。
  整个储存结构呈金字塔型，越上面速度越快，空间越少，存储的越常用的数据。

  通俗的说就是数据就是零件，拿给cpu大厂加工，常用的零件会被放到cpu大产的内部的仓库，cpu工厂的工人工作直接去取就是了，由于空间有限，这些仓库都非常非常小。内存就是一个远离cpu的另外仓库，空间大多了，不过距离很远，拿到cpu工厂要很久，更远的就是硬盘了，与cpu工厂的距离几乎不可想象了，所以一般要做什么（软件运行 ）都会先拿到内存仓库作为中转。

  • 内存频率 越快内存交换数据的能力越强，能够更快的把硬盘数据存入内存。
  • 虚拟内存 由于内存实际上对于我们的计算机来说还是太少，现在一个浏览器都能占上G的内存，那么多程序，都要用内存，可能会超出实际内存，这时怎么办？系统会在硬盘上划出一块空间，这块空间就叫虚拟内存，如果内存快要满了，就把一部分它认为暂时不会工作的程序的内存移入虚拟内存，腾给其它程序用，程序要工作了，就又把它移回进内存，虚拟内存是内存不足的无奈之举，通常还是建议使用更大的内存。

• 显卡
  cpu是个全能手，什么都能算，但是对于浮点数（就是带小数点的数）计算不是很擅长，而对图形的运算常常涉及到大量浮点数运算（比如求三角形的斜边长），特别涉及到3D的图形，cpu来计算会慢死，显卡（GPU）就是为了解决这个问题，显卡拥有超多简化的核心，这些核心设计出来就只是为了进行浮点数运算，可以做的特别小，特别多，一个显卡里面可以有上千个这种微型处理器（官方称之为流处理器）。CPU与GPU的关系就像人脑和计算器一样，一个什么都能做，但是就计算而言没计算器厉害。

  评价显卡的性能基本和cpu一致，不过显卡单个核心的主频远远低于CPU，但是核心数远远高于CPU，由于GPU做的事很单一，通过跑分来评测其性能是一个很好的办法。

  显卡主要分为两种，为集成显卡和独立显卡

  • 集成显卡
    一般指的就是cpu内置的显卡，一般比较弱，不过日常看看视频，玩玩小游戏，最低画质的网游还是可行的，GPU和CPU一样，计算也需要先把数据传给它，和内存称呼类似，我们把显卡所使用的快速存储空间叫做显存，集成显卡没有独立的显存，而是把内存一部分当做自己的显存，这部分通常非常小，一般只有几百MB

  • 独立显卡
    更加强大的显卡，目前游戏显卡主流就两家，AMD和NVIDIA（英伟达），NVIDIA比较强势。独立显卡拥有自己独立的散热器，独立的供电，独立的显存（主流1G或更多），CPU享受的待遇它都有。

    独立显卡根据用途还可以分为游戏卡，绘图卡（专业卡），和计算卡，游戏卡就是我们平常使用的显卡，很擅长一帧帧画面粗略的快速计算，绘图卡则经过优化，更擅长绘图软件中的大量顶点的空间计算，值得注意的是，事实上专业卡与游戏卡并没太多不一样，绘图卡在绘图领域表现得更好，更多是因为在驱动层面对专业软件做了更好的适配。计算卡则是专门用来计算大量数据，主要用在科学计算和人工智能领域，一般人不需要。

• 硬盘
  硬盘是我们计算机中最后一级存储结构，是最慢，也是容量最大的一级，计算机实际运行中，会先将硬盘数据读入内存，方便更快的与cpu进行数据交换，而程序运行中最常使用的指令这些数据，会被缓存在cpu自带的缓存中。

  硬盘分为两种硬盘

  • 机械硬盘 通过磁头划过磁盘得到数据，速度主要看单碟容量和磁盘碟片的转速度，消费级主要分为5400转和7200转，一般来说容量越大，转速越高，速度也就越快。
  • 固态硬盘 固态硬盘使用的是闪存颗粒来储存数据，相比机械硬盘，速度有极大的提升，特别是在大量小文件写入/读取上。

  由于固态硬盘的价格比较昂贵，目前通用的方法是一个128或256的固态硬盘作为C盘，软件主要安装在C盘里，另外配一个大容量的机械盘，用来存电影，游戏这些庞大且不常用的数据。

• 屏幕
  由于屏幕对于设计行业来说相当重要，我这里单独讲下屏幕
  我们说屏幕，主要说的是屏幕的面板，屏幕面板的参数觉得我们视觉体验。

  • 面板类型
    主流的两大屏幕面板类型是TN屏和IPS屏

    • TN屏：窄视角，色域低，屏幕响应时间短 主要作为游戏屏幕（主要还是便宜）
    • IPS屏：宽视角 色域低，屏幕响应时间略长 比较综合的屏幕
    • 这里主要说的是低端屏幕面板，高端则很不一样

  • 色域
    色域是对于我们设计领域最重要的一个属性，色域是一种计算机对颜色编码的方法，不同色域拥有不同的对纯色的定义和不同的色彩范围。
    目前主流有以下几个色域标准：

    • sRGB 是微软与惠普与1996年开发定下的色域标准，是目前世界上广泛使用的色域标准，手机，电脑默认都是这个色域标准，不是该色域标准的显示屏，需要载入对应的色彩管理配置文件，否则会使用近似的色彩代替，带来色彩的偏差。也因为这个原因，一般我们普通使用只需要使用一个尽可能覆盖100%sRGB标准色域的的显示屏就好了（其实达到95%以上的sRGB覆盖就算是专业级了）
    • NTSC 一个很老的彩色电视标准实际上目前已经很少使用了，但是一般测评和厂商展示数据都是使用这个标准,NTSC标准色域的色彩范围比sRGB大，并且大部分和sRGB重合，sRGB大约占NTSC标准的72%，所以我们经常说希望笔记本色域达到72%NTSC,但是实际上72%NTSC并不等于100%sRGB,可能是72%NTSC色域中的一部分颜色在100%sRGB色域显示之外，评测根据缺失和多出来的颜色，会说偏绿之类的结果，实际意思是相对于sRGB来说，色域覆盖偏向绿色。
    • adobeRGB adobe推出的色域标准，色彩范围略微超过NTSC，对于CMYK打印色域标准有更好的兼容性，而且由于adobe全家桶存在，对自己的adobeRGB兼容也很好，专业的平面设计领域可以使用adobeRGB。

  • 色准
    色准就是颜色显示是否准确，目前一般使用 ΔE（色彩偏离度） 来表示，越大表示与标准色彩差距越大，一般来说低于1就是很优秀的专业屏幕了。色准可以通过自己进行校色，部分降低色彩偏离度，提高色准。

  显示器的指标其实是很复杂的，还有亮度，游戏关心的刷新率，色深等等，我这里仅仅只介绍对颜色影响至关重要的两个参数。

变量

定义变量

• 颜色

  1 2 3 4 5

  @bgColor: #34c5c5; body{ background: @bgColor; }

• url

  1 2 3 4 5

  @url: "./xxx/" body{ background: url("@{url}dog.png") }

  最后url就会被合成，方便改路径

• 声明值

  1 2 3 4 5

  @background: {background:red;}; body{ @background(); }

嵌套

可以把选择器写在括号中，表示下一级选择器

1
2
3
4
5
6
7
8
9

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

解析完毕后

1
2
3
4
5
6
7
8
9

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

&表示当前选择器的父选择器

混合

M:Model
V:view
c:controller

模块化 把每个分成一个个js小文件
每个模块把操作的html作为一个view，作为v（我觉得应该是model）
再生成一个controller，参数是view，接受view进行操作

这里最好将controller封装成一个对象，像下面这样

1
2
3
4
5
6
7
8
9
10
11
12
13

var controller = {
    view: null,
    init: function (view){
        this.view = view
        this.bindEvents()
    }

    bindEvents: function (){
        xxx.addListener('xxx',function (){
            xxx
        })
    }
}

值得注意的是监听函数中调用的是触发事件本身的元素，也就是这里取this取到的不是controller对象本身，这种情况可以使用箭头函数，箭头函数自身不具有this，使用的this向上寻找到的对象就是正确的了。

同时由于多个模块相互分离，并不知道其它模块的情况，可能出现全局变量污染的情况，因此，需要使用立即执行函数。

js中在ES6前不能使用{}包裹创建局部变量，避免全局变量污染可以使用function的创建局部变量环境。

1
2
3

function xxx(){
    ...
}.call()

但是这个方案实际还是存在问题，xxx其实也是一个全局变量

升级版就出现了

如何向后端请求数据？

• form表单提交，使用method指定提交方式,action为提交的地址。

• a标签点击能发请求
  这两者都要刷新页面或者新开页面

• img可以发请求，但请求的必须是图片 不需要增加到页面

• script和link也可以发起请求，但link和script只能加载指定格式，但是需要加到页面

之后，ie5在js中引入ActiveX对象（api），使js可以直接发起http请求
随后其它浏览器也跟进，取名XMLHttpRequest
不到一年，谷歌推出gmail.com,这里可以说前端真正诞生了

ie6后来也成为了安装最多的浏览器60%,ie因此就膨胀了,随后微软拆开ie6的开发人员，只更新安全功能，让chrome也跟了上来

ajax

Jesse James Garrett 将一下技术取名AJAX（异步的javaScript和 XML

1. 使用XMLHttpRequest发请求
2. 服务器返回xml格式的字符串
3. js解析xml，并更新局部页面(现在用JSON)

使用XMLHttpRequest的方法

1
2
3
4
5
6
7
8
9
10

myButton.addEventListener('click',()=>{
    let request = new XMLHttpRequest()
    request.open('GET','/XXX') //初始化配置  请求方式忽略大小写  默认异步
    request.onreadystatechange = ()=>{
        if (request.readyState === 4 && request.status === 200){
            console.log(request.responseText) //响应内容
        }
    }
    request.send() //发送
})

网络响应的时间会很长，这段时间已经够javaScript执行很多任务了，所以需要使用异步