小记一则强制更新 Service-Worker 的方法

By default in javascript on

众所周知现在 Service-Worker 几乎是项目标配，vue、react 的脚手架工具都有推荐使用 PWA，但对 Service-Worker 管理不善或一旦你的静态资源文件出现问题，会对于线上业务造成毁灭打击。我们最新的一个项目中使用了蚂蚁金服家的 Ant-Desgin-Pro 开箱即用中台系统，自带 PWA ，所以这里针对的是如果你的线上环境已经存在 Service-Worker，在尽可能减少影响用户体验的情况下卸载。 注意 直接更改你的 Service-Worker 里的方法是不起作用的，因为你还需要 Service-Worker 能够工作，以保证版本兼容性和卸载也能够正常工作。 * 先直接上菜 在你的程序入口文件（如果你是 SPA 应用）或者其他可以在任何函数执行前的地方加上 navigator.serviceWorker.getRegistrations().then(function (registrations) { for (let registration of registrations) { registration.unregister…

小程序中类抖音的交互实现方案

By default in 小程序 on

首先思考一个问题，如果想要在小程序中实现抖音上下切换、拥有漂浮物按钮等怎么办？ 这个问题从 18 年 9 月开始一直让我头痛到睡不着觉，历时八个月，中间有过微信的更新，有过我们自己的努力，终于把这个坑爬出来了。下面会逐一做解决问题的分析，如果想看结果可以直接跳到结尾。 作为稍微有一点经验的前端，看到这道题的时候可能会代入传统网页的思想。 pageScrollTo式 准备 N 个视频容器，在容器上做滑动、点击等事件监听，touchStart 时记录手指 XY 轴，结束时 diff XY 轴判断滑动方向然后调用 pageScrollTo 页面的滚动，滚动到上一个或下一个容器的位置。当然了，这是最基础的想法，且先不说touchStart 到touchEnd 件单靠 XY 轴改变值来判断是否滚动这样的触发条件可靠，视频一多起来实例简直要卡上天，并且如果想要实现手指拖多少视频容器滚动多少，就需要频繁调用 setData，这在小程序中是一个相当高危的操作，即使做了节流性能依旧好不到哪里去，IOS 上可能通过 transition 来让他看起来不卡顿但是有段落感，…

Vue-Cli3.x 更新填坑

By default on

Vue-Cli 3.x 更新填坑 Vue-Cli3.x 核心是基于 webpack4 提供服务，并提供 GUI，减少开发者配置，并且继承 Vue-cli2，PostCSS、.env 文件的模式和级联环境变量，支持 PWA、多页面模式、TypeScript 等等 * 卸载原本全局安装的 cli2 npm uninstall vue-cli -g * 安装新版包 npm install -g @vue/cli * 验证版本 vue -version 创建项目 vue create project-name注意项目名不能有大写字符，如果需要两个单词则用-分开 然后会询问选取 preset ，分别是 default 和 Manually select features，…

封装小程序 wx.request 添加token

By default in 小程序 on

先说一下为什么不使用fly.io，目前 fly.io 更大的方向还是为了多环境同步时做准备，一套代码适应 h5、native、weex 和小程序，这样看上去貌似确实使用它会方便很多，介于现在小程序和 mpvue 挖下的坑，想要在小程序上完美模拟浏览器时的 vue 并不好做，而且 fly.io 的小程序版本中的思路基本也是类似工厂模式，依靠 promise 来封装 wx.requeset，提供统一对外的拦截器，那么问题来了，我经手的项目中大量使用 token 来认证，而存储 token 的时候小程序和网页的接口是全然不同的，需要额外复杂的代码来同时适配多端的存储接口，对于我这个项目只有 3 周的开发周期而言肯定是不划算的... 那么先直接放封装部分的代码 // // The Code By DayiTech FrontEnd // Author:Han // Created At 2018/…

JavaScript设计模式（下篇）

By default in javascript on

迭代器模式 迭代器模式意在，js 中遍历方法众多，foreach、for、for...of 等等针对的是不一样的数据格式，而迭代器模式的思想就是聚合这些遍历方法，我不需要知道我现在的数据是个什么样的格式，只要知道是要遍历的就可以了。 JavaScript 共有四种数据集合：数组 Array、对象 Object、Map、Set。后两个是 ES6 添加的 /* 假设遍历以下dom <p>1</p> <p>2</p> <p>3</p> <p>4<…

JavaScript设计模式（上篇）

By default in javascript on

JavaScript 设计模式 * 解析 ES6 所需要的几个 babel 插件 npm install babel-core babel-loader babel-polyfill babel-preset-es2015 面向对象三要素 继承 class Person{ constructor(name,age){ this.name = name this.age = age } eat(){ console.log(`${this.name} eat something`) } speak(){ console.log(`My name is ${this.name}, age ${this.age}`) } } //继承 class Student extends Person{ constructor(…

前后端分离鉴权：token和axios请求响应拦截器

By default in code on

首先来看一下设计思路 后端使用的是laravel5.5，搭配jwt-auth来做 CORS 跨域，每个请求前端都需要在请求头里带token，并且存储到本地localStorage，token在服务端默认八小时过期，到还剩 2 小时的时候后端会在这段时间内的请求响应头里返回新的token，前端拿到新的token更新本地token整体流程看起来不复杂，并且项目里本身就在使用axios 设置拦截器起来还是轻松的 // main.js import Vue from 'vue' import App from './App' import router from './router' import store from './store' import axios from 'axios' Vue.prototype.$axios…

prerender-spa-plugin:Vue-seo爬坑

By default in code on

这段时间在做一个新 SaaS，单点登录架构，然后这个项目有一个面向大众的首页，于是在项目已经写了一个星期的时候我突然意识到，SEO 可能是个问题 我们的后台是 php 写的，介于这到底是个 SaaS 项目，只有几个页面需要给爬虫爬，不会也不需要考虑全局去开启 ssr，于是看到了这个东西prerender-spa-plugin，他可以在你打包项目的时候帮你预渲染出来，从而做到 seo 的效果 * 高高兴兴安装，悲悲伤伤百度 // 安装 npm install --save-dev prerender-spa-plugin // 使用vue-router请把路由改成history模式 // vue-cli构建的项目请前往build/webpack.prod.conf.js 否则webpack.config.js // 引入预渲染 const PrerenderSpaPlugin = require('prerender-spa-plugin') // 在plugins中使用 new PrerenderSPAPlugin({ staticDir: path.join(…