<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ddwddw4的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ddwddw4</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ddwddw4]]></copyright><item><title><![CDATA[docker入门]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/121232446</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/121232446</guid><author>ddwddw4</author><pubDate>Tue, 09 Nov 2021 17:13:36 +0800</pubDate><description><![CDATA[引言

今天，是你去新公司入职的第一天。

早上起了个大早，洗漱干净带着材料去新公司报道。签完合同到达工位，开机，泡一杯红糖枸杞（不要问我为什么，我也不知道。。。）。然后开始下载 vscode、chrome、nodejs，配置 NODE_PATH、cnpm、安装 webpack、webpack-cli、@vue-cli、yarn、、、（此处省略 1k+插件）。

如果顺利的话，这个时候你应该已经准备下班了。当然，一般都不会很顺利。。。在这个过程中，你可能会遇到网络问题、环境问题、配置问题、兼容问题、、、（此]]></description><category></category></item><item><title><![CDATA[前端40+精选VSCode插件]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/120077179</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/120077179</guid><author>ddwddw4</author><pubDate>Fri, 03 Sep 2021 10:58:14 +0800</pubDate><description><![CDATA[转载自https://mp.weixin.qq.com/s/XBvImsj0y_fY5MpVCElUXg

前言

姊妹篇：【利器篇】35+精选chrome插件，含15+前端插件，总有一款值得你停留[1]

关于关于【前端工具系列】[2]：有句话，事半功倍，其必然是借助了某些思想和工具。

VSCode是我们前端开发的武器，本文40+精选插件，让其更加锋利，无坚不摧！！

补充两款非常棒的插件


	Tabnine[3]AI 代码完成插
	
	
	Trailing Spaces[4]尾部空格删除插...]]></description><category></category></item><item><title><![CDATA[闭包前端分享]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/115380836</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/115380836</guid><author>ddwddw4</author><pubDate>Thu, 01 Apr 2021 18:33:55 +0800</pubDate><description><![CDATA[函数能够记住并访问其所在的词法作用域中的变量，称为闭包


词法作用域

编译器在编译的代码的第一个阶段会将js代码词法化，词法作用域就是在词法化阶段形成的作用域。通俗一点的说，就是函数在声明的时候形成的一个作用域





从上图可以看到 全局作用域包含标识符count和main，main的作用域包含内部标识符count和bar，bar作用域又包含count和foo，最后foo标识符包含count。

foo 函数作用域—&gt;bar 函数作用域—&gt;main 函数作用域—&gt; 全局作用域形..]]></description><category></category></item><item><title><![CDATA[hooks非受控组件更新传入的 props]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/114122517</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/114122517</guid><author>ddwddw4</author><pubDate>Fri, 26 Feb 2021 12:03:16 +0800</pubDate><description><![CDATA[如何获取上一轮的 props 或 state？



方法1： 利用ref（主要原理是利用ref的稳定性，可以当个全局变量去使用（只会第一次初始化的时候生成，后面不会改变），加上useEffect的功能（在页面渲染完成后成执行，类似setTimeout的功能））

摘自官网https://zh-hans.reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables

目前，你可以通过 ref来手动实现：


funct...]]></description><category></category></item><item><title><![CDATA[Markdown语法图文全面详解及其工具介绍]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/114022274</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/114022274</guid><author>ddwddw4</author><pubDate>Wed, 24 Feb 2021 14:57:45 +0800</pubDate><description><![CDATA[转载自:https://www.jianshu.com/p/c0a2897ad4eb
本文出自 AWeiLoveAndroid的博客

【前言】写过博客或者github上面的文档的，应该知道Markdown语法的重要性，不知道的朋友们也别着急，一篇博客轻松搞定Markdown语法。话说这个语法超级简单，一看就会，不信你点开看看。




目录:
一、快捷键
二、基本语法
三、常用技巧
四、高端用法
五、Markdow工具
六、不同平台功能对比
七、使用MarkdowPad软件遇到的坑


一、快捷键

..]]></description><category></category></item><item><title><![CDATA[useCallback 和 useMemo 及区别]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/113867797</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/113867797</guid><author>ddwddw4</author><pubDate>Sat, 20 Feb 2021 17:30:20 +0800</pubDate><description><![CDATA[转载自https://blog.youkuaiyun.com/MFWSCQ/article/details/105136711



useCallback 可以理解为useMemo的语法糖。

主要区别是React.useMemo将调用fn函数并返回其结果，而React.useCallback将返回fn函数而不调用它。

useCallback


const memoizedCallback = useCallback(
  () =&gt; {
    doSomething(a, b);
...]]></description><category></category></item><item><title><![CDATA[package-lock.json 的作用]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/112849990</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/112849990</guid><author>ddwddw4</author><pubDate>Tue, 19 Jan 2021 19:57:35 +0800</pubDate><description><![CDATA[今天遇到一个很坑的问题，本地看怎么都没问题，线上之前也没问题。但就把master的代码重新发布了一遍，线上页面就挂掉了。找了半天才发现原因是react有个小版本更新了，导致了也没报错。具体原因是一个全局接口的loading文件是这样写的


const Loading = {
  show: () =&gt; {
    // console.log('show');
    const content = React.createElement('div', null, LoadSpin({ loadin]]></description><category></category></item><item><title><![CDATA[react里数据流向]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/112679424</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/112679424</guid><author>ddwddw4</author><pubDate>Fri, 15 Jan 2021 17:40:30 +0800</pubDate><description><![CDATA[react里数据流向方式大概分为三种：

1. 最常用的props传递 （父传子）

2.Provider-Consumer 方式

3.发布订阅模式。

下面主要介绍第三者方式。

好处是可以跨越多个层级，不用关心数据的流向，只需在需要的组件订阅，在适当的时机触发发布就可以改变组件的状态。当然坏处是可能会破坏组件的独立性，使得数据流向不受控。

实现：

dep.js


class Dep {
  constructor() {
    this.list = [];
  }

  subscribe(]]></description><category></category></item><item><title><![CDATA[微前端公共模块复用方案]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/111882443</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/111882443</guid><author>ddwddw4</author><pubDate>Tue, 29 Dec 2020 10:58:36 +0800</pubDate><description><![CDATA[什么是微前端？



微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。

微前端的核心在于拆, 拆完后在合!











2018年 Single-SPA诞生了， single-spa 是一个用于前端微服务化的 JavaScript 前端解决 方案 (本身没有处理样式隔离， js 执行隔离) 实现了路由劫持和应用加载。

2019年 qiankun 基于Single-SPA, 提供了更加开箱即用的 API （ single-spa + sandbox + ...]]></description><category></category></item><item><title><![CDATA[观察者与发布订阅]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/111881656</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/111881656</guid><author>ddwddw4</author><pubDate>Tue, 29 Dec 2020 10:38:10 +0800</pubDate><description><![CDATA[结论：观察者模式和订阅模式很容易混淆一谈，其实订阅模式有一个调度中心，对订阅事件进行统一管理。而观察者模式可以随意注册事件，调用事件，虽然实现原理都雷同，设计模式上有一定的差别，实际代码运用中差别在于：订阅模式中，可以抽离出调度中心单独成一个文件，可以对一系列的订阅事件进行统一管理。这样和观察者模式中的事件漫天飞就有千差万别了，在开发大型项目的时候，订阅/发布模式会让业务更清晰！








// 观察者模式 vue的依赖收集

    // 被观察者
    class Subject {
    .]]></description><category></category></item><item><title><![CDATA[手写MVVM]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/111881047</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/111881047</guid><author>ddwddw4</author><pubDate>Tue, 29 Dec 2020 10:17:10 +0800</pubDate><description><![CDATA[大体思路

主要分为模板编译、数据劫持、观察者（包含发布订阅）三个部分
	模板编译：获取vm实例里html模板，针对其中的字符串模板{{}}及v-指令进行“翻译”，写出其底层相应操作
	数据劫持：遍历vm实例里data对象，为每个数据绑定setter和getter，触发get时将当前元素watcher推入订阅者数组，触发set时，如果值更新则通知订阅者更新数据
	观察者：给数据对应的元素绑定一个观察者实例，并推入订阅者数组，当数据更新时发布订阅通知元素数据变化


具体模块

MVVM

constr...]]></description><category></category></item><item><title><![CDATA[深入了解 HTML5 History API，前端路由的生成，解读 webpack-dev-server 的 historyApiFallback 原理]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/110390309</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/110390309</guid><author>ddwddw4</author><pubDate>Mon, 30 Nov 2020 16:02:16 +0800</pubDate><description><![CDATA[转载自：https://blog.youkuaiyun.com/qq_26003101/article/details/101107838



文章目录

1、history
	2、两种路由模式的生成
	3、historyApiFallback


1、history

History接口，允许操作浏览器的session history，比如在当前tab下浏览的所有页面或者当前页面的会话记录。


history属性


1、length(只读)

返回一个总数，代表当前窗口下的所有会话记录数量，包括当前页面...]]></description><category></category></item><item><title><![CDATA[如何自己发布一个npm包？]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/108664014</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/108664014</guid><author>ddwddw4</author><pubDate>Thu, 05 Nov 2020 17:51:11 +0800</pubDate><description><![CDATA[本来是打算自己发布个npm包，以为几分钟的事，确搞了一上午。

1.先去npm官网注册一个账号。一定要进行邮箱验证。https://www.npmjs.com/

2.然后自己npm init 新建一个项目，写好author然后上传到自己的github上。 项目的名字一定要和特殊一点，如果和npm上已有包的名字重复了，是不能上传自己的npm包的。

3.在上传git的时候遇到了问题，发现push的时候报错，Permission to xxx denied to xxx 。原因是之前电脑上已经使用过别的gi.]]></description><category></category></item><item><title><![CDATA[2020年你必须要会的微前端 -（实战篇）]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/107658057</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/107658057</guid><author>ddwddw4</author><pubDate>Wed, 29 Jul 2020 11:00:18 +0800</pubDate><description><![CDATA[2020年你必须要会的微前端 -（实战篇）

最近你有没有经常听到一个词，微前端？ 是不是听上去感觉非常地高大上！然而~

微前端其实非常地简单，非常地容易落地，而且也非常不高大上~

那么就来一起看看什么是微前端吧：

一.为什么需要微前端?

这里我们通过3W(what,why,how)的方式来讲解什么是微前端：

1.What?什么是微前端?







微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。

微前端的核心在于拆, 拆完后再合!

2.Why?为什么..]]></description><category></category></item><item><title><![CDATA[前端埋点实现及原理分析]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/107543408</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/107543408</guid><author>ddwddw4</author><pubDate>Thu, 23 Jul 2020 17:43:41 +0800</pubDate><description><![CDATA[正如在宏观介绍的博客中写到的，做用户行为分析的方式有“前端埋点”和“后端埋点”的区分，真好今天敲了一个坤哥整理的“前端埋点”的程序，理解了之后结合demo来简单讲解“前端埋点”如何做。

前端埋点原理图：

如上所示，从broswer到page，再到javascript以及后端backend，浏览器返回正常程序运行结果，本地文件中返回最终的log，这很像是在用户程序中埋下了一段“暗代码”，无形之中“窃取”了用户的行为信息，淘宝、网易等都有这样的功能。

（可以参考goo...]]></description><category></category></item><item><title><![CDATA[Mac上使用nvm管理node版本]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/107425119</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/107425119</guid><author>ddwddw4</author><pubDate>Sat, 18 Jul 2020 10:30:16 +0800</pubDate><description><![CDATA[1.卸载已安装到全局的 node/npm

如果之前是在官网下载的 node 安装包，运行后会自动安装在全局目录，其中

node 命令在 /usr/local/bin/node ，npm 命令在全局 node_modules 目录中，具体路径为 /usr/local/lib/node_modules/npm

安装 nvm 之后最好先删除下已安装的 node 和全局 node 模块：




#查看已经安装在全局的模块，以便删除这些全局模块后再按照不同的 node 版本重新进行全局安装
npm ls -.]]></description><category></category></item><item><title><![CDATA[微前端介绍及解决方案]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/107102052</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/107102052</guid><author>ddwddw4</author><pubDate>Fri, 03 Jul 2020 11:24:18 +0800</pubDate><description><![CDATA[转载自https://zhuanlan.zhihu.com/p/78362028

前言

TL;DR

想跳过技术细节直接看怎么实践的同学可以拖到文章底部，直接看最后一节。

目前社区有很多关于微前端架构的介绍，但大多停留在概念介绍的阶段。而本文会就某一个具体的类型场景，着重介绍微前端架构可以带来什么价值以及具体实践过程中需要关注的技术决策，并辅以具体代码，从而能真正意义上帮助你构建一个生产可用的微前端架构系统。

而对于微前端的概念感兴趣或不熟悉的同学，可以通过搜索引擎来获取更多信息，如知乎上的相关..]]></description><category></category></item><item><title><![CDATA[什么是微服务架构？]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/107101808</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/107101808</guid><author>ddwddw4</author><pubDate>Fri, 03 Jul 2020 11:19:03 +0800</pubDate><description><![CDATA[知乎版块回答链接https://www.zhihu.com/question/65502802

作者：老刘
链接：https://www.zhihu.com/question/65502802/answer/802678798
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。


一文详解微服务架构

本文将介绍微服务架构和相关的组件，介绍他们是什么以及为什么要使用微服务架构和这些组件。本文侧重于简明地表达微服务架构的全局图景，因此不会涉及具体如何使用组件等细节。

要..]]></description><category></category></item><item><title><![CDATA[Github上 10 个开源免费且优秀的后台控制面板]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/107101263</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/107101263</guid><author>ddwddw4</author><pubDate>Fri, 03 Jul 2020 10:57:04 +0800</pubDate><description><![CDATA[来自：SevDot| 责编：乐乐

链接：jianshu.com/p/3bc7404af887



Web 开发中几乎的平台都需要一个后台管理，但是从零开发一套后台控制面板并不容易，幸运的是有很多开源免费的后台控制面板可以给开发者使用，那么有哪些优秀的开源免费的控制面板呢？我在 Github 上收集了一些优秀的后台控制面板，并总结得出 Top 10。

一、AdminLTE

Github Star 数 24969 ，

Github 地址：https://github.com/almasaeed2...]]></description><category></category></item><item><title><![CDATA[如何在React中实现keep-alive？]]></title><link>https://blog.youkuaiyun.com/ddwddw4/article/details/106818047</link><guid>https://blog.youkuaiyun.com/ddwddw4/article/details/106818047</guid><author>ddwddw4</author><pubDate>Wed, 17 Jun 2020 20:47:36 +0800</pubDate><description><![CDATA[写在开头


	不推荐你使用本文这个库，这个库会造成数据驱动断层（即你缓存后，切换回来，确实可以看到跟之前一样的dom，但是数据驱动此时失效了）,下周我会写另外一个可以不断层的库解析
	
❝
现代框架的本质其实还是Dom操作，今天看到一句话特别喜欢，不要给自己设限，到最后，大多数的技术本质是相同的。
❞


	例如后端用到的Kafka , redis , sql事务写入 ，Nginx负载均衡算法,diff算法，GRPC,Pb 协议的序列化和反序列化，锁等等，都可以在前端被类似的大量复用逻辑，即便js和Nod]]></description><category></category></item></channel></rss>