前端基础里一些杂七杂八的知识点

发表于 分类于 Waline：

其实在大一就有学习前端的想法，也就多多少少了解了一点html和css，但是那时候身在安卓方向，就还是以安卓为主，也没有坚持下去。
工程师嘛，无论是什么工程师，局限于一个领域上所学到的东西肯定是有限的，it界那么大，总得看看别的地方。
如果硬要说我想成为什么工程师，我希望我能成为一个全栈工程师吧（有能力的话

杂七杂八的要点

这里主要是记了一些我需要重要理解或者容易忘记的知识点。没有一个固定的逻辑顺序。

定位問題

最常用的两个：absolute 和 relative

  1. absolut: 脱离原来的位置定位。对最近有定位的父级进行定位，假如没有则相对文档进行定位。
  2. relative: 保留原来的位置进行定位。相对自己原来的位置定位。

z-index: 改变元素的层面，代表该元素的Z轴，默认是0。

当元素使用float属性定义元素往哪个方向浮动的时候，需要后面的元素不再继续浮动在后面的时候，可用：

1
2
3
4
5
.nav::after{
    content:"";
    display:block;
    clear:both;
}

字体

  1. 当字体超出长度，为了页面整洁美观，多余的字体用……表示：
1
2
3
4
5
.product-buyer-name {
overflow: hidden; /*隐藏超出单元格的部分。*/
text-overflow: ellipsis; /*文字超出部分用省略号*/
white-space: nowrap;  /*保证无论单元格（TD）中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格*/
}

  1. 网页上的一些小图标
    我一直以为，在网页上的一些小图标是通过插入img来显示的，但是再深入一点了解到，类似淘宝网上的tab栏的小图标是通过一个自定义显示出来的。
    这里我规划到了字体类是因为当我们需要显示部分字体，但是电脑上没有该字体的时候是无法显示的，这里我们就要用一样的方法，将这个字体的资源加载进去，达到一个显示他人电脑字体不存在也依然可以看到该字体的效果。

    淘宝网tab栏

那么这种字体资源还有图标资源该怎么来呢，当然是，
Google或者百度啦
在阿里巴巴矢量图标库上有挺多资源，我们在里面挑选我们需要的资源并且加入购物车后下载源码

阿里巴巴矢量图标库
加入购物车

下载到的源码里有资源的文件以及他一个css的demo，在使用上我们先拷贝资源文件后。

  1. 拷贝项目下面生成的font-face
1
2
3
4
5
6
7
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
  1. 定义使用的iconfont使用样式
1
2
3
4
5
6
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
  1. 挑选相应图标并获取字体编码，应用于页面
1
<i class="iconfont">&#x33;</i>

JavaScript 中 var,let,const的区别

const:声明一个只读的常量，一旦声明，常量的值就不能改变。
let:声明的变量只在 let 命令所在的代码块内有效。

变量提升

概述：变量可在声明之前使用。

  • var: 允许
  • let：不允许
  • const：不允许
1
2
3
4
5
6
7
console.log(a);//正常运行，控制台输出 undefined
var a = 1;
console.log(b);//报错，Uncaught ReferenceError: b is not defined
let b = 1;

console.log(c);//报错，Uncaught ReferenceError: c is not defined
const c = 1;

主要是为了减少运行时错误，防止变量声明前就使用这个变量，从而导致意料之外的行为。

暂时性死区

概述：如果在代码块中存在 let 或 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

  • var: 存在
  • let：不存在
  • const：不存在

例子：

1
2
3
4
5
var num = 123;
if (true) {
	num = 'abc';//报错
	let num;
}

解释：存在全局变量 num，但是块级作用域内 let 又声明了一个 num变量，导致后者被绑定在这个块级作用域中，所以在 let 声明变量前，对 num 赋值就报错了。

重复声明

概述：指在相同作用域内，重复声明同一个变量。

  • var: 允许
  • let：不允许
  • const：不允许

var 允许重复定义所带来的后果：

1
2
3
4
5
var i = 10;
for(var i = 0;i < 5;i++){
  console.log(i);
}
console.log(i);// 输出 5

var命令没有块级作用域,for循环里的i会替代外层的i。

初始值

  • var: 不需要
  • let：不需要
  • const：需要

作用域

  • var: 除块级
  • let：块级
  • const：块级

块级作用域：

1
2
3
4
5
6
7
8
function f1() {
  let n = 5;
  if (true) {
    let n = 10;
    console.log(n); // 10 内层的n
  }
  console.log(n); // 5 当前层的n
}

这种的好处是，可以用于测试一些想法，不用担心变量重名，也不用担心外界干扰，var的作用域会有可能导致上面重复声明例子中的情况