<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[一个前端攻城狮的成长之路]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/MagiclinLOL</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; MagiclinLOL]]></copyright><item><title><![CDATA[路由跳转和传参]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/122517037</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/122517037</guid><author>MagiclinLOL</author><pubDate>Sat, 15 Jan 2022 22:16:17 +0800</pubDate><description><![CDATA[路由传参
路由跳转有两种方式：
（1）声明式导航:router-link（务必要有to属性)，可以实现路由的跳转
（2）编程式导航:利用的是组件实例的$router.push/replace方法，可以实现路由的跳转。(可以书写一些自己业务)
8.2:路由传参，参数有几种写法?
params参数:属于路径当中的一部分，需要注意，在配置路由的时候，需要占位，例如
path: " /searchf/: keyword"
第一种写法：字符串形式
this.$router.push(" /search/" + thi]]></description><category></category></item><item><title><![CDATA[软件设计模式]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/122500112</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/122500112</guid><author>MagiclinLOL</author><pubDate>Fri, 14 Jan 2022 18:36:47 +0800</pubDate><description><![CDATA[设计模式运用在程序设计中已经很多年了，它最早被整理在Erich Gamma、Richard Hlem、Ralph Johnson和Jhon Vlissides(绰号四人帮(the Gang of Four简称Gof) )合著的一本书中。现在已经被应用到各种各样的编程语言，最大的魅力在于在各种编程语言中表现都是一样的，只是语法略有不同。例如把Java的实现模式转换到c很容易。
JavaScript是一门特别灵活的语言，早些年被认为是玩具式的语言，只能做一点为网页涂脂抹粉的小差事。项目工程也不是很大，更无从说起]]></description><category></category></item><item><title><![CDATA[CSS3转换、过渡与动画]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/122331866</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/122331866</guid><author>MagiclinLOL</author><pubDate>Wed, 05 Jan 2022 20:54:10 +0800</pubDate><description><![CDATA[一、转换transform
transform字面上就是变形，转换的意思，在CSS3中转换主要包括移动、旋转、缩放和扭曲。
（1）移动translate（）
translate（x，y）
translateX（X）
translateY（Y）
（2）旋转rotate（）
正数表示顺时针旋转，负数则表示逆时针旋转
（3）缩放scale（）
scale（x，y）
scaleX（X）
scaleY（Y）
（4）扭曲skew（）
skew（x，y）
skewX（X）
skewY（Y）
（5）矩阵matrix（）
将]]></description><category></category></item><item><title><![CDATA[【前端三剑客之JavaScript】调用栈]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/121609710</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/121609710</guid><author>MagiclinLOL</author><pubDate>Mon, 29 Nov 2021 14:45:05 +0800</pubDate><description><![CDATA[JavaScript 中有很多函数，经常会出现在一个函数中调用另外一个函数的情况，调用栈就是用来管理函数调用关系的一种数据结构。因此要讲清楚调用栈，你还要先弄明白函数调用和栈结构。
什么是函数调用？
函数调用就是运行一个函数，具体使用方式是使用函数名称跟着一对小括号。
当执行到 函数的时候，我们就有了两个执行上下文了——全局执行上下文和 函数的执行上下文。 JavaScript 引擎是通过一种叫栈的数据结构来管理这些执行上下文。 在执行上下文创建好后，JavaScript 引擎会将执行上下文压入栈中，通常把]]></description><category></category></item><item><title><![CDATA[【前端三剑客之JavaScript】变量提升]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/121418718</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/121418718</guid><author>MagiclinLOL</author><pubDate>Fri, 19 Nov 2021 11:25:45 +0800</pubDate><description><![CDATA[【前端三剑客之JavaScript】变量提升
JavaScript执行情况：
1.在执行过程中，若使用了未声明的变量，那么 JavaScript 执行会报错。
2.在一个变量定义之前使用它，不会出错，但是该变量的值会为 undefined，而不是定义时的值。
3.在一个函数定义之前使用它，不会出错，且函数能正确执行。
js中变量的声明和赋值
var myname    //声明部分
myname = '极客时间'  //赋值部分

js中函数的声明和赋值
function foo(){
  console.]]></description><category></category></item><item><title><![CDATA[关于对leetcode946验证栈序列的思考]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/120672795</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/120672795</guid><author>MagiclinLOL</author><pubDate>Sat, 09 Oct 2021 15:49:41 +0800</pubDate><description><![CDATA[题目描述
给定 pushed 和 popped 两个序列，每个序列中的 值都不重复，只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时，返回 true；否则，返回 false 。
示例 1：
输入：pushed = [1,2,3,4,5], popped = [4,5,3,2,1]
输出：true
解释：我们可以按以下顺序执行：
push(1), push(2), push(3), push(4), pop() -&gt; 4,
push(5), pop() -&gt; 5,]]></description><category></category></item><item><title><![CDATA[React笔记（一）]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/120671828</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/120671828</guid><author>MagiclinLOL</author><pubDate>Sat, 09 Oct 2021 15:18:37 +0800</pubDate><description><![CDATA[React笔记（一）
React 介绍

React 是一个用于构建用户界面的渐进式 JavaScript 库

本身只处理 UI
不关系路由
不处理 ajax


React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

数据驱动视图


React 由 Facebook 开发
第一个真生意义上把组件化思想待到前端开发领域

angular 早期没有组件化思想
后来也被 Vue 学习借鉴了



React 起源于 Facebook 的内部项目，因为该公司对市场上所有 Java]]></description><category></category></item><item><title><![CDATA[关于对leetcode933最近请求次数的思考]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/120671285</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/120671285</guid><author>MagiclinLOL</author><pubDate>Sat, 09 Oct 2021 14:58:11 +0800</pubDate><description><![CDATA[关于对leetcode933最近请求次数的思考
给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。

题目描述
写一个RecentCounter 类来计算最近的请求。
它只有一个方法：ping(int t)，其中 t 代表以毫秒为单位的某个时间。
返回从 3000毫秒前到现在的 ping 数。
任何处于[t - 3000, t]时间范围之内的 ping 都将会被计算在内，包括当前（指 t 时刻）的 ping。
保证每次对 ping 的调用都使用比之前更大的]]></description><category></category></item><item><title><![CDATA[前端性能优化之雅虎军规]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119667211</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119667211</guid><author>MagiclinLOL</author><pubDate>Fri, 13 Aug 2021 09:14:26 +0800</pubDate><description><![CDATA[前端性能优化之雅虎军规
1.尽量减少HTTP请求数
80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。
减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢？嗯，确实有鱼和熊掌兼得的办法。
合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的，当然，也可以合并所有的CSS。如果各个页面的脚本和样式不一样的话，合并文件就是一项比]]></description><category></category></item><item><title><![CDATA[浏览器工作原理（2）从输入URL到页面渲染]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119648922</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119648922</guid><author>MagiclinLOL</author><pubDate>Thu, 12 Aug 2021 17:08:44 +0800</pubDate><description><![CDATA[浏览器工作原理（2）
浏览器进程：
主要负责用户交互、子进程管理和文件储存等功能。
网络进程：
面向渲染进程和浏览器进程等提供网络下载功能。
渲染进程：
主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。

ps：因为渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里，就是为了保证系统的安全。
用户输入当用户在地址栏中输入]]></description><category></category></item><item><title><![CDATA[Flex弹性布局]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119459654</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119459654</guid><author>MagiclinLOL</author><pubDate>Fri, 06 Aug 2021 17:12:30 +0800</pubDate><description><![CDATA[Flex弹性布局
将容器的displays属性设置为flex之后，容器内的元素，无论是块级元素还是行内元素，都一视同仁，成为弹性布局的元素。同时，设置浮动和vertical-align也会失效。
Flex弹性布局默认主轴为横向（flex-direction:row）默认从左到右
纵向：flex-direction:column默认从上到下
顺序反转：
row-reverse
column-reverse
flex布局中父项相关设置
主轴的内容分布：使用justify-content属性之前必须清楚主轴是哪个]]></description><category></category></item><item><title><![CDATA[浏览器的工作原理资料推荐]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119408355</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119408355</guid><author>MagiclinLOL</author><pubDate>Thu, 05 Aug 2021 09:33:07 +0800</pubDate><description><![CDATA[学习前端最重要的是要理解浏览器的工作原理，毕竟我们写的代码最终是要被浏览器处理的，理解浏览器背后的原理可以帮我们更快速定位问题，找到问题的解决方案。这周刷微博的时候看到一些关于浏览器工作原理的资料，觉得非常不错。以前一直在寻找这方面的资料，一直没找到合适的。看到这两个资料，太受用了。
1、How browsers work
本文内容比较长，比较全面地介绍了浏览器的工作原理。为方便阅读我把它保存成了一个 pdf，你也可以到下面这个地址直接访问（会慢一些）：
http://taligarsiel.com/Pro]]></description><category></category></item><item><title><![CDATA[浏览器工作原理（1）]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119388854</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119388854</guid><author>MagiclinLOL</author><pubDate>Wed, 04 Aug 2021 17:16:22 +0800</pubDate><description><![CDATA[浏览器工作原理（1）
线程 VS 进程
多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的。那什么又是进程呢？一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。
目前多进程浏览器的架构
最新的 Chrome 浏览器包括：
1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。
下面我们来逐]]></description><category></category></item><item><title><![CDATA[BFC、IFC、GFC、FFC]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119386513</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119386513</guid><author>MagiclinLOL</author><pubDate>Wed, 04 Aug 2021 16:06:05 +0800</pubDate><description><![CDATA[BFC、IFC、GFC、FFC
CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。
那么到底什么是BFC、IFC、GFC和FFC呢？
What’s FC?
一定不是KFC，FC的全称是: Formatting Contexts，是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC
BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatt]]></description><category></category></item><item><title><![CDATA[关于对leetcode20有效的括号的思考]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119380319</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119380319</guid><author>MagiclinLOL</author><pubDate>Wed, 04 Aug 2021 11:27:04 +0800</pubDate><description><![CDATA[关于对leetcode20有效的括号的思考
给定一个只包括 ‘(’，’)’，’{’，’}’，’[’，’]’&nbsp;的字符串 s ，判断字符串是否有效。
有效字符串需满足：
左括号必须用相同类型的右括号闭合。
左括号必须以正确的顺序闭合。

示例 1：
输入：s = "()"
输出：true

示例 2：
输入：s = "()[]{}"
输出：true

示例 3：
输入：s = "(]"
输出：false

示例 4：
输入：s = "([)]"
输出：false

示例 5：
输入：s = "{[]}]]></description><category></category></item><item><title><![CDATA[关于对leetcode53最大子序和的思考]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119379302</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119379302</guid><author>MagiclinLOL</author><pubDate>Wed, 04 Aug 2021 10:56:54 +0800</pubDate><description><![CDATA[关于对leetcode53最大子序和的思考
给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。

示例 1：
输入：nums = [-2,1,-3,4,-1,2,1,-5,4]
输出：6
解释：连续子数组 [4,-1,2,1] 的和最大，为 6 。

示例 2：
输入：nums = [1]
输出：1

示例 3：
输入：nums = [0]
输出：0

示例 4：
输入：nums = [-1]
输出：-1

示例 5：
输入：nums = [-100000]]></description><category></category></item><item><title><![CDATA[珺珺学算法（1）算法概述及复杂度分析]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119244974</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119244974</guid><author>MagiclinLOL</author><pubDate>Fri, 30 Jul 2021 12:35:23 +0800</pubDate><description><![CDATA[珺珺学算法（1）算法概述及复杂度分析
一、什么是算法？
**算法(Algorithm)**是指解决问题的方法或过程，它包含一系列步骤，用来将输入数据转换成输出结果。
算法具有以下性质：
**输  入：**有零个或多个输入
**输  出：**至少有一个输出
**确定性：**组成算法的每条指令清晰、无歧义
**有限性：**算法中每条指令的执行次数有限，执行每条指令的时间也有限
**程序：**是算法用某种程序设计语言的具体实现，程序不一定满足有限性
**算法复杂性 ：**算法所需要的计算机资源
**算法的时间复杂]]></description><category></category></item><item><title><![CDATA[微信小程序基础入门（2）vant weapp框架引入详解及使用]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119211394</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119211394</guid><author>MagiclinLOL</author><pubDate>Thu, 29 Jul 2021 14:55:47 +0800</pubDate><description><![CDATA[微信小程序基础入门（2）vant weapp框架引入详解及使用
一、安装Node
使用 Vant Weapp 前，请确保你的电脑已经安装了Node，因为需要用到npm导入vant weapp相关的包，需要下载安装node，如果电脑没有的话需要百度前往node官网自行下载。
二、创建微信小程序项目
详情请看https://blog.youkuaiyun.com/MagiclinLOL/article/details/119209714?spm=1001.2014.3001.5501
三、npm下载
在项目根目录下打开cm]]></description><category></category></item><item><title><![CDATA[微信小程序基础入门（1）含优势介绍、环境搭建、与vue对比及vant weapp框架初步使用]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119209714</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/119209714</guid><author>MagiclinLOL</author><pubDate>Thu, 29 Jul 2021 14:20:46 +0800</pubDate><description><![CDATA[微信小程序开发
小程序的诞生带来了互联网产品新一轮的变革，小程序正发挥着日益重要的作用。
最近珺珺问我她想学习微信小程序开发，但是不知道从何下手，本文我将介绍微信小程序的优点及开发环境的搭建。
小程序是什么，相信不用做太多介绍了，下面直入主题。(注：蓝色字体代表链接)
一、微信小程序的优点:
1、用户体验好：便捷地获取服务，无需安装卸载，即用即走；
2、流量获取易：背靠10亿+微信用户；
3、开发成本低：节省大量资金、时间、人力，从而做好自己的产品；
4、微信生态强：微信生态体系、多渠道实现营销推广，节省推]]></description><category></category></item><item><title><![CDATA[Icon font&CSS Sprite&SVG Sprite&Base64]]></title><link>https://blog.youkuaiyun.com/MagiclinLOL/article/details/116655189</link><guid>https://blog.youkuaiyun.com/MagiclinLOL/article/details/116655189</guid><author>MagiclinLOL</author><pubDate>Tue, 11 May 2021 14:54:41 +0800</pubDate><description><![CDATA[CSS Sprite：又称为CSS精灵或者雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。能很好地减少网页的http请求，从而大大的提高页面的性能。
SVG Sprite：与CSS Sprite类似。另外一种实现思路  + 。用于定义可复用的形状，定义的现状不会展示出来，
而是通过use元素引用来显示。
Icon font：图标字体，也叫字体图标，就是字体做的图标。能自由变化大小，且不会模糊。]]></description><category></category></item></channel></rss>