- 博客(91)
- 收藏
- 关注
RSS订阅原创 【无障碍】自动朗读的弹窗和浮层实现
使用Aria-modal属性在弹窗div上增加属性：<div role="dialog" aria-modal="true" aria-label="xx对话框" >弹窗内容</div>其他效果：用户无法访问到div之外的元素几乎所有的android都不支持这里按理说无需加tabindex属性，但实际实验中发现无tabindex不能朗读，可以加上试试弹窗div加上tabindex属性后，内部需要聚焦的第一个元素也要加上tabindex属性aria-labell
2021-11-19 19:09:27
3770
原创 浏览记录-history
这里写自定义目录标题PushHistoryPushHistorylocation.replacelocation.href =History.pushState：向当前浏览器会话的历史堆栈中添加一个状态（state）功能与location.href =基本相同区别：（1）请注意，浏览器不会在调用 pushState() 后尝试加载此 URL，但它可能会稍后尝试加载 URL，例如在用户重新启动浏览器之后。window.location.href = "url"将浏览器导航到新位置，因此
2021-11-19 18:13:13
533
原创 【无障碍】tabindex
简介tabindex是全局属性：用户操作tab键的顺序——HTML标签元素都可以用的属性，比如说id、class等属性都是HTML的全局属性。tabindex属性是一个与键盘访问行为息息相关的属性，或者说是用户体验息息相关的属性场景：鼠标坏了/投屏的键盘操作作用：管理键盘焦点，决定元素能否被选中交互元素：常见的a、button、input：隐式可聚焦元素、内置键盘事件处理https://allyjs.io/data-tables/focusable.htmldocument.activeEl
2021-11-10 17:22:34
2268
原创 前端重复加载依赖解决办法之一—— Module Federation
Module FederationWebpack 5的特性——设计动机是为了能够让不同的团队协作开发一个或者多个应用——将一个应用拆分并导出不同的模块，并且模块依赖的底层三方库，同样能够被共享。借助这个能力我们可以为应用提前构建一个公共依赖，来减少编译内容和打包体积——实现：将所有的三方依赖都作为 remote 依赖引入，步骤：首先通过 exposes 能力，将项目运行时依赖去全部导出，并完成 remoteEntry 和相关 remote 模块的构建项目开启 MF 能力，并依赖已构建好的 rem
2021-08-21 18:47:11
797
原创 模块化规范类型——很火的commonjs和Es Module
模块化的出现为了解决的问题——相对于script标签引入的js文件变量污染问题，每个文件都是独立的作用域，所以不存在变量污染——js文件作用域都是顶层，这会造成变量污染代码维护问题，一个文件里代码非常清晰文件依赖问题，一个文件里可以清楚的看到依赖了那些其它文件模块化的规范commonjsmodule.exports导出变量及函数，也可以导出任意类型的值，require语法导入。exports导出的值是值的拷贝，用解构拿到单个值支持动态导入，代码发生在运行时指顶层的this指向这个模块本身
2021-08-21 18:43:38
406
原创 eval的使用—就是别用
with 也不让用了呢eval 函数会在当前作用域中执行一段 JavaScript 代码字符串。在eval()中创建的任何变量或函数都不会被提升，因为在解析代码的时候，它们被包含在一个字符串中；它们只在eval()执行的时候创建。用途：通过eval()执行的代码包含在该次调用的执行环境中，因此被执行的代码具有与该执行环境相同的作用域链。间接用eval的方式：window.eval()或者(0,eavl)()逗号操作符总会返回表达式中的最后一项var foo = 1;function t.
2021-08-14 21:15:05
420
原创 JS 沙箱隔离简单实现
随着应用架构复杂，微前端方案的出现，js运行环境沙箱在浏览器中的需求越来越多需要js沙箱的场景多个微前端应用中，变量冲突执行第三方js：当你有必要执行第三方js的时候，而这份js文件又不一定可信的时候需要实现的功能一个独立的上下文作用域，其中的代码执行不会影响到其他的运行环境。需要支持多个沙箱环境存在，每个沙箱需要有加载、卸载、再次恢复的能力，其对应着微应用的运行生命周期。实现过程1、核心是使用proxy对象创建window代理，并将需要被隔离起来的代码的执行作用域绑定到proxy对.
2021-08-14 21:12:40
1941
1
原创 《JavaScript 秘密花园》—一些奇奇怪怪的知识
读《JavaScript 秘密花园》，根据自己知识缺漏摘抄部分内容，以及实际代码执行结果
2021-08-01 23:57:43
1227
原创 【读书】大话数据结构——未完
主要内容：各种数据结构及对应的操作表达方式：以上课的形式，趣味性比较强、推荐指数：****一、数据结构概念二、算法概念三、线性表0个或多个数据元素的有限序列1、顺序存储用一段地址连续的存储单元依次存储线性表的数据元素插入：L, i, e，时间复杂度O(n)L.length ==Maxsize || i<1 || i>L.length-1 return errorfor(j=L.length-1; j>i-1; j--){L[j+1] = L[j]}L[
2021-07-16 22:48:18
271
1
原创 React函数式组件项目小羽毛总结
路由跳转react-router提供了history.push api，直接使用push即可。注意组件需要用withRouter包起来，否则会报错history不存在 history.push("/my");(in promise) TypeError: history.push is not a function即使withRouter导出了，这里也要用props.history，因为history.push的api挂在props上面...
2021-03-07 21:14:26
794
原创 《你不知道的JavaScript—中卷》
也是两章，一：类型和语法，二：异步和性能。一：类型和语法1.1类型7种内置类型：null、undefined、boolean、number、string、symbol、object变量没有类型，它们持有的值有类型。类型定义了值的行为特征。undefined是一种值，undeclared表示变量还没声明过，但typeof这2种变量都是undefined1.2值js中的数字包含整数和浮点型，数字的方法：x.toExponential() //用指数格式显示x.tofixed() /.
2021-01-29 11:29:45
236
原创 2020年底前端面试总结
总结坐标：上海，运营转行时间：12月，共面了16家左右求职的一些经验：（1）先找小公司练练手增加信心；（2）没自信的时候跟自己说去试试吧，万一成了呢；（3）把找工作看成一场马拉松，急不得真的急不得！（4）面试结束后进行总结，不会的题目搞会因为可能下一场面试还会碰到；（5）简历上的项目多测试下，面试当场点出bug真的很尴尬关于面试题目：（1）总体来说，js、http、框架问的比较多，css问的比较少，html基本没问（2）js基础蛮多问到的，比如数组、对象的方法，建议复习下；（3）R
2021-01-17 00:57:55
277
4
原创 手机端适配
整体布局适配：CSS移动端布局适配缩放与300ms延时：html { touch-action: manipulation;}/* 兼容旧版本浏览器 */<script type='application/javascript' src='/path/to/fastclick.js'></script><script> document.addEventListener('DOMContentLoaded', function() { F.
2021-01-07 08:27:19
166
原创 CSS 图片加载优化
常见优化：在这里插入代码片图片压缩上传图片懒加载：先用一个占位，再去请求图片进行替换图片渐进加载：先请求一个模糊图片，再去请求高清图片替换源图优化 4. 根据不同需求加载不同的图——srcset属性只要图片原始大小>css设置宽度*DPR就会清晰（1）根据DPR选择<img src="image.jpg" srcset="image.jpg, image_2x.jpg 2x,
2021-01-02 14:40:52
525
1
原创 CSS 移动端布局适配
手机屏幕的逻辑像素一般在320px～428px这个范围，手机页面最常见的布局就是水平均分排列和两栏布局。Flex响应式布局，0适配科学得使用CSS布局，写出来的内容就是适配的。缺点设计师一般只有一稿，导致在其他大小的屏幕上没有标准设计；某些屏幕上样式出现问题需要实际检测出来后再微调；对于一些非匀分排列和两栏布局的设计风格就无能为力了等比缩放屏幕布局、大小固定，在不同设备上进行缩放 <meta name="viewport" content="width={设计稿宽度}, in.
2020-12-22 15:28:17
408
原创 浅析React useState原理
最简单的实现useState的数据存在React某个地方。useState是一个函数，接收一个初始值，存在自己的变量N中。存的时候判断下，如果已经有值，不存初始值；是undefined的时候再存。setN是一个函数，用接收来的新的值去修改state里面的变量。...
2020-12-21 19:03:43
559
原创 React 函数组件间通信
props——父子组件//父组件中直接传递变量名，子组件中props拿到function Father(){const a=100;return(<><Child1 a={a} /></>)}function Child1(props){const {a}=props;return(<div>{a}</div>)}useContext：局部的全局上下文变量——祖先和后代组件//声明一个context变量c.
2020-12-21 18:20:13
1127
原创 Web性能优化
用户访问页面的过程：用户输入/点击网站地址：（1）DNS查询，返回IP地址（2）用户往浏览器发请求（TCP连接）（3）服务器查询数据库（4）服务器将查询到的内容返回给用户（5）用户浏览器展示html、CSS、JS等内容性能优化（1）DNS服务优化本身不用优化，一般DNS都很快（如需的话可以买服务器）。但这里可以使用CDN，为后续传输内容过程优化做铺垫。CDN就近请求内容CDN（Content Delivery Network），即内容分发网络。其基本思路是尽可能避开互联网上有可能
2020-12-15 21:28:36
99
原创 React支持dart-scss（偷梁换柱）
背景node-sass下载速度慢，甚至下载报错。本地编译速度慢。而官方极力推荐使用Dart-sass，Dart运算速度快、易于安装所以希望在React项目中使用dart-scss。使用步骤：命令行安装yarn add dart-sass安装成功后将css文件后缀修改为scss，结果报错告知使用node-scss。查了一下才知道React只支持node-scss不支持dart-scss。于是google上输入create react app dart sass搜索研究，在github的crea
2020-12-13 23:06:39
845
1
原创 event loop
JavaScript是单线程，非阻塞的JS执行过程中，遇到一些事件（定时器、文件读取之类的），执行需要等很久，一直等着就会造成阻塞。所有JS有一套机制，即event loop，用来确定执行顺序，防止阻塞。浏览器中的event loop宏任务：script(整体代码)、setTimeout()、setInterval()、postMessage、I/O、UI交互事件微任务：new Promise().then(回调)、MutationObserver(html5 新特性)穿插一下任务执行完是否
2020-12-13 10:16:16
84
原创 TS相比JS
语雀文章链接：TS相比JSTypescript = JavaScript + Type，是JavaScript的超集JS是动态类型语言。C++，Java 是静态类型语言。Typescript 是静态类型语言，但是比较灵活。TS的编程体验既能享受静态类型带来的优点，如 IDE全方位的开发辅助和严格的代码检查；又能让代码像 Javascript 一样简洁和灵活好处：提高代码可读性，用类、接口、继承声明可以更加明确意图提高开发效率。（1）IDE可以进行智能提示了；（2）拥有类型检查，减少错误
2020-12-12 22:36:40
1515
原创 TS 永远达不到的类型never
避免出现新增了联合类型没有对应的实现，目的就是写出类型绝对安全的代码。TypeScript 2.0引入了一个新原始类型never。never类型表示值的类型从不出现。具体而言，never是永不返回函数的返回类型，也是变量在类型保护中永不为true的类型。never类型具有以下特征：never是所有类型的子类型并且可以赋值给所有类型。没有类型是never的子类型或能赋值给never（never类型本身除外）。在有明确never返回类型注解的函数中，所有return语句（如果有的话）必须有neve
2020-12-12 22:30:14
5977
原创 Redux基本理念
设计思想Web 应用是一个状态机，视图与状态是一一对应的。所有的状态，保存在一个对象里面。适用场景用户的使用方式复杂不同身份的用户有不同的使用方式（比如普通用户和管理员）多个用户之间可以协作与服务器大量交互，或者使用了WebSocket View要从多个来源获取数据概念和API用户接触的是View层，State修改会导致View更新。StoreStore 就是保存数据的地方。整个应用只能有一个 Store。用createStore生成import { createStore
2020-12-12 20:21:33
218
原创 纯函数
只要是同样的输入，必定得到同样的输出。纯函数是函数式编程的概念，必须遵守以下一些约束。不得改写参数不能调用系统 I/O 的API不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果...
2020-12-12 20:09:37
68
原创 《你不知道的JavaScript—上卷》
两章，一：作用域和闭包，二：this和对象原型。一：作用域和闭包1.1作用域js引擎执行代码的步骤——编译：词法分析，语法分析，代码生成工作原理：js引擎：负责整个程序的编译及执行过程编译器：负责语法分析及代码生成作用域：收集并维护由所有变量（声明的标识符）组成的一系列查询，并实施一套很严格的规则，确定当前执行的代码对变量的访问权限赋值操作的过程：编译器在当前作用域声明一个变量（如果之前没有），运行时引擎在当前作用域查找该变量，找到后赋值。编译器里面：LHS查询：赋值操作的目标是谁.
2020-12-09 23:38:34
360
原创 虚拟 DOM 和 DOM diff
虚拟DOM是什么是一个能代表DOM的 JavaScript 对象，包含了 tag、props、children 三个属性。<div id="app"> <p class="text">hello world!!!</p></div>转换成虚拟dom，如下：{ tag: 'div', props: { id: 'app' }, chidren: [ { tag: 'p', props: {
2020-11-19 20:51:14
250
原创 Vue 组件间通信的几种方式
.sync解决了什么问题？Vue中，父组件如果想传递数据或方法给子组件，可以用props。如果子组件想修改父组件的值怎么办呢？在没有.sync的时候，使用eventbus的on和emit进行监听和修改：React中如何解决？（1）子组件通过props调用父组件的函数，从而修改父组件的data；（2）需要共享的数据用Redux来管理，使用Redux提供的方法来修改。...
2020-10-23 20:55:15
355
原创 Vue computed和watch
computed是计算属性。根据依赖的数据动态展示计算结果。特点：（1）在Vue中声明该属性以函数形式，但是调用的时候可以当成普通属性直接使用，无需加()；（2）计算的结果是有缓存的，如果依赖的属性值没有变化，该计算属性就不会重新计算（Vue内部做了特殊处理）watch是侦听。可以监控属性的改变。当监听的数据发生变化时可以执行回调函数。特点：（1）从无到有算新生，不算变化，不在watch的默认监听范围内，可以用immediate值设置为true来把第一次的出生过程放进监听范围内；（2）..
2020-10-22 20:36:31
92
原创 Vue修改data以实现数据响应式
Vue为了实现在数据变化时对页面重新渲染。所以在初始化时对传进来来的数据对象进行监听。怎么保证你的变化我Vue能监听到？监听的操作就是：对数据对象的每一个数据，内部内部声明一个变量，存储这个传进来的初始值，然后开始了代理模式。后续对这个数据的读取和修改，实际都是对这个内部变量的getter和setter。由此所有的修改都会经过setter，那么只需要setter的时候触发监听函数，渲染页面即可。当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所
2020-10-21 23:29:04
1058
原创 vue-loader助我愉快在运行时版里写html内容
Vue完整版（vue.js）与运行时（vue.runtime.common.js）：完整版：同时包含编译器和运行时的版本运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码完整版可以直接在客户端...
2020-10-20 20:49:19
347
原创 Webpack 打怪升级
2020/10/10 Webpack已经发布版本5了如何开始学习：官网-指南=起步：https://v4.webpack.docschina.org/guides/getting-started/命令写在终端中：初始化package.json文件npm init -y // 结果： { "name": "demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "tes
2020-10-18 13:53:17
160
原创 浅析MVC
MVC 三个对象分别做什么，给出伪代码示例1、基本概念MVC（Model–view–controller）模式是软件工程中的是一种架构设计模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。概念是来源于后端的框架构建思想，是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。模型（Model） - 用于封装与应用程序的业务逻辑相关的数据以.
2020-10-17 17:16:52
301
原创 前端面试十连问
什么是闭包？闭包的用途是什么？闭包的缺点是什么？闭包就是在函数中调用其外面的变量值。如下，f2中使用了变量a的值就叫做闭包。f1(){let a=1;f2(){console.log(a)}return f2}f1.f2()用途：将变量封装起来，避免外界修改。缺点：因为只要f2存在，a就会一直使用，不会被垃圾回收机制回收，会留下来占内存。如果声明很多的闭包可能会造成内存泄漏。call、apply、bind 的用法分别是什么？假设要调用对象x的fn函数，argu为其他参数fn.
2020-10-11 21:01:21
339
原创 HTTP 状态码
100~199 请求正被处理200-299 请求成功处理300 -399 请求需要附加操作，常见的例子如重定向400-499 客户端出错导致请求无法被处理500-599 服务器处理出错客户端：是指与服务器相对应，为客户提供本地服务的程序。一般安装在普通的用户机上，需要与服务端互相配合运行。互联网发展以后，较常用的客户端包括了如万维网使用的网页浏览器，收寄电子邮件时的电子邮件客户端，以及即时通信的客户端软件等。常见：100 Continue请求者应当继续提出请求。 服务器返回此代码表示已
2020-10-11 12:34:59
113
原创 #再读DOM# （1）DOM 事件模型
- 概念事件：事件是用户或者浏览器自己执行的某种动作，是文档或者浏览器发生的一些交互瞬间事件流：当一个事件被触发时，一个event对象将被创建并顺序的传递给事件监听者们。事件传递的顺序称为事件流。事件处理程序：响应事件的函数。如click是事件名称，加上"on"开头，事件处理程序是onclick事件在子元素和父元素之间的传播分为3个阶段：（1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段；（2）目标阶段：真正的目标节点正在处理事件的阶段；（3）冒泡阶段：事件从目标节点自下而上向win
2020-10-04 21:03:19
273
原创 #再读JS# （6）jQuery设计思想
jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。- 选择网页元素// CSS选择器 $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myClass的div元素 $('input[name=first]') // 选择name属性等于first的input元素 // 特定表达式 $('a:first') //选择网页中第一个a元
2020-10-04 18:19:40
98
原创 #再读JS# （5）JS世界
构造函数（Function、Array、Object）的prototype和__proto__如何方便的区分开：首先理解原型，__proto__用于存放共有属性的对象的地址，等同于其构造函数的prototype的地址。我给自己总结的规律是：prototype是给孩子的，因为孩子可以用自己的__proto__访问到，所以需要把共有属性的地址放里面。而__proto__是给自己的，存自己的共有属性，所以存放创建自己的对象的属性的地址。那么，如构造函数Object，prototype存放的是Obje.
2020-09-28 22:30:23
96
原创 #再读JS# （4）位运算符
使用^来交换a、b的值：let a=5;let b=8;a=a^b;b=b^a;a=a^b;基本规则：二进制上，两个相同则为0，否则为1。（类似数学乘法负负得正，0位正，1为负）为了理解它，我们先假装：a和b都只有一位数，a^b的值存在c里面a正b正，则c正，c乘a为正，c乘b为正；a负b负，则c正，c乘a为负，c乘b为负；a正b负，则c负，c乘a为负，c乘b为正；a负b正，则c负，c乘a为正，c乘b为负。每一位都依照上面规则计算，则实现了a与b每一位的交换。而如果，先把c的.
2020-09-28 12:44:37
89
原创 #再读JS# （3）for循环打印6个6——JS 的运行机制
js函数执行顺序js是单线程的，一条条执行队列中的任务。js从上往下解析的时候，碰到宏任务、微任务、异步任务。。。。异步任务先放在一边，等到宏任务做完了再去。如下代码，等到去执行setTimeout时，i已经变成6let i = 0for(i = 0; i<6; i++){ setTimeout(()=>{ console.log(i) },0)}let配合使用产生神效配合let使用可实现常规想法，可打印出012345。说是ES6为了迎合大多数人的想法.
2020-09-27 12:35:43
472
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人