- 博客(85)
- 收藏
- 关注
RSS订阅
原创 浅拷贝和深拷贝三种方法
扩展运算符和 Object.assign() 都不是深拷贝 扩展运算符： let outObj = { inobj: { a: 1, b: 2 }}let newObj = { ...outObj}newObj.inobj.a = 2console.log(outObj); //{ inobj: { a: 2, b: 2...
2020-04-14 20:35:17
3120
2
原创 addListener() 给单个事件绑定多个事件处理器
function addListener(element,event,listener){ if (element.addEventListener){ element.addEventListener(event, listener, false); } else if (element.attachEvent){ element.attachE...
2019-03-12 18:10:45
7218
原创 前端安全及加解密
信息系统中可选用的通用密码算法主要包括SM2、SM3、SM4 等，不应使用MD5、DES、SHA-1、RSA-1024 等被证明存在安全 风险的密码算法。信息系统使用了MD5、DES、SHA-1、RSA-1024 等密码算法的，应在系统升级改造时逐步替换成国产密码算法。
2024-03-07 17:33:55
401
1
原创 Blob 对象实现文件预览下载
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。官方关于blob的介绍。文件预览 （wps）
2023-11-07 15:14:31
503
原创 前端实现拖拽的方案
创建一个区域 只需要在标签上添加 ondragover 和 ondrop 方法即可，表示这个区域可放置并进行处理。此时，元素已经可以拖动了，但会显示一个禁止的图标，这是因为没有可放置的区域。还需要在需要拖动的元素上添加 ondragstart 方法。
2023-04-06 17:17:34
3730
原创 前端需要知道的自动化测试
钩子函数 beforeAll() beforeEach() afterEach() afterAll()Jest ->基础API -异步测试 -> mock。describe( describe() ) 分组。快照-timer 测试 -DOM测试。
2023-04-05 20:39:35
150
原创 webpack认知与项目实践
webpack是一个前端模块化打包解决方案,又是一个可以融合运用各种前端新技术的平台，可以将零散的JS代码打包到一个JS文件中
2022-10-21 17:05:20
2306
原创 200人抽奖10次指定人员
有200个人参加抽奖，每次抽出一个人，不能重复，必须每个人都要抽中奖前面10次抽奖要选中固定的10个人，每次就从这10人中随机抽取一人，不能重复从第11次开始就从剩余的190人当中抽奖，不能重复，直到抽奖结束已经中过奖的人不能再次抽奖.........
2022-08-01 22:55:35
349
原创 音视频通信解决方案
一、文档官方文档：名词解释 · Pano开发者中心二、开发流程到Pano控制台获取应用的App Secret，然后在你的App Server上调用Pano的RESTful API来申请Token 申请token需要appId、userId、channelId、duration、privileges等信息 开发测试阶段，可以在Pano控制台生成临时Token，临时Token的音视频通话最大时长被限制为 30 分钟。 到GitHub或Gitee (码云)上Clone示例项目 到Pa.....
2022-05-13 11:03:05
566
原创 项目配置文件规范
Git忽略文件：.gitignore# Misc files*~~*._*.DS_StoreDesktop.iniThumbs.db.Spotlight-V100.Trashes # dependenciesnode_modules/.pnp.pnp.js # testing/coverage # Output filesdist/ # local env files.env.local.env.*.local # Log filesnpm-debu
2022-04-26 14:27:22
78
原创 READNE规范
Introduction——介绍项目首先，有一个项目名称，当然，如果有logo更好。Features再接下来，一个好的项目简介，能够帮助使用者了解他能够使用这个工具干什么，能不能满足自己的需求。一般来说，我们希望从简介中，了解下面一些信息：什么语言写的？Node、Python 还是其他什么 这个项目的用途是什么 最新版本信息 构建、测试结果等信息 Demo 演示地址或者官网Installation——安装这部分是告诉使用者如何快速开始使用。首先，告诉用户如何去获取以及初始化
2022-04-26 14:22:56
116
原创 JS 动态创建表格
首先写出一个自定义表头，DOM规定thead只能有一个，tbody可以有多个，tfoot只能有一个：<table width="100%" id="table1" border="1px"> <thead> <tr> <th>编号</th> <th>......
2022-04-16 01:03:41
2377
原创 前端离线存储
前端离线重要性离线优先是给用户体验最好的，不管是接口请求还是什么操作 Application Cache 与 Cache Storage 不管是浏览器缓存还是APP的缓存，都可以采用Application Cache或者 Cache Storage 缓存。请求接口，拿到后台数据进行与Application Cache进行比较，如果一样，直接展示，如果不一样，展示后台数据，同时异步进行更新Application Cache数据。 Application Cache 实现：开启缓存 <!D.
2022-04-14 20:40:37
866
原创 es6 语法专栏
ES6字符串扩展方法,三个方法都支持第二个参数，表示开始搜索的位置; let str = 'Hello world!';console.log(str.includes('o')) // true ----表示是否找到了参数字符串;类似ES5 indexOf()console.log(str.startsWith('Hello')) // true ----表示参数字符串是否在原字符串的头部;console.log(str.endsWith('!')) // true ----表示参数...
2022-04-14 07:57:12
232
原创 大起底 ajax 、axios 和fetch
1. ajax传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。使用：var xhr = new XMLHttpRequest();xhr.open('GET','请求的服务器地址',true);xhr.setRequestHeader(header,value);xhr.onreadystatechange = function()
2021-08-29 22:18:03
231
原创 搞懂React Hooks之 useState, useCallback, useEffect, useRef ，useMemo和useEffect
useState, useCallback, useEffect, useRefhttps://blog.csdn.net/MAMAsomers/article/details/114888005useMemo和useEffect https://www.jianshu.com/p/94ace269414d
2021-06-06 23:20:26
1462
2
原创 对 Promise 的若干次重试
问题描述：实现一个 retry 方法可以对 promise 进行重试若干次，要求- 如果 promise 正常返回结果，那么直接返回正常的结果- 如果 promise 出错并且没有达到重试上限，进行重试- 如果达到了重试上限还是出错，将错误抛出......
2021-05-12 10:54:17
535
原创 Chrome 调试技巧总结
alert()； console 命令 console.log(); console.error(); console.info()； console.warn(); console.debug(); console.log("%s年",2021)； console.log("%c","color:#e4393c"); 可以设置显示的颜色。 console.dirxml(ul) ; //直接展示元素的dom树形结构 console.dir(obj)...
2021-03-04 12:52:32
180
1
原创 浏览器相关知识点总结
判断浏览器内核判断是否原生Chrome：只有原生Chrome中存在一种MimeType“application/vnd.chromium.remoting-viewer”，由此可以判断浏览器是加壳Chrome或是原生Chrome。判断是否为IE浏览器：只有IE内核的浏览器存在ActiveXObject对象。由此可以判断是否为IE浏览器.........
2021-02-27 18:56:43
864
1
原创 redux 的用法
redux 的用法import {createStore} from 'redux'const store = createStore(counter);store.dispatch({type:'INCREMENT'});const counter =( state =0,action)=>{ switch(action.type){ case 'INCREMENT': return state+1 default..
2021-01-06 22:38:17
184
原创 前端中高级-网络篇
一、浏览器中输入：“`www.xxx.com`” 之后都发生了什么？请详细阐述？解析：经典的网络协议问题。答：由域名→IP地址 寻找IP地址的过程依次经过了浏览器缓存、系统缓存、hosts文件、路由器缓存、 递归搜索根域名服务器。 建立TCP/IP连接（三次握手具体过程） 由浏览器发送一个HTTP请求 HTTP协议是一种基于TCP/IP的应用层协议，进行HTTP数据请求必须先建立TCP/IP连接 可以这样理解：HTTP是轿车，提供了封装或者显示数据的具体形式；Socket是发动机，提供了网络
2020-08-01 10:53:08
2541
原创 loader 和 plugin 区别和自己手动实现
loader loader从字面的意思是加载。 由于webpack 本身只能打包commonjs规范的js文件，对css、图片等格式的文件无法打包，就需要引入第三方的模块进行打包。 loader虽然是扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译。 loader是运行在NodeJS中，仅仅只是为了打包。 如：css-loader和style-loader模块是为了打包css的 ...
2020-07-31 09:53:58
629
原创 react 高阶组件的两种写法
代理方式高阶组件 export default ()=> WrappedComponent => class A extends Component { render (){ const { ...otherProps } = this.props return <WrappedComponent {...otherProps}/> }} 继承方式高阶组件 export default ()=> WrappedComponent =>
2020-07-06 21:37:18
742
原创 TypeScript中的泛型的理解
把类型当作是参数一样传递 <数据类型>只能是引用类型定义泛型：function identity<T>(arg: T): T { return arg;}我们把这个版本的identity函数叫做泛型，因为它可以适用于多个类型。使用泛型：两种方法第一种是，传入所有的参数，包含类型参数let output = identity<string>("myString"); // type of output will be 's...
2020-05-23 12:07:50
339
原创 什么网站能赚钱
现在都已经2020年了 ，还能通过网站赚钱吗？今天就说说哪些类型的网站是可以赚钱的。专业知识类型网站。如：木匠教学网站、分享美食做法的网站、知乎是这方面的网站也开始赚钱 工具类型网站。 排列组合内容型网站。如：手机号码排序查询并显示归属地等、电话号码查询、拼音查询、邮编查询等、查询有关春天的诗句、最佳进球排行榜查询、中国排名网站 chinaTop100.com how to 类型网站。 weiki 类型网站。如：维基百科再创新类型、表情介绍网站 产品资料介绍网站。对产品汇总介绍，可结合内容
2020-05-14 22:24:20
418
原创 前端模块化工程化
# 前端模块化实现## 1）CommonJS CommonJS 是一个服务器端的同步模块化规范 实现者：Node.js```//a.jsmodule.exports = { a:function(){} b:'xxx'}```加载方式：```//b.jsvar m = require('./a');m.a();```## 2) AMD AMD 就是异步模块定义规范，是一个客户端的JS模块化规范。 ......
2020-05-12 22:24:46
444
原创 JS数据类型相关
自定义方法判断数据类型const isType = type => target =>{ let stringType = Object.prototype.toString.call(target) return `[object ${type}]` === stringType}const isArray = isType('Array'); //注意传入 ...
2020-04-16 22:44:37
163
原创 JS 操作时间对象
1. 在页面上显示当前时间 <div> 当前时间：<input id="nowTime" style="border:0;width:300px;font-size:18px" /> </div>window.onload = function () { var nowTime = document.getElementBy...
2020-04-16 22:44:20
229
原创 JS 常见的操作字符串
1. 将字符串 foo = "get-element-by-id" 转化成驼峰表示法 “getElementById”.functioncamalCase(msg){letarr=msg.split("-");for(leti=1;i<arr.length;i++){arr[i]=arr[i].charAt(0).toUpperC...
2020-04-16 22:43:40
133
原创 JS 操作数组
1. 用 js 实现随机选取 10 -100 之间的 10 个数字，存入一个数组并排序。functionrandomNum(aArray,len,min,max){if(len>=(max-min)){return'超过'+min+'-'+max+'之间的个数范围'+(max-min-1)+'个的总数';}...
2020-04-16 22:43:24
706
1
原创 川剧变脸娃娃
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-styl...
2020-04-12 15:20:38
262
原创 JS 知识点总结归纳（中高级）
1. 如何判断当前脚本运行在浏览器还是 node 环境中？（阿里）this === window?'browser':'node'通过判断 Global 对象是否为window，如果不为window ，当前脚本没有运行在浏览器中。2. IE 和标准下有哪些兼容性写法？var ev = ev || window.eventdocument.documentElement....
2020-04-06 21:25:08
780
1
原创 异步编程的回调函数形式和发布订阅模式
１. 回调函数形式：function f1(callback){ callback();}function f2(callback){ callback();}function f3(callback){ callback();}f1(f2(f3));这种方式优点是思路清晰，以串行的方式进行编程。缺点是会形成回调地狱，过多的回调使代码难以理解，难...
2020-04-06 11:08:15
662
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人