插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。 插件没有严格定义的使用范围，app.use(xxx)就是在使用插件了。 官方已经为我们总结出来了，插件发挥作用的常见场景主要包括以下几种： 通过app.component()和app.directive()注册一到多个全局组件或自定义指令。 通过app.provide()使一个资源可被注入进整个应用 向app.co...

策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。 策略模式主要用来解决当有多种相似算法的时，使用if…else产生的难以维护的问题。它主要由三部分组成：strategy接口、具体的strategy类以及用来改变和执行策略的context类。其中，Context接受客户的请求，随后把请求委托给某一个策略类。 使用策略模式计算奖金很多公司的年终奖是根据员工的工资...

单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。也可以这样认为，单例只是全局的一个别称。 透明的单例模式透明的单例模式：下面，我们将使用CreateDiv单例类，它的作用是负责在页面中创建唯一的div节点 123456789101112131415161718192021222324252627282930class CreateDiv { p...

实现按钮效果：在鼠标移入按钮时，按钮的原背景颜色被左侧移入的新背景颜色覆盖，并且不影响按钮中的文字显示。 如图： 在这里我很自然就想到了伪元素before和过渡transition，但在设置z-index又出现了问题，要么移入的新背景没有覆盖原背景，要么按钮的文字被新背景覆盖。我就疑惑，z-index的值不是可以设置层叠关系，大的显示在最前面，小的显示在后面吗？ 通过查看别人的博客和《CS...

手风琴动画效果：当点击某个选项卡时，该选项卡展示内容，其他选项卡的内容收起，无论展示还是收起都带有过渡效果 效果图如下： 思路：为每个选项卡设置点击事件，修改dom元素样式 难点：过渡动画的实现。刚开始我使用display:block或display:none控制内容的显示与隐藏，但是发现display并没有动画效果，后来想使用height，但元素高度不固定（高度由内容撑开），也没法实现动...

适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后，原本由于接口不兼容而不能工作的两个软件实体可以一起工作。 应用场景港式插头转换器，港式的电器插头比大陆的电器插头体积要大一些。如果从香港买一个Mac book，我们会发现充电器无法插在家里的插座上，为此而改造家里的插座显然不方便，所以我们需要一个转换插头 具体代码实现： 12345678910111213141516...

模板方法模式：由两部分结构组成，第一部分是抽象父类，第二部分是具体实现的子类。在抽象父类中封装了子类的算法框架，子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类方法。 应用场景假如我们有一些平行的子类，各个子类之间有一些相同的行为，也有一些不同的行为，像这种情况就可以使用模板方法模式。在模板方法模式中，子类实现中的相同部分被上移到父类中，而将不同的部分留给子类自己实现 例子...

发布-订阅或观察者模式：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。 介绍：在软件架构中，发布-订阅模式是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在。同样的，订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪...

在vue2中使用JSX实现todoList案例，通过这个案例，可以了解template的v-if、v-for、v-on、v-model、为组件添加样式、传递自定义事件及数据，在JSX中如何实现。 注意：JSX是在render函数写的，由于使用了render函数，template就不用写了，因为template和render同时存在，会以template为准。 拆分组件Header：添加tod...

替换主题色 使用element官方提供的在线主题生成工具，将下载的压缩包解压缩并在页面中引入index.css 1234<!--将解压缩得到的全部样式放到eleui目录下--><link rel="stylesheet" href="./css/eleui/index.css"><script src="./js...