前端知识
关注
分享
扫一扫
文章平均质量分 51
js、css、html、vue、ts...
大名人儿
积跬步，以至千里
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【JS模块加载顺序】
【代码】【JS模块加载顺序】原创 2025-04-28 14:20:12 · 221 阅读 · 0 评论 -
【JS事件循环机制event-loop】
【宏任务按序执行，浏览器可以在它们之间进行渲染】【微任务按序执行，执行与如下时刻：】【每次回调后，只要没有其他 JS 处于执行过程中】【在每次宏任务的末尾】# 进程是 CPU 资源分配的最小单位（是能拥有资源和独立运行的最小单位）；# 线程是 CPU 调度和分派的基本单位，共享进程的内存空间和资源，每个线程有自己的栈空间和程序计数器；# 浏览器每打开一个 tab 页，就是开了一个进程；原创 2025-04-28 14:13:16 · 973 阅读 · 0 评论 -
【浏览器页面渲染流程】
位置，此时外部 CSS 文件还没下载解析好，主线程不会等待，继续解析后续的 HTML。的操作比较慢，Chrome 采用了一个策略: 在首次合成图块时只采用一个低分辨率的图片，这样首屏展示的时候只是展示出低分辨率的图片，以提升首屏加载性能。：由于 HTML 标记定义不同标记之间的关系，创建的对象会链接在一个树数据结构内，此结构也会捕获原始标记中定义的父项-子项关系。如果主线程解析到 link 位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。非视口内的图块数据要进入。原创 2025-04-28 14:04:48 · 796 阅读 · 0 评论 -
【浏览器网络请求全过程】
workers 运行在另一个全局上下文中,不同于当前的 window，因此，使用 window 快捷方式获取当前全局的范围 (而不是 self) 在一个 Worker 内将返回错误。一个 worker 是使用一个构造函数创建的一个对象(e.g. Worker()) 运行一个命名的 JavaScript 文件，这个文件包含将在工作线程中运行的代码;， 表示建立了持久连接，这样 TCP 连接会一直保持，之后请求统一站点的资源会复用这个连接。，根据 IP 头部中的协议项知道上层是否是 TCP 协议。原创 2025-04-28 13:53:00 · 831 阅读 · 0 评论 -
TCP的三次握手和四次挥手
一、一次握手：就像TCP协议中，服务器对新的客户端都会置于Listen（等待响应）状态。 客户端向服务器发送报文，发出请求SYN=1，同时选择一个初始序号seq=x。这时，客户端的状态更改为SYN-SENT（synchronization_sent同步已发送）状态，等待服务器回应。（SYN是synchronization同步的简称，seq为sequcence序号的缩写。）二、二次握手：...原创 2019-06-19 17:08:28 · 239 阅读 · 1 评论 -
正则表达式
概念理解 正则表达式（Regluar Expressions）：通常进行字符串操作（匹配、查找替换、分割）1）模式匹配：验证email地址、手机号码等格式是否正确2）查找与替换：判断给定字符串中是否包含 满足正则表达式所指定的匹配规则的子串，并替换3）分割：查到后，将匹配到的字符串作为分隔符进行字符串分割 基础知识 ^和$分别指字符串的开始与结束 [0...原创 2020-04-02 20:33:53 · 178 阅读 · 0 评论 -
JS数组、对象（方法汇总）
JS常用方法汇总数组：1. filter() filter() 方法创建一个新的数组(不改变原始数组) ，新数组中的元素是通过检查指定数组中符合条件的所有元素。var ages = [32, 33, 16, 40]function checkAdult(age) { return age >= 18}function myFunction() { console.log(ages.filter(checkAdult)) // 输出 [32,33,40]}2. sp原创 2020-08-10 20:11:23 · 382 阅读 · 0 评论 -
js,数组合并的方法+数组添加元素的方法
一、concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。const array1 = ['a', 'b', 'c'];const array2 = ['a', 'e', 'f'];const array3 = ['a', 'a', 'a'];const array4 = array1.concat(array2,array3);console.log(array4); // ["a", "b", "c", "a", "e", "f", "a", "a", "a原创 2021-04-30 15:13:40 · 809 阅读 · 1 评论 -
sass占位符%选择器的使用
%sfqy-basic { // 编译后不会出现在css文件中 float: left; margin-top: 15px; width: 10px; height: 10px;}.sfqy-icon { @extend %sfqy-basic; // @extend继承 background-color: #b1b1b1;}.sfqy-icon-enable { @extend %sfqy-basic; background-color: #2edb2e;}原创 2020-08-11 15:55:43 · 626 阅读 · 0 评论 -
scrollTop属性
scrollTop：可读可写 scrollTop是一个整数：元素不能被滚动OR设置scrollTop值小于0，则scrollTop值为0 设置超出这个容器的可滚动值 ，则scrollTop值为容器最大值判断元素是否滚动到底：e.scrollHeight - e.scrollTop === e.clientHeight返回顶部：element.scrollTop = 0 ...原创 2020-08-11 19:04:03 · 3737 阅读 · 0 评论 -
在vue中使用requestAnimationFrame（）实现定时轮询任务
常见的实现定时轮询的方式主要有setInterval，setTimeOut，这里我们使用性能较好的window.requestAnimationFrame。结合EventBus全站的定时任务都使用一个定时任务流，实现流程如下：初始化EventBus// main.jsVue.prototype.$EventBus = new Vue()app.vue全局定时流借助requestA...原创 2020-03-06 12:00:28 · 6200 阅读 · 0 评论 -
vue的props（数据类型为Array、Object）
vue的props（数据类型为Array、Object）处理注意在 JavaScript 中对象和数组是通过引用传入的；对于一个数组（或对象）类型的 prop 来说，在子组件中改变这个数组（或对象）本身将会影响到父组件的状态。所以不可以直接操作数组（或对象）类型prop。 export default { props: { fileList: Array // 接收父组件传来的参数 }, data () { return { list: []原创 2020-08-12 15:57:27 · 6599 阅读 · 0 评论 -
vue---滚动翻页
vue—滚动翻页v-infinite-scroll的回调函数不可以写参数（如：searchEquip(true)），否则会无限查询。原创 2021-01-19 19:23:08 · 708 阅读 · 0 评论 -
JS身份证号码校验
validateCardId (id) { // 1 "验证通过!", 0 //校验不通过 let format = /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0...原创 2020-06-01 09:32:51 · 446 阅读 · 0 评论 -
vue钩子函数生命周期
1、创建期间的生命周期函数beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板。我们可以在这里进行Ajax请求。beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（mounted之后，表示真实DOM渲染完了，可以操作DOM了）2、运原创 2021-03-11 16:11:46 · 165 阅读 · 0 评论 -
使用配置文件实现vue多环境（dev、prod）切换
体验过后端的profile后，再也不怕开发和现场部署修改切换配置啦。一个命令就搞定。在前端vue（webpack脚手架模式）开发中，我们是否也可以使用同样的思路实现下配置信息的分环境化?只需以下几步即可。（一）新建以下三个文件/utils/global.js;/static/config/config-development.json;/static/config/config-pro...原创 2019-11-19 18:51:49 · 4204 阅读 · 0 评论 -
JSX语法、函数式组件
JSX语法、函数式组件1.v-if、v-forprops: ['items'],render: function (createElement) { if (this.items.length) { return createElement('ul', this.items.map(function (item) { return createElement('li', item.name) })) } else { return createElemen原创 2021-12-22 17:43:35 · 1249 阅读 · 0 评论 -
vue组件的定义和注册
一、全局组件的定义和注册写法一：使用Vue.extend方法定义组件，使用Vue.component方法注册组件。<body> <div id="app"> <!-- 如果要使用组件，直接把组件的名称，以 HTML 标签的形式，引入到页面中，即可 --> <account> </account> </div> <script> //第一步：.原创 2021-03-02 09:36:53 · 340 阅读 · 0 评论 -
总结：vue的通信方式
vue-通信方式原创 2022-06-30 11:06:34 · 851 阅读 · 0 评论 -
vue自定义指令
0.自定义指令使用方法<template> <div> <input v-color="'green'"> <span v-fontweight="600">私有指令</span> </div></template>1.自定义全局指令Vue.directive('color', { bind: function (el, binding) { // 每当指令绑定到元素上的时候，.原创 2021-02-25 11:47:42 · 360 阅读 · 1 评论 -
vue动画（+animation、@keyframes的使用）
<transition name="fade"> <div>...</div></transition>.fade-enter-active { animation: fadeIn 0.4s; // name duration}.fade-leave-active { animation: fadeOut 0.4s;}@keyframes fadeIn { // form起始时,等同于0%，to到达原创 2020-08-24 19:16:38 · 1228 阅读 · 0 评论 -
组件递归引用问题
描述：vue中A组件引用了B组件，B组件也引用了A组件，会出现错误Unknown custom element: <disaster-point> - did you register the component correctly? For recursive components, make sure to provide the "name" option.原创 2021-06-15 20:26:34 · 322 阅读 · 0 评论