- 博客(24)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 【VUE项目维护】多个项目提取共用组件的解决方案
项目源码 https://github.com/equicy/vue-common-components我们先来看一个项目目录，如果是你的需求，或许你该认真看完需求场景当一个产品被更多的客户认可，就有私人订制的需求。对于开发者来说最简单的肯定是复制粘贴，假如有新的更新或者一个bug，我们需要提交多次公共的代码；当然项目少还好，假如项目多一些，我们真就成了“拧螺丝”的螺丝工。当然这种场景很常见，在各大框架或者各大语言都有解决方案，我们今天就聊聊vue项目的使用场景。调研vue的开发者都了解vue
2020-05-10 16:54:58
1806
原创 【前端小卡】通过vuecli3.0+兼容IE踩坑记录，学习解决问题的方式
看完这篇文章，如果还不能解决你的vue兼容ie问题，我来手把手教你，我希望在这篇文章中，你不仅仅为了解决兼容性问题，而是学会一种解决问题的思路。为什么需要兼容IE？可能兼容IE是每一个前端开发者头痛的问题，谷歌、火狐他不香吗？香啊，但是不能让用户站在开发者的角度去使用产品吧？如果甲方爸爸就要用IE，你又能如何？哈哈，废话不多说，进入正题，开始我们的项目是vuecli2.0搭建的时候，解决IE非...
2020-04-06 15:03:42
968
5
原创 【实战篇】基于vue-cli创建的项目进行打包优化
一、前言阅读完该文章大概需要2.5min。读完该篇文章你能学到vue-cli默认做了哪些优化？在cli的基础上我们又能做哪些优化？vue.config.js中如何配置一些常用的plugin和loadervue-cli的出现，让我们省掉了配置webpack的时间。也就是说，一个不懂webpack的人，也能直接上手开发。比如file-loader, url-loader会提前为我们配置好。性能方面，vue-cli也默认尽可能多的帮我们做了优化，比如cache-loader会在项目
2021-08-02 20:55:41
2230
1
原创 【浏览器渲染】这是一份关于加载script和style的实验报告
如果做性能优化，一定会想当的一个优化点就是script标签和link标签要放置的位置，当然大部分的观点都是script标签放到</body>之前,link标签放到title中；或者是配合async、defer、preload、prefech使用，当然目的只有一个：让页面尽可能快的展示在用户面前。下面仅仅会讨论浏览器获取到HTML文件后的部分。浏览器渲染过程浏览器获取到HTML文件后，开始渲染工作。这里以webkit引擎为例。解析html产生DOM树解析css样式产生CSSOM树.
2021-07-04 17:30:11
319
原创 手写promise全家桶
关于Promise的文章那么多，内容或许差不多，那我为什么还要写一篇？两个原因：一是为了让自己更深入学习；二是将自己学习的过程记录下来。下面的内容就是按照Promises/A+规范自己手写一遍代码，包括常用的几个Promise方法。如果读者认为自己手写一个Promise完全没问题，那就没有必要浪费时间；如果感觉掌握的马马虎虎，我倒建议继续往下看看。tip: 预计看完整片文章3-5分钟Promise在解决什么问题？有个词叫“回调地狱”，没错，主要解决的就是这个问题。直接看下面的例子。// 一般.
2021-03-04 23:04:25
170
1
原创 这13个手写代码你学会了吗？(面试高频)
1. promise.allPromise.all = function(promises) { return new Promise(function(resolve, reject) { var result = [] var count = 0 var promiseNum = promises.length if (promises.length === 0) resolve([]) for (let i = 0; i < promiseNum;
2020-11-17 09:57:41
345
原创 聊聊“过时的”的JSONP
一. 跨域和同源策略为什么会跨域？因为不同源。什么是"源(origin)"直接看一张图很明显看到三部分:http:// 协议localhost 域名8080 端口所以可以总结为协议、域名、端口如果有任意一项不相同则视为跨域二. 什么是JSONP?JSONP(JSON with Padding) 是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。摘自【百度百科】三. JSON和JSONP有什么什么区别?JSON虽然和JSONP仅有一个字母的差
2020-11-09 18:03:37
872
原创 单点登录(SSO),前端需要考虑些什么？
前言最近在做单点登录的前端适配工作，包括移动端、小程序、web。也许一些人还没有接触过单点登录，接下来我将以keycloak为例进行探讨。首先介绍两个概念:单点登录（Single Sign On），简称为 SSO，是比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。(百度百科)Keycloak是一个为浏览器和RESTful Web服务提供 SSO 的集成。声明：本文仅代表个人观点Refresh_token如果做过微信开
2020-09-30 23:13:56
1115
原创 手写NODE环境以及浏览器环境的AJAX
前言说实话，从接触前端开始。接口请求直接用的就是JQuery的ajax，而我们如今的项目也直接用的是axios。至于底层一点的原理我们也不会刻意的去研究。最近正好有用node写一些小工具，需要自己封装AJAX，对这块做一下记录。下面将介绍到：分别封装node环境以及浏览器环境的AJAX将callback模式转换为promise模式node环境// 引入node自带的http模块const http = require('http')// 将协议、主机名、端口等从uri中提出，这里我也
2020-09-27 11:50:56
156
原创 聊聊前端项目重构
背景：由于团队业务扩展较快的原因，项目从一个，两个到三个；为了提高项目的可维护性，于是决定了重构。两个月的时间，有限的知识储备，完成了第一次重构。一、重构我都做了什么？参考monorepo的思想，合并项目、拆分组件JS迁移到TS首页优化css规范处理添加单元测试添加前端监控二、参考monorepo的思想，合并项目、拆分组件1.合并项目其实对于我们团队的这三个项目，有很多公共的组件，就要考虑是否可以将这些公用组件提取，提高项目可维护性。具体操作方式，可以先看一张图片，country.
2020-09-07 12:29:33
2001
1
原创 vscode中使用正则搜索
vscode的正则搜索语法和正常正则语法有细微不同直接看个例子吧，匹配十六进制颜色，例如（#dfd23d）#[0-9A-F]{6}
2020-08-07 11:31:18
1719
原创 三步解决vuecli3.0搭建的项目全局应用sass变量
一、创建颜色文件，src/style/_variable.scss$primary-color: #13E6AA;$success-color: #15A87F;$error-color: #FF4A4A;二 配置vue.config.js文件module.exports = {css: { loaderOptions: { sass: { prependData: `@import '@/styles/color.scss';` } }
2020-08-05 20:03:43
165
原创 试着为vue项目添加单元测试（一）
简单的事情往往被忽略，说到单元测试，很多团队都只是在接口部分加入，UI层面最容易被忽略。今天我将围绕一个简单的demo写一下ui层面的单元测试。该文章仅仅面对没接触UI层面单元测试，且想快速上手的人，大佬可将鼠标移到右上角点击x即可。???? 前端做单元测试(what? why?)模拟用户操作，先于用户发现问题。???? 需要提前了解什么知识？准备什么？像char、mocha、jest这个库倒是可以简单了解一下如果你想快速上手跟着我敲一遍代码也足够了在接下来的测试中，vuecli已经提供
2020-08-03 15:07:34
595
1
原创 利用函数式组件做二次封装
前言随着技术的快速发展，前端为了快速开发，我们一般会接入像elementui这样的库，以element为例，一些组件无法满足我们的需求，就需要做二次封装。今天想着尝试利用vue的函数式组件做一下二次封装。先来看一个最简单的demo来补充点基础知识// demo.vue<template> <div class="demo"> <DeInput @debounce="debounce" maxlength='5' @blur="inputBlur"/>
2020-07-08 11:09:08
503
原创 你真的已经理解防抖和节流了吗？
前言如果经常在一些技术社区"散步"的话，函数的"防抖"和"节流"这两个词被提到的频率还是挺高的，但是做了一年的开发，却没有在自己写的项目中用到，还是要好好反思一下。痛定思痛，好好学习。防抖(debounce)原理????事件执行n秒后再执行回调，如果在这n秒内再次被触发，则n秒重新计算。应用场景????搜索框: 用户输入完关键词再去触发搜索行为；window的resize事件:用户调整大小结束之后再去触发相应的操作；效果预览防抖前// 代码预览<input i
2020-06-14 15:15:31
183
原创 【Vue+Typescript】项目优化之CDN配置
做了将近一年的前端开发工作，发现前端并不是曾经想象只会写业务就能ok的，尤其2020年，如果单单只是会写业务层面的事情，我相信被淘汰是一种必然。当然学无止境，要学的东西还有很多，数据结构，算法，网络，项目优化等等。我们今天就谈谈一个前端优化小之又小的事情——CDN的配置。什么是CDN？我们先来看一下百度百科的解释：“CDN的全称是Content Delivery Network，即内容分发网...
2020-04-19 23:56:07
1064
1
原创 解决浏览器自动填充input（适用于elementui）
问题描述登陆页面浏览器保存账号密码后，浏览器会自动在其他页面进行填充，原因是浏览器会默认填充input type值为password的输入框，即填充对象为input[type=password]即前一个input框。解决方案网上也有好多的解决办法，下面列几种，最后我们列出最优的解决方案autocomplete自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键...
2020-02-24 11:38:59
3392
3
原创 【卡片校园技术】通过naturalHeight和naturalWidth获取图片的原始比例
图片的naturalHeight和naturalWidth属性var img = document.createElement('img'); // 使用 DOM HTMLImageElementimg.src = 'image2.jpg';var heightO = img.naturalHeightvar widthO = img.naturalWdith // 原始宽度获取图片...
2019-12-11 11:06:00
207
原创 【前端小卡】module.exports、exports、export 、export.default
首先我们要明确一点commonJs(nodejs)和es6写法完全是两种不同的概念，他们没有任何联系首先moudle.exports和exports是commonjs的写法，它的引用方式是通过requireexport和export.default是es6的写法,他们的引用方式是通过import下面简单的讲解他们的用法1. module.exports、exports用法//m...
2019-09-06 18:42:06
260
原创 【前端小卡】npm从0-1发布一个属于自己的包
学webpack的时候心血来潮想发一个npm包体验一下，下面就详细的说一下npm包的发布流程首先你的有一个npm的账号，注册地址(https://www.npmjs.com/signup),注册之后到邮箱验证,请记得注册的用户名和密码，一会会用到安装node（会自动安装npm）以下为命令步骤mkdir testname && cd testnamenpm login ...
2019-09-05 19:07:20
105
原创 【前端小卡】vue传参query与params的区别(params接收不到参数问题)
有很多人其实在用vue传递参数的时候发现params接收的参数有时候接收不到，今天我们就聊一下query与params传参的区别query传递的参数会出现在url中，但是当页面刷新时候，参数不会丢失；params传递的参数虽然不会出现在url中，但是刷新页面会丢失(解决params传递的参数接收不到的问题)params传递参数必须用name，而query传递参数可以用name和path，所有...
2019-08-21 18:29:17
1003
原创 【前端小卡】对vue中$attrs与 inheritAttrs的理解
首先引入官方解释包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。####让我们用实例来进行说明//app.vue<templat...
2019-04-30 12:22:45
252
原创 简单理解Map，Filter，Reduce方法并在数组原型中实现
大家好，我是前端小白Equicy，最近学了数组的几个方法，感觉很重要也很有意思。用自己的思路梳理一下，希望能帮助到一些初学者。让我们由浅入深的理解一下这三个方法：map: 映射，数组遍历并且通过一些特定的规则加工之后，返回一个新的数组，新的数组与原数组长度一样。举个例子：穿着红衣服的小明、丹尼–>map(戴个帽子)–>穿着红衣服的小明、丹尼，并且戴着帽子语法解释map...
2019-04-19 14:25:48
412
一个html5的demo
2017-12-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人