weixin_41224029的博客

原创 鼠标右键以及封装实例

这次因为在客服端做右键添加跟进消息，故深入了解一下右键自定义菜单的东西，首先浏览器自带右键，我们需要禁止浏览器右键默认事件（都放在页面加载完毕后执行DOMContentLoaded链接）document.oncontextmenu = function(){　　return false;}在兼容DOM的浏览器中，使用event.preventDefault();在IE中，将event.retu...

原创 loadsh的几种处理

原创 网页粘贴

<!--聊天输入框--> <div class="contenteditable" :contenteditable="isReceiver" ref="inputContent" id="js_input_content" spellcheck="false" accesskey="j" ...

原创 手写promise

function myPromise (constructor) { let self = this self.status = 'pending' // 定义状态改变前的初始状态 self.value = undefined // 定义状态为resolved的时候的状态 self.reason = undefined // 定义状态为rejected的时候的状态 self....

原创 解决eslint与webstorm关于script标签的缩进问题

问题重现：在vue-cli中，使用eslint时会对代码进行校验，其在.vue文件中支持的是不缩进，如下所示：在这里插入图片描述而在webstorm中使用格式化代码会将代码格式化为：这样子就不符合eslint的要求了，如果想支持webstorm的编码格式，应该进行如下设置：打开项目根下的.eslintrc.js文件，将rules节点添加如下配置项：rules: { 'vue/sc...

原创 git常用使用方式

基本使用先来看一个 github 仓库，多人开发的案例。git clone github/xxx 克隆仓库。git checkout -b feature/xxx 新建自己的分支。修改代码。git add xxx 暂存一段代码。git commit -m ‘feat: xxx’ 把暂存区的所有修改提交到分支上。git push 推送到远程仓库。在 github 上提交 pull ...

原创 webpack 在 CLI 3 中的应用

webpack 作为目前最流行的项目打包工具，被广泛使用于项目的构建和开发过程中，其实说它是打包工具有点大材小用了，我个人认为它是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安装，最终实现你需要的功能并进行打包输出。而在 Vue 的项目中，webpack 同样充当着举足轻重的作用，比如打包压缩、异步加载、模块化管理等等。如果你了解 webpack ...

原创 mac 调试ios手机上的网页

具体操作1.首先是手机, 设置–>Safari–>高级–>Web检查器, 把web检查器打开,如下图2.然后是mac上safari的设置, Safari–>偏好设置–>高级–>在菜单栏中显示"开发"菜单,如下图所示3.在手机上打开一个网页,在mac上的safari上 开发–>“手机的名称”(我的是wtcsy) ， 如下图所示4.点击后面的地址,...

原创 vue antd 基础api

例：<ve-histogram :data="chartData" :settings="settings" :extend="extendCharts" :colors="colors"// 暂无数据状态 :data-empty="!chartData.rows.length"...

原创 Set、Map的区别，摘自git

Set 和 Map 主要的应用场景在于 数据重组 和 数据储存Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构1、集合（Set）ES6 新增的一种新的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值Set 本身是一种构造函数，用来生成 Set 数据结构。const s = new Set()[1, 2, 3, 4, 3, 2, 1].forEach(x =&g...

原创 js文本复制

const input = document.createElement('input'); input.type = 'text'; input.style.position = 'fixed'; input.style.left = '-99999em'; input.value = text; document.body.appendChild(input); i...

原创 防抖节流

何为防抖： 多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束后执行！！！demo：let timer;window.onscroll = function () { if(timer){ clearTimeout(timer) } timer = setTimeout(function () { //滚动条位置 ...

原创 分享总结及一些问题记录

无法解决的.当浏览器无法调起单独分享, 只能调起默认分享面板时, 是无法具体配置分享参数的, 这时候浏览器会自动根据一定的算法, 读取页面的内容某些浏览器用户主动调起分享面板, 点击具体分享都没有反应!当浏览器中什么都无法调起, 我们只能提示用户点击浏览器的分享的时候,是无法具体配置分享参数的, 这时候浏览器会自动根据一定的算法, 读取页面的内容UC浏览器android版分享时, 无法设...

原创 网络状态一览表

原创 使用cross-env解决跨平台设置NODE_ENV的问题

windows不支持NODE_ENV=development的设置方式。解决方式功夫不负有心人，在万能的google上，我找到了解决方法：cross-env。这个迷你的包能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。使用方法：安装across-env:npm install cross-env --save-dev在N...

原创 基于NODEJS创建本地服务器

首先要有安装NODEJShttp.js** * http server for demo */ const httpServer = [ { // Storm address: '/Users/wenyejie/workspace/sdh_oms_web/', port: 8080 }]; function createServer (resu...

原创 纯CSS3跑马灯动画

PS: 其实最重要的一点就是要形成闭环别说话, 线上DEMO一共分四个节点拿红色来说, 0, -100 100 0拿黄色来说: -100 0 100 -100灰色点区域是展示区域,一摸一样的子元素复制一份, 就是红色跟黄色,重要的事情说三遍: 要闭环, 要闭环最终结果, 请在交易虎, 代练商品买家聊天页面查看, 哈哈<div class="parent"> &l...

原创 常见UA

Personal Computer:Chrome浏览器:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36Safari浏览器:Mozilla/5.0 (Macintosh; Intel Mac OS ...

原创 website性能优化

website性能优化一. DNS预解析二. 减少HTTP请求次数CSS精灵图片合并JS三. 延迟加载四. 预加载五. 减少元素DOM数量六. 域名分流七. 避免404八. 使用CDN九. 启用GZIP十. 减少cookie尽量少cookie静态资源避免cookie, 最好无cookie...

原创 VUE SSR 踩坑

window, document. location, 等client api在服务端无法使用.如: 滚动监听, 滚动加载组件, 下载组件, 分享组件, 默认不执行, 该在mouted, 或者客户端执行, 进行if判断渲染错误, 如下TypeError: Cannot read property '__esModule' of undefined at resolve (/Users...

原创 pm2 常用命令

常用$ npm install pm2 -g # 安装 PM2$ pm2 start app.js # 启动 守护进程 并且 重启应用 (Node)$ pm2 start app.py # 启动 守护进程 并且 重启应用 (Python)$ pm2 start npm – start # 启动 守护进程...

原创 meta 详解

原创 ESLint常用规则

"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no-catch-shadow": 2,//禁止catch子句参数与外部作...

原创 Chrome浏览器Network面板http请求时间分析

Chrome浏览器开发者工具Network窗口下，可以查看下载各组件所需的具体时间根据上表进行简要分析——Stalled（阻塞）浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载；优化措施：1、将资源合理分布到多台主机上，可以提高并发数，但是增加并行下载数量也会增大开销，这取决于带宽和CP...

原创 babel-polyfill的几种使用方法

前言preset与plugin的关系:preset中已经包含了一组用来转换ES@next的语法的插件,如果只使用少数新特性而非大多数新特性,可以不使用preset而只使用对应的转换插件babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill使用转换插件:babel-plugin-transform-xxx使用方法缺啥补啥,在pac...

原创 判断当前tab页是否处于活动状态focus

var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;var visibilityChangeEvent = hidd...

原创 getUrlParams-获取链接中带的参数

简单版 * 获取URL中带的链接参数 * @param search 链接后缀 * @return {{}} 对象 */function getUrlParams (search) { search = search || location.search; var paramsSplit = search.replace(/^[^\?]*\?/i, '').split('&amp...

原创 cookiesEnabled-判断浏览器是否启用cookie

/**判断浏览器是否启用cookie@return {boolean}*/function cookiesEnabled() {var cookieEnabled = navigator.cookieEnabled;if (cookieEnabled === false) {return false;}if (!document.cookie && (cook...

原创 constructor-判断数据类型

// 注不能用于undefined 与 null 因为它们没有构造函数const demo = Symbol(10);switch (demo.constructor) {case String:console.log(‘String…’);break;case Number:console.log(‘Number…’);break;case Boolean:console.l...

原创 DNS域名解析生效

迁移服务器感悟：从机房迁移至阿里云导致用户访问还是老的服务资源，原因：DNS解析，解析出来的Ip仍然是旧的地址IP而不是阿里云的地址IP。解析生效时间：实时生效解析生效时间取决于本地DNS缓存的解析记录的TTL到期时间，一般默认为10分钟。 例如解析记录设置的TTL值为 10 分钟，则理论上全球解析生效时间需要10分钟；解析记录设置的TTL值为60秒，则理论上全球解析生效时间需要60秒。修...

原创 vue中router-link标签所必备了解属性

to表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。<!-- 字符串 --><router-link to="home">Home</router-link><!-- 渲染结果 --><a href="home">Home</a...

原创 路由跳转,判断是否登录

router.beforeEach((to, from, next) => {// 路由过滤，判断是否登录if (to.matched.some(record => record.meta.requireAuth)) {if (localStorage.loginstatus.get()) {next()} else {next({path: ‘/login’,quer...

原创 时间对象转化

new Date().toLocaleDateString()"2019/4/9"new Date().toLocaleTimeString()"下午8:10:30"new Date().toLocaleString()"2019/4/9 下午8:10:57"

原创 mac工具

cornerstone svn管理工具Tunnelblick vpnFileZilla FTP客户端以及服务器端开放源代码程式

原创 es6/7/8

Math.trunc:用来去除小数的小数部分，返回整数部分。若参数为非数值，则先转为数值。若参数为空值或无法截取整数的值，则返回NaN。// 正常使用Math.trunc(1.1); // 1Math.trunc(1.9); // 1Math.trunc(-1.1); // -1Math.trunc(-1.9); // -1Math.trunc(-0....

原创 CDN为什么能够优化加载速度

大多数人都知道，一个用户在打开一个新网站的时候，如果网站打开的速度过慢，用户是很难继续浏览的。因而很多网站的运营人员想方设法的提高网站的加载速度。我们也相信速度是一个成功网站的必备要素之一，速度不够快，会降低转化率。这里简单跟大家介绍下CDN，CDN是帮助一个网站能够快速打开的有效和实用方法。网站为什么会变慢网站打开速度慢受很多因素的影响，简单归纳下常见的几个原因：共享主机服务器不堪重负，...

原创 三级联动

这里是完整的三级联动的demo,可以在本地浏览器运行自行查看效果,已进行修改总的来说大体思路如下,监听省的变化,改变市的变化,监听市的变化,改变县的变化,不关心其他变化,只关心其上级变化,一级控制一级!!!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...

原创 websocket简述

首先对当前链接方式进行简述http:超文本传输协议，是网络应用层的协议，规定了网络数据传输的格式（数据行，数据头，数据体）。http请求是一种单向发起的请求，只能由客户端主动请求服务器，服务器做出响应，一次请求完成之后，连接断开，服务端不能主动找到某个客户端。socket:网络数据传输套接字，是一种数据传输技术（比http更偏底层），它规定了数据传输使用的协议(tcp,udp)，以及数据的大...

原创 二维码生成器

vue项目开发的时候经常会遇到需要将一个网址链接转化为二维码的需求，方便用户扫描观看，以下就是我在寻找vue二维码生成器的时候踩过的坑（本人小白，不喜勿喷）不能用的二维码生成器    qrcode    node-qrcode    v...

原创 vue单页面 刷新报404 not found错误

官网说明： https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E8%AD%A6%E5%91%8A 在linux下搭建nginx测试网页的时候，正常打开可以访问，当刷新后页面出现404 not found的问题说明：vue-router 默认 hash 模式 —— 使用 ...