javascipt
happy任
一只野生web开发者。
展开
-
微前端落地实践
Vue微前端架构落地方案前言微前端架构是方便企业级后端管理系统的更加灵活、解耦性高的新型前端架构,至于具体落地配置如下一、初始化主应用这是一个典型的vue-cli创建的项目,需要安装 qiankun这个微前端包{ "name": "qiankun-vue", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli原创 2021-02-01 13:51:51 · 397 阅读 · 0 评论 -
使用requestAnimationFrame实现节流
使用requestAnimationFrame实现节流requestAnimationFrame方法接收一个参数,此参数是一个要在重绘屏幕前调用的函数。这个函数就是修改DOM样式以及反映下一次重绘有什么变化的地方。标记位 每50ms触发一次let enabled = truefunction expensionFunction() { console.log('exec!')}window.addEventListener('scroll', () => { if (en原创 2020-12-29 13:58:33 · 729 阅读 · 1 评论 -
Vue3.0+vue-router-next+vuex4.0+typescript项目搭建
Vue3.0Vue3.0是2020年4月刚刚发布了beta版本的全新Vue版本项目地址:https://github.com/kaiqiangren/vue-next-ts-preview一、Vue3.0与Vue2.0的对比:优点:将Vue内部的绝大部分api对外暴露,使Vue具备开发大型项目的能力,例如compile编译api等webpack的treeshaking支持度友好...原创 2020-04-29 15:54:28 · 11078 阅读 · 8 评论 -
前端性能监控利器-performance
一、前言 最近在阅读Vue源码时,发现了Vue当中使用到了performance的mark&measure方法,针对此api特此深入研究了一下performance的使用方法以及其作用。二、performmance介绍Performance对象里出现了4个属性:1、timing对象提供了各种与浏览器处理相关的时间数据。具体如下表名称 作用(这里所有时间戳...转载 2019-10-04 12:20:59 · 1518 阅读 · 0 评论 -
Webpack4打包vue项目
一、前言 本项目为个人对webpack4的不断探索,项目地址https://github.com/kaiqiangren/vueWebpack/tree/master 请下载项目至你们的本地。二、正文该项目提功2个常用功能,供想要探索webpack4的同学们进行webpack4的学习。 1、npm install2、npm run dev "scr...原创 2019-05-14 16:31:34 · 1139 阅读 · 0 评论 -
抽离ElementUI源码的clickoutside全局指令
一、前言 ElementUI是一款基于Vue的前端优秀开源组件,其框架内部的许多工具都是非常优秀,而且好用的,本文将从中抽离出该框架中的1个非常实用的全局指令。二、正文1、clickoutside.js //点击被插入该指令的元素外的任意空白处,触发指令所绑定的方法。import Vue from 'vue';import { on } from 'element-ui...原创 2019-03-20 16:32:44 · 2741 阅读 · 0 评论 -
js运行环境判断
一、前言 在阅读vue2.5+源码时,看到了vue的环境判断的代码,整理总结一下,方便大家在运行环境判断时进行使用。二、正文1、判断浏览器运行环境const inBrowser = typeof window !== 'undefined'2、IE环境const UA = inBrowser && window.navigator.userAgen...翻译 2018-11-27 10:37:38 · 3020 阅读 · 0 评论 -
js设计模式-观察者模式
一、前言 发布-订阅模式,即观察者模式。在JavaScript中,使用自定义事件及回调函数的方式来实现这种模式。二、正文 下面代码为1个简单的观察者模式的事件发布-订阅机制 class Event{ constructor(){ //初始化事件缓存 this.cache...原创 2018-11-30 10:45:51 · 445 阅读 · 0 评论 -
实用的js深拷贝与浅拷贝
一、前言 1、深拷贝:对象所有属性以及子属性的完全clone,clone后,改变源对象属性,不会影响clone后对象的属性。 2、浅拷贝:对象最外层属性的clone,如果最外层属性值是object类型,则获得源对象属性的引用地址;clone后,如果改变源对象中最外层的属性值,不会对clone对象的属性造成影响,但是如果改变源对象引用地址的属性后,会对clone对象引用的属性值造...原创 2018-11-21 15:56:00 · 139 阅读 · 0 评论 -
js高阶函数-节流&防抖函数
一、前言 防抖函数主要用于输入框调用频繁接口等业务场景。 节流函数主要用于需要限流接口调用的业务场景。 二、正文 节流函数//函数节流function throttle(fn, delay = 300) { let timer; //定时器 let firstTime = true;//是否第一次调用...原创 2018-10-26 15:08:56 · 634 阅读 · 0 评论