qq_31965515的博客

原创 antd 表格用fixed：“left”在typescript中报错

[ts]Type '{ pagination: { total: number; pageSize: number; defaultPageSize: number; showSizeChanger: true; ...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Table&...

转载 Node.js 应用：Koa2 使用 JWT 进行鉴权

Node.js 应用：Koa2 使用 JWT 进行鉴权前言在前后端分离的开发中，通过 Restful API 进行数据交互时，如果没有对 API 进行保护，那么别人就可以很容易地获取并调用这些 API 进行操作。那么服务器端要如何进行鉴权呢？Json Web Token 简称为 JWT，它定义了一种用于简洁、自包含的用于通信双方之间以 JSON 对象的形式安全传递信息的方法。JWT 可...

转载 事件委托，

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素；一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。举个例子，比如一个宿舍的同学同时快递到了，一种方法就是他们都傻傻地一个...

转载 Array.prototype.indexof的实现原理

因为存在indexOf 的方法，所以自定义方法写成indexof ，方便对比。对于Array.indexof()方法的实现，主要考察的就是原型继承的知识。通过Array.prototype.indexof = function(){}就可以给 Array 添加一个方法，实际工作中不推荐这样做。剩下的就是数组元素匹配的问题，就不多说了，虽然不难，但是做的过程中也遇到了不大不小...

转载 S数据类型的分类和判断

在前端笔试面试中“JS数据类型的分类和判断”是高频的基础考点，今天总结一下，对正在准备找工作的小伙伴应该有所帮助～JavaScript中有6种数据类型：数字（number）、字符串（string）、布尔值（boolean）、undefined、null、对象（Object）。其中对象类型包括：数组（Array）、函数（Function）、还有两个特殊的对象：正则（RegExp）和日期（Date...

转载 Echarts 标签中文本内容太长的时候怎么办 ?

Echarts 标签中文本内容太长的时候怎么办 ?- 1对文本进行倾斜在xAxis.axisLabe中修改rotate的值 xAxis: { data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据 name:"123",//坐标轴名称。 ...

转载 详解Object.create(null)

详解Object.create(null)在Vue和Vuex的源码中，作者都使用了Object.create(null)来初始化一个新对象。为什么不用更简洁的{}呢？在SegmentFault和Stack Overflow等开发者社区中也有很多人展开了讨论，在这里总结成文，温故知新。Object.create()的定义照搬一下MDN上的定义：Object.create(...

转载 webpack打包分析与性能优化

webpack打包分析与性能优化背景在去年年末参与的一个项目中，项目技术栈使用react+es6+ant-design+webpack+babel，生产环境全量构建将近三分钟，项目业务模块多达数百个，项目依赖数千个，并且该项目协同前后端开发人员较多，提高webpack 构建效率，成为了改善团队开发效率的关键之一。下面我将在项目中遇到的问题和技术方案沉淀出来与大家做个分享从项目自身出...

转载 JS获取本周周一 周日日期、本季度、本月、上月的开端日期、停止日期

1、首先来一个自己公司项目的源码：项目需求描述： 从20150712日开始， ，需求①：根据当前时间返回每一周 、周一~周日的日期（需返回2种格式 格式1：7月13日，格式2：2015-07-13）需求②：返回当前时间本周的，周一早上9:00:00和周日的23:59:59需求③：计算出当前时间离20150712日有多少周需求④：在需求3基础上，如果大于一周，需要返回历史周的周一早...

转载 linux nginx安装以及配置

一、Nginx简介Nginx (“engine x”) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由Igor Sysoev为俄罗斯访问量第二的Rambler.ru站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。2011年6月...

原创 服务端渲染VUE_SSR

转载 使用object.defineProperty()方法监听属性变化

问题提出定义一个对象，改变这个对象的属性，或者说是读取这个对象属性以及属性值的时候，我们自己定义的对象，一般不会知道这个对象什么时候被赋值，什么时候被改变。var object = { name: 'mapbar_front'};console.log(object.name);//这个时候我们不知道这个对象的name属性被读取。object.name = '中国';//这个时...

转载 把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决办法！

在vue中，在data里建立两个对象。data() { return { dataA:{ a:1 }, dataB:'' }};将dataA的内容赋值给dataB，改变dataB里对象的值，发现dataA里的值也跟着变化了。为什么会出现这种情况呢？其实，这是一个引用传递而不是值传递，dataA和dataB指向的是同...

转载 前端资源分享-只为更好前端

一、团队组织网站 说明 腾讯 AlloyTeam 团队 腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾讯社交用户体验设计，简称ISUX，腾讯设计团队网站 CDC 腾讯用户研究与体验设计部 FEX 百度Web前端研发部出品 淘宝前端团队（FED） 用技术为体验提供无限可能 凹凸实验室 京东用户体验设计部...

转载 基于Vue的单页应用，首屏加载优化方案

我实际的项目首屏加载从 12s 左右优化到 4s 左右。由于是演示项目，并没有开发其他的页面和功能，效果不是很明显，大家可以自行踩坑。大家有更好的方案，可以共同学习！我们以 vue-cli 工具为例，使用 vue-router 搭建SPA应用，UI框架选用 element-ui ， ajax方案选用 axios, 并引入 vuex ，使用 vuex-router-sync 将router同步...

转载 2018年九个很受欢迎的vue前端UI框架

最近在逛各大网站，论坛，SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，小编自己也趁着这个大前端的热潮，着手学习了一段时间的Vue.js，目前用它正在做自己的公司项目。学习的过程之中发现继最热的 React 组件库和 Angular 组件库之后，这里有很多个流行和实用的 Vue.js 组件库完善你的下一个用 Vue.JS 编写 UI 界面的应用程序。...

转载 深度解析原型中的各个难点

本文不会过多介绍基础知识，而是把重点放在原型的各个难点上。大家可以先仔细分析下该图，然后让我们进入主题prototype首先来介绍下prototype属性。这是一个显式原型属性，只有函数才拥有该属性。基本上所有函数都有这个属性，但是也有一个例外let fun = Function.prototype.bind()如果你以上述方法创建一个函数，那么可以发现这个函数是不具...

转载 async函数解析

async函数是基于Generator函数实现的,也就是说是Generator函数的语法糖。在之前的文章有介绍过Generator函数语法和异步应用，如果对其不了解的，可以先看看关于Generator函数的文章，这样学习async函数的难度就不会太大。传送门:Generator语法解析Generator函数异步应用接下来会用一些篇幅说明一下async函数，文末会给出async函数的参考...

转载 (function(){var a = b = 3; }())b为什么是全局变量

(function(){ var a = b = 3;}());console.log(b); // 3console.log(a); // a is not defined /*首先分析 var a = b = 3 可以拆分为 b = 3 b是全局变量，在立即执行函数里赋值为3var a = b a是立即执行函数里声明的变量，函数执行完a就被释放...

转载 知道一个IP地址，如何计算出它的子网掩码

子网掩码计算方法有两种：　　方法一：利用子网数来计算：　　1.首先，将子网数目从十进制数转化为二进制数；　　2.接着，统计得到的二进制数的位数，设为N；　　3.最后，先求出此IP地址对应的地址类别的子网掩码。再将求出的子网掩码的主机地址部分(也就是“主机号”)的前N位全部置1，这样即可得出该IP地址划分子网的子网掩码。　　例如：需将B类IP地址167.194.0.0划分成28个子网：　...

转载 IP和网段的计算方法

IP和网段的计算方法我们都知道，ＩＰ是由四段数字组成，在此，我们先来了解一下3类常用的ＩＰ　　A类IP段　 0.0.0.0 到127.255.255.255　　B类IP段　 128.0.0.0 到191.255.255.255　　C类IP段　 192.0.0.0 到223.255.255.255　　ＸＰ默认分配的子网掩码每段只有255或0 　Ａ类的默认子网掩码...

转载 手写Promise教程

我们工作中免不了运用promise用来解决异步回调问题。平时用的很多库或者插件都运用了promise 例如axios、fetch等等。但是你知道promise是咋写出来的呢？别怕～这里有本promisesA+规范，便宜点10元卖给你了。1、Promise 的声明首先呢，promise肯定是一个类，我们就用class来声明。由于new Promise((resolve, ...

转载 Vue.js学习笔记-进阶部分+完整实现代码

深入响应式追踪变化：把普通js对象传给Vue实例的data选项，Vue将使用Object.defineProperty把属性转化为getter/setter（因此不支持IE8及以下），每个组件实例都有相应的watcher实例对象，它把属性记录为依赖，当依赖项的setter被调用的时候，watcher会被通知并重新计算，从而更新渲染 变化检测： Vue不能检测到对象属性的添...

转载 检测浏览器开发者工具是否打开了

在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具，比如前端爬虫检测，如果检测到用户打开了控制台就认为是潜在的爬虫用户，再通过其它策略对其进行处理。本篇文章主要讲述几种前端JS检测开发者工具是否打开的方法。一、重写toString()对于一些浏览器，比如Chrome、FireFox，如果控制台输出的是对象，则保留对象的引用，每次打开开发者工具的时候都会重新调用一下对象...

原创 一条命令解决mysql_config not found

遇到过几次pip安装mysql-python的时候出现如题的问题，在这里记录一下解决方法。找不到mysql_config一般是由于通过lnmp.org或者其他方式安装mysql以后mysql_config是在/usr/local/mysql/bin/里面，这里面的文件不是在任意位置都可以访问的解决方法：执行ln -s /usr/local/mysql/bin/mysql_conf...

原创 跨域携带cookes的设置

一：原生XMLHttpRequest.withCredentials 属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用withCredentials属性是无效的。此外，这个指示也会...

转载 JavaScript事件轮询、微任务和宏任务

JavaScript是单线程语言，也就是说同一个事件只能做一件事。JavaScript的单线程，与它的用途有关，作为浏览器脚本语言，JavaScript的主要用途是与用户交互，以及操作DOM。这决定了它只能是单线程，否则会带来很多复杂的同步问题。为了利用多核CPU的计算能力，虽然HTML5提出了Web Worker，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作D...

转载 es6数组方法总结

目录1、Array.from()2、Array.of()3、数组实例的copyWithin()4、数组实例的find()和findIndex()5、数组实例的fill()6、数组实例的entires(),keys()和value()7、数组实例的includes()8、数组的空位9、数组some()和every()使用1、Array.from()Arra...

转载 CSS三列布局之左右宽度固定，中间元素自适应问题

最近学到了几种关于左右固定宽度，中间自适应的三列布局的方法，整理了一下，在这里跟大家一起分享分享，其中有什么不足的还望各位给指导指导哈。首先我想到的是float——浮动布局使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素，设置它的margin左右边距分别为左右两个元素的宽度。例如以下代码就可以实现我们想要的三列效果啦。<!DOCTYPE html>...

转载 小程序登录流程

导语为了方便小程序应用使用微信登录态进行授权登录，微信小程序提供了登录授权的开放接口。乍一看文档，感觉文档上讲的非常有道理，但是实现起来又真的是摸不着头脑，不知道如何管理和维护登录态。本文就来手把手的教会大家在业务里如何接入和维护微信登录态。接入流程这里官方文档上的流程图已经足够清晰，我们直接就该图展开详述和补充。首先大家看到这张图，肯定会注意到小程序进行通信...

转载 从零开始配置webpack(基于webpack 4 和 babel 7版本)

从零开始配置webpack(基于webpack 4 和 babel 7版本)webpack 核心概念:Entry: 入口 Module:模块，webpack中一切皆是模块 Chunk:代码库，一个chunk由十多个模块组合而成，用于代码合并与分割 Loader:模块转换器，用于把模块原内容按照需求转换成新内容 Plugin:扩展插件，在webpack构建流程中的特定时机注入扩展...

转载 前端面试中的常见的算法问题

虽说我们很多时候前端很少有机会接触到算法。大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题，这些基础知识的积累可以帮助我们更好的优化解决思路。下面罗列在前端面试中经常撞见的几个问题吧。Q1 判断一个单词是否是回文？回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生...

转载 原生js实现检测对象变化

首先，js中的属性分为俩种，一种是数据属性，一种是访问器属性。 var data = {}; data.name = '田二黑';上面这种就是数据属性。当然和下面效果一样： Object.defineProperty(obj, 'name', { value: '田二黑', // 属性的值 writable: tr...

转载 模板字符串的简单实现

起始同许多初学 Javascript 的菜鸟一样，起初，我也是采用拼接字符串的形式，将 JSON 数据嵌入 HTML 中。开始时代码量较少，暂时还可以接受。但当页面结构复杂起来后，其弱点开始变得无法忍受起来：书写不连贯。每写一个变量就要断一下，插入一个 + 和 "。十分容易出错。 无法重用。HTML 片段都是离散化的数据，难以对其中重复的部分进行提取。 无法很好地利用 <temp...

原创 Element.closest() 兼容IE

Element.closest()方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回null。var elt = element.closest(selectors); 参数节selectors是指定的选择器，比如"p:hover, .toto + q"。 element表示当前元素。返回值节elt是查询到的祖先...

原创 IE浏览器下table组件滚动条遮挡内容

在vue中借助计算属性computed 来判断，如果是IE浏览器，则增加一个向右的padding

转载 js严格模式下面的this指向

一、全局作用域中的thises5,6，不管是严格模式函数不是严格模式this都指向window // 'use strict'; console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}二、全局作用域中函数中的thises5，非严格模...

转载 前端路由实现（history）

随着 ajax 的使用越来越广泛，前端的页面逻辑开始变得越来越复杂，特别是spa的兴起，前端路由系统随之开始流行。从用户的角度看，前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）：记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存（分享）时的状态）； 可以使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到使用ajax更新页面之前的状态，ur...

原创 vue2.0 父子组件通信 兄弟组件通信

父组件是通过props属性给子组件通信的来看下代码：父组件：&lt;parent&gt; &lt;child :child-com="content"&gt;&lt;/child&gt; //注意这里用驼峰写法哦&lt;/parent&gt;data(){ return { content:'sichaoyun' };}子组件通过pro...

转载 ES6语法知识点

目录let/const（常用）暂时性死区const建议箭头函数（常用）建议iterator迭代器解构赋值（常用）建议剩余/扩展运算符（常用）扩展运算符剩余运算符在对象中使用扩展运算符建议对象属性/方法简写(常用)对象属性简写方法简写for ... of循环Promise（常用）回调函数Promise建议ES...