<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[大大黄的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/first_helloword</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; first_helloword]]></copyright><item><title><![CDATA[简易实现VueRouter和Vuex]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/131775838</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/131775838</guid><author>first_helloword</author><pubDate>Mon, 17 Jul 2023 21:56:40 +0800</pubDate><description><![CDATA[简易实现VueRouter和Vuex两个Vue插件]]></description><category></category></item><item><title><![CDATA[tree-shaking理解]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/131216502</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/131216502</guid><author>first_helloword</author><pubDate>Wed, 14 Jun 2023 21:39:07 +0800</pubDate><description><![CDATA[一句话就是可以将无引用的代码或者文件不打包进项目，从而优化项目。如果这个文件存在副作用，则副作用的代码将会 被打包进项目，当然。中文含义是摇树，在webpack中指的是打包时把无用的代码摇掉，以优化打包结果。已经自带了这个功能了，当打包环境为。什么是tree-shaking？]]></description><category></category></item><item><title><![CDATA[pnpm带来了什么]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/131216101</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/131216101</guid><author>first_helloword</author><pubDate>Wed, 14 Jun 2023 21:11:37 +0800</pubDate><description><![CDATA[以上是A,B两个依赖使用pnpm安装后的 node_modules 结构，可以看到首先会去全局的store中查找A,B两个依赖是否存在，不存在则下载存入这个公共store, 然后对声明的A,B两个依赖通过软连接.pnpm文件夹下的各自依赖A,B，进行关联，而.pnpm则以平铺形式存储所有包，而真正包 则会硬链接形式链接到项目。寻找包的机制，如果 A 和 C 都依赖了 B，那么 A 和 C 在自己的 node_modules 中未找到依赖 C 的时候会向上寻找，并最终在与他们同级的。和文件资源进行关联。]]></description><category></category></item><item><title><![CDATA[vuejs设计与实现-4.1/4.2响应式数据与副作用函数]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/131077576</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/131077576</guid><author>first_helloword</author><pubDate>Tue, 06 Jun 2023 22:36:29 +0800</pubDate><description><![CDATA[以上就是简单的一个响应式实现过程。但是整体仍有许多缺陷。基于以上等问题4.3节，实现一个完善的响应式系统。实现， Vuejs3.x 则是实用。将原始数据进行代理，实现。函数时，会触发对应数据的。操作时，会触发对应数据的。Vuejs2.x使用的是。中，等待在未来某时刻执行。1.什么是副作用函数？2.什么是响应式数据？]]></description><category></category></item><item><title><![CDATA[手写日历【发布订阅】]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/125785803</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/125785803</guid><author>first_helloword</author><pubDate>Thu, 14 Jul 2022 15:38:11 +0800</pubDate><description><![CDATA[发布者订阅者模式手写日历，方便后续自定义日历]]></description><category></category></item><item><title><![CDATA[前端架构分析]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/123400215</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/123400215</guid><author>first_helloword</author><pubDate>Thu, 10 Mar 2022 14:08:39 +0800</pubDate><description><![CDATA[前端架构分析
前端的价值到底在哪里

实现界面交互
提升用户体验

总结就是能写交互页面，写的交互页面用户用的爽
前端的进阶
前端不局限于前端【当然优先前端技术需要如何进阶】
性能优化
​	推荐阅读掘金文章**《移动web性能优化从入门到进阶》**

首先是如何发现问题。
发现问题之后，是如何分析其中原因
找到原因之后，采用的解决办法。
解决之后，是否真实的对用户体验有所提升。

对框架的理解
流行框架的API调用是最基本的要求，理解框架原理，理解思想可以让你在前端的路上走的更远，以vue为例

Vue中的]]></description><category></category></item><item><title><![CDATA[Promise 笔记]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/121213250</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/121213250</guid><author>first_helloword</author><pubDate>Mon, 08 Nov 2021 18:20:37 +0800</pubDate><description><![CDATA[Promise
含义
异步编程的一种解决方案，比传统的解决方案【回调函数和事件】更合理。
Promise对象两个特点

对象不受外界影响。  共有三个状态pending， fulfilled ， rejected。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。即：一旦发生无法改变
一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：pending =&gt; fulfilled   或者   pending =&gt; rejec]]></description><category></category></item><item><title><![CDATA[前端用户行为分析]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/121117499</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/121117499</guid><author>first_helloword</author><pubDate>Wed, 03 Nov 2021 11:26:10 +0800</pubDate><description><![CDATA[前端用户行为分析
监控模式
数据监控
监听用户行为

PV/UV（浏览量和点击量）
用户每个页面停留时间
用户访问网页的入口
用户在各个页面触发的行为

性能监控
监听网页或者说产品在用户端的体验

不同用户，机型，系统首屏加载的时间
http请求等待时间
静态资源加载时间
各页面渲染时候

前端埋点方案
代码埋点
以嵌入代码的形式进行埋点，监听用户点击事件，输入事件等将数据保存发送给server端

可在任意时刻，精确的发送或者保存所需要的数据
代码侵入性较强

可视化埋点
通过可视化交互的手段，代替代码]]></description><category></category></item><item><title><![CDATA[结合公司项目对目前vue项目整体框架总结]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/117961313</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/117961313</guid><author>first_helloword</author><pubDate>Wed, 16 Jun 2021 16:27:40 +0800</pubDate><description><![CDATA[1.框架周边生态使用

框架限于vue2.x
目前公司研发中台，交付中台均属于中大型项目，因此vuex  和  vue-router必须使用
UI基于elementui ，使用体验设计部开发的md-ui 后续开发剔除掉elementui
工具库使用lodash，包括青鸟组件库的 md-hooks的使用

2.脚手架

目前项目框架搭建由体验设计部提供通用框架，部门工具需求进行一定的自定义修改
部门可以搭建 npm 私服，结合通用框架使用Node环境开发CLI工具，提供一套部门的通用框架
可根据需求完善开发的]]></description><category></category></item><item><title><![CDATA[vue3 学习（一）]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/116993636</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/116993636</guid><author>first_helloword</author><pubDate>Tue, 18 May 2021 16:21:53 +0800</pubDate><description><![CDATA[vue3学习（一）
setup
setup函数是一个新的组件选项，座位再组件内使用Composition API 的入口点

调节时机

创建组件实例，然后初始化props  紧接着就调用setup函数。从生命周期钩子视角来看，他会再beforeCreate钩子之前被调用


模板中使用

如果setup返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文



&lt;template&gt;
  &lt;div&gt;{{ count }} {{ object.foo }}&lt;/div&gt;]]></description><category></category></item><item><title><![CDATA[重学node(一)]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/115735319</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/115735319</guid><author>first_helloword</author><pubDate>Thu, 15 Apr 2021 19:17:27 +0800</pubDate><description><![CDATA[01.重学node js
1.node.js定义


Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境。【node不是语言】


也就是说Node.js基于V8引擎来执行JavaScript的代码，但是不仅仅只有V8引擎

V8可以嵌入到任何C ++应用程序中，无论是Chrome还是Node.js，事实上都是嵌入了V8引擎 来执行JavaScript代码
在Chrome浏览器中，还需要解析、渲染HTML、CSS等相关渲染引擎，另外还需要提供支持浏览器操作 的API、浏览]]></description><category></category></item><item><title><![CDATA[前端常用学习社区]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/115347419</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/115347419</guid><author>first_helloword</author><pubDate>Wed, 31 Mar 2021 12:20:14 +0800</pubDate><description><![CDATA[技术社区
中文社区



[荐] 掘金


[荐][安全] freebuf﻿﻿


[荐] GitChat


链滴


cnode


思否﻿﻿


v2ex


超级产品经理


**
**
英文社区



[英][荐] stackoverflow


[英] dev.to﻿﻿﻿﻿



前端周刊
中文周刊
**
**


每日时报


阮一峰 - 科技爱好者周刊


前端精读


360 奇舞周刊


infoQ 前端频道


前端和UX技巧


推酷 - 编程狂人


印记中文周刊


腾讯 TNT]]></description><category></category></item><item><title><![CDATA[Git常用命令]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/115342009</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/115342009</guid><author>first_helloword</author><pubDate>Wed, 31 Mar 2021 09:07:33 +0800</pubDate><description><![CDATA[Git命令参考手册(文本版)
git init                                                  # 初始化本地git仓库（创建新仓库）
git config --global user.name “xxx”                       # 配置用户名
git config --global user.email “xxx@xxx.com”              # 配置邮件
git config --global color.ui tru]]></description><category></category></item><item><title><![CDATA[一张图理解js的Event Loop机制]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/114372340</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/114372340</guid><author>first_helloword</author><pubDate>Thu, 04 Mar 2021 16:48:45 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[JS的执行顺序]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/114012203</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/114012203</guid><author>first_helloword</author><pubDate>Wed, 24 Feb 2021 10:24:35 +0800</pubDate><description><![CDATA[JS执行顺序
基本
1.所有代码放入执行栈中自上而下执行
2.遇到异步函数，则将回掉函数添加到任务队列中（定时器，DOM事件，ajax，Promise，process.nextTick）
3.执行栈中代码执行结束，开始 循环任务队列中函数
4.将任务队列中函数放入执行栈中执行
5.如此往复，称之为事件循环
任务队列
1.任务队列分为宏任务和微任务
2.任务队列将任务放到执行栈中执行
宏任务
宏任务，macrotask ,也叫tasks, 异步任务的回调会依次进入macro task queue，等待后续被调]]></description><category></category></item><item><title><![CDATA[Typescript(二）]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/113353012</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/113353012</guid><author>first_helloword</author><pubDate>Thu, 28 Jan 2021 17:37:22 +0800</pubDate><description><![CDATA[注：Typescript 中的面向对象
TS面向对象
面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。

举例来说：

操作浏览器要使用window对象
操作网页要使用document对象
操作控制台要使用console对象



一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个]]></description><category></category></item><item><title><![CDATA[Typescript学习（一）]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/113352677</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/113352677</guid><author>first_helloword</author><pubDate>Thu, 28 Jan 2021 17:35:26 +0800</pubDate><description><![CDATA[注：主要是TS使用的配置，TS数据类型，以及TS结合webpack
0.什么是TS
TypeScript（TS） 是Javascript 的超集（JS有的TS都有）；
TypeScript  = Type + JavaScript (为JS添加了类型系统)
typescript相比js的优势：   JS的类型系统存在“先天缺陷” ， 绝大部分错误都是类型错误（Uncaught TypeError）

优势一：类型化思维方式，是的开发更加严谨，提前发现错误，减少改Bug时间
优势二：类型系统提高了代码可读性，]]></description><category></category></item><item><title><![CDATA[react知识点总结---react-router和hooks （六）]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/109942380</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/109942380</guid><author>first_helloword</author><pubDate>Sun, 22 Nov 2020 13:03:30 +0800</pubDate><description><![CDATA[react-router
前端路由的原理

前端路由是如何做到URL和内容进行映射呢？监听URL的改变
URL发生 变化，同时引起页面的刷新有另个办法：

通过URL的hash改变URL
通过HTML5的history模式修改URL



URL的hash

URL的hash

URL的hash也就是锚点（#），本质是改变window.location的href属性
我们可以通过直接复制location.hash来改变href，但是页面不发生刷新



HTML5的history

history接口是HT]]></description><category></category></item><item><title><![CDATA[react知识点总结 -- redux（四）]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/109942216</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/109942216</guid><author>first_helloword</author><pubDate>Sun, 22 Nov 2020 13:02:25 +0800</pubDate><description><![CDATA[Redux  使用
前言：

javascript 开发的应用程序，已经变得越来越复杂了

javascript需要管理的状态越来越多，越来越复杂
这些状态包括服务器返回的数据，缓存数据，用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页


管理不断变化的state是非常困难的

状态之间会相互存在依赖，一个状态的变化会引起另一个状态的变化， view页面也会引起状态的变化
当应用程序复杂的时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化]]></description><category></category></item><item><title><![CDATA[react样式，请求，动画相关知识点（三）]]></title><link>https://blog.youkuaiyun.com/first_helloword/article/details/109941898</link><guid>https://blog.youkuaiyun.com/first_helloword/article/details/109941898</guid><author>first_helloword</author><pubDate>Sun, 22 Nov 2020 13:01:11 +0800</pubDate><description><![CDATA[React (样式,axios,动画)
组件化天下的CSS

前面说过整个端已经是组件化的天下：

而css的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的css解决方案


在组件化中选择合适的CSS解决方案应该符合以下条件

可以编写局部css：css具备自己的局部作用域，不会随意污染其他组件内的原生
可以编写动态css:可以获取当前组件的一些状态，根据状态的变化生成不同的css
支持所有的css特性：伪类，动画，媒体查询
编写起来简洁方便，最好符合一贯的css风格特点



Re]]></description><category></category></item></channel></rss>