js
haizou
一个正在成长的程序员
展开
-
解决跨域的几种方式
前端通过代理方式实现跨域,可以通过配置一个 Node.js 的 Express 代理服务器,然后在前端发送请求时,将请求发送至代理服务器,代理服务器再将请求转发至目标服务器,获取响应后再返回给前端。标签并添加到 DOM 中,指定 src 属性为带有 callback 参数的请求 URL,服务端会将响应数据以回调函数的参数形式返回,从而实现获取数据的目的。当响应数据返回后,客户端自行定义的回调函数会被触发。在同源域名下,通过服务端代理请求目标网站的资源,再将响应结果返回给客户端,从而实现跨域访问目标资源。原创 2023-09-09 12:23:25 · 510 阅读 · 0 评论 -
JavaScript — promise基本使用
Promise 简介Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。它能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来,这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值,而是会返回一个 promise,以便在未来某个时候把值交给使用者。Promise 常见的几种用法首先定义几个 Promise 对象const p1 = new Promise((resolve, reject) => { setTimeout(reso原创 2021-08-09 21:15:04 · 2520 阅读 · 0 评论 -
Javascript — 数组常用方法
定义一个数组,接下来操作的数组都以这个为例const arr = [3, 10, 18, 20];forEach遍历数组中的每一项,跟 for 循环的作用是一样的arr.forEach(item => { console.log(item);});// 依次输出:3、10、18、20some依次遍历数组中的元素,若有满足条件的则返回 true,剩余的不会执行。若无满足条件的则返回 falseconst result = arr.some(item => { return原创 2021-08-29 09:31:42 · 168 阅读 · 0 评论 -
JavaScript — resize事件监听窗口变化
前言resize 事件是在浏览器窗口大小发生变化时触发,利用该事件可以跟踪窗口大小的变化来动态调整页面的元素显示。接下来利用 resize 事件实现一个小案例:监听浏览器窗口变化,实时获取该窗口的宽度和高度。实现首先写一个获取窗口宽高的方法const getWindowInfo = () => { const windowInfo = { width: window.innerWidth, hight: window.innerHeight } console.log(wind原创 2021-08-26 21:12:10 · 34460 阅读 · 6 评论 -
JavaScript — 递归处理数据
介绍两种常用的递归处理数据的方法首先定义一组树形列表数据规定:树的最后一级 member 为空的即为成员(也可添加一个 type 标识来判断是否为成员)const memberList = [{ name: '研发部', member: [{ name: '前端', member: [{ name: '张三', age: 1.原创 2021-08-20 21:24:29 · 2061 阅读 · 0 评论 -
JavaScript — 原生js实现上传图片控件
一、修改原生 input 样式html 结构<div class="card"> <input id="upload" type="file" accept=".jpg" /> <div class="view"> <!-- 上传成功后 --> <div id="imgContainer" class="img-container"> <img id="img" /&原创 2021-08-18 20:00:42 · 2798 阅读 · 1 评论 -
JavaScript — MutationObserver接口
介绍MutationObserver 接口提供了监视对 DOM 树所做更改的能力。MutationObserver(),创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。使用写一个简单的例子,监听页面上 input 的显示与隐藏<body> <input id="input" /> <button id="hide">隐藏</button> <button id="show">原创 2021-08-14 11:15:36 · 421 阅读 · 0 评论 -
JavaScript — json文件的读取与写入
应用场景网站配置的导入与导出。当一个网站在测试服开发完成后上线到正式服,为了避免重复配置数据,采取代码的方式来减少一些不必要的人工操作。后台接口接收的是 json 格式而不是文件格式的时候,前端可以采用文件的形式来保存这些数据,在导入导出的时候做一下文件与数据之间的转换。导出 —— 数据写入文件保存导入 —— 文件上传,然后读取数据代码实现首先需要一个 上传文件的 input 框 和 两个按钮<body> <input type="file" accept=".j原创 2021-08-11 20:25:40 · 11417 阅读 · 6 评论 -
JavaScript — 转换日期
描述本文描述的是转换日期方法的实现, 这个方法接收两个参数,第一个参数是需要输出日期的格式,第二个参数是需要转换的日期。代码实现首先,先实现一种简单转换的方法function transDate(date) { const transTime = (t) => { return t < 10 ? `0${t}` : t }; const year = date.getFullYear(); const month = date.getMonth() + 1; const day原创 2021-07-28 21:04:42 · 2985 阅读 · 0 评论 -
JavaScript — 防抖与节流
防抖事件次数触发过于频繁,只取最后一次操作。<body> <input id="myInput" type="text"></body><script> // 防抖 let myInput = document.getElementById('myInput'); myInput.oninput = debounce(handle, 500); function debounce(fn, delay) { let timer;原创 2021-07-14 22:14:25 · 136 阅读 · 0 评论