随笔分类 -  Javascript

1 2 3 下一页
JS实现浏览器全屏F11
摘要：一、问题引入 预览图片时自动全屏 二、解决方案 document原生API获取全屏状态（document.fullscreen 已被弃用，可用document.fullscreenElement 只读属性返回当前页面中以全屏模式呈现的 Element，如果当前页面未使用全屏模式，则返回 null。） 阅读全文
posted @ 2025-02-14 15:28 盼星星盼太阳 阅读(31) 评论(0) 推荐(0) 编辑
防止浏览器记住密码
摘要：一、问题引入 客户要求登录时，不能被浏览器截取记录密码 二、问题分析 问题的根源就在于浏览器会捕捉你的password的输入记录，以最后一次为节点进行存储。所以不管我们对password做什么处理，只要是password进行了输入，都会被拦截。 三、解决方案 使用css属性-webkit-text- 阅读全文
posted @ 2024-12-05 10:30 盼星星盼太阳 阅读(42) 评论(0) 推荐(0) 编辑
前端长列表优化
摘要：一、场景引入 长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。 二、解决方案 1.css属性 conte 阅读全文
posted @ 2024-01-18 11:25 盼星星盼太阳 阅读(692) 评论(0) 推荐(0) 编辑
img src获取不到图片，加载默认图片
摘要：记一个场景： img src匹配服务器图片，匹配不到显示碎图 <img src="?" id="imgId" onerror="this.onerror=null;this.src='images/xxx.png'"> 可通过onerror指定一张默认图片； 注意：若默认图片也不存在，会进入死循环， 阅读全文
posted @ 2024-01-12 14:58 盼星星盼太阳 阅读(185) 评论(0) 推荐(1) 编辑
前端开发中的Error以及异常捕获
摘要：一、JavaScript中的Error JavaScript中，Error是一个构造函数，通过它创建一个错误对象。当运行时错误产生时，Error的实例对象会被抛出。构造一个Error的语法如下： // message: 错误描述 // fileName: 可选。被创建的Error对象的fileNam 阅读全文
posted @ 2022-11-22 10:22 盼星星盼太阳 阅读(845) 评论(0) 推荐(0) 编辑
全局监控Promise错误
摘要：一、问题引入 Promise 在前端中的使用已经非常普遍了，但是许多开发者或许习惯了链式调用却忘了捕获 Promise 的错误了。 例如： function forgetCatchError () { async() .then(() => { // code.. }) .then(() => co 阅读全文
posted @ 2022-11-22 09:51 盼星星盼太阳 阅读(629) 评论(0) 推荐(0) 编辑
ES6对象的super关键字
摘要：super是es6新出的关键字，它既可以当作函数使用，也可以当作对象使用，两种使用方法不尽相同 一、super作为函数 super用作函数使用的时候，代表父类的构造函数，es6规定在子类中使用this之前必须先执行一次super函数，super相当于Father.prototype.construc 阅读全文
posted @ 2022-10-13 10:56 盼星星盼太阳 阅读(351) 评论(0) 推荐(0) 编辑
前端JS常用设计模式
摘要：话不多说，这里记录一些常见的设计模式，常看常新，也能提升JavaScript编程水平 一、设计原则 二、单例模式 单例模式的定义是,保证一个类仅有一个实例,并且要提供访问他的全局api 单例模式在前端是一种很常见的模式,一些对象我们往往就只需要一个,如VueX,React-redux等框架全局状态管 阅读全文
posted @ 2022-06-22 16:09 盼星星盼太阳 阅读(320) 评论(0) 推荐(0) 编辑
数组扁平结构与树状tree结构转化
摘要：话不多说，tree数据结构如图： 一、tree结构扁平化 function flatFuc(arr) { return arr.reduce((pre, cur) => { if (cur.children) { let curArr = JSON.parse(JSON.stringify(cur. 阅读全文
posted @ 2022-06-20 16:48 盼星星盼太阳 阅读(260) 评论(0) 推荐(0) 编辑
深拷贝常用方法与循环引用问题
摘要：一、JSON.parse()与JSON.stringfy()方法 json序列化直接转化 const person = { name: 'seven', info: { age: 20 } } const person1 = JSON.parse(JSON.stringify(person)) pe 阅读全文
posted @ 2022-05-13 17:38 盼星星盼太阳 阅读(266) 评论(0) 推荐(0) 编辑
Promise原理浅析以及简易实现
摘要：一、什么是Promise Promise 是一种用于异步编程的设计模式，它解决了传统回调函数（callback）所带来的回调地狱（Callback Hell）问题。在 JavaScript 中，Promise 是 ECMAScript 6（ES6）引入的一种特性，用于处理异步操作，使得异步代码更易于 阅读全文
posted @ 2022-05-12 14:19 盼星星盼太阳 阅读(124) 评论(0) 推荐(0) 编辑
由Credentials引起的cors跨域问题
摘要：一、问题引入 express搭建服务，使用fetch接口调用显示跨域，具体如下 The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the re 阅读全文
posted @ 2022-04-28 17:36 盼星星盼太阳 阅读(1962) 评论(0) 推荐(0) 编辑
多维数组任意元素生成路径，并根据路径插入元素
摘要：一、多维数组生成路径 递归多维数组，给每一个元素生成一个路径 多维数组数据如下： 递归函数如下： const addPath = (arr,path=[])=>{ for(let i=0;i<arr.length;i++){ let newpath = JSON.parse(JSON.stringi 阅读全文
posted @ 2022-04-11 18:34 盼星星盼太阳 阅读(71) 评论(0) 推荐(0) 编辑
ES6优化ES5语法写法及案例（持续更新）
摘要：1.空值合并运算符 ?? 空值合并运算符（??）是一个逻辑运算符，当左侧操作数为 null 或 undefined 时，返回右侧的操作数，否则返回左侧操作数 注意：?? 运算符的优先级非常低，只略高于？和 = 如果没有明确添加括号，不能将其与 || 或 && 一起使用 eg：关于输入框非空的判断 i 阅读全文
posted @ 2021-11-29 15:50 盼星星盼太阳 阅读(238) 评论(0) 推荐(0) 编辑
vue项目中iframe嵌套其他项目，iframe父子页面传值
摘要：场景：vue后台管理系统项目嵌入其他项目 一、iframe引入其他项目地址 <iframe ref="newScreen" @load="sendMessage" frameborder="0" :src="url" width="100%" height="100%" id="ysOpenDevi 阅读全文
posted @ 2021-09-22 18:26 盼星星盼太阳 阅读(4046) 评论(1) 推荐(0) 编辑
异步加载defer，async
摘要：话不多说，上图 推荐的应用场景 defer 1. defer只适用于外联脚本，如果script标签没有指定src属性，只是内联脚本，不要使用defer 2. 如果有多个声明了defer的脚本，一般会按顺序下载和执行 3. defer脚本一般会在DOMContentLoaded事件之前执行 如果你的脚 阅读全文
posted @ 2021-09-07 17:37 盼星星盼太阳 阅读(74) 评论(0) 推荐(0) 编辑
手写call apply bind 函数系列
摘要：手写call Function.prototype.myCall = function(context, ...args) { // 解构context 与arguments if(typeof this !== 'function') { // this 必须是函数 throw new TypeE 阅读全文
posted @ 2021-08-06 15:35 盼星星盼太阳 阅读(24) 评论(0) 推荐(0) 编辑
JS实现一个bind
摘要：第一层 - 绑定在原型上的方法 由于 function xxx 的原型链 指向的是 Function.prototype , 因此我们在调用 xxx.bind 的时候，调用的是 Function.prototype 上的方法。 Function.prototype._bind = function( 阅读全文
posted @ 2021-08-06 15:03 盼星星盼太阳 阅读(106) 评论(0) 推荐(0) 编辑
js之堆、栈内存
摘要：一、作用域和变量 全局作用域：当浏览器打开页面时，浏览器会给当前JS代码提供一个可以执行的运行环境，那么这个环境就是全局作用域。 一个页面只对应一个全局作用域；在当前的全局作用域，浏览器给当前作用域提供了全局的对象叫window； JS是单线程的，每次只能执行一行代码。 在JS中只要遇到报错，代码立 阅读全文
posted @ 2021-06-28 17:44 盼星星盼太阳 阅读(132) 评论(0) 推荐(0) 编辑
监听页面刷新和关闭事件
摘要：场景：在离开页面的时候，需要弹出提示框，让用户确定是否真的要关闭网页。如果用户真的需要关闭网页，则让浏览器向后台提交信息。 浏览器页面事件基础 页面加载时只执行 onload 事件。 页面关闭时，先 onbeforeunload 事件，再 onunload 事件。 页面刷新时先执行 onbefore 阅读全文
posted @ 2021-06-22 14:49 盼星星盼太阳 阅读(2829) 评论(0) 推荐(0) 编辑

1 2 3 下一页
点击右上角即可分享
微信分享提示