望京十三兄-CSDN博客

原创浅拷贝和深拷贝三种方法

扩展运算符和 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 2958 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 7127

原创前端安全及加解密

信息系统中可选用的通用密码算法主要包括SM2、SM3、SM4 等，不应使用MD5、DES、SHA-1、RSA-1024 等被证明存在安全风险的密码算法。信息系统使用了MD5、DES、SHA-1、RSA-1024 等密码算法的，应在系统升级改造时逐步替换成国产密码算法。

2024-03-07 17:33:55 358

原创 Blob 对象实现文件预览下载

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。官方关于blob的介绍。文件预览（wps）

2023-11-07 15:14:31 242

原创前端实现拖拽的方案

创建一个区域只需要在标签上添加 ondragover 和 ondrop 方法即可，表示这个区域可放置并进行处理。此时，元素已经可以拖动了，但会显示一个禁止的图标，这是因为没有可放置的区域。还需要在需要拖动的元素上添加 ondragstart 方法。

2023-04-06 17:17:34 3258

原创前端需要知道的自动化测试

钩子函数 beforeAll() beforeEach() afterEach() afterAll()Jest ->基础API -异步测试 -> mock。describe( describe() ) 分组。快照-timer 测试 -DOM测试。

2023-04-05 20:39:35 103

原创如何实现一个微前端框架

微前端框架搭建，兼容qiankun

2023-03-12 22:47:16 647

原创 webpack认知与项目实践

webpack是一个前端模块化打包解决方案,又是一个可以融合运用各种前端新技术的平台，可以将零散的JS代码打包到一个JS文件中

2022-10-21 17:05:20 2160

原创 200人抽奖10次指定人员

有200个人参加抽奖，每次抽出一个人，不能重复，必须每个人都要抽中奖前面10次抽奖要选中固定的10个人，每次就从这10人中随机抽取一人，不能重复从第11次开始就从剩余的190人当中抽奖，不能重复，直到抽奖结束已经中过奖的人不能再次抽奖.........

2022-08-01 22:55:35 286

一、文档官方文档：名词解释 · 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 434

原创项目配置文件规范

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 29

原创 READNE规范

Introduction——介绍项目首先，有一个项目名称，当然，如果有logo更好。Features再接下来，一个好的项目简介，能够帮助使用者了解他能够使用这个工具干什么，能不能满足自己的需求。一般来说，我们希望从简介中，了解下面一些信息：什么语言写的？Node、Python 还是其他什么这个项目的用途是什么最新版本信息构建、测试结果等信息 Demo 演示地址或者官网Installation——安装这部分是告诉使用者如何快速开始使用。首先，告诉用户如何去获取以及初始化

2022-04-26 14:22:56 88

原创前端性能优化

浏览器加载和dom

2022-04-17 11:15:38 39

原创 JS 动态创建表格

首先写出一个自定义表头，DOM规定thead只能有一个，tbody可以有多个，tfoot只能有一个：<table width="100%" id="table1" border="1px"> <thead> <tr> <th>编号</th> <th>......

2022-04-16 01:03:41 2336

原创前端离线存储

前端离线重要性离线优先是给用户体验最好的，不管是接口请求还是什么操作 Application Cache 与 Cache Storage 不管是浏览器缓存还是APP的缓存，都可以采用Application Cache或者 Cache Storage 缓存。请求接口，拿到后台数据进行与Application Cache进行比较，如果一样，直接展示，如果不一样，展示后台数据，同时异步进行更新Application Cache数据。 Application Cache 实现：开启缓存 <!D.

2022-04-14 20:40:37 792

原创 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 201

原创大起底 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 161

原创搞懂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 1248 2

原创对 Promise 的若干次重试

问题描述：实现一个 retry 方法可以对 promise 进行重试若干次，要求- 如果 promise 正常返回结果，那么直接返回正常的结果- 如果 promise 出错并且没有达到重试上限，进行重试- 如果达到了重试上限还是出错，将错误抛出......

2021-05-12 10:54:17 448

原创 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 141 1

原创浏览器相关知识点总结

判断浏览器内核判断是否原生Chrome：只有原生Chrome中存在一种MimeType“application/vnd.chromium.remoting-viewer”，由此可以判断浏览器是加壳Chrome或是原生Chrome。判断是否为IE浏览器：只有IE内核的浏览器存在ActiveXObject对象。由此可以判断是否为IE浏览器.........

2021-02-27 18:56:43 768 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 150

原创前端中高级-网络篇

一、浏览器中输入：“`www.xxx.com`” 之后都发生了什么？请详细阐述？解析：经典的网络协议问题。答：由域名→IP地址寻找IP地址的过程依次经过了浏览器缓存、系统缓存、hosts文件、路由器缓存、递归搜索根域名服务器。建立TCP/IP连接（三次握手具体过程）由浏览器发送一个HTTP请求 HTTP协议是一种基于TCP/IP的应用层协议，进行HTTP数据请求必须先建立TCP/IP连接可以这样理解：HTTP是轿车，提供了封装或者显示数据的具体形式；Socket是发动机，提供了网络

2020-08-01 10:53:08 1985

原创 loader 和 plugin 区别和自己手动实现

loader loader从字面的意思是加载。由于webpack 本身只能打包commonjs规范的js文件，对css、图片等格式的文件无法打包，就需要引入第三方的模块进行打包。 loader虽然是扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译。 loader是运行在NodeJS中，仅仅只是为了打包。如：css-loader和style-loader模块是为了打包css的 ...

2020-07-31 09:53:58 571

原创 react 高阶组件的两种写法

代理方式高阶组件 export default ()=> WrappedComponent => class A extends Component { render (){ const { ...otherProps } = this.props return <WrappedComponent {...otherProps}/> }} 继承方式高阶组件 export default ()=> WrappedComponent =&gt

2020-07-06 21:37:18 683

原创 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 286

原创什么网站能赚钱

现在都已经2020年了，还能通过网站赚钱吗？今天就说说哪些类型的网站是可以赚钱的。专业知识类型网站。如：木匠教学网站、分享美食做法的网站、知乎是这方面的网站也开始赚钱工具类型网站。排列组合内容型网站。如：手机号码排序查询并显示归属地等、电话号码查询、拼音查询、邮编查询等、查询有关春天的诗句、最佳进球排行榜查询、中国排名网站 chinaTop100.com how to 类型网站。 weiki 类型网站。如：维基百科再创新类型、表情介绍网站产品资料介绍网站。对产品汇总介绍，可结合内容

2020-05-14 22:24:20 381

原创前端模块化工程化

# 前端模块化实现## 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 419

原创 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 108

原创 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 200

原创 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 108

原创 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 500 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 223

原创 JS 知识点总结归纳（中高级）

1. 如何判断当前脚本运行在浏览器还是 node 环境中？（阿里）this === window?'browser':'node'通过判断 Global 对象是否为window，如果不为window ，当前脚本没有运行在浏览器中。2. IE 和标准下有哪些兼容性写法？var ev = ev || window.eventdocument.documentElement....

2020-04-06 21:25:08 665 1

原创异步编程的回调函数形式和发布订阅模式

１.　回调函数形式：function f1(callback){ callback();}function f2(callback){ callback();}function f3(callback){ callback();}f1(f2(f3));这种方式优点是思路清晰，以串行的方式进行编程。缺点是会形成回调地狱，过多的回调使代码难以理解，难...

2020-04-06 11:08:15 595

原创 4月4日清明节各大网站是如何变灰的

看代码可以发现，各大网站变灰是通过设置样式表中 css 的滤镜效果实现的。filterCSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。兼容性的写法为：-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-...

2020-04-04 22:47:32 506

空空如也

空空如也