<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[1900's 88 keys的博客]]></title><description><![CDATA[阻止了我们的脚步的，并不是我们所看见的东西，而是我们所无法看见的那些东西。]]></description><link>https://blog.youkuaiyun.com/weixin_45660621</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; weixin_45660621]]></copyright><item><title><![CDATA[文件的下载与图片的预览]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/125471586</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/125471586</guid><author>weixin_45660621</author><pubDate>Sun, 26 Jun 2022 17:08:15 +0800</pubDate><description><![CDATA[前端的blob对象 --- 文件的下载 && 图片的预览]]></description><category></category></item><item><title><![CDATA[记忆函数的性能优化]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/125458063</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/125458063</guid><author>weixin_45660621</author><pubDate>Sat, 25 Jun 2022 13:42:54 +0800</pubDate><description><![CDATA[一般求阶乘的方法

可以看到直接运行时间大概在0.3s左右

可以发现第一次调用时0.9s   第二次调用就是0.01s将该过程进行抽象化成一个函数让其拥有通用性]]></description><category></category></item><item><title><![CDATA[软件的模式]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/123600594</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/123600594</guid><author>weixin_45660621</author><pubDate>Sat, 19 Mar 2022 19:23:59 +0800</pubDate><description><![CDATA[MVVM的简介

MVVM 由 Model,View,ViewModel 三部分构成，

Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
View 代表UI 组件，它负责将数据模型转化成UI 展现出来，
ViewModel 是一个同步View 和 Model的对象。



在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，]]></description><category></category></item><item><title><![CDATA[条件渲染v-if和v-show]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/123599624</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/123599624</guid><author>weixin_45660621</author><pubDate>Sat, 19 Mar 2022 18:21:27 +0800</pubDate><description><![CDATA[目录条件渲染：v-if:v-show
条件渲染：
v-if:

写法：
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”
适用于：切换评率较低的场景
特点：不展示的DOM元素直接被移除
注意： v-if可以和： v-else、v-else一起使用，但要求结构不能被“打断”

    &lt;div id="root"&gt;
        &lt;!-- 使用v-if做条件渲染 --&gt;
        &lt;button @click="n++]]></description><category></category></item><item><title><![CDATA[class和构造函数的区别以及call、bind、apply重写]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/123543240</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/123543240</guid><author>weixin_45660621</author><pubDate>Thu, 17 Mar 2022 20:07:08 +0800</pubDate><description><![CDATA[目录class和构造函数的区别new.targetcall、bind、apply重写
class和构造函数的区别

1.构造函数本身是函数，因此会有函数声明的提升
class 声明不能提升
2. class 只能通过new实例
3. class 采用严格模式；
4. class 中的原型上的属性不能遍历
5. class 内部不能修改class的名称

ES6 class的写法
class Person {
    constructor(name, age) {
        this.name = n]]></description><category></category></item><item><title><![CDATA[new的重写]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/123535446</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/123535446</guid><author>weixin_45660621</author><pubDate>Wed, 16 Mar 2022 20:32:13 +0800</pubDate><description><![CDATA[new的重写
Function.prototype.new = function () {
    const fn = this;
    const obj = Object.create(fn.prototype);
    const res = fn.apply(obj, arguments);
    return res instanceof Object ?res : obj;
};

// 测试
function Person(name, sex, age) {
    this.name]]></description><category></category></item><item><title><![CDATA[前端常见设计者模式]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/123506653</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/123506653</guid><author>weixin_45660621</author><pubDate>Wed, 16 Mar 2022 20:06:04 +0800</pubDate><description><![CDATA[单例模式

单例模式，只是实例化一次，之后每次实例化的对象为同一对象

class Singleton {
    static instance
    constructor(name) {
        this.name = name;
    }

    static getInstance(name) {
        if (this.instance) {
            return this.instance;
        }
        this.instance]]></description><category></category></item><item><title><![CDATA[Promise的常见方法和源码]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/123484923</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/123484923</guid><author>weixin_45660621</author><pubDate>Mon, 14 Mar 2022 19:19:40 +0800</pubDate><description><![CDATA[目录Promise的常见方法和源码Promise常见方法Promise.reject(reason)Promise.resolve(value)Promise.race(iterable)Promise.all(iterable)Promise.allSettled()Promise.any()手写Promise源码
Promise的常见方法和源码
Promise常见方法
Promise.reject(reason)

Promise.reject()方法返回一个带有拒绝原因的Promise对象。

Pro]]></description><category></category></item><item><title><![CDATA[Web开发的安全之旅之防御篇]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/123413151</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/123413151</guid><author>weixin_45660621</author><pubDate>Thu, 10 Mar 2022 22:20:22 +0800</pubDate><description><![CDATA[目录Web开发的安全之旅之防御篇XSS 防御**用户需求**必须动态生成DOM下XSS攻击情形Content Security Policy(CSP)CSRF的防御限制请求来源tokeniframe攻击避免用户信息被携带:SameSite Cookie浏览器依赖Cookie的第三方服务怎么办？SameSite Cookie VS CORS防御CSRF的正确姿势Injection 防御DOS 防御Regex DOS防御DDoS 防御传输层————防御中间人HTTPS 的一些特性
Web开发的安全之旅之防御篇
]]></description><category></category></item><item><title><![CDATA[Web开发的安全之旅之攻击篇]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/123406754</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/123406754</guid><author>weixin_45660621</author><pubDate>Thu, 10 Mar 2022 17:34:04 +0800</pubDate><description><![CDATA[目录Web开发的安全之旅之攻击篇Cross-Site Scripting(XSS)XXS的分类Cross-site request forgery(CSRF)Injection(注入)Denial of Service(DoS)Distributed Dos (DDoS)中间人攻击
Web开发的安全之旅之攻击篇
Cross-Site Scripting(XSS)


Cross-Site Scripting(XSS) 跨站脚本攻击是最常见的一种攻击方式
攻击者会在我们开发维护页面中，通过一种方式把其恶意脚本]]></description><category></category></item><item><title><![CDATA[HTTP实用指南]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/123365588</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/123365588</guid><author>weixin_45660621</author><pubDate>Tue, 08 Mar 2022 23:11:54 +0800</pubDate><description><![CDATA[目录HTTPHTTP 简介协议发展HTTP/0.9 单行协议HTTP/1.0  构建可扩展性HTTP/1.1 标准化协议HTTP/2 更优异的表现HTTP/3 草案中协议分析--报文Method状态码常见请求头常见响应头缓存cookieHTTP/2概述：更快、更稳定、更简单HTTPS概述登录常见的方案Session + cookieJWT(JSON WEB TAKEN)SSO: 单点登录（Single Sign On）跨域解决方案用户体验优化WebSocket
HTTP
HTTP 简介


Hyper Te]]></description><category></category></item><item><title><![CDATA[React之diff算法]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/123237884</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/123237884</guid><author>weixin_45660621</author><pubDate>Wed, 02 Mar 2022 19:34:23 +0800</pubDate><description><![CDATA[React之diff算法
一、diff算法的作用
计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。
二、传统diff算法
通过循环递归对节点进行依次对比，算法时间复杂度达到 O(n3) ，n是树的节点数，这个有多可怕呢？——如果要展示1000个节点，得执行上亿次比较。即便是CPU快能执行30亿条命令，也很难在一秒内计算出差异。
三、React的diff算法
什么是调和？
将Virtual DOM树转换成Actual DOM树的最少操作的过程称为调和。
#]]></description><category></category></item><item><title><![CDATA[React组件实例的三大核心属性]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/122972670</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/122972670</guid><author>weixin_45660621</author><pubDate>Fri, 18 Feb 2022 23:14:28 +0800</pubDate><description><![CDATA[React组件实例的三大核心属性
state


state 是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）
组件被称为“状态机”,通过更新组件的state来更新对应的页面显示（重新渲染组件）
即：组件—&gt;状态—&gt;驱动—&gt;页面


1.创建一个有状态的组件
&lt;body&gt;
    &lt;div id="test"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
        // 1.创建组件]]></description><category></category></item><item><title><![CDATA[ES6-Promise简介、ES7 新特性及ES8新特性-async和await]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/122930729</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/122930729</guid><author>weixin_45660621</author><pubDate>Mon, 14 Feb 2022 22:31:16 +0800</pubDate><description><![CDATA[目录ES6-PromisePromise简介Promise.prototype.then方法Promise.prototype.catch方法ES7 新特性Array.prototype.includes指数操作符ES8新特性-async和awaitasync 和 awaitasync函数await表达式async和await结合读取文件async和await结合发送AJAX请求
ES6-Promise
Promise简介

Promise 是ES6引入异步编程的新解决方案。语法上Promise是一个构造函]]></description><category></category></item><item><title><![CDATA[NPM包管理和模块化]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/122896063</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/122896063</guid><author>weixin_45660621</author><pubDate>Sat, 12 Feb 2022 20:42:59 +0800</pubDate><description><![CDATA[包简介（package）

CommonJS的包规范允许我们将一组相关的模块组合到一起，形成一组完整的工具
CommonJS的包规范有包结构 和包描述文件两个部分构成
包结构：用于组织包中的各种文件
包描述文件（package.json ）：描述包的相关信息，以供外部读取分析

包结构

包结构实际上就是一个压缩文件，解压后为目录。
符合规范的目录，应该包含如下文件：

package.json   描述文件 (必须）
bin   可执行而精致文件
doc 文档
test 单元测试




最重要的是要有p]]></description><category></category></item><item><title><![CDATA[Node.js简介]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/122870988</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/122870988</guid><author>weixin_45660621</author><pubDate>Thu, 10 Feb 2022 22:51:07 +0800</pubDate><description><![CDATA[目录Node.jsNode.js简介Node.js的引用场景1.前端工程化2.Web服务端应用3.Electron 跨端桌面应用Node.js 运行时结构Node.js特点1.异步I/O2.单线程3.跨平台
Node.js
Node.js简介


Node.js是一个能够在服务器端运行JavaScript的开源代码、跨平台JavaScript运行环境。
Node是Ryan Dahl为了帮助客户解决Web服务器的高并发性能问题而写出来的。
Node采用Google开发的V8引擎运行js代码，使用事件驱动、非阻]]></description><category></category></item><item><title><![CDATA[Webpack的基础入门]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/122833468</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/122833468</guid><author>weixin_45660621</author><pubDate>Tue, 08 Feb 2022 23:45:45 +0800</pubDate><description><![CDATA[目录为什么要学习Webpack什么是WebpackWebpack打包核心流程核心流程——极度简化版Get StartDependencies LookupTransformCombine Assets模块化+一致性使用Webpack使用Webpack---处理CSS使用Webpack---接入Babel（处理JS）使用Webpack---生成HTML使用Webpack---工具线使用Webpack---HMR使用Webpack---Tree-Shaking其他常用的工具
为什么要学习Webpack


理解]]></description><category></category></item><item><title><![CDATA[写好JS的原则之过程抽象]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/122650371</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/122650371</guid><author>weixin_45660621</author><pubDate>Sun, 23 Jan 2022 13:31:31 +0800</pubDate><description><![CDATA[目录过程抽象操作次数限制高阶函数其他常用高阶函数Once节流函数(Throttle)防抖函数(Debounce)Consumer/2批量操作元素(Iterative)编程范式例子Toggle--命令式Toggle--声明式Toggle--三态结论
过程抽象

过程抽象

用来处理局部细节控制
过程抽象是函数思想的基础

在想象过程抽象中，可以抽象成有一个房间，房间里面的门，窗，然后房间空间本身都是数据，但是开门或者开窗的开这个动作、行为就是过程，也就说我们不仅可以将门，窗，空间抽象成数据，开这个过程也是可以]]></description><category></category></item><item><title><![CDATA[写好JS的原则之组件封装]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/122639469</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/122639469</guid><author>weixin_45660621</author><pubDate>Sat, 22 Jan 2022 16:36:46 +0800</pubDate><description><![CDATA[目录写好JS的原理组件封装例子结构设计：HTML展现效果：CSS行为设计：API行为设计：控制流重构：插件化重构：模板化重构：组件框架总结：
写好JS的原理
想要成为一名前端工程师，JavaScript这门编程语言是极其重要的，在我们学习JS中，也会遇到很多的问题，很多人也会拿各类语言和JavaScript语言进行比较优劣，但是总体是编程语言只是一门工具，决定代码的好坏是工程师本身。那么怎么样的代码才算是一段好的JavaScript代码呢？应当遵循以下的三个原则：

各司其职：–&gt;点击链接
组件封装
]]></description><category></category></item><item><title><![CDATA[写好JS的原则之各司其职]]></title><link>https://blog.youkuaiyun.com/weixin_45660621/article/details/122627227</link><guid>https://blog.youkuaiyun.com/weixin_45660621/article/details/122627227</guid><author>weixin_45660621</author><pubDate>Fri, 21 Jan 2022 20:58:01 +0800</pubDate><description><![CDATA[目录写好JS的原理（一）各司其职例子： 深夜食堂深夜食堂：版本一深夜食堂：版本二深夜食堂：版本三深夜食堂：结论
写好JS的原理
想要成为一名前端工程师，JavaScript这门编程语言是极其重要的，在我们学习JS中，也会遇到很多的问题，很多人也会拿各类语言和JavaScript语言进行比较优劣，但是总体是编程语言只是一门工具，决定代码的好坏是工程师本身。那么怎么样的代码才算是一段好的JavaScript代码呢？应当遵循以下的三个原则：

各司其职
组件封装
过程抽象

（一）各司其职
在web体系中分为了三]]></description><category></category></item></channel></rss>