wsxc451的专栏

原创 layout 通用组件布局

【代码】layout 通用组件布局。

原创 前端面试题汇总

概念：react fiber 是一种基于浏览器单线程的调度算法；结构： 双链表的形式；每个节点都是一个fiber，一个fiber包含了child,parent,sibling;并且sibling返回 到parent这种结构。问题： v16之前面临的主要性能问题是，组件的reconcilation算法是递归的；无法中断；会造成页面卡顿；v16之后引入fiber，会把算法拆分成无数个小任务的算法；并能够随时停止，恢复；

原创 前端架构体系调研整理汇总

公司研发人数与前端体系。

原创 写一个加载远程js的函数,function loadJSFn(sucCb,failCb){}, 要考虑到低端浏览器的兼容性；

属性告诉浏览器在 HTML 解析完成后再执行脚本，这样可以保证脚本在正确的上下文中运行，并且不会影响页面的渲染。有些浏览器或环境可能不支持将脚本插入到头部（head）中，因此你可以尝试将脚本插入到 body 中。属性告诉浏览器可以异步加载该脚本，不会阻塞页面的加载和渲染；除了使用 addEventListener 方法处理。元素时，为了避免阻塞页面的渲染和响应，你可以添加。属性来处理这些事件。这种方式更加兼容旧版浏览器。事件外，你还可以使用 DOM 元素的。

原创 vue-design table 列拖拽

vue table 拖拽列

转载 前端跨域解决方案

前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议大家动手敲敲代码。一、什么是跨域？1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制内容有：Cookie、Local.

原创 前端请求头缓存,强缓存协议缓存

个人总结，强制缓存，协商缓存都是由后端配的，强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存，主要过程如下：

原创 关于typescript的面试题,把某个属性变成可选的类型定义

// 面试题, 请写一个type 使其把Todo 类型的description变成可选的interface Todo { title: string; description: string; completed: boolean;}/** * * * interface Todo { title: string; description?: string; // 这里变成可选的 completed: boolean; } * */...

原创 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 ); ..

原创 小程序内嵌h5解决方案

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

原创 多个promise,依次执行,并返回结果,单例方法避免多次调用

flattenFnArray = function ( fns ) { fns = Array.isArray( fns ) ? fns : [ fns ]; // p.then() -> p1.then() -> p2.then() return function ( props ) { return fns.reduce( ( pre, next, index, arr ) => { return pre.then( () =...

原创 eggjs + vue-element-admin proxy 错误

使用了bodyParser时候,需要axios对应配置正确的headers否则就会请求异常!

原创 Eslint更新在VSCode中无法保存的时候格式化代码

2020年新变化先说解决办法：在settings.json文件中加这个 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, } 然后就可以了。把有这行的代码删掉 // #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": true, 。然后再慢慢说一下如何在VSCode中在保存时候自动按照项目中的eslint配置格式..

原创 2020-11-19 后台pc端权限系统架构

今天任务:1.完成权限模块的原型界面设计2.抽离共用模块,把多个类似界面用slot剥离今日感受:1.权限这块设计的跟之前那家还有普通后台有些差别,主要是之前的权限聚合分组是通过树结构来的,现在设计的是通过一个单独的权限组聚合的,而且权限有分为菜单权限跟接口权限;这点我觉得还好;就是公司设计的这个权限组可以聚合权限,而权限又可以通过树结构聚合,感觉多了一层,好像没什么用;明天任务:1.动作库管理页面2.动作库的列表页面,动作库的查询编辑页面...

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

原创 crmeb 伪静态设置失败原因

crmeb 3.6 给出的.htaccess文件为:<IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]</IfModule>...

原创 XSS 攻击知识笔记,跨站脚本攻击为什么简称CSS呢?因为CSS已经有主了!

原理是 在用户浏览器想法插入可执行脚本.危害:1.挂马2.盗取cookie3.DDos攻击4.蠕虫病毒...

转载 JavaScript的事件队列(Event Queue)---宏任务和微任务-转载

前言在写代码的时候经常思考一个问题,到底是那个函数先执行，本身JavaScript是一门单线程的语言，意思就是按照顺序执行。但是加入一些setTimeout和promise的函数来又实现了异步操作，常常我会写一个setTimeout(fn,0),他会立即执行吗？宏任务和微任务首先我们先来看一段代码：<script>console.log("Start");set...

原创 svn 创建新的分支

原创 vue 项目 如何避免子元素触发父元素的mouseout事件

使用yarn安装时，有时候会出现版本问题；造成mouseover mouseout全部分类菜单放上后子元素会触发mouseout ；最终查到原因是因为浏览器兼容性问题；项目中给父元素加了mouseover、mouseout事件，但是，鼠标移动到子元素上总会自动触发mouseout事件，使用prevent、stop或者self修饰符都没什么用。如果用mouseover ...

原创 在公司做面试官准备的高级前端开发工程师面试题(部分附上参考答案),面试需要刷题,否则你会觉得自己一无所知!

1. vue、react异同点2. eventLoop原理3. 防抖和节流 讲原理，手写代码，逐行讲解function debounce(fn) {let timeout = null; // 创建一个标记用来存放定时器的返回值return function () {clearTimeout(timeout); // 每当用户输入的时...

原创 CORS 以及如何节省一次 OPTIONS 请求

为了解决跨域资源共享问题，浏览器厂商和标准组织在 HTTP 协议的基础上，提出了 CORS 标准协议。CORS 协议由一组 HTTP Header 构成，用于标识某个资源是否可以被跨域访问。这里只是简单介绍一下 CORS 标准，更详细的内容可以直接看规范文档：Fetch Standard当前端使用 XHR 或者 fetch 等其他方法请求一个跨域资源时，如果是非简单请求（后面会解释），浏览...

转载 vue 2.2 新增的 的model选项,实现自定义v-model

今天在看vue-property-decorator时，遇到了@Model选项，也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定，对这个model选项突然不是很理解。所以这里重新对v-model和自定义组件的v-model做一个回顾，加深印象后，再去理解model选项到底是做什么的，有什么作用。vue中的v-model指令实现了表单的双向绑定，这是官网的一...

转载 ES6 类(Class)的继承(extends)和自定义存(setter)取值(getter)详解,好文章,可以作为高级程序员面试题

ES6 类(Class)的继承(extends)和自定义存(setter)取值(getter)详解ES6的Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要简单很多,这也是平常大多数面向对象语言的方式。1.类的super方法子类必须在constructor方法中调用super方法，否则新建实例时会报错。如果子类在constructor方法中使用了thi...

原创 我就想问问,俺公司的发票逻辑绕不绕,以图为证

附上processOn.以作参考https://www.processon.com/view/link/5dcd2253e4b0096e8c07440b

原创 手写tapable事件函数,有助于理解tapable

最近看珠峰培训的视频,找到了一个好用的事件函数工具,tapable工具类;写下笔记,下次方便用在项目中; //SyncHook 原生使用let {SyncHook} = require('tapable')class Lesson{ constructor(){ this.hooks = new SyncHook(['name']) } tap(){ th...

原创 使用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...

原创 按键精灵/触控精灵 多点找怪,多点找色算法思路,附带动态分析图,以及算法代码

上面的两张动图是5宫格,6宫格动图;先说下思路按键/触动精灵只提供了单个找色函数,所以如果想在屏幕上找多个怪物,这里我设计的是按照屏幕大小,分成一个个小格子,然后便利格子,调用他们的单个找色函数;这样的话,我们可以把找怪单独放到一个进程,然后异步去找怪,找到怪,放到一个全局数组供函数使用;分析如下:1.屏幕按照宽高等比例分割,这里算法只支持等分的行格子数=列格子数!(否则不好找...

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

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

原创 学习笔记 之 webpack 热更新原理 以及配置方式

webpack 热更新配置方式一, mode:设置为devlepmemt,然后加入plugins,devServer配置;热更新配置方式二(更灵活的方式,使用middleWare插件),通过编程方式,可以更灵活的配置项目启动如:项目启动前,注入一些变量,动态生成一些文件,调整一些参数等.备注一些理解:首次运行阶段走的路线为 1 -> 2 -> A ->...

原创 npm 深入了解 之 npm run XXX

最近在学习webpack 插件开发,之前只知道用,不知道原理,现在做下笔记!$ npm run二、原理npm 脚本的原理非常简单。每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。因此，只要是 Shell（一般是 Bash）可以运行的命令，就可以写在 npm 脚本里面。比较特别的是，npm run新建的这个 Shell，会将当前目录的...

原创 微擎对接微信平台一直token失败,结果是自己把站点关闭了. 这里给大家一个提示!

微擎一直token失败,结果是自己把站点关闭了.微擎一直token失败,结果是自己把站点关闭了.微擎一直token失败,结果是自己把站点关闭了.

转载 vue 强制刷新当前路由,奇淫技巧

Tips:想必大家在平时开发的时候可能遇到这种需求，在打开该菜单页面的情况下，再次点击菜单需要刷新该组件（销毁再创建）。而vue自身如果路由不变的情况下是不会这样做的，那么只能使用一些骚操作了。方法一,利用后退,然后前进,就会重新刷新当前路由.并且store里面的状态不会丢失方法二1.在菜单的路由跳转上绑定一个随机query参数，例如时间戳或者随机数：this.$router.pus...

原创 rxjs forkJoin 6.2 升级到6.5的坑 6.5 forkJoin 不在再支持参数传递,要传数组

rxjs 6.2 升级到6.5的坑 6.5 forkJoin 不在再支持参数传递,要传数组!!!rxjs 6.2 升级到6.5的坑 6.5 forkJoin 不在再支持参数传递,要传数组!!!rxjs 6.2 升级到6.5的坑 6.5 forkJoin 不在再支持参数传递,要传数组!!!...

原创 微信支付签名错误: 好坑啊.微信攻城狮前端key字符串长度不带校验的么???

微信支付签名错误: 好坑啊.微信攻城狮前端key字符串长度不带校验的么???一直报签名错误.我保证参数都写对了,结果还是参数错误.调试了一天,最后才发现是商户平台秘钥key 要求设置的是32位的.我之前弄了一长串也不知道那个号来的,我就粘贴上去了,结果一直报错.最后通过源码var_dump突破惊奇发现, key字符串居然是 40位"string:40"!!!!!"strin...

原创 自己做的商城系统流程图,分享给大家.

流程图 在线processOn 链接https://www.processon.com/view/571c1caae4b005d06ffcd46e

原创 公司开票模块产品用户体验设计流程图

为什么这么复杂了,主要由以下几个产品设计特色导致:<发票类型有2个,一个是电子发票,一个是纸质发票,1.用户首次进入商城,加载默认的发票信息,但是如果是非自营店铺,不能使用电子发票2.用户新增发票时,如果可以开电子发票,那么新增成功后,选中新增的这个发票3.如果首次加载时默认发票不能选中,(因为非自营不能使用电子发票,而用户设置的默认发票为电子发票),当用户编辑的发票...

原创 节流防抖函数,做个笔记

debounce( fn ) { var time = null let content = this return function () { clearTimeout( time ) time = setTimeout( () => { fn.apply( content, arguments ...