李不言，-CSDN博客

1. 定义组合模式就是用小的子对象来构建更大的对象，而这些小的子对象本身也许是由更小的“孙对象”构成的。2. 用途组合模式的好处将对象组合成树形结构，以表示“部分-整体”的层次结构组合模式提供了一种遍历树形结构的方案，通过调用组合对象的execute方法，程序会递归调用组合对象下面的叶对象的execute方法通过对象的多态性表现，使得用户对单个对象和组合对象的使用具有一致性利用对象的多态性表现，可以使客户端忽略组合对象和单个对象的不同。在组合模式中，客户将统一地使用组合结构中的所有对

2022-02-16 11:11:31 530

原创 JavaScript设计模式 - 命令模式

1. 定义案例：假设有一个快餐店，而我是该餐厅的点餐服务员，那么我一天的工作应该是这样的：当某位客人点餐或者打来订餐电话后，我会把他的需求都写在清单上，然后交给厨房，客人不用关心是哪些厨师帮他炒菜。我们餐厅还可以满足客人需要的定时服务，比如客人可能当前正在回家的路上，要求 1 个小时后才开始炒他的菜，只要订单还在，厨师就不会忘记。客人也可以很方便地打电话来撤销订单。另外如果有太多的客人点餐，厨房可以按照订单的顺序排队炒菜。这些记录着订餐信息的清单，便是命令模式中的命令对象。命令模式是最简

2022-02-16 10:56:39 357

原创 JavaScript设计模式 -发布订阅者模式

1. 定义发布订阅者模式又叫观察者模式，他定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得将得到通知案例：小明最近看上了一套房子，到了售楼处之后才被告知，该楼盘的房子早已售罄。好在售楼MM 告诉小明，不久后还有一些尾盘推出，开发商正在办理相关手续，手续办好后便可以购买。但到底是什么时候，目前还没有人能够知道。于是小明记下了售楼处的电话，以后每天都会打电话过去询问是不是已经到了购买时间。除了小明，还有小红、小强、小龙也会每天向售楼处咨询这个问题。一个星期过后，售楼

2022-02-15 15:53:52 2235

原创 JavaScript设计模式 -迭代器模式

1. 迭代器模式的简单理解定义：迭代器模式是指提供一种方法，顺序访问一个聚合对象中的各个元素，而又不暴露该对象的内部表示。好处：迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器之后，即使不关心对象的内部构造，也可以按顺序访问其中的每一个元素一个简单的迭代器const each = function(arg, callback) { for(var i = 0; i < arg.length; i++) { callback(i, arg[i]) }}

2022-02-15 15:40:07 471

原创 JavaScript设计模式 - 代理模式

1. 代理模式的简单理解定义：为一个对象提供一个代用品或占位符，以便控制对它的访问代理模式的关键：当客户不方便直接访问一个对象或者不满足需要的时候，提供一个替身对象来控制对这个对象的访问，客户实际上访问的是替身对象。替身对象对请求做出一些处理之后，再把请求转交给本体对象2. 常用的代理模式保护代理虚拟代理2.1 保护代理代理B可以帮本体A过滤掉一些请求，比如有人想通过B送花给A，但是B可以过滤掉送花中年龄大或者比较穷的，这些请求可以直接在代理B处被拒绝掉2.2 虚拟代理虚拟代理把一些开

2021-12-09 20:10:44 571

原创 JavaScript设计模式 - 策略模式

1. 策略模式的简单理解定义：多种途径达到同一个目的地案例：1. 如果没有时间但是不在乎钱，可以选择坐飞机2. 如果没有钱，可以选择坐大巴或者火车3. 如果再穷一点，可以选择骑自行车实现：定义一系列的算法，把他们封装起来，并且使他们可以相互替换2. 案例2.1 使用 if else来实现const calculateBouns = function(perfomancelevel, salary) { if (perfomancelevel === 'S') {

2021-11-16 23:01:18 560

原创 JavaScript设计模式 - 单例模式

1. 单例模式的简单理解2. 实现单例模式3. 透明的单例模式4. 用代理实现单例模式5. 惰性单例5.1 通用的惰性单例5.2 优化后的惰性单例6. 总结1. 单例模式的简单理解介绍：保证一个类仅有一个实例，并提供一个访问他的全局访问点实现一个标准的单例模式：用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象使用场景：当我们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论点击多少次登录按钮，这个浮窗都只

2021-11-15 22:12:42 549

原创 this、apply、call 基础

1. this基础除去不常用的with和eval，this的指向大致可以分为4种作为对象的方法调用作为普通函数调用构造器调用Function.prototype.call 或者 Function.prototype.apply调用1.1 作为对象的方法调用 - this 指向该对象var obj = { a: 1, getA: function() { console.log(this === obj) }}obj.getA() // tr

2021-10-22 11:46:44 135

原创小程序开发基础

1. 小程序开发与普通网页开发的区别运行环境不同网页运行在浏览器环境中小程序运行在微信环境中api不同由于运行环境不同，所以小程序中，无法调用DOM和BOM的API，但是小程序中可以调用微信环境提供的各种api，例如：地理定位扫码支付开发模式不同网页的开发模式：浏览器+代码编辑器小程序有自己的一套标准开发模式：申请小程序开发账号安装小程序开发者工具创建和配置小程序项目2. 了解开发者工具微信开发者工具是官方推荐使用的小程序开发工具，他提供的主要功能如下：

2021-10-21 22:59:50 168

原创使用控制器进行数据派发，实现页面实时更新

1. 项目使用：数据大屏2. 使用场景封装派发器，定时对页面进行数据派发，页面根据接收到的数据，进行实时更新，实现炫酷效果3. 实现效果显示单个组件的控制器场景（控制器下可能有N个组件，但是同时只展示单个组件）显示列表组件的控制器场景（列表恒定只展示10条数据，每新增一条就需要移除一条）4. 代码结构5. bean.ts代码// 接口数据请求定义export enum DataTypeCode { UserSituation = 'UserSituation'

2021-10-08 11:00:12 212

原创跨过Eslint校验

修改.eslintrc.js// vue使用全局引入，单页面使用的时候还是会被eslint规则拦截，此时在.eslintrc.js文件中加上globals的配置，就可以解决globals: { 'vue': true}忽略Eslint校验/* eslint-disable */// 忽略校验的内容/* eslint-enable */...

2021-07-21 10:14:24 691

原创 window.onstorage 实现WEB通知原生更新

window.onstorage监听localstorage里的参数，一旦出现本地缓存更改，就能触发到window.onstorage方法公司越来越多的App，外壳是原生，实际实用的均是web的页面，将web页面放到原生的顶层页面，点击的时候，实际上是会打开一个全新的web页面在这个时候，实际在App端内挂载两个web页面例如：个人中心页面，点击后进入用户信息，此时如果在用户信息页面修改了个人信息，返回到个人中心页面，是不会导致个人中心里面个人信息的刷新的，因为两个页面同时挂载在App内部，不会自动实

2021-07-10 21:25:35 1128 1

原创使用面向对象/继承等实现dialog组件

HTML部分只有两个按钮，用于唤起dialog弹窗  <button class="dailog1">点击</button> <button class="dailog2">点击2</button>js部分涉及到ES6相关的部分包括，class语法，ES5版本的继承，ES6相关的继承，事件委托，自定.

2021-07-10 21:08:41 145

原创程序员反卷的第一步

应该很多人和我一样，一开始关注一些技术性的公众号，只是为了能在碎片时间学点东西，但是到后来很多东西就都变了性质！每天推送的内容大概就是：那些有难度的面试你能答对几个大厂面试官，谈一谈你被拒绝的原因高薪必备技能。。。你以为的干货满满，打开全是各种课程的推销，通过免费的无用的课程，让你加什么老师，加了以后就开始推荐你买其他课程，就算你这次幸免，后期你也会源源不断的收到各种推送！他们除了每天给你私信，还有就是朋友圈轰炸，时不时就是别人报课以后月薪翻倍，走上人生巅峰，现在每个行业都在内卷，而内卷基本

2021-06-24 09:37:18 121

转载 vue.Observable ()进行状态管理

随着组件的细化，很多时候都需要处理组件状态共享的情况， Vuex可以轻松解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，接下来介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。简介：官网描述observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性则通过返回一个函.

2021-03-09 14:55:12 264 1

原创 Vue中使用Vuex+sessionStorage实现不同页面之间传参

1. 使用场景最近公司产品项目逻辑层变多了，涉及到页面间的传参的参数会很多，而且页面之间跳转频繁。之前参考了一篇文章，使用过，有一定的参考价值，此处贴出链接，大家可以参考一下通过bus和watch监控$route结合进行路由之间的数据传递由于项目变得越来越复杂，使用这个办法会很麻烦，也会出现一些刷新时参数丢失的问题，所以就把整体的传参方式改成了vuex+sessionStorage，这个方...

2019-03-19 18:02:48 4012 4

转载使用Vue和element对表格进行操作

第一次做项目，涉及到的表格的动态处理很多，在百度的时候，顺便将我觉得比较有用的几个网址进行了一个综合参考网址Vue+element 实现表格的增加行、根据索引删除行的功能vue+element-ui实现表格编辑VUE+Element UI实现简单的表格行内编辑效果elementUI table 点击编辑按钮进行编辑实现示例...

2019-01-02 12:12:58 1448 3

原创使用JavaScript写一个简单的tab栏切换

tab栏切换demo样式如下：HTML代码如下<div class="box"> <div id="hd" class="hd"> <span class="current">新闻</span> <span>体育</span>

2018-12-19 16:53:51 396 1

原创 innerText的兼容性处理

html代码如下<div id="box"> hello</div>如何知道，浏览器是否支持元素的某个属性呢？var box = document.getElementById('box');console.log(typeof box.a) // ====> undefinedconsole.log(typeof box.id) // 返回属性...

2018-12-14 14:49:27 1130

原创获取页面元素的5种方法

为什么要获取页面元素例如：我们想要操作页面上的某部分（显示/隐藏，动画），需要先获取到该部分对应的元素，才进行后续操作1. 根据id获取元素// get 获取 Element 元素 By 通过 Id 标识var div = document.getElementById('main');// console.log(div)// 打印对象，展开后，通过proto可以查看元素的属...

2018-12-13 14:51:02 18547

原创字符串操作方法总结

1. 查找类方法indexOf()stringObject.indexOf(searchvalue,fromindex)indexOf()用来检索指定的字符串值在字符串中首次出现的位置。它可以接收两个参数，searchvalue表示要查找的字符串；fromindex表示查找的开始位置，省略的话则从开始位置进行检索。var str = 'abcdeabcde';console.log...

2018-12-12 17:52:29 353

原创配置虚拟主机

安装wamp（Windows Apache MySQL PHP）安装环境介绍配置Apache（配置根目录：配置虚拟主机）演示网站效果搭建服务器环境——wamp集成环境访问权限的配置找到文件夹：D:\wamp\bin\apache\Apache2.4.4\conf（wamp安装的环境）或者右键——>apache——> httpd.conf将文件的第268行的de...

2018-12-12 16:51:50 155 1

lj940628的博客

原创前端接入若依后，页面白屏问题排查

原创 JavaScript设计模式 - 组合模式