目录装饰器模式工厂方法模式抽象工厂模式​编辑适配器模式代理模式装饰器模式官方定义:  动态地给⼀个对象增加⼀些额外的职责。就增加功能而言，装饰器模式比生成子类更为灵活。——《设计模式》GoF通俗解释: 装饰器是为了给对象增加额外职责而产生的,有点粉刷的意思,房子已经存在了,在房子的表面加上一层粉刷.   (而且它的优势是相较于继承而言的,相比直接继承,装饰器更加灵活,耦合度更低)           应对与 ”过度的采取类继承扩展对象的功能“的情况继承为类型引入的静态特质，使得这种扩展方式缺乏灵活性；并且随着子类的增多（扩展功能的增多），各种子类的组合（扩展功能的组合）会导致子类数量的膨胀。(

目录装饰器模式工厂方法模式抽象工厂模式​编辑适配器模式代理模式装饰器模式官方定义:  动态地给⼀个对象增加⼀些额外的职责。就增加功能而言，装饰器模式比生成子类更为灵活。——《设计模式》GoF通俗解释: 装饰器是为了给对象增加额外职责而产生的,有点粉刷的意思,房子已经存在了,在房子的表面加上一层粉刷.   (而且它的优势是相较于继承而言的,相比直接继承,装饰器更加灵活,耦合度更低)           应对与 ”过度的采取类继承扩展对象的功能“的情况继承为类型引入的静态特质，使得这种扩展方式缺乏灵活性；并且随着子类的增多（扩展功能的增多），各种子类的组合（扩展功能的组合）会导致子类数量的膨胀。(

背景不知道webpack插件是怎么回事，除了官方的文档外，还有一个很直观的方式，就是看源码。看源码是一个挖宝的行动，也是一次冒险，我们可以找一些代码量不是很大的源码比如webpack插件，我们就可以通过BannerPlugin源码，来看下官方是如何实现一个插件的希望对各位同学有所帮助，必要时可以通过源码进行一门技术的学习，加深理解闲言少叙，直接上代码https://github.com/webpack/webpack/blob/main/lib/BannerPlugin.js配合文档apihttps://webpack.docschina.org/api/compilation-object/

背景不知道webpack插件是怎么回事，除了官方的文档外，还有一个很直观的方式，就是看源码。看源码是一个挖宝的行动，也是一次冒险，我们可以找一些代码量不是很大的源码比如webpack插件，我们就可以通过BannerPlugin源码，来看下官方是如何实现一个插件的希望对各位同学有所帮助，必要时可以通过源码进行一门技术的学习，加深理解闲言少叙，直接上代码https://github.com/webpack/webpack/blob/main/lib/BannerPlugin.js配合文档apihttps://webpack.docschina.org/api/compilation-object/

背景学习前端新框架、新技术。如果需要做一些数据库的操作来增加demo的体验（CURD流程可以让演示的体验根据丝滑）最开始的时候一个演示程序我们会调用后台，这样其实有一点弊端，就是增加了开发和维护成本，简单的一个demo不应该劳师动众后来我会在demo中使用一些websql，奈何，websql也真的是没前景了。代码写起来也不是特别好下面来介绍下今天的主角indexedDB和jsStore介绍indexedDB可以给浏览器本地存储的能力，并且容量还比较大。jsStore只是众多封装的indexedDB库中的一个。可以用一种类似SQL的感觉操作数据开始package.json{"name":"npm

背景学习前端新框架、新技术。如果需要做一些数据库的操作来增加demo的体验（CURD流程可以让演示的体验根据丝滑）最开始的时候一个演示程序我们会调用后台，这样其实有一点弊端，就是增加了开发和维护成本，简单的一个demo不应该劳师动众后来我会在demo中使用一些websql，奈何，websql也真的是没前景了。代码写起来也不是特别好下面来介绍下今天的主角indexedDB和jsStore介绍indexedDB可以给浏览器本地存储的能力，并且容量还比较大。jsStore只是众多封装的indexedDB库中的一个。可以用一种类似SQL的感觉操作数据开始package.json{"name":"npm

概述webpack的使用中我们会遇到各种各样的插件、loader。webpack的功力主要体现在能理解各个插件、loader的数量上。理解的越多功力越深loader是什么呢？背景了解loader前，我们在来看个问题，有了前面的基础我们还是用个简单的样例来说明由于一切都是模块，我们想用jsimport的方式统一加载css资源//main.jsimport"./main.css";window.addEventListener("load",function(){});//main.cssbody{color:aquamarine;}WebpackAppHellowebpacksplitchunk

概述webpack的使用中我们会遇到各种各样的插件、loader。webpack的功力主要体现在能理解各个插件、loader的数量上。理解的越多功力越深loader是什么呢？背景了解loader前，我们在来看个问题，有了前面的基础我们还是用个简单的样例来说明由于一切都是模块，我们想用jsimport的方式统一加载css资源//main.jsimport"./main.css";window.addEventListener("load",function(){});//main.cssbody{color:aquamarine;}WebpackAppHellowebpacksplitchunk

背景了解什么是webpack插件，在来看一下不能不知道的两个插件HtmlWebpackPlugin有了这个插件，webpack执行后会自动帮我们在dist目录生成一个html文件，并且添加bundle.js的引用。https://webpack.docschina.org/plugins/html-webpack-pluginSplitChunksPlugin这个插件可以协助我们在生成的bundle上进行更为精确的配置，比如node_modules下的模块单独打包到一个文件（方便缓存）等开始写2个按钮，点击分别加载页面1，页面2//index.htmlWebpackAppHellowebpac

背景了解什么是webpack插件，在来看一下不能不知道的两个插件HtmlWebpackPlugin有了这个插件，webpack执行后会自动帮我们在dist目录生成一个html文件，并且添加bundle.js的引用。https://webpack.docschina.org/plugins/html-webpack-pluginSplitChunksPlugin这个插件可以协助我们在生成的bundle上进行更为精确的配置，比如node_modules下的模块单独打包到一个文件（方便缓存）等开始写2个按钮，点击分别加载页面1，页面2//index.htmlWebpackAppHellowebpac