望京十三兄的博客

原创 低代码平台开发方式

充分利用 jQuery的灵活性和插件支持，实现核心功能。能够快速构建动态页面并支持复杂的交互功能，其简单易用的特性适合一些特定场景，如快速开发和维护旧项目。

原创 App Cache 方案

一、Web 应用缓存方案1. Service Worker + Cache API2. IndexedDB - 结构化数据缓存

原创 前端排查项目上线后页面白屏

资源加载失败： JS/CSS 文件 404（部署路径错误、CDN 刷新问题）；Charles 抓包、Sentry 监控、Chrome Performance 面板。Sentry / Fundebug 捕获运行时错误，performance API 监控白屏时间（FP/FCP/LCP），自定义上报；灰度发布 + 快速回滚机制，静态资源加 hash + CDN 刷新，做好 SourceMap 上传（便于线上调试）。环境/配置问题：接口域名配置错误（测试环境配到线上）；子应用加载失败、沙箱冲突。

原创 微前端开发

​。

原创 前端工程化

前端工程化指通过工具、流程和规范提升前端开发效率、质量和可维护性。核心目标包括模块化、自动化、标准化和性能优化。

原创 字符串、数组的括号匹配

原创 js笔试题目

"Aacbbcc" 输出 "cccbbAa"

原创 前端性能优化体系

降包体积，eslint自定义插件，禁用公共库引入。首屏秒开：懒加载 缓存 离线化 并行化。减少请求发起量，合并。

原创 前端安全及加解密

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

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

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

原创 前端实现拖拽的方案

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

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

微前端框架搭建，兼容qiankun

原创 webpack认知与项目实践

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

原创 音视频通信解决方案

一、文档官方文档：名词解释 · Pano开发者中心二、开发流程到Pano控制台获取应用的App Secret，然后在你的App Server上调用Pano的RESTful API来申请Token 申请token需要appId、userId、channelId、duration、privileges等信息 开发测试阶段，可以在Pano控制台生成临时Token，临时Token的音视频通话最大时长被限制为 30 分钟。 到GitHub或Gitee (码云)上Clone示例项目 到Pa.....

原创 搞懂React Hooks之 useState, useCallback, useEffect, useRef ，useMemo和useEffect

useState, useCallback, useEffect, useRefhttps://blog.youkuaiyun.com/MAMAsomers/article/details/114888005useMemo和useEffect https://www.jianshu.com/p/94ace269414d

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

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

原创 前端中高级-网络篇

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

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

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

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

扩展运算符和 Object.assign() 都不是深拷贝 扩展运算符： let outObj = { inobj: { a: 1, b: 2 }}let newObj = { ...outObj}newObj.inobj.a = 2console.log(outObj); //{ inobj: { a: 2, b: 2...

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

1. 如何判断当前脚本运行在浏览器还是 node 环境中？2. IE 和标准下有哪些兼容性写法？

原创 Promise 对象循环调用

解答：首先定义一个可重复调用 Promise 的方法functionretry(){varpromise;promise=newPromise(function(resolve,reject){varelapse=Math.random()*2000;setTimeout(resolve,elapse);...

原创 前端中高级知识点问答

一、以下函数的执行结果var a = 'a';function A() { console.log(a); var a = 'b'; console.log(a);}A();// 结果// undefined// 'b'变形1：var a = 'a';function A() { console.log(a); let a ...

原创 JS题目（实战采坑归纳篇）

一、以下函数的输出结果1、var a = 'a';function A(){ console.log(a); var a = 'b'; console.log(a)}A();//结果//undefined//b2、变形 var a = 'a'; function A(){ console.log(a); let a =...

原创 前端面试题（中高级）

面试题1、 请详细说明在哪些情况下会出现跨域问题？解决跨域的方案有哪些？解答：浏览器执行的一个脚本与其他资源如果不同源即为跨域。解决方式有Jsonp：利用script标签src外联引入文件不受同源策略限制，可以在页面动态添加script ，引入后端api接口地址，并以get的方式将前端回调处理函数名称告诉后端，后端响应请求时将回调返回，并将数据以参数形式传递回去 document..........

原创 数组遍历六种方法

forEach() some() every() map() filter() reducer()1、forEach()var arr = [1, 2, 3, 4];arr.forEach((item, index, arr) = > { console.log(item) //结果为1,2,3,4 })//forEach遍历数组，无返回值，不改变原...

原创 解决微信浏览器alert问题的原生js实现

今天遇见微信浏览器alert弹框问题，怎么可以出现这个 关闭网页 ，好不容易获取的客户就这样流失吗？不！ 解决吧，正文如下 ，拿去自用 ，觉得有用请点个赞！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title><...

原创 addListener() 给单个事件绑定多个事件处理器

function addListener(element,event,listener){ if (element.addEventListener){ element.addEventListener(event, listener, false); } else if (element.attachEvent){ element.attachE...

原创 滚动视觉差

什么是滚动视觉差呢？  视差滚动是从英文（Parallax Scroller）翻译过来，是近年来比较流行的一些网页设计应用，它是利用多层背景加上利用鼠标拖动滚动条来形成一些像动画一样的视觉效果，非常有感觉。应用实例  http://www.putzengel.at/ http://wootten.com.au/process/线上demo ：https://codyhou...

原创 原地摇摆的木马和一些GIF动画特效

最近做了一个H5的小项目：包含一些动画特效 ，如 微风吹动的窗帘、持续闪烁的灯光、随风摆动的树枝、热气腾腾的一杯咖啡、原地摇摆的木马。。。那么来说一下实现的方式吧。首先一个原则能用css实现就不用js，能用小图的就绝不用大图，那么gif可以作为减少页面复杂程度和提高性能的选择方案。开始吧：css实现原地摇摆的木马 ，&lt;!DOCTYPE html&gt;&lt;html lang="en"&...

原创 网格背景棋盘实现纯css

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;网格&lt;/title&gt; &lt;script&gt;document.documentElement.style.fontS

原创 移动端无缝轮播（全适配）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>移动端无缝轮播（全适用）</title> <meta name="keywords" content="移动端无缝轮播（全适用）"/> &lt...

原创 工具使用-AI

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z重做：Ctrl/Command + Y加粗：Ctrl/Command + B斜体：Ctrl/Command + I标题：Ctrl/Command + S

原创 Electron

ipcRenderer.on()ipcRenderer.invoke()

原创 富文本编辑器

通常情况下，可以用典型的受控组件的形式来使用本编辑器。属性，这类似于React中原生的input组件。

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

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

原创 前端测试的一些知识学习

Vue单元测试。

原创 正则表达式高效领风骚

高效的正则

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

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

原创 图片文件上传

图片文件上传

原创 git工作流执行规范

在一个规范的开发团队中，严格、统一、有效的git提交流程管理十分必要。为了优化前端组的代码管理流程、避免人为失误对业务造成的影响，架构组制定了本git工作流执行规范。目前端组遵循的工作流包括两种：1、Git-flow（关于Git-flow的介绍）2、GitHub-flow（关于GitHub-flow的介绍）两种工作流在使用方式和适用场景有较大不同，具体可参考《GitHub Flow 及 Git Flow 流程使用時機》由于Git-flow和GitHub-flow流程的差异，在前端组的适用