2020年05月_高先生的猫

原创有了 Promise 和 then，为什么还要使用 async？

比如说我们需要一段请求服务器的代码：new Promise((resolve, reject) => { setTimeout(() => { const res = '明月几时有' if (1 > 2) { resolve(res) } else { reject('我不知道，把酒问青天吧') } }, 1500)}).then( (res) => { console.log(`成功啦！结果是...

2020-05-30 15:09:50 1543

原创基于 Vue SSR 的微架构在 FOLLOWME5.0 实践

2020年5月22日FOLLOWME5.0的第一个版本终于上线了，这也是公司内部基于 Genesis 上线的第二个项目。首页是老项目经历了最原始的那种 Vue SSR，后来在年初的时候，迁移到了 Nuxt.js 下，再到现在迁移到了 Genesis，可谓是一波三折。首次实践在2019年的上半年，我们在和 APP 混合开发的项目中，首次实践了模块化，它拥有了独立的 API、路由、状态和页面，并且是按需进行初始化的，但是它并不是完美的，它是基于路由的微模块，并且状态也是按需注入到全局的状态..

2020-05-30 15:09:47 302

原创 7种方法实现移动端屏幕1px边框效果

　　在Reina（视网膜）屏幕的手机上，使用CSS设置的1px的边框实际会比视觉稿粗很多。在之前的项目中，UI告诉我说我们移动项目中的边框全部都变粗了，UI把他的设计稿跟我的屏幕截图跟我看，居然真的不一样。没有办法，只有在后面的版本中去修改了，但是要改的话，需要知道是为什么。所以查了很多资料，终于搞懂了这个问题，并且总结了几种方法。造成边框变粗的原因其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelR

2020-05-30 15:09:43 1599

原创分享15个优秀的 CSS 解决方案和工具

1. Ballon.cssBalloon.css lets you create simple tooltips with pure CSS. It requires only a few lines of CSS to work, and no JavaScript. Also keep in mind that if pseudo elements are already in use on an element, the tooltip will conflict with them resulti

2020-05-30 15:09:40 337

原创阻止表单的默认提交事件

表单一点击提交按钮(submit)必然跳转页面，如果表单的action为空也会跳转到自己的页面，即效果为刷新当前页。如下，可以看到一点击提交按钮，浏览器的刷新按钮闪了一下,如果想要阻止表单的默认提交事件，有以下几种方法：1.将<input>标签内按钮类型从type="submit"修改为type="button"2.表单内的<button>未指定类型时，默认的类型为submit，可以显式的修改为<button type="button">来阻止表单提交3..

2020-05-30 15:09:38 547

原创前端常用60余种工具方法

1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3.电话号码export const isPhone = (s) => {

2020-05-30 15:09:36 440

原创 Deno会在短期内取代Node吗？

Deno是什么？Deno v1.0.0已于5月13日正式发布。其开发者为Ryan Dahl，他的上一个项目是Node，相信我们大部分人都了解。作为Node之父，Ryan Dahl认为Node自从他把项目移交出去后，Node的走向越来越背离了他的初衷，并且存在着很多无法解决的问题，所以他决心重新开发一个新的项目去解决这些问题，这个项目就名为Deno。目标则是Destroy-node。那么，这样是不是就意味着Deno即将替代Node，成为Node的下一代产品？我们应不应该从现在就开始放弃Node

2020-05-29 10:18:52 360

原创函数柯里化详解

函数柯里化详解在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的，尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。经典面试题:// 实现一个add方法，使计算结果能够满足如下预期：add(1)(2)(3) = 6;add(1, 2, 3)(.

2020-05-29 10:18:44 5760

原创 Notification API，为你的网页添加桌面通知推送

Notification 是什么MDN:Notifications API 的 Notification 接口用于配置和向用户显示桌面通知。这些通知的外观和特定功能因平台而异，但通常它们提供了一种向用户异步提供信息的方式。其实，MDN 的说明已经可以让我们很清楚知道Notification的作用。Notification能够为用户提供异步的桌面消息通知，即使你缩小浏览器或是活动在其他标签页，只要调用该Api的标签页没被关闭，它都能工作。在桌面端的浏览器中，除了 IE 不支持外，其他就均...

2020-05-29 10:18:04 889

原创 Gradify - 提取图片颜色，创建响应式的 CSS渐变

Gradify - 提取图片颜色，创建响应式的 CSS渐变　　被请求的HTTP对象之间的延迟会有一个时间段，这个期间网页看起来不完整。Gradify 可以分析出图像中4个最常见的颜色，创建一个梯度(或纯色)作为图片占位符。Gradify 可以在在任何图像发现最突出的颜色并产生一个可伸缩的、响应式的CSS渐变。在线演示源码下载...

2020-05-29 10:17:50 364

原创使用execCommand将文字样式设置成css样式的办法

我们在使用contenteditable属性做富文本编辑器时经常会用到document.execCommand方法来处理文字的样式。但当我们要设置比如font-size，会发现这个命令只支持（1-7）这几种字体大小值，而不是我们想要的类似css样式的值详细文档。有此类问题的样式还包括行高、颜色等到。但实际上我们的需求可能是将其设置成css样式，那就可以使用下面的方法来实现。以设置字体大小为例：document.execCommand( 'styleWithCSS', null, true);//

2020-05-29 10:17:44 2080 1

原创 Object构造函数的方法之Object.entries()

Object构造函数的方法之Object.entries()Object.entries( obj )返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for…in循环遍历该对象时返回的顺序一致（区别在于for…in循环也枚举原型链中的属性）通俗讲就是Object.entries()可以把一个对象的键值以数组的形式遍历出来，顺序和for…in一致，但不会遍历原型属性描述Object.entries()返回一个数组，其元素是与直接在object上找到的可枚举属性键值对相对应的数

2020-05-29 10:17:37 1250

原创 HTML5中History.back()页面后退刷新页面

在开发中经常会遇到在一个页面操作完返回上一个页面，此时要求上个页面展示最新数据的需求。比如A1为上一个页面，A2为当前页面1.A1需要加监听历史记录点 window.onpopstate=function(){ // 获得存储在该历史记录点的json对象 var json=window.history.state;// 获得的json为null时则无需刷新 if(json){ window.location.reload(); }}; ..

2020-05-29 10:17:31 5084

原创分享15款很实用的 Sass 和 Compass 工具

1. Compass.appCompass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of plain CSS. Compass.app is a menubar only app for Sass and Compass.

2020-05-29 10:17:24 470

原创 JavaScript 中 undefined 与 null 的用法区别

大多数计算机语言，有且仅有一个表示“无”的值，比如：C 语言的 NULL，Java 语言的 null，Python 语言的 None，Ruby 语言的 nil。但是在 JavaScript 中却同时存在undefined和null，这主要是由于历史原因，感兴趣的可以查一下。二者的主要用法区别如下：undefined变量被声明了，但没有赋值时，就等于undefined调用函数时，应该提供的参数没有提供，该参数等于undefined对象没有赋值的属性，该属性的值为undef...

2020-05-29 10:17:17 234

原创 js+canvas实现svg标签另存为图片

我们知道canvas画布可以很方便的js原生支持转为图片格式并下载，但是svg矢量图形则并没有这方面原生的支持。研究过HighChart的svg图形的图片下载机制，其实现原理大体是浏览器端收集SVG代码信息，并发送到到服务器端，由后端程序转换成图片格式后，以流的形式反射给浏览器端下载。最近在项目中有需求将一个非HighChart的SVG地图转存为图片并下载的功能。本希望模拟HighChart的原理实现，可是研究发现，该地图的SVG代码信息多达两万字节，然而HighChart后端制图程序却有着字节数限

2020-05-29 10:17:03 1100

原创全栈必知系列之网络知识篇

全栈必知系列之网络知识篇为了让用户能够拥有更加良好的用户体验，优化页面加载速度成为前端开发过程中极其重要的一环，而网络资源的传输速度无可厚非成为了优化提速最重要的部分，知道网络传输的各个环节的来龙去脉才能更好地去优化，因此作为一名合格的前端开发人员还是有必要了解网络相关的知识。HTTP的发展进程HTTP0.9HTTP0.9当时主要为了简单的用于网络之间传输HTML超文本内容，所以称为超文本传输协议，实现也相对简单流程如下基于TCP协议，客户端根据IP和端口号和服务器

2020-05-28 10:33:13 305

原创前端输入框校验限制不能输入中文

记录自己工作遇到的小小问题一般我们在做表单的时候都会有表单校验,通常都是用element提供的表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。如下面这样rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, messag

2020-05-28 10:29:54 7452

原创 Vue+Ts搭建项目(一)：前置知识

Vue组件的几种形式在vue+typescript中我们可以使用三种形式定义组件类组件扩展组件函数组件类组件是我们在ts项目中使用频率最高的组件，它可以使用我们的装饰器，使组件完美的使用typescript.<script lang="ts">import { Component, Vue } from 'vue-property-decorator'@Component({ name: 'Demo'})export default

2020-05-28 10:29:03 1609

原创曾经我以为我很懂箭头函数

曾经我觉得我自己已经很了解箭头函数了，不可能再被坑了。可是前几天我遇到了一个很奇怪的问题，在苦恼了很久后，发现就是箭头函数带来的坑。因此，就有了这一篇文章~问题描述比如我有一个基类 Animal，它有一个基础方法 sayName。之后每一个继承于它的子类，都需要自己实现这个 sayName 方法来证明自己的身份。基类代码实现很简单:class Animal { sayName = () => { throw new Error('你应该自己实现这个方法'); }}那么我现

2020-05-28 10:25:38 298

原创 pdf.js实战，含水印、电子签章解决方案

项目涉及到移动端查看电子合同的问题，前前后后试了三种方案，真是一步一个坑，三种方案各有各的优点，不水，直接上代码，按照自己的需求选择。一、pdf-vue直接使用vue-pdf插件，核心的代码是pdf.js，只不过就是自己封装了一下，优点是方便快捷，缺点是无法加载电子签章。github地址： github.com/FranckFreib…1、npm install pdf-vue --save2、template代码<template> <div class="

2020-05-28 10:23:53 6184 3

原创 html5拖拽应用记录

应用于被拖拽元素的事件（起飞的战机）ondrag 应用于拖拽元素，整个拖拽过程都会调用--持续触发 ondragstart 应用于拖拽元素，当拖拽开始时调用 ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用 ondragend 应用于拖拽元素，当拖拽结束时调用应用于目标元素的事件（战机降落的机场）ondragenter 应用于目标元素，当拖拽元素进入时调用 ondragover 应用于目标元素，当停留在目标元素上时调用 --持续触发 ondrop 应用于目标元素，当在目标

2020-05-28 10:22:19 244

原创小程序加载性能优化实践

前言对于互联网产品来说，第一印象就是应用的启动速度。虽然启动足够快时用户不会有很大的感知，但是如果慢就会被发现就会被挑战，总结来说，快就是应该的。而应用的启动速度优化，又可以分成首次启动速度优化和二次启动速度优化。对于不同的类型，对应的优化方案也是截然不同的。要如何确定优化方向以及优先级呢，这就要从具体的业务场景出发。业务场景但凡不谈业务场景就直接谈优化都是不够专业的。本次优化实践主要是依托在微保的车险业务。众所周知，车险一般都是一年期的保险。因此车险用户的访问频次非常低，一年一次。

2020-05-28 10:20:41 1397

原创 JS数据类型以及检测

基本数据类型 number string boolean null undefined Symbol Symbol是es6新增的基本数据类型，可以用来表示唯一性，使用时候不需要new，直接声明即可let a = Symbol()即可，由于声明的变量具有唯一性，所以Symbol()里面可以传入对参数的描述：let a = Symbol('this is a') let sbl = Symbol() let sbl2 = Symbol()

2020-05-28 10:18:12 139

原创 5个技巧助你编写更好的React代码

在本文中，我想分享几个技巧，这些技巧将改善你的React代码。1. 解构 props在 JS 中解构对象（尤其是 props）可以大大减少代码中的重复。看下面的例子：//Parent Componentimport React from 'react';import CoffeeCard from './CoffeeCard';const CafeMenu = () => { const coffeeList = [ { id:

2020-05-28 10:16:13 278

原创 H5移动端适配的最佳实践

移动端适配我们需要做哪些事情? 一个最佳实践除了设置 viewport 和 rem 基准值，随着iPhone手机的不断升级，我们不得不正视以下2个问题：安全区域适配识别刘海屏关于viewpoint-fit在切入正题之前，我们先展开介绍一下viewpoint-fit，它的作用是用于设置可视区域的尺寸，属性如下：PropName Description Name viewport-fit For @viewpoint Value auto | contaio

2020-05-28 10:12:58 575

原创 js异步处理的三种方式

js异步处理的三种方式写在前面 javascript语言的执行环境是"单线程"(single thread)，就是指一次只能完成一件任务。如果有多个任务，就必须排队，等前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。单线程function f1() { console.log('1')}function f2() { console.

2020-05-27 11:14:11 1131

原创你可能不知道的5个setTimeout冷知识

你可能不知道的5个setTimeout冷知识作为一名合格的程序员，想必大家对 setTimeout 并不陌生。它就是一个定时器，可以指定一个函数在多少毫秒后执行；它会返回一个定时器的编号，可以通过 clearTimeout 手动清除这个定时器。在这里我不会重复介绍 setTimeout 是一个宏任务，是 JavaScript 执行异步函数的方法，也不会用它来实现一个符合 Promises/A+ 规范的 Promise。因为这些都太基础、太简单了！今天我要介绍的可能是你还不知道的setTimeout.

2020-05-27 11:10:12 2637 3

原创 Vue 使用 vue-svg-icon

1. 阿里巴巴矢量图选择需要的字体修改参数选择SVG下载2.IcoMoon点击右上角"icoMoon App" 点击左上角"Import Icons" 选择下载的 svg 文件,点击"打开"按钮页面上会多一个"Untitled Set"选项,下面的小图标就是导入的本地 svg 文件点击选择这些小图标,点击右下角"Generate Font"生成字体鼠标移入到图标的时候,下面会显示"Get Code",点击查看 (此步骤可省略) 点击顶部"Preferences"参数选择按钮,

2020-05-27 11:07:25 2040

原创 ECMAScript 2020 新特性

ECMAScript 2020 新特性JavaScript 是最流行的编程语言之一，每年都会添加新的特性。本文介绍了添加在 ECMAScript 2020（又称ES11）中的新特性。在引入 ECMAScript 2015（又称 ES6）之前，JavaScript 发展的非常缓慢。但自 2015 年起，每年都有新特性添加进来。需要注意的是，不是所有特性都被现代浏览器支持，但是由于 JavaScript 编译器 Babel 的存在，我们已经可以使用新特性了。本文将介绍 ECMAScript 202.

2020-05-27 11:05:19 2966

原创 CSS 判断鼠标进入的方向吗？

在之前某一个前端技术群里，有一个群友说他面试的时候遇到了一个问题，就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。给出的初始结构如下：<style>body { padding: 2em; text-align: center;}.block { position: relative; display: inline-block; width: 10em; height: 10em; ve

2020-05-27 11:01:46 240

原创 js的Set和Map相关属性和方法

Set 实例的属性和方法Set 实例属性:Set.prototype.constructor：构造函数，默认就是Set函数。Set.prototype.size：返回Set实例的成员总数。Set 实例方法:分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。add(value)：添加某个值，返回 Set 结构本身。delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。has(value)：返回一个布尔值，表示该值是否为Set的成员。clear()：清除.

2020-05-27 10:53:51 759

原创 es6 Map 转化为对象

2020-05-27 10:52:57 1462

原创 vue 使用computed计算属性进行传参

<div :style="imgWD(item.crown)" class="img-detail"> <image resize='stretch' class="itemPhoto" :src="imgUrl + item.photoName"></image></div>computed:{ imgWD(o){ return function(o){ return { widt.

2020-05-27 10:51:58 2100 2

原创 vue $refs的基本用法

例代码如下：<div id = "app"> <input type="test" ref="inputTemp"/> <button @click="add">加入</button></div><script>new Vue( { el: "#app", methods:{ add:function(){ t

2020-05-27 10:48:28 564 1

原创 vue store 存储 dispatch 和 commit的区别

dispatch: 含有异步操作存储：this.$store.dispatch('initUserInfo',friend);取值：this.$store.getters.userInfo;commit:同步操作存储：this.$store.commit('initUserInfo',friend);取值：this.$store.state.userInfo;

2020-05-27 10:43:56 1181

原创 react和vue有哪些不同，说说你对这两个框架的看法

react和vue有哪些不同，说说你对这两个框架的看法1、React严格上只针对MVC的view层,Vue则是完全的MVVM模式。2、虚拟 DOM不一样 vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而React,每当应用的状态被改变时,全部组件都会重新渲染。3、组件写法不一样 React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件

2020-05-26 15:36:35 299

空空如也

空空如也