<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Equicy的博客]]></title><description><![CDATA[前端工程师]]></description><link>https://blog.youkuaiyun.com/ly979898684</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ly979898684]]></copyright><item><title><![CDATA[【实战篇】基于vue-cli创建的项目进行打包优化]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/119333842</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/119333842</guid><author>ly979898684</author><pubDate>Mon, 02 Aug 2021 20:55:41 +0800</pubDate><description><![CDATA[一、前言

阅读完该文章大概需要2.5min。


读完该篇文章你能学到

vue-cli默认做了哪些优化？
在cli的基础上我们又能做哪些优化？
vue.config.js中如何配置一些常用的plugin和loader



vue-cli的出现，让我们省掉了配置webpack的时间。也就是说，一个不懂webpack的人，也能直接上手开发。比如file-loader, url-loader会提前为我们配置好。


性能方面，vue-cli也默认尽可能多的帮我们做了优化，比如cache-loader会在项目]]></description><category></category></item><item><title><![CDATA[【浏览器渲染】这是一份关于加载script和style的实验报告]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/118464709</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/118464709</guid><author>ly979898684</author><pubDate>Sun, 04 Jul 2021 17:30:11 +0800</pubDate><description><![CDATA[如果做性能优化，一定会想当的一个优化点就是script标签和link标签要放置的位置，当然大部分的观点都是script标签放到&lt;/body&gt;之前,link标签放到title中；或者是配合async、defer、preload、prefech使用，当然目的只有一个：让页面尽可能快的展示在用户面前。下面仅仅会讨论浏览器获取到HTML文件后的部分。

浏览器渲染过程

浏览器获取到HTML文件后，开始渲染工作。这里以webkit引擎为例。

解析html产生DOM树
解析css样式产生CSSOM树
.]]></description><category></category></item><item><title><![CDATA[手写promise全家桶]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/114380328</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/114380328</guid><author>ly979898684</author><pubDate>Thu, 04 Mar 2021 23:04:25 +0800</pubDate><description><![CDATA[关于Promise的文章那么多，内容或许差不多，那我为什么还要写一篇？两个原因：一是为了让自己更深入学习；二是将自己学习的过程记录下来。下面的内容就是按照Promises/A+规范自己手写一遍代码，包括常用的几个Promise方法。如果读者认为自己手写一个Promise完全没问题，那就没有必要浪费时间；如果感觉掌握的马马虎虎，我倒建议继续往下看看。
tip: 预计看完整片文章3-5分钟

Promise在解决什么问题？

有个词叫“回调地狱”，没错，主要解决的就是这个问题。直接看下面的例子。

// 一般.]]></description><category></category></item><item><title><![CDATA[这13个手写代码你学会了吗？(面试高频)]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/109736437</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/109736437</guid><author>ly979898684</author><pubDate>Tue, 17 Nov 2020 09:57:41 +0800</pubDate><description><![CDATA[1. promise.all
Promise.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 &lt; promiseNum;]]></description><category></category></item><item><title><![CDATA[聊聊“过时的”的JSONP]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/109582713</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/109582713</guid><author>ly979898684</author><pubDate>Mon, 09 Nov 2020 18:03:37 +0800</pubDate><description><![CDATA[一. 跨域和同源策略


为什么会跨域？因为不同源。
什么是"源(origin)"直接看一张图




很明显看到三部分:

http:// 协议
localhost 域名
8080 端口

所以可以总结为协议、域名、端口如果有任意一项不相同则视为跨域

二. 什么是JSONP?

JSONP(JSON with Padding) 是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。摘自【百度百科】

三. JSON和JSONP有什么什么区别?

JSON虽然和JSONP仅有一个字母的差]]></description><category></category></item><item><title><![CDATA[单点登录(SSO),前端需要考虑些什么？]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/108891263</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/108891263</guid><author>ly979898684</author><pubDate>Wed, 30 Sep 2020 23:13:56 +0800</pubDate><description><![CDATA[前言

最近在做单点登录的前端适配工作，包括移动端、小程序、web。也许一些人还没有接触过单点登录，接下来我将以keycloak为例进行探讨。首先介绍两个概念:
单点登录（Single Sign On），简称为 SSO，是比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。(百度百科)
Keycloak是一个为浏览器和RESTful Web服务提供 SSO 的集成。
声明：本文仅代表个人观点

Refresh_token

如果做过微信开]]></description><category></category></item><item><title><![CDATA[手写NODE环境以及浏览器环境的AJAX]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/108825071</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/108825071</guid><author>ly979898684</author><pubDate>Sun, 27 Sep 2020 11:50:56 +0800</pubDate><description><![CDATA[前言

说实话，从接触前端开始。接口请求直接用的就是JQuery的ajax，而我们如今的项目也直接用的是axios。至于底层一点的原理我们也不会刻意的去研究。最近正好有用node写一些小工具，需要自己封装AJAX，对这块做一下记录。
下面将介绍到：

分别封装node环境以及浏览器环境的AJAX
将callback模式转换为promise模式


node环境
// 引入node自带的http模块
const http = require('http')
// 将协议、主机名、端口等从uri中提出，这里我也]]></description><category></category></item><item><title><![CDATA[如何把当前的分支强制覆盖另一个分支]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/108626156</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/108626156</guid><author>ly979898684</author><pubDate>Wed, 16 Sep 2020 17:07:09 +0800</pubDate><description><![CDATA[git merge -s ours obsolete
obsolete： 需要覆盖的分支

]]></description><category></category></item><item><title><![CDATA[聊聊前端项目重构]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/108445707</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/108445707</guid><author>ly979898684</author><pubDate>Mon, 07 Sep 2020 12:29:33 +0800</pubDate><description><![CDATA[背景：由于团队业务扩展较快的原因，项目从一个，两个到三个；为了提高项目的可维护性，于是决定了重构。两个月的时间，有限的知识储备，完成了第一次重构。

一、重构我都做了什么？

参考monorepo的思想，合并项目、拆分组件
JS迁移到TS
首页优化
css规范处理
添加单元测试
添加前端监控

二、参考monorepo的思想，合并项目、拆分组件
1.合并项目
其实对于我们团队的这三个项目，有很多公共的组件，就要考虑是否可以将这些公用组件提取，提高项目可维护性。具体操作方式，可以先看一张图片，country.]]></description><category></category></item><item><title><![CDATA[vscode中使用正则搜索]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/107858778</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/107858778</guid><author>ly979898684</author><pubDate>Fri, 07 Aug 2020 11:31:18 +0800</pubDate><description><![CDATA[vscode的正则搜索语法和正常正则语法有细微不同
直接看个例子吧，匹配十六进制颜色，例如（#dfd23d）
#[0-9A-F]{6}


]]></description><category></category></item><item><title><![CDATA[三步解决vuecli3.0搭建的项目全局应用sass变量]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/107823754</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/107823754</guid><author>ly979898684</author><pubDate>Wed, 05 Aug 2020 20:03:43 +0800</pubDate><description><![CDATA[一、创建颜色文件，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';`
      }
    }]]></description><category></category></item><item><title><![CDATA[试着为vue项目添加单元测试（一）]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/107763899</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/107763899</guid><author>ly979898684</author><pubDate>Mon, 03 Aug 2020 15:07:34 +0800</pubDate><description><![CDATA[简单的事情往往被忽略，说到单元测试，很多团队都只是在接口部分加入，UI层面最容易被忽略。今天我将围绕一个简单的demo写一下ui层面的单元测试。该文章仅仅面对没接触UI层面单元测试，且想快速上手的人，大佬可将鼠标移到右上角点击x即可。

???? 前端做单元测试(what? why?)

模拟用户操作，先于用户发现问题。

???? 需要提前了解什么知识？准备什么？

像char、mocha、jest这个库倒是可以简单了解一下
如果你想快速上手跟着我敲一遍代码也足够了
在接下来的测试中，vuecli已经提供]]></description><category></category></item><item><title><![CDATA[利用函数式组件做二次封装]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/107201190</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/107201190</guid><author>ly979898684</author><pubDate>Wed, 08 Jul 2020 11:09:08 +0800</pubDate><description><![CDATA[前言

随着技术的快速发展，前端为了快速开发，我们一般会接入像elementui这样的库，以element为例，一些组件无法满足我们的需求，就需要做二次封装。今天想着尝试利用vue的函数式组件做一下二次封装。

先来看一个最简单的demo来补充点基础知识
// demo.vue
&lt;template&gt;
  &lt;div class="demo"&gt;
    &lt;DeInput @debounce="debounce" maxlength='5' @blur="inputBlur"/&gt]]></description><category></category></item><item><title><![CDATA[你真的已经理解防抖和节流了吗？]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/106746406</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/106746406</guid><author>ly979898684</author><pubDate>Sun, 14 Jun 2020 15:15:31 +0800</pubDate><description><![CDATA[前言
如果经常在一些技术社区"散步"的话，函数的"防抖"和"节流"这两个词被提到的频率还是挺高的，但是做了一年的开发，却没有在自己写的项目中用到，还是要好好反思一下。痛定思痛，好好学习。

防抖(debounce)
原理????

事件执行n秒后再执行回调，如果在这n秒内再次被触发，则n秒重新计算。

应用场景????


搜索框: 用户输入完关键词再去触发搜索行为；
window的resize事件:用户调整大小结束之后再去触发相应的操作；


效果预览

防抖前


// 代码预览
&lt;input i]]></description><category></category></item><item><title><![CDATA[【VUE项目维护】多个项目提取共用组件的解决方案]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/106038430</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/106038430</guid><author>ly979898684</author><pubDate>Sun, 10 May 2020 16:54:58 +0800</pubDate><description><![CDATA[项目源码  https://github.com/equicy/vue-common-components
我们先来看一个项目目录，如果是你的需求，或许你该认真看完

需求场景
当一个产品被更多的客户认可，就有私人订制的需求。对于开发者来说最简单的肯定是复制粘贴，假如有新的更新或者一个bug，我们需要提交多次公共的代码；当然项目少还好，假如项目多一些，我们真就成了“拧螺丝”的螺丝工。当然这种场景很常见，在各大框架或者各大语言都有解决方案，我们今天就聊聊vue项目的使用场景。
调研
vue的开发者都了解vue]]></description><category></category></item><item><title><![CDATA[【Vue+Typescript】项目优化之CDN配置]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/105625446</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/105625446</guid><author>ly979898684</author><pubDate>Sun, 19 Apr 2020 23:56:07 +0800</pubDate><description><![CDATA[做了将近一年的前端开发工作，发现前端并不是曾经想象只会写业务就能ok的，尤其2020年，如果单单只是会写业务层面的事情，我相信被淘汰是一种必然。当然学无止境，要学的东西还有很多，数据结构，算法，网络，项目优化等等。我们今天就谈谈一个前端优化小之又小的事情——CDN的配置。
​什么是CDN？
我们先来看一下百度百科的解释：“CDN的全称是Content Delivery Network，即内容分发网...]]></description><category></category></item><item><title><![CDATA[【前端小卡】通过vuecli3.0+兼容IE踩坑记录，学习解决问题的方式]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/105344163</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/105344163</guid><author>ly979898684</author><pubDate>Mon, 06 Apr 2020 15:03:42 +0800</pubDate><description><![CDATA[看完这篇文章，如果还不能解决你的vue兼容ie问题，我来手把手教你，我希望在这篇文章中，你不仅仅为了解决兼容性问题，而是学会一种解决问题的思路。
为什么需要兼容IE？
可能兼容IE是每一个前端开发者头痛的问题，谷歌、火狐他不香吗？香啊，但是不能让用户站在开发者的角度去使用产品吧？如果甲方爸爸就要用IE，你又能如何？哈哈，废话不多说，进入正题，开始我们的项目是vuecli2.0搭建的时候，解决IE非...]]></description><category></category></item><item><title><![CDATA[解决浏览器自动填充input（适用于elementui）]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/104474330</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/104474330</guid><author>ly979898684</author><pubDate>Mon, 24 Feb 2020 11:38:59 +0800</pubDate><description><![CDATA[问题描述
登陆页面浏览器保存账号密码后，浏览器会自动在其他页面进行填充，原因是浏览器会默认填充input type值为password的输入框，即填充对象为input[type=password]即前一个input框。

解决方案
网上也有好多的解决办法，下面列几种，最后我们列出最优的解决方案

autocomplete
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键...]]></description><category></category></item><item><title><![CDATA[【卡片校园技术】通过naturalHeight和naturalWidth获取图片的原始比例]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/103488719</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/103488719</guid><author>ly979898684</author><pubDate>Wed, 11 Dec 2019 11:06:00 +0800</pubDate><description><![CDATA[图片的naturalHeight和naturalWidth属性
var img = document.createElement('img'); // 使用 DOM HTMLImageElement
img.src = 'image2.jpg';
var heightO = img.naturalHeight
var widthO = img.naturalWdith // 原始宽度


获取图片...]]></description><category></category></item><item><title><![CDATA[【前端小卡】module.exports、exports、export 、export.default]]></title><link>https://blog.youkuaiyun.com/ly979898684/article/details/100584898</link><guid>https://blog.youkuaiyun.com/ly979898684/article/details/100584898</guid><author>ly979898684</author><pubDate>Fri, 06 Sep 2019 18:42:06 +0800</pubDate><description><![CDATA[首先我们要明确一点commonJs(nodejs)和es6写法完全是两种不同的概念，他们没有任何联系

首先moudle.exports和exports是commonjs的写法，它的引用方式是通过require
export和export.default是es6的写法,他们的引用方式是通过import
下面简单的讲解他们的用法

1. module.exports、exports

用法

//m...]]></description><category></category></item></channel></rss>