裴孝宏
裴孝宏

前端笔记记录

牛客网知识点

一个完整的网页加载流程：
    (1)解析HTML结构
    (2)加载外部脚本script和样式表文件link
​
//页面中的多个脚本文件采用同步的方式加载 会产生“线程等待”
    (3)解析并执行脚本代码      
    (4)构建HTML DOM模型        
​
(5)加载图片等外部资源文件     //图片等文件以异步线程的方式加载 不会产生等待
(6)页面加载完毕
​
​
​
css加载不会阻塞DOM树的解析
css加载会阻塞DOM树的渲染
css加载会阻塞后面js语句的执行

参考学习

面试官：有使用过vue吗？说说你对vue的理解 | web前端面试 - 面试官系列

刘亦枫 - 个人中心 - 云+社区 - 腾讯云

介绍

  1. #+空格 显示几级标题

  2. ctrl + 数字 显示几级标题

  3. ctrl + f 搜索页面内容

  4. -+ 空格生成 无序列表

  5. tab 对无序列表降级，shift+tab 对无序列表什级，按两下 enter 去除 无序列表

  6. 三个反引号 建立代码块片段

  7. [toc] 建立目录

待学习

1.react
2.canvas
3.uniapp
4.ts+vue3

项目总结

1.生成唯一的id

npm i nanoid
import {nanoid} from "nanoid"//采用分别暴露，是一个函数，生成唯一的id
id:nanoid()

2.退出登录，vuex处理昵称，vuex数据刷新页面数据丢失

退出登录
1.删除token localStorage.removeItem("qf-token")
2.跳转到登录页 this.$router.push("/login")

3.配置淘宝镜像

一、NPM设置淘宝镜像
1.查询当前配置的镜像
npm get registry
2.设置成淘宝镜像
npm config set registry http://registry.npm.taobao.org/
3.换成原来的
npm config set registry https://registry.npmjs.org/
​
二、Yarn 设置淘宝镜像
1.查询当前配置的镜像
yarn config get registry
2.设置成淘宝镜像
yarn config set registry http://registry.npm.taobao.org/
3.换成原来的
yarn config set registry http://registry.npmjs.org/

4.nvm

nvm install stable ## 安装最新稳定版 node
nvm install  ## 安装指定版本
nvm uninstall  ## 删除已安装的指定版本
nvm use  ## 切换使用指定的版本node
nvm ls ## 列出所有安装的版本
nvm ls-remote ## 列出所有远程服务器的版本
nvm current ## 显示当前的版本
nvm alias   ## 给不同的版本号添加别名
nvm unalias  ## 删除已定义的别名
nvm reinstall-packages  ## 在当前版本 node 环境下，重新   全局安装指定版本号的 npm 包
nvm alias default [node版本号] ##设置默认版本

5.echarts

安装

npm install echarts --save

引入echarts

import * as echarts from 'echarts';

练习

import * as echarts from 'echarts';
//echarts创建出来是没有高度的,所以需要手动给dom容器加上高度)
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

开启loading动画

如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。

ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

异步加载

入门示例中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再 填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过axios等工具 异步获取数据后通过 setOption 填入数据和配置项就行。 获取的数据不符合自己想要的，通过map 数组方法，对数据进行处理。

自适应宽度

可以监听浏览器的resize事件,然后调用echarts中的resize方法

window.onresize = function () { myChart.resize() },然后将此方法写在mounted中

数据接口

  1. 折线图数据 https://chst.vip/data/rate.json

  2. 任务概况饼图 https://chst.vip/data/tarsk.json

  3. 期望课程饼图数据 https://chst.vip/data/expect.json

总结

文档里面有个配置项，对所有的setOption配置项进行配置，注意一定要给容器加高度！

小程序

正在上传…重新上传取消

事件 bind+事件名 例如 bindtab

正在上传…重新上传取消

事件传参

正在上传…重新上传取消

上传图片

正在上传…重新上传取消

正在上传…重新上传取消

零散小知识

子元素在父元素实现水平垂直居中

1.设置父元素为相对定位， 子元素移动自身50%实现水平垂直居中




    

2.利用定位+transform




    

translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%

这种方法其实和最上面被否定掉的margin负值用法一样，可以说是margin负值的替代方案，并不需要知道自身元素的宽高

3.定位 加上 margin ：auto




  

4.flex布局

style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }



    

5.grid布局




    

深浅拷贝

浅拷贝：数组的slice(),concat(), 展开运算符

深拷贝：JSON.parse(JSON.stringify()) 对象里面不能有函数

lodash库中的_.cloneDeep()

JQuery.extend()

手写递归循环

正在上传…重新上传取消

正在上传…重新上传取消

BFC

BFC---Block Formatting context---块级格式化上下文 BFC页面里一块独立的渲染区域，有自己独立的渲染规则。 BFC决定了其子元素将如何定位，以及和其它元素的关系和相互作用 BFC布局规则： 1.内部的Box会在垂直方向，一个接一个地放置。 2.Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠(两个盒子在不同的BFC内，就不会发生重叠)。 3.每个box的左边与包含块(父元素)的左边相接触(对于从左往右的格式化，否则相反);即使存在浮动也是如此。 4.BFC的区域不会与float box重叠(两栏布局)。 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素;反之也如此。 6.计算BFC的高度时，浮动元素也参与计算。 出发BFC---哪些元素默认是BFC?哪些属性可以让元素变成BFC? 1.根元素 html 2.float属性不为none（left,right） 3.position为absolute或fixed(脱离正常文档流) 4.display为inline-block, table-cell（td,th）, table-caption(caption), flex, inline-flex,inline-table 5.overflow不为visible（auto,hidden,scroll）

闭包

闭包如何产生的：两个函数嵌套，内部函数引用了外部函数的值或者方法！

优点 1.可以读取函数内部的变量 2.可以让这些局部变量保存在内存中，实现变量数据共享。

缺点 1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。 2.闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

用途场景

  1. 匿名自执行函数 我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在函数执行完后会立刻释放资源，关键是不污染全局对象。 代码如下： (function() { var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], today = new Date(), msg = 'Today is ' + days[today.getDay()] + ', ' + today.getDate(); alert(msg); } ());

  2. 结果缓存

    我们开发中会碰到很多情况，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留。 var CachedSearchBox = (function(){ var cache = {}, count = []; return { attachSearchBox : function(dsid){ if(dsid in cache){//如果结果在缓存中 return cache[dsid];//直接返回缓存中的对象 } var fsb = new uikit.webctrl.SearchBox(dsid);//新建 cache[dsid] = fsb;//更新缓存 if(count.length > 100){//保正缓存的大小<=100 delete cache[count.shift()]; } return fsb; },

           clearSearchBox : function(dsid){    
            if(dsid in cache){    
            cache[dsid].clearSelection();      
            }    
       }    
    };    
})();

  3. 封装 var person = function(){ //变量作用域为函数内部，外部无法访问 var name = "default"; return { getName : function(){ return name; }, setName : function(newName){ name = newName; } } }();

  4. 实现类和继承 function Person(){ var name = "default"; return { getName : function(){ return name; }, setName : function(newName){ name = newName; } } };

   var p = new Person();
   p.setName("Tom");
   alert(p.getName());//Tom
   
   var Jack = function(){};
   //继承自Person
   Jack.prototype = new Person();
   //添加私有方法
   Jack.prototype.Say = function(){
       alert("Hello,my name is Jack");
   };
   var j = new Jack();
   j.setName("Jack");
   j.Say();
   alert(j.getName());//Jack

清除浮动

1. 在高度塌陷元素最后面添加一个块级元素，给这个块级元素添加 claer:both ;属性
定义万能的清除浮动类（利用伪元素::after）
2 .clear::after{
    content："";
    display:black;
    clear:both;
    overflow:hiddent;(当不小心给这个conten添加了内容时候，高度设为0，再溢出隐藏)
    height:0;
}

透明度（opacity）

opacity     规定元素的不透明级别----针对ie8以上版本ie浏览器和其他浏览器支持
    属性值： 接受0-1之间数字书写，默认值为1  
            0表示完全透明，1表示完全不透明   0-1之间的数字就表示半透明的效果
            
在IE8及以下版本的ie浏览器中实现透明需要通过以下方法
        filter:alpha(opacity=value);
        value取值为 0-100
            0表示完全透明，100表示完全不透明   0-100之间的数字就表示半透明的效果
            
visibility      规定元素是否可见
    visible         默认值，可见
    hidden          不可见
 
元素不可见的区别
    不可见后 占据空间   (隐身不可见)
        opacity: 0;
        visibility: hidden;
    不可见后 不占据空间   (消失不可见)
        display: none;

cursou 属性

cursor 属性规定要显示的光标的类型（形状）。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

正在上传…重新上传取消

html

meta

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
​

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
在HTML5中，为input元素新增了以下一些type属性值：
color：用于指定颜色的控件。
date：用于输入日期的控件（年，月，日，不包括时间）。
month：用于输入年月的控件，不带时区。
week：用于输入一个由星期-年组成的日期，日期不包括时区
time：用于输入不含时区的时间控件。
datetime：基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。
datetime-local：用于输入日期时间控件，不包含时区。
email：用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
number: 用于应该包含数值的输入域。只能输入数字
range：用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel：用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果
url：用于编辑URL的字段。

正在上传…重新上传取消

新多媒体元素有： audio, video, source(定义多媒体资源) embed(定义嵌入的内容，比如插件) track(为

h5标签

正在上传…重新上传取消

正在上传…重新上传取消

块级元素、行内元素

内联元素是不可以控制宽和高、margin等；并且在同一行显示，不换行。
块级元素时可以控制宽和高、margin等，并且会换行。
​
1. inline ： 使用此属性后，元素会被显示为内联元素，元素则不会换行  
inline是行内元素，同行可以显示，像span、font、em、b这些默认都是行内元素，不会换行，无法设置宽度、高度、margin、border
​
2. block ： 使用此属性后，元素会被现实为块级元素，元素会进行换行。  
block，块元素，div、p、ul、li等这些默认都是块元素，会换行，除非设置float  
​
3. inline-block ： 是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。(IE6不支持)  
inline-block，可以同行显示的block，想input、img这些默认就是inline-block，出了可以同行显示，其他基本block一样

表格

table 表格 
tr 行 
th 表头单元格 (会加粗字体 会居中)
td 单元格 
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
# 一般情况下 tr只能包含 td 和th , td和th 可以 包含其他标签前。
​
 
    
           
    
          
 
 我是表格标题 
    

    

    
表格属性
正在上传…重新上传取消
表单
正在上传…重新上传取消
表单元素
正在上传…重新上传取消

         //文本框
     //密码框
       
      //单选框，多个相同单选框，name属性的值要一样,checked属性标识默认选中
     
       // 多选框 name 属性值也要一样
     // 提交按钮，value 可以更改按钮的值
     // 重置按钮，value 可以更改按钮的值
      // 上传文件按钮