Ricoshallow-CSDN博客

原创 JS 观察者模式实现简单EventBus

观察者模式（Observer Pattern）观察者模式又称发布订阅模式（Publish/Subscribe Pattern）。被观察对象（subject）维护一组观察者（observer），当被观察对象状态改变时，通过调用观察者的某个方法将这些变化通知到观察者。三要素：subscribe(): 接收一个观察者observer对象，使其订阅自己unsubscribe(): 接收一个观察者observer对象，使其取消订阅自己fire(): 触发事件，通知到所有观察者EventBus核心..

2021-09-01 00:13:30 297

原创 JS 通过中介者模式实现简单的聊天室

中介者模式（Mediator Pattern）在中介者模式中，中介者（Mediator）包装了一系列对象相互作用的方式，使得这些对象不必直接相互作用，而是由中介者协调它们之间的交互，从而使它们可以松散偶合。当某些对象之间的作用发生改变时，不会立即影响其他的一些对象之间的作用，保证这些作用可以彼此独立的变化。聊天室核心聊天室对象（ChatRoom）添加成员作为中介者传递消息成员对象（Member）发送信息接收信息/** * A simple chatroom use M.

2021-08-31 23:34:35 296

原创 iframe总结

<ifram></ifram>标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。基本属性<iframe src="demo.html" height="300" width="500" name="demo" scrolling="auto" sandbox="allow-same-origin"></iframe>src : iframe页面地址，有同域跨域之分height : iframe高度width :

2021-08-03 13:42:01 283

原创节流和防抖应用场景及实现

节流定义：不管事件的触发频率有多高，只会在设定的时间间隔内执行一次目标函数。应用场景：监听浏览器滚动条事件，触发随机改变body背景颜色的函数changeBgc。不使用节流会导致页面一滚动就疯狂触发changeBgc函数，页面会不停闪动。运用节流函数throttle我们设定1秒时间间隔内只能触发一次changeBgc函数。js://change body backgroundColor randomlyvar changeBgc = function(){ let r = Math.flo

2021-07-21 16:58:18 279

原创 JsGrid表格内容自动换行

.jsgrid-cell { white-space: normal !important; height:auto; } /**jsgrid表格内容自动换行 */

2021-07-13 10:59:51 2876

原创前端一些常见的设计模式

前端设计模式什么是设计模式设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。学习设计模式更多的是理解各种模式的内在思想和解决的问题。设计模式的类型结构型模式（Structural Patterns）：通过识别系统中组件间的简单关系来简化系统的设计。创建型模式（Creational Patterns）：处理对象的创建，根据实际情况使用合适的方式创建对象。常规的对象创建方式可能会导致设计上的问题，或增加设计的复杂度。创建型模式通过以某种方式控制对象的创建来解决问题。行为型模式（B

2021-07-11 11:18:39 67

原创合并数组的方法

Obj.assign()可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。jsvar object1 = { apple: 0, banana: {weight: 52, price: 100}, cherry: 97};var object2 = { banana: {price: 200}, durian: 100};var object3 = Object.assign(object1,object2)控制台objec

2021-07-02 15:20:58 207

原创 CSS隐藏文本溢出并用省略号代替

单行文本溢出隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l..

2021-06-21 15:31:42 143

原创微信小程序开发 scroll-view enable-flex失效的解决方法

方法1：在外盒子<scroll-view>使用white-space: nowrap来禁止子盒子换行，需要将子盒子设置为行内块级元素display: inline-block，这个方法无法设置子盒子之间的间距 margin属性会失效页面结构（.wxml） <scroll-view class="recommendScroll" scroll-x> <view class="scollItem">

2021-06-21 15:21:51 2607 3

原创 vuex原理及核心概念的基本用法

vuex 概述1. 组件之间共享数据的方式父向子传值：v-bind属性绑定子向父传值: v-on事件绑定兄弟组件之间共享数据： EventBus2. vuex是什么？ vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。3. 使用vue统一管理状态的好处能够在vuex中集中管理共享的数据，易于开发和后期维护能够高效的实现组件之间的数据共享，提高开发效率存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步vuex核心概念1.

2021-06-17 16:54:16 261

原创关于Vue数据代理

什么是数据代理？（1）配置对象data中的数据，会被收集到vm._data中，然后通过Object.defineProperty让vm上拥有data中所有的属性（2）当访问vm的msg时，返回的是_data当中同名属性的值（3）当修改vm的msg时，修改的是_data当中同名属性的值为什么要数据代理？为了更加方便的读取和修改_data中的数据，不进行数据代理就只能通过vm._data.msg访问数据为什么要先将数据收集在_data中，然后再代理出去？为了更高效的监听数据（直接收集到..

2021-06-09 17:19:09 256

原创在vue方法中要谨慎定义递归函数

在肝电商后台管理系统的项目时，希望对提交到表单对象做一个深拷贝从而对新对象中的数据进行后台数据匹配，教程中的方法是安装lodash依赖，其中提供了深拷贝的方法，一搜发现这个依赖居然有180M！不就是实现一个深拷贝嘛，于是我就想在methods中自己定义了一个深拷贝函数： methods: { //深拷贝 deepClone(obj) { if (typeof obj !== 'object' || obj == null) { // obj 是 null ，

2021-06-07 16:19:03 1952

原创跨域的几种方案以及实现（JSONP，CORS，服务器端跨域）

同源政策：如果两个页面拥有相同的协议、域名和端口则同源，如果其中有一个不一样就是不同源。同源政策是为了保证用户信息安全，防止恶意的网站窃取数据，在同源政策下无法向非同源地址发送Ajax请求。跨域：为了解决同源限制问题，主要有JSONP和CORS两种方法JSONP (json with padding)：不属于Ajax请求，但可以模拟Ajax请求，将不同源的服务器端请求地址写在script标签的src属性中 <!-- 1.将非同源服务器端的请求地址写在script标签的src属性中 --&

2021-06-03 13:27:02 384

原创在项目进行到一个阶段时，将已完成的工作推送到远程仓库中的一系列git操作

在项目进行到一个阶段时，将已完成的工作推送到远程仓库中的一系列git操作步骤：git status ：查看当前工作目录环境modified：：修改过的文件Untracked files: ：未监控的文件git add .：将更新的代码提交到暂存区git commit -m "提交描述"：将暂存区代码提交到本地仓库git push :将当前分支代码推送到远程仓库git checkout master：切换到主分支git merge goods_params

2021-06-02 19:35:24 82

原创 element-ui tree树形控件中default-checked-keys失效的问题

在用树形控件el-tree勾选默认节点时会用到default-checked-keys属性，但是注意一定要同时加上 node-key="id"才能生效！ <el-tree :data="rightList" :props="rightListProps" @node-click="handleNodeClick" show-checkbox default-expand-all node-key="id" :

2021-05-31 20:27:04 2967 1

原创 [Vue warn]: Error in render: 解决方法

[Vue warn]: Error in render: “TypeError: Cannot read property ‘rightsLevel’ of null” 解决方法 <template slot-scope="scope"> <el-button :type="this.rightsLevel[scope.row.level][1]" plain>{{this.rightsLevel[scope.row.level][0

2021-05-31 11:09:29 8935

原创实现一个Ajax？

什么是Ajax?Ajax能够在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，实现局部刷新，大大降低了资源的浪费，是一门用于快速创建动态网页的技术。实现步骤:1、创建XMLHttpRequest对象var xhr = new XMLHttpRequest();2、向服务器发送请求，使用xmlHttpRequest对象的open和send方法；3、监听状态变化(onreadystatechange)，执行相应回调函数4、判断readyState和status属性//用XMLHttp

2021-05-17 14:55:11 199

原创 JavaScript 链表算法（反转链表合并链表）

反转链表/** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0 : val) * this.next = (next===undefined ? null : next) * } *///反转链表/** * @param {ListNode} head * @return {ListNode} *///1.

2021-05-16 22:41:28 133

原创 Javascript遍历树的几种方式（前序遍历，中序遍历，后序遍历，层序遍历）

直接上代码吧~/** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.val = (val===undefined ? 0 : val) * this.left = (left===undefined ? null : left) * this.right = (right===undefined ? null : right) * } *//**

2021-05-15 15:59:28 2628

原创 JS几种常见排序算法

直接上代码~/** * 排序算法 * @param {Array} arr 要排序的数组 *///冒泡排序复杂度O(n2) 每次循环都依次比较相邻两数，将最大的数换到最后面function bubbleSort(arr){ var len = arr.length //总共循环n-1次 for (var i=1;i<len;i++){ // 当前循环需要遍历到的位置 for (var j=0;j<len-i;j++){

2021-05-14 11:47:08 152

原创前端面试题：实现每隔1秒输出数组中的一个数字

分析：需要输出数组中的每个数字，因此应该有n个console.log()；需要间隔打印，因此应该使用定时器。代码：1.let 块级作用域function demo(arr){ //循环数组 for(let i=0;i<arr.length;i++){ //每次打印一个值，五个定时器的延时依次增加1000秒 setTimeout(()=>{ console.log(arr[i]) },1000*i) }}demo([4,5,6,7,8])2.立即执行函数f

2021-05-10 20:36:33 2900

原创 CSS元素居中的几种方式

直接上代码~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=

2021-05-09 20:14:47 93

原创 CSS三栏布局的几种方法圣杯布局和双飞翼布局（左右边固定，中间自适应）

常规几种布局：定位浮动弹性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> .

2021-05-09 19:13:08 142

原创 CSS两栏布局的几种方法（左边固定，右边自适应）

直接上代码吧~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl

2021-05-09 19:07:20 309

原创 leetcode刷题 206.反转链表

方法一通过反转对应数组再生成链表/** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0 : val) * this.next = (next===undefined ? null : next) * } *//** * @param {ListNode} head * @return {ListNode} */

2021-05-09 11:34:33 119

原创 swiper插件一些自定义用法

1.swiper触摸过后恢复自动轮播<script> var mySwiper = new Swiper('.swiper-container',{ autoplay: { disableOnInteraction: false, delay:2000, },})</script>设置autoplay：当用户操作swiper之后（包括触碰，拖动，点击pagination等），自动切换会被禁止。将autoplay中的disableOnInterac

2021-05-08 16:39:19 711

原创手机端访问html页面（最简单的方法）

1.vscode中安装Live Server插件2**.点击设置图标，再点击扩展设置，找到Host设置**3.在cmd命令行里输入“ipconfig”，找到自己的IP地址4.将Host中默认的IP地址改为自己的IP地址5.将HTML文件编辑窗口右键，选择open with live server6.在手机浏览器中访问IP+端口号就可以打开页面啦~（注意确保手机和电脑在同一局域网下）...

2021-05-07 16:37:20 6538 4

原创 css知识点汇总

**CSS重要知识点（不定期更新）**1.display: none; 与 visibility: hidden; 的区别：联系：它们都能让元素不可⻅区别：display:none ;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可⻅display: none ;是⾮继承属性，visibility: hidden; 是继承属性修改常规流中元素的 display通常会造成⽂档重排。修

2021-04-22 20:59:12 188

原创 Refusing to install package with name “webpack” under a package npm ERR! also called “webpack”.

Refusing to install package with name “webpack” under a package npm ERR! also called “webpack”. Did you name your project the same npm ERR! as the dependency you’re installing?安装webpack时出现上述报错信息，原因是自定义的项目名称与webpack重名了。利用npm init -y进行初始化的时候会生成的package.js

2021-04-21 15:59:38 267

ricoshallow的博客