生活中的例子: 天气冷了, 就添加衣服来保暖；天气热了, 就将外套脱下；这个例子很形象地含盖了装饰器的神韵, 随着天气的冷暖变化, 衣服可以动态的穿上脱下。

消息铃抖动 {代码...} Axios同步请求 {代码...} js utf-8解码 {代码...} 弹窗树结构 {代码...} 利用jsZip解析zip包 并将数据转换成树结构 {代码...} 未完待续。。。

状态模式 状态模式: 将事物内部的每个状态分别封装成类, 内部状态改变会产生不同行为。 优点: 用对象代替字符串记录当前状态, 状态易维护 缺点: 需编写大量状态类对象场景 demo某某牌电灯, 按一下按钮打开弱光, 按两下按钮打开强光, 按三下按钮关闭灯光。 {代码...} 非面向对象实现的状态模式 {代码...}

场景一: 当观察的数据对象发生变化时, 自动调用相应函数。比如 vue 的双向绑定;场景二: 每当调用对象里的某个方法时, 就会调用相应'访问'逻辑。比如给测试框架赋能的 spy 函数;

适配者模式 适配者模式: 主要用于解决两个接口之间不匹配的问题。demo {代码...}

中介者模式 中介者模式: 对象和对象之间借助第三方中介者进行通信。 场景 demo一场测试结束后, 公布结果: 告知解答出题目的人挑战成功, 否则挑战失败。 {代码...} 在这段代码中 A、B、C 之间没有直接发生关系, 而是通过另外的 playerMiddle 对象建立链接, 姑且将之当成是中介者模式了。

享元模式 享元模式是一种优化程序性能的模式, 本质为减少对象创建的个数。 以下情况可以使用享元模式:有大量相似的对象, 占用了大量内存对象中大部分状态可以抽离为外部状态 demo某商家有 50 种男款内衣和 50 种款女款内衣, 要展示它们 方案一: 造 50 个塑料男模和 50 个塑料女模, 让他们穿上展示, 代码如下: {代码...} ...

步骤 泡茶 泡咖啡1 烧开水 烧开水2 浸泡茶叶 冲泡咖啡3 倒入杯子 倒入杯子4 加柠檬 加糖可以清晰地看出仅仅在步骤 2 和 4 上有细微的差别, 下面着手实现:

**// 组合模式在对象间形成树形结构// 组合模式中基本对象和组合对象被一致对待// 无须关心对象有多少层 调用时只需要在根部进行调用**结合了命令模式和组合模式的具体实现:

命令模式在 JavaScript 中也比较简单, 下面代码中对按钮和命令进行了抽离, 因此可以复杂项目中可以使用命令模式将界面的代码和功能的代码交付给不同的人去写。

事件发布/订阅模式 (PubSub) 在异步编程中帮助我们完成更松的解耦, 甚至在 MVC、MVVC 的架构中以及设计模式中也少不了发布-订阅模式的参与。

可以看出内部迭代器在调用的时候非常简单, 使用者不用关心迭代器内部实现的细节, 但这也是内部迭代器的缺点。比如要比较两数组是否相等, 只能在其回调函数中作文章了, 代码如下:

{代码...}

浅克隆 一. = {代码...} 二.扩展运算符 {代码...} 三.使用 Object.assign<是一个修改并返回目标对象的函数> {代码...} 深克隆 1 JSON.stringify/parse: 仅对数字、字符串和不含函数和 Symble 属性的对象有效 {代码...} 2 deepClone: 对所有类型有效，函数和 Symble 会通过引用复制 {代码...} 参考：[链接]

当一个复杂对象的多份副本须存在时，代理模式可以结合享元模式以减少内存用量。典型作法是创建一个复杂对象及多个代理者，每个代理者会引用到原本的复杂对象。而作用在代理者的运算会转送到原本对象。一旦所有的代理者都不存在时，复杂对象会被移除。

在一个Web项目中，注册，登录，修改用户信息，下订单等功能的实现都离不开提交表单.假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑。

看到了这个么一段代码. {代码...} void 0 返回undefined，我们都知道的，但是为什么不直接 arguments[0] !== undefined?1.undefined可以被重写 {代码...} 2.为什么选择void 0 作为undefined的替代 {代码...}

普通的构造函数加原型方式 {代码...} 第一种办法： 在函数中添加一个静态方法，来控制创建实例的过程 {代码...} 传统面向对象方式，每次点击都会弹出新的模态框 {代码...} 用单例改造 {代码...} 在Module.info中通过变量isTure的两种状态和闭包特性控制元素只能被添加一次

Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享.. 如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高..

最近开发的时候，用到tooltip,这个磨人的小妖精，让我茶不思，饭不想好久...我是让她显示在右边的，可是当我窗口缩小的时候，经常她会飘过来，遮住别的元素，我却拿她无法。 本着用户体验至上的职业操守 没办法，只能让她小屏的时候隐身了。。入正文：

我是在知乎上看到的这个问题，转念一想，用了大半年的vue，好像真的没有了解过： ‘为什么只能有且只有一个根元素’ 于是我花了二十多分钟去找了一下答案......竟然没有找到答案.... 好的现在我来说说我的理解，如果有不对的地方欢迎指出。 我觉得这个问题需要从两个方面来说起： 1.new Vue({el:'#app'}) 2.单文件组件中，...

类数组对象 虽然它也有下标，但它并非真正的数组，所以也不能像数组一样，进行排序操作或者往集合里添加一个新的元素。 1 Array.prototype.slice.call call改变this的指向 借用数组的slice方法 俗称借用构造函数 Array.isArray() 判断一个数据是否是数组 2[].slice.call(arguments) 一样是借用Array.protptype原型上的方...

Mock.mock( rurl, template )记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

所有用Vuex管理的组件中都多了一个属性$store，他就是一个store对象属性： state: 注册的state对象getters: 注册的getters对象

新建代码库 在当前目录新建一个Git代码库 $ git init 新建一个目录，将其初始化为Git代码库 $ git init [project-name] 下载一个项目和它的整个代码历史 $ git clone [url] 配置 Git的设置文件为.gitconfig，它可以在用户主目录下（全局配置），也可以在项目目录下（项目配置）。 显示当前的Git配置 $ git config --list...

1 vsCode中安装 2 配置 // 保存时自动格式化 {代码...}

versionNo: [ { validator: validateVersionNo, trigger: 'blur'} {代码...} var validateVersionNo = (rule, value, callback) => { {代码...} checkVersionNo (callback) { {代码...}

util.js {代码...} utils.js {代码...} 防抖函数 {代码...} 防抖加强版 {代码...}

<el-form-item label="标签" class="partAdd_tag" prop="tags"> {代码...} defaultAction () { {代码...} handleInputConfirm (kind) { {代码...} .partAdd_tag{ {代码...}

npm i vuex 下载 App.vue <template> <div id="app"> {代码...} </div></template> <script>export default { name: 'App', data(){ {代码...} }, computed:{ evenOrOdd(){ {代码...} } }, methods:{ {代码...} }}</script> <style> </style> App.vue另一种赞的写法 &l...