web前端架构师
Oneshop商城
程序员,高级前端开发,爱编程所以,工作并不枯燥
展开
-
vue-design table 列拖拽
vue table 拖拽列原创 2022-03-31 15:27:51 · 1398 阅读 · 1 评论 -
前端跨域解决方案
前言前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。本文完整的源代码请猛戳github博客,纸上得来终觉浅,建议大家动手敲敲代码。一、什么是跨域?1.什么是同源策略及其限制内容?同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。同源策略限制内容有:Cookie、Local.转载 2021-12-13 15:42:13 · 1096 阅读 · 0 评论 -
前端请求头缓存,强缓存协议缓存
个人总结,强制缓存,协商缓存都是由后端配的,强制缓存优先于协商缓存进行,若强制缓存(Expires和Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match),协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,重新获取请求结果,再存入浏览器缓存中;生效则返回304,继续使用缓存,主要过程如下:原创 2021-12-13 15:11:00 · 1788 阅读 · 0 评论 -
关于typescript的面试题,把某个属性变成可选的类型定义
// 面试题, 请写一个type 使其把Todo 类型的description变成可选的interface Todo { title: string; description: string; completed: boolean;}/** * * * interface Todo { title: string; description?: string; // 这里变成可选的 completed: boolean; } * */...原创 2021-12-10 15:15:19 · 2284 阅读 · 2 评论 -
react hooks useState闭包理解
const [ count, setCount ] = useState( 0 ) console.log( 'redner...' ); const cuRef = useRef( { timer: null, count: 0 } ) const printBtnClick = () => { cuRef.current.count = count + 1 console.log( 'printBtnClick 1', count ); ..原创 2021-11-02 10:54:51 · 751 阅读 · 0 评论 -
小程序内嵌h5解决方案
原创 2021-09-27 09:20:14 · 294 阅读 · 0 评论 -
typescript 学习泛型推导心得
export { }// ts 内置类型 源码分析笔记type Parameters<T extends ( ...args: any ) => any> = T extends ( ( ...args: infer P ) => any ) ? P : never;//type Parameters<T> = T extends ( ( ...args: infer P ) => any ) ? P : never; // 简写版// type Retu.原创 2021-09-09 18:24:26 · 290 阅读 · 0 评论 -
js 四舍五入 与非四舍五入 以及数字转千分位字符串格式
/** * '-10000.222' => '-10,000.22' * 格式化成千分位数字,如果格式不对返回0.00 * @param {*} s 要格式化的数字 * @param {*} n 保留几位小数 最长5为,默认2位 * @param {*} isRound 是否四舍五入,默认是 */export const rmbFormat = (s, n = 2, isRound = true) => { s = formatPrice(s, n, isRound) l.原创 2020-11-09 16:25:54 · 290 阅读 · 0 评论 -
XSS 攻击知识笔记,跨站脚本攻击为什么简称CSS呢?因为CSS已经有主了!
原理是 在用户浏览器想法插入可执行脚本.危害:1.挂马2.盗取cookie3.DDos攻击4.蠕虫病毒...原创 2020-03-31 11:28:35 · 320 阅读 · 0 评论 -
JavaScript的事件队列(Event Queue)---宏任务和微任务-转载
前言在写代码的时候经常思考一个问题,到底是那个函数先执行,本身JavaScript是一门单线程的语言,意思就是按照顺序执行。但是加入一些setTimeout和promise的函数来又实现了异步操作,常常我会写一个setTimeout(fn,0),他会立即执行吗?宏任务和微任务首先我们先来看一段代码:<script>console.log("Start");set...转载 2020-03-27 11:11:54 · 316 阅读 · 2 评论 -
vue 项目 如何避免子元素触发父元素的mouseout事件
使用yarn安装时,有时候会出现版本问题;造成mouseover mouseout全部分类菜单放上后子元素会触发mouseout ;最终查到原因是因为浏览器兼容性问题;项目中给父元素加了mouseover、mouseout事件,但是,鼠标移动到子元素上总会自动触发mouseout事件,使用prevent、stop或者self修饰符都没什么用。如果用mouseover ...原创 2020-02-09 20:17:50 · 2353 阅读 · 0 评论 -
在公司做面试官准备的高级前端开发工程师面试题(部分附上参考答案),面试需要刷题,否则你会觉得自己一无所知!
1. vue、react异同点2. eventLoop原理3. 防抖和节流 讲原理,手写代码,逐行讲解function debounce(fn) {let timeout = null; // 创建一个标记用来存放定时器的返回值return function () {clearTimeout(timeout); // 每当用户输入的时...原创 2020-01-07 17:59:50 · 6945 阅读 · 0 评论 -
CORS 以及如何节省一次 OPTIONS 请求
为了解决跨域资源共享问题,浏览器厂商和标准组织在 HTTP 协议的基础上,提出了 CORS 标准协议。CORS 协议由一组 HTTP Header 构成,用于标识某个资源是否可以被跨域访问。这里只是简单介绍一下 CORS 标准,更详细的内容可以直接看规范文档:Fetch Standard当前端使用 XHR 或者 fetch 等其他方法请求一个跨域资源时,如果是非简单请求(后面会解释),浏览...原创 2020-01-07 17:17:04 · 850 阅读 · 0 评论 -
ES6 类(Class)的继承(extends)和自定义存(setter)取值(getter)详解,好文章,可以作为高级程序员面试题
ES6 类(Class)的继承(extends)和自定义存(setter)取值(getter)详解ES6的Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要简单很多,这也是平常大多数面向对象语言的方式。1.类的super方法子类必须在constructor方法中调用super方法,否则新建实例时会报错。如果子类在constructor方法中使用了thi...转载 2019-11-25 15:23:01 · 1008 阅读 · 0 评论 -
我就想问问,俺公司的发票逻辑绕不绕,以图为证
附上processOn.以作参考https://www.processon.com/view/link/5dcd2253e4b0096e8c07440b原创 2019-11-25 13:26:18 · 598 阅读 · 0 评论 -
手写tapable事件函数,有助于理解tapable
最近看珠峰培训的视频,找到了一个好用的事件函数工具,tapable工具类;写下笔记,下次方便用在项目中; //SyncHook 原生使用let {SyncHook} = require('tapable')class Lesson{ constructor(){ this.hooks = new SyncHook(['name']) } tap(){ th...原创 2019-11-21 16:54:56 · 667 阅读 · 0 评论 -
使用webpack 开发UMD函数库,之前是自己封装,比较麻烦,现在只需要简单配置webpack即可,方便得很:>
1.初始化一个项目,并安装相关的npm包npm init -ynpm install webpack webpack-cli -D//或者yarn init -yyarn add webpack webpack-cli --dev// yarn 安装比较快,npm安装貌似卡住了!!!2.新建文件webpack.config.js //webpack配置文件s...原创 2019-11-21 14:25:22 · 1517 阅读 · 0 评论 -
按键精灵/触控精灵 多点找怪,多点找色算法思路,附带动态分析图,以及算法代码
上面的两张动图是5宫格,6宫格动图;先说下思路按键/触动精灵只提供了单个找色函数,所以如果想在屏幕上找多个怪物,这里我设计的是按照屏幕大小,分成一个个小格子,然后便利格子,调用他们的单个找色函数;这样的话,我们可以把找怪单独放到一个进程,然后异步去找怪,找到怪,放到一个全局数组供函数使用;分析如下:1.屏幕按照宽高等比例分割,这里算法只支持等分的行格子数=列格子数!(否则不好找...原创 2019-11-05 17:58:59 · 12469 阅读 · 0 评论 -
Unknown plugin "transform-es2015-modules-commonjs" specified in XXX
Unknown plugin "transform-es2015-modules-commonjs" specified in "D:\\workspace\\qiannian\\node_modules\\vue-style-loader\\.babelrc"安装时少了babel的transform-es2015-modules-commonjs 插件npminstall-...原创 2019-11-05 11:33:29 · 1506 阅读 · 0 评论 -
Entrypoint undefined = index.html html-webpack-plugin 错误
加上 stats:{children:false} 即可,屏蔽错误;webpack打包踩的坑打包的时候一直包这个错误Child html-webpack-plugin for "..\index.html":1 assetEntrypoint html-webpack-plugin for "..\index.html" = ../index.htmlChil...原创 2019-11-05 11:07:55 · 9776 阅读 · 2 评论 -
学习笔记 之 webpack 热更新原理 以及配置方式
webpack 热更新配置方式一, mode:设置为devlepmemt,然后加入plugins,devServer配置;热更新配置方式二(更灵活的方式,使用middleWare插件),通过编程方式,可以更灵活的配置项目启动如:项目启动前,注入一些变量,动态生成一些文件,调整一些参数等.备注一些理解:首次运行阶段走的路线为 1 -> 2 -> A ->...原创 2019-10-30 16:09:19 · 660 阅读 · 0 评论