白柴

原创 【02】Vue进阶

1-导学1-1-技术面试流程基础------>高级特性+原理（框架）------->设计+工作经验1-2-知识点介绍vue和react：基本使用、高级特性、原理工具： webpack的配置、性能优化、babel项目设计： 状态设计、组件设计、组件通信1-3-浅看面试题Vuev-show和v-if的区别为什么v-for会用key描述vue组件生命周期（有父子组件的情况下）Vue组件如何通信描述组件渲染和更新的过程双向数据绑定和v-mode

原创 【13】总结前端常用设计模式

原创 【12】设计模式实战演练

分析：数据模型，属性和方法，关系UML 类图代码演示题目信息分析UML 类图代码演示面试题 - 模拟打车面试题 - 模拟停车场。

原创 【11】其他模式

我们需要一个对象的 API 提供能力，但它的格式不一定完全适合我们的格式要求。这就要转换一下。例如电脑、手机的电源适配器MVCMVVMPS：先了解概念，再去实战，先“文”而后“化”职责链模式策略模式适配器模式MVC 和 MVVM。

原创 【10】代理模式

为其他对象提供一种代理以控制对这个对象的访问。在直接访问对象时带来的问题，比如说：要访问的对象在远程的机器上。在面向对象系统中，有些对象由于某些原因（比如对象创建开销很大，或者某些操作需要安全控制，或者需要进程外的访问），直接访问会给使用者或者系统结构带来很多麻烦，我们可以在访问此对象时加上一个对此对象的访问层。例如，你通过房产中介买房子，中介就是一个代理。你接触到的是中介这个代理，而非真正的房主。再例如，明星都有经纪人，某活动想请明星演出，需要对接经纪人。艺术家不方便谈钱，但可以和经纪人谈。

原创 【09】装饰器模式

装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。动态地给一个对象添加一些额外的职责。就增加功能来说，装饰器模式相比生成子类更为灵活。例如，手机上套一个壳可以保护手机，壳上粘一个指环，可以挂在手指上不容易滑落，这就是一种装饰。手机还是那个手机，手机的功能一点都没变，只是在手机的外面装饰了一些其他附加的功能。日常生活中，这样的例子非常多。

原创 【08】原型模式

定义：用一个已经创建的实例作为原型，通过复制该原型对象来创建一个和原型相同或相似的新对象传统的原型模式就是克隆，但这在 JS 中并不常用。JS 中并不常用原型模式，但 JS 对象本身就是基于原型的，原型和原型链是非常重要的概念。函数或 class 都有 prototype对象都有__proto__指向构造函数 prototype原型链（图）PS：原型和原型链的范围非常广泛，遇到新问题可以在课程里提问。获取属性描述符 Object.getOwnPropertyDescriptor。

原创 【07】迭代器模式

用于顺序访问集合对象的元素，不需要知道集合对象的底层表示。return {有序结构Symbol.iterator 生成迭代器迭代器的应用基本使用yield* 语法遍历 DOM 树概念介绍 + 解决的问题UML 类图和代码演示场景 Symbol.iterator 和 Generator。

原创 【06】观察者模式

观察者模式是前端最常用的一个设计模式，也是 UI 编程最重要的思想。DOM 事件组件生命周期Vue 组件更新过程异步回调注意，这里没有自定义事件，这个会在“发布订阅模式”讲解。Vue2 实例本身就支持自定义事件，但 Vue3 不再支持。Vue3 推荐使用 mitt ，轻量级 200 bytes ，文档 https://github.com/developit/mitt。

原创 【05】单例模式

单例模式，即对一个 class 只能创建一个实例，即便调用多次。概念介绍 + 解决的问题UML 类图和代码演示应用场景。

原创 【04】工厂模式

创建对象的一种方式。不用每次都亲自创建对象，而是通过一个既定的“工厂”来生产对象。工厂模式在前端 JS 中应用非常广泛，随处可见jQueryVueReact日常项目开发中，遇到new class的场景，要考虑是否可用工厂模式。

原创 【03】设计原则

SOLID 五大设计原则重点理解前两个 S 和 O从设计到模式23 种设计模式前端常用设计模式（图文）

原创 【02】面向对象和UML类图

TS 是 JS 的超级 Super-Set ，即包含 JS 所有能力，然后再有自己自己的能力 —— 静态类型。PS：大型系统的量大研发保障：1. 静态类型；2. 自动化测试；注意，TS 类型的知识点非常多，先介绍常用的，其他的遇到再说。基础类型不能满足，就自定义面向对象编程，Object-Oriented-Program（简称 OOP）是一种目前主流的编程思想。已有几十年的历史，1990 年代开始，和 Java 一起开始发展壮大。编程本来是抽象的，像做数学题一样。

原创 【01】设计模式导学

祝早日精通设计模式，早日突破技术瓶颈。

原创 【十】算法：分而治之，动态规划，贪心算法，回溯算法

1、分而治之二、动态规划三、贪心算法四、回溯算法

原创 【九】排序与搜索

原创 【八】堆

原创 【七】图

原创 【六】树

原创 【五】字典

原创 【四】集合

原创 【三】链表

原创 【二】队列

原创 【一】栈

原创 【react基础】14、react异步请求数据方法。

关于react异步请求数据有很多种方案。1、saga （用了er6生成器函数）2、promise3、thunk4、…为什么要用插件啊？是为了改造这个redux的action动作。如果异步的话，我们发动作，actionCreator只有返回对象，而异步这个插件能让你隔一段时间再发这个动作，是为了改造动作用的。本文用thunk，它可能不是最好的，但是是我用得比较习惯的。一、下载npm ...

原创 【react基础】13、redux的简单使用

一、

原创 【react基础】12、弹射和代理设置（跨域）

一、弹射弹射的作用通俗来讲，就是把配置文件（node_modules/react-scripts）弹射到根目录下，并安装依赖。注意这个操作没有回头路，不能撤销。如何弹射？1、输入命令：npm run eject我每次这个命令的失败率有点高，可能有点背。如果你输入弹射命令后，项目启动失败，这里有个终极解决方案。2、失败的解决方案（1）把项目的这个node_modules文件全部删掉，...

原创 【react基础】11、react的样式方案 classnames和styled-components

从npm官网来看，目前classnames的下载量越三百多万，styled-components下载量约一百多万。使用人数都是很多的，各有个的优缺点，以自己的代码习惯来选择吧。一、classnames使用官网对classnames的解释是：A simple JavaScript utility for conditionally joining classNames together.（将属性...

原创 【react基础】8、使用PropTypes进行类型检查

一、引入PropType（不用安装，脚手架自带）import PropTypes from "prop-types";二、类型检查写法（以规定必须传值，且值是数组为例）1、类组件：在组件里写static propTypes这个静态属性static propTypes ={ // list就是父组件传过来的props里面的值 list:PropTypes.array.isRequ...

原创 【react基础】7、react获取文本框的值

React获取文本框的值1、e.target.value2、用ref标记节点，ref="textbox"，使用时调用this.refs.textbox.value3、用ref标记节点，ref={(node)=>this.txt=node，node表示当前节点（名称可以修改），把当前节点赋值给txt。使用时调用this.txt.value例子：import React from 'r...

原创 【react基础】6、react的cli脚手环境

一、安装react脚手架1、全局安装npm i create-react-app -g检查是否安装成功：2、创建项目create-react-app 项目名3、启动项目yarn start，启动成功会在浏览器3000端口看到这个页面：...

原创 【react基础】5、state的使用和this指向

1、react的组件存放数据有两种方式。（1）、存放外部数据的props，数据是只读，是不能修改的。（2）、存放组件内部数据的state，存放组件自己的数据，其是放到constructor(){}里面。2、关于constructor。（1）constructor是先于render执行的（2）constructor是什么时候调用？new的时候。new的时候做四件事：①新产生一个对象②让th...

原创 【react基础】4、组件components的定义和传值

一、怎么定义一个组件。组件分为无状态组件和类组件。1、无状态组件<div class="box"></div>var App = ()=>{ //组件的首字母大写 return <div>app component</div>}ReactDom.render(<App />,document.getElement...

原创 【react基础】3、react散乱语法注意事项

一、差值表达式1、语法：{差值表达式 }2、作用：基本可以写任何东西（1）可以渲染字符串，数组（渲染效果像字符串）。注意不能直接渲染对象，会报错。（2）可以写jsx，写比较，写判断。不能写if和for，但函数调用是可以的。二、react里面的标签不推荐写class，一般写className。因为class是js里面的关键字，所以它换成了className。三、绑定事件，onClick...

原创 【react基础】2、初步认识render函数和jsx

一、ReactDom的render结构在控制台输出ReactDom:可以看出render函数有三个参数，第一个参数是指要渲染的元素，第二个参数是这些元素要放在什么容器里面，第三个是回调函数。二、render的第一个参数（jsx语法）1、jsx语法简介。请先阅读以下小例子 <div id="box"></div> <script> React...

原创 【react基础】1、简介和起步

一、简述React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 是一个用于构建用户界面的 JAVASCRIPT 库，我们一般用到的它的构建环境分为三个：1、react2、react-dom3、bablebabel最早用作将es6转为es5,后来facebook收购以后扩展了 解析jsx的功能二、最简单起步（无脚...

原创 清除浮动

清除浮动一、 为什么要清除浮动由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。二、清除浮动的本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为 0 的问题。三、 清除浮动的方法1、额外标签法是W3C推荐的做法是通过在浮动元素末尾添加一个空的标...

原创 css优化总结

CSS文档统筹1）整站里相同的CSS样式提取到一个样式表里，各个页面调用相同的样式文件即可。2）网站较大的情况下一般会把网站的头部，尾部单独分离出来，包括样式文件。15.1.1 根据页面类型分离文件15.1.2 根据功能模块分离文件15.1.3 根据设备类型分离文件15.1.4 根据代码规模综合分离文件网页自身优化（如何让网站被搜索引擎搜索到）：★页面主题优化实事求是的写下自己网...

原创 关于BFC

1.认识网页网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。[外链图片转存失败(img-rAhDQF8p-1563798668688)(images/mi.png)]思考： 网页是如何形成的呢?[外链图片转存失败(img-SyhiNWyg-1563798668689)(images/1000phone1.png)]2.建站流程...