javascript

web-components是一个比较新的开发技术，但组件化思想已经实际应用了很长时间，代表性的组件话框架有vue, react等。web-components可以直接使用原生HTML和Javascript来封装通用的 web 组件，其拥有简单直接、无任何依赖等特点，是 web 前端开发的一个强有力的技术。 文章前半部分讲web-components相关接口，最后有一个进度条组件实例，点击这里可直接跳转。 Web-Components API Web-Components API有三个核心部分，分别是：Custom elements, Shadow DOM, HTML templates。 Custom elements custom elements顾名思义，允许我们自定义通用的 HTML 标签，可以是一个包含特定功能如：日历、时间显示、进度条等。 创建自定义元素 使用自定义元素，必须先使用customElements.define(name, constructor, options)方法注册元素后才能使用，参数分别为元素名称，元素构造函数，选项（可选）。自定义元素名称不能是单个字母。 生命周期 自定义元素生命周期有 4 个回调函数： connectedCallback：当 custom element 首次被插入文档 DOM 时调用。 disconnectedCallback：当 custom element 从文档 DOM 中删除时调用。 adoptedCallback：当 custom element 被移动时调用。 attributeChangedCallback：当 custom element 增加、删除、修改自身属性时调用。 Shadow DOM 通常情况下，我们封装 web 组件的时候，需要将组件内部的样式封装进去，同时也要避免被外部样式干扰。Shadow DOM是隐藏在一个 DOM 节点里面的节点树，主要特点就是于外部 DOM 树隔离，使组件维护成本大大降低。Shadow DOM并不是新鲜玩意儿，而是浏览器内部 API 实现，我们常用的一些标签如带控制按钮的video标签，其内部就是一个Shadow DOM树。 创建 Shadow DOM Shadow DOM有几个核心概念： Shadow host: 一个常规 DOM 节点，Shadow DOM 会被添加到这个节点上。 Shadow tree: Shadow DOM 内部的 DOM 树。 shadow root: Shadow tree的根节点。 Shadow root: Shadow tree 的根节点。 Shadow boundary: Shadow DOM 结束的地方，也是常规 DOM 开始的地方。 创建Shadow DOM需要用到attachShadow({ mode: 'open' })方法，参数中mode的取值有两个：open, closed，用来配置是否可以从外部获取shadow tree。该函数返回一个Shadow Root。...

使用apollo-client上传文件 apollo 文件上传 依赖 apollo-client apollo-link apollo-upload-client apollo-cache-inmemory 客户端创建 apolloClient.js import { ApolloClient } from 'apollo-client' import { createUploadLink } from 'apollo-upload-client' import { ApolloLink, from } from 'apollo-link' import { InMemoryCache } from 'apollo-cache-inmemory' const authLink = new ApolloLink((operation: Operation, forward) => { operation.setContext({ headers: { Authorization: getToken(), }, }) return forward(operation) }) const uploadLink = createUploadLink({ uri: `${API_URL}`, }) export const apolloClient = new ApolloClient({ link: from([authLink, uploadLink]), // uploadLink一定要放最后 cache: new InMemoryCache(), }) 使用 uploadFile....

最近在开发过程中频繁用到防抖函数（提交表单、页面滚动等），比较 low 的解决方案一般都是定义一个全局变量作为控制函数执行的锁，这样的确能解决问题，但是一点都不优雅。于是仔细琢磨了一下防抖函数，其中涉及到了闭包，顺便复习一下。 什么是闭包 简单的讲闭包就是在函数里面定义的函数。在开发过程中我们经常会写。 function a() { let i = 0 console.log(i) function b() { i++ console.log(i) } return b } let fb = a() fb() // 0 // 1 上面代码中，函数 b 就是一个闭包。根据执行结果我们可以验证闭包的一个特性，即闭包中引用了父级作用域中的变量，当父级函数执行完毕之后，被引用的内部变量不会被回收。很容易理解，将上面的执行过程拆开来看： let fb = a() // a函数中声明变量i = 0，并且将i的值打印出来 // a函数中声明b函数，在b函数中将i的值增加1 // 将b函数返回，a函数执行完毕 fb() // i的值增加1，并将其打印出来 神奇的地方就在与，我们通过将 b 函数返回，实现了在 a 函数执行完毕后对其内部的局部变量进行访问和修改。因此闭包也被看作是连接一个函数内部和外部的桥梁。 防抖函数 从另一个角度思考闭包，可以看作父级函数为闭包创建了一个临时的作用域，其中的变量可以和外部隔绝。这样的话我们就可以把一些在特定位置才会使用的全局变量通过闭包的方式使用，使代码更加优雅。 以防抖函数为例，前面提到的解决方案是定义一个全局变量来控制函数的执行： let lock = false function submit() { if (!lock) { lock = true setTimeout(() => { console....

在vue中经常使用axios发起网络请求，与服务器进行数据交互。在使用过程中会有许多问题存在，比如由于网络不稳定导致请求超时/失败，通常有两种解决方案，一种是提示用户重新提交请求，另一种是进行相关提示并自动重新发送请求。第二种方式用户体验明显高于第一种方式。本文就针对第二种方式设计一个解决方案。 DEMO(https://yes-lee.github.io/axios-tutorial/) 拦截器 基本所有的网络请求库都有拦截器接口，包括请求拦截器和响应拦截器。axios设置拦截器的接口为axios.interceptor.request.use(cb, errCb)和axios.intercepter.response.use(cb, errCb)，拦截器可以设置多个，按照设置的顺序执行。 请求失败 请求失败无论是网络异常还是其他原因，都会走到响应拦截器里，因此对于请求结果的相关处理，重点放在响应拦截器上，而请求异常的处理则放在响应拦截器的第二个回调函数里面。 解决方案 思路很简单，在响应拦截器中拦截到异常信息，通过分析异常信息来直接从拦截器中重新发送请求。整个过程对于调用请求的业务代码中来说是毫无感知的，只需等待resolve结果即可。 实现 首先，经过测试得到请求超时的错误代码是ECONNABORTED，网络连接异常没有错误代码，可以直接通过error.message === 'Network Error'进行判断。 const httpClient = Axios.create(defaultConfig) httpClient.interceptors.response.use(null, err => { // 异常处理 const { config, code, message } = err if (code === 'ECONNABORTED' || message === 'Network Error') { // 请求超时 console.warn(`请求超时，将在${defaultConfig.retryDelay / 1000}秒后重试`) return new Promise(resolve => { setTimeout(async _ => { resolve(await httpClient.request(config)) }, defaultConfig.retryDelay) // 设置发送间隔 }) } // 可以进行相关提示等处理 return Promise.reject(err) }) 经过错误代码判断，需要进行重新发送的时候，将请求的 config 直接传入httpClient....

在 SPA（单页面应用）中，前端需要根据用户的权限来控制用户菜单以及路由表，vue-router提供了几个路由生命周期钩子，叫做路由守卫，我们可以利用路由守卫在路由以及路由元信息进行权限控制，同时搭配 vuex 将会更美味，文末有完整示例地址。 登录权限 登录验证是最常见的一种路由权限验证，使用vuex + 路由守卫可以实现比较清晰流畅的鉴权流，能轻松应对页面刷新、清除缓存等场景。 路由元信息 vue-router在构建路由时提供了元信息meta配置接口，我们可以在元信息中添加路由对应的权限，然后在路由守卫中检查相关权限，控制其路由跳转。 // router.js // 路由表元信息 ;[ { path: '', redirect: '/home', }, { path: '/home', meta: { title: 'Home', icon: 'home', }, }, { path: '/userCenter', meta: { title: '个人中心', requireAuth: true, // 在需要登录的路由的meta中添加响应的权限标识 }, }, ] // 在守卫中访问元信息 function gaurd(to, from, next) { // to.matched.some(record => record.meta.requireAuth) // 可在此处 } vuex 一般的，用户登录后会在本地持久化存储用户的认证信息，本文以JWT的token为例。将用户的 token 持久化到 localStorage 里，而用户信息则存在内存(store)中。这样可以在 vuex 中存储一个标记用户登录状态的属性auth，方便用语权限控制。 // store.js { state: { token: window....