3月12日前端学习记录

仙人掌一号
147 阅读5分钟
在掘金记录自己的学习过程

3月12日的学习记录（最近几天将记在本地的笔记，放在掘金上）

最近在写服创的项目（考试管理系统），学习一直以来断断续续的。以后争取每天都会学习一些新东西，再不济复习一遍之前学的东西。
项目阶段性完成 今天多整理些笔记。

HTML5新特性 语义化标签

HTML5的语义化 就是正确使用语义化标签进行页面结构 如header,footer,nav等标签，而不是滥用div

优点：

  • 代码结构清晰，易于阅读，好维护
  • 利于一些其它设备进行渲染页面
  • 有利于搜索seo
浏览器的渲染机制，重绘，重排
  • HTML标签被构建成DOM树
  • CSS被构建成CSSOM树
  • DOM树和CSSOM树结合成渲染树（Render Tree），Render Tree表明了页面中结点和个数和父子关系
  • 生成（flow）布局，计算出render tree各个节点在屏幕的位置。
  • painting，经过layout布局之后，浏览器已经知道了要显示的结点和节点的样式及位置。
重绘

当dom的外观发生变化的时候，会进行重绘

重排

当dom元素的几何属性发生变化的时候，浏览器需要重新计算元素的几何属性(元素的位置和尺寸大小)，然后重新进行布局，然后渲染painting在屏幕上

  • 重绘：某些元素的外观被改变，例如：元素的填充颜色
  • 重排：重新生成布局，重新排列元素。
优化重排：
  • 分录读写操作，将写操作集中在一起
  • 将修改样式的操作集中在一起
  • 尽量只修改position ：absolute属性的元素 对其他元素影响不大
CSS盒模型：

所有的HTML元素都可以被视为一个小方块，然后方块可以包裹方块，如同盒子一样，一层层的包裹着，这就是所谓的盒模型。

盒模型结构分为：

  • margin
  • border
  • padding
  • content

图片和表单元素都是属于文本，并不是盒子。因为里边不能放东西了，盒模型是可以嵌套放的

盒模型分为：

  • 标准盒模型（W3C盒子模型）

    标准盒模型的width和height不计算padding和border

  • IE盒子模型（怪异盒模型）

    怪异盒模型的width和height计算padding和border

可以通过box-sizing：context-box（标准盒模型），box-sizing：border-size(IE盒模型)。

不声明DOCTYPE类型，IE浏览器会将盒子模型解释为IE盒子模型 若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

CSS优先级

CSS优先级由A,B,C,D四个值决定（组成一个（A,B,C,D）的值进行比较）

  • A：内联样式出现的次数
  • B：id选择器出现的次数
  • C：类选择器和伪元素出现的个数
  • D：标签选择器出现的次数

外部样式可以用！ important来覆盖内联样式

内联样式用 ！important 则无法修改

BFC

BFC是 block formatting context的缩写，也就是块格式化上下文

BFC是一个独立的空间，是一个独立的布局环境，在BFC内的元素不会影响到外边的布局。

触发BFC的CSS属性：
  • overflow：hidden；
  • display：inline-block；
  • position：absolute
  • position：fixed
  • display：table-cell
  • display：flex
BFC的规则：
  • BFC是块级元素，块级元素会按垂直方向一个接一个的排列
  • 因为html是根标签，所以他能开启bfc（注意因果关系）
  • 垂直方向的距离由margin决定，属于同一BFC的两个相邻的标签外边距会发生重叠
  • 计算BFC属性的时候，浮动元素也被计算在内
  • BFC是一个独立的容器，容器内的标签不会影响到外部标签
解决的问题：
  • 内部元素使用float脱离文档流，导致高度坍塌
  • 解决margin坍塌（子元素与父元素的margin重叠了）
js弱语言

js是弱语言类型，声明变量时，不能预设变量的类型，变量的类型由变量的当前值确定。

基本类型：
  • string（字符串），
  • number（数字），
  • boolean（布尔值），
  • symbol（符号）
  • null（空值）
  • undefined（表示已经在作用域中声明，但未赋值的变量）

  1. string number boolean null undefined是原始类型

  2. symbol是ES6中新增的数据类型，symbol 表示独一无二的值，通过 Symbol 函数调用生成，由于生成的 symbol 值为原始类型，所以 Symbol 函数不能使用new 调用；

  3. null undefined通常被认为特殊值，这两个类型的值唯一，就是其本身

    4.array和function都是对象类型也就是引用类型，并且都是Object的子类型

js的强制转换

内容繁多，应认真观看juejin.cn/post/684490…（反复观看）

daijl.cn/39558/ js高频面试题网站

闭包

一个函数能够访问另一个函数内的变量，这就是闭包。

一个函数记住并可以访问所在的词法作用域，就产生了闭包。究其原因就是函数的作用域链没有因为所有函数运行的结束而被销毁掉，而是保存了下来，这就形成了闭包。

用途：

  • 能够访问定义时的词法作用域

  • 私有化变量

    var add = (function(){
            var counter = 0
            return function(){
                counter++;
                console.log(counter);
            }
        })()
        add()
        add()
        add()

创造块级作用域

for(var i = 0 ; i<10;i++){
                setTimeout(()=>{
                    console.log(i);
                },1)
            }//输出10 10 10 10......

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

模块化代码

第一段代码变量名直接污染了全局作用域

第二段代码写法太冗余了。同时函数名对全局作用域进行了污染

第三段代码立即执行函数执行，执行完就销毁不留痕迹，不污染作用域

var a = 1;
  console.log(a);
  var b = 2;
  console.log(b);

function module1 () {
  var a = 1;
  console.log(a);
}
​
function module2 () {
  var a = 2;
  console.log(a);
}
​
module1(); // => 1
module2(); // => 2
​

// module1.js
(function () {
  var a = 1;
  console.log(a);
})();
​
// module2.js
(function () {
  var a = 2;
  console.log(a);
})();
​

\

avatar
文章
阅读
粉丝