3.1k 字 3 分钟

# let 关键字 # 作用域绑定在最近的 {...} 块中 let 在使用时会绑定离它最近的 {...} 作为作用域。原本在 ES6 以前是没有块级作用域的概念，在 ES6 引入了 let、const 关键字之后就有了块级作用域。实际上这个块级作用域并不是我们平常理解的块级作用域，仅当变量是由 let、const 关键字声明时，这些关键字声明的变量其作用域会绑定在这个块上，若是使用 var 关键字声明，其变量依然会成为全局变量。 使用这个特性我们可以很好的解决 for 循环全局变量污染的问题 if(true){ { let a = 10; var b =...
3.3k 字 3 分钟

# 什么是原型 在搞明白什么是原型之前我们首先要明白我们为什么要原型，毕竟语言的设计者不会无缘无故搞出一个完全没有用的东西，它肯定是为了解决某个问题而诞生的。那么原型它解决了什么问题呢？ 我们都知道在 es6 之前，js 是没有关键字 class 创建类的。那时候我们要使用类就用构造函数这种形式来实现它。在 C++ 这种原生支持类的语言中，同一个类的多个实例里的方法只有一份，也就是说不管我们实例化了多少个对象，在计算机的内存中这个类的方法在内存中只有一份。只有每个实例的属性才会在内存中产生多个副本。例如 class foo{ private: string name; int...
1.2k 字 1 分钟

# 背景 本文主要围绕 What、Why、How 这三个方面谈谈 sessionStorage 和 localStorage 的联系与区别。 # What sessionStorage 和 localStorage 都是 BOM 提供给我们在浏览器上进行本地存储数据的 API，利用它我们可以实现在本地浏览器存储一些数据。这两个方法都是隶属于 Window 这个顶级 BOM 下的，在需要的时候我们直接调用即可。 #...
843 字 1 分钟

# 什么是事件对象 在浏览器中我们通常都是通过事件触发来实现网页与用户的交互效果的，在这个过程中 js 会产生一个事件对象。例如我们用常规方法给按钮绑定一个点击事件 <button>按钮</button><script> var btn = document.querySelector('btn'); btn.addEventListiner('click',function( e ){ // 这里我们给匿名函数的形参 e 就可以接收到 click 产生的事件对象...
2.8k 字 3 分钟

# 函数作用域 js 里若我们包装函数的声明，则该函数会被当做一个函数表达式，而不是一个函数声明。如何理解？ var a = 2;(function foo(){ var a = 3; console.log(a); })(); // 输出 3console.log(a); // 输出 2// 当我们继续想要调用 foofoo(); //ReferenceError---------//foo 函数的书写还有一个改进的形式(function foo(){ var a = 3; console.log(a); // 输出 3}()) // 即将 () 调用也包含进外层的 ()...
4k 字 4 分钟

# 坑一：变量提升 js 在解析时，会将所有的变量与函数先声明再进行赋值操作。例如 // 先输出再声明并赋值变量console.log(a); // 输出结果为 undefinedvar a = 10;像这类代码，在执行时等于如下效果 var a;console.log(a);a = 10;** 这说明 js 在执行时，会将变量提至最前面先声明，再进行赋值操作。** 同理，我们进行函数调用时也是如此进行函数提升 fu1(); // 在未定义 fu1 () 时就调用它，此时我们执行时是可以输出 xxx 的function fu1(){ console.log('xxx');}//...
1.4k 字 1 分钟

# Boostrap 简介 Boostrap 是一套基于 HTML、CSS 和 Javascript 的的响应式前端框架。简单来说就是一套预先定义好的 css 文件和 js 文件，当我们需要使用时在 html 页面中用 link 标签引入我们需要的文件，然后使用即可。 # Boostrap 的使用 Boostrap 的使用极其简单，我们只需要根据它定义好的类名，在我们要引入样式的标签上添加它给的类名就可以使用了。若默认样式不满足我们的需求，我们可以自己使用选择器更改对应属性。 Bootstrap 需要为页面内容和栅格系统包裹一个 .container...
2.3k 字 2 分钟

# 什么是 flex 布局 传统布局解决方案主要是依赖 display 属性 + float 属性 + position 属性来控制我们盒模型的位置，用这三个属性相互配合达到将盒子摆放至预期位置的目的。而 flex 布局主要是利用在父元素中添加 display:flex 属性，使用与其相关的属性配合达到布局的目的。 在传统布局中有些特殊布局并不好实现，而在 flex 布局中我们可以轻松实现。例如将三个盒子同时水平对齐和垂直居中对齐。 # flex 布局原理 flex 布局里我们可以指定任意一个元素为父元素，即使是行内元素我们也可以设置 flex...
1.3k 字 1 分钟

# Linxu 服务器配置 # 登录 Linux 并生成密钥对 首先我们使用 putty 登录 Linux 服务器 再让 Linux 服务器先生成 rsa 密钥对供我们认证。使用如下命令 ssh-keygen命令执行后对于弹出的选项我们一路回车就行 密钥对生成后我们要将其中的公钥文件 id_rsa.pub 更改为 authorized_keys ，然后将私钥文件 id_rsa 下载至本地 Windows # 更改 Linux 公钥文件名称 我们找到生成密钥的地址 /home/unbuntu/.ssh ，因为我们现在就是在当前用户目录下生成的密钥，所以只需要输入 cd .ssh...
2.7k 字 2 分钟

# rem + less + 媒体查询布局 # rem # 初识 rem 什么是 rem，rem 的全称为 root em。em 我们都知道，1em 代表一个字符的大小。而 root em 顾名思义，我们可以大致猜测出是以某个源为标准的单位。实际上 rem 代表的是以 <html> 标签里 font-size 属性的单位，举个例子 html { 设置html文件的默认字体大小为16px font-size:16px;}此时 1 rem = 16 px;由此可以看出，html 标签里设置的字体像素值为多少，其每单位 rem 就是多少像素的大小。 # 为什么要...