读心悦

  • 读心随笔
  • 读心里话
  • 计算机
Javascript

JavaScript设计模式-技巧型设计模式简介

技巧型设计模式是I通过一些特定技巧来解释组件的某些问题。主要包含链模式、委托模式、数据模式、数据访问对象模式、节流模式、简单模板模式、惰性模式、参与者模式、等待者模式。 链模式 在对象方法中将当前对象返回,实现了对同一个对象多个方法链式调用。简化了在对对象多个方法的多次调用时,对该对象多次引用。在jQuery的使用中,链式调用是最平不过了。 /** * 链模式 * 元素获取的模式 * @param selector 选择符 * @param context 上下文 */ var Dom = function(sel…

2021年01月06日 0条评论 30点热度 0人点赞 阅读全文
Javascript

JavaScript设计模式-架构型设计模式

指的是一类框架结构,通过提供一些子系统,指定它们的职责,并且将它们调理清晰组织在一起。主要包含了同步模块模式、异步模块模式、Widget模式、MVC模式、MVP模式、MVVM模式 模块化 把复杂的系统分解为高内聚、低耦合的模块,让系统开发变得可控、可维护、可拓展,提高模块的复用率。 同步模块模式(SMD) 请求发出以后,不论模式是否存在。立即执行后续的逻辑,实现模块开发中对模块的立即引用。 模块管理与创建方法 /*** * 同步模块模式 */ //定义模块管理单体对象 var F = F || {}; /** * …

2021年01月06日 0条评论 32点热度 0人点赞 阅读全文
React

React事件绑定

1、在构造函数内使用bind绑定this import React, { Component } from "react"; class Click extends Component { constructor(props){ super(props) this.hanldeClick = this.hanldeClick.bind(this) } hanldeClick(){ console.log("构造函数内使用bind绑定this") } render() { return <button onCl…

2021年01月06日 0条评论 42点热度 0人点赞 阅读全文
Javascript

let和const命令

let let命令用于声明变量,它声明的变量只在let命令所在的代码块有效。 let命令声明变量不存在变量提升的情况,var命令会存在变量提升的情况,就是在变量声明之前可以使用,值为undefined;let声明的变量一定在声明后使用,否则报错。 在块级作用域内存在let命令,那么它所声明的变量就只能在该作用域内有效。不受到外部影响。 let 不允许在同作用域声明同一个变量; const 声明一个只读的常量。声明变量必须初始化。 const pi = 3.1415; console.log(pi); //3.141…

2021年01月06日 0条评论 27点热度 0人点赞 阅读全文
Javascript

浏览器渲染原理

浏览器的内核分成两个部分,一个渲染引擎,另一个是JS引擎。不同的浏览器的渲染引擎不同(不同的浏览的内核不同)。 浏览器工作的流程: 1)浏览器解析内容: HTML/SVG/XHTML,解析这三种文件会生成一个DOM Tree(DOM 树) CSS,解析CSS,产生了CSS规则树 JavaScript脚本,主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree。 2)解析结束后,浏览器引擎则通过DOM Tree 和CSS Rule Tree来构建Rendering Tree。 …

2021年01月06日 0条评论 30点热度 0人点赞 阅读全文
html/css

css关于居中的方式

父元素没有固定宽高 水平垂直居中 html: <div class="wrapper"> <div class="info"> 垂直居中 </div> </div> css: //绝对定位水平垂直居中,方法1 .info { position: absolute; width: 500px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: gree…

2021年01月06日 0条评论 22点热度 0人点赞 阅读全文
React

redux、react-redux状态管理应用

redux 仅仅是用来管理组件的状态,需要满足以下条件: 用户使用方式复杂 不同的用户、不同使用方式(普通用户和管理员); 多个用户之间的协作; 与服务器有大量的交互; View有多个数据源。 其他场景下,能不用redux就不用,否则增加项目的复杂度。 三大特征: 单一的数据源,整个应用的state都存储与store对象中; state只读,只有触发Action(用于描述发生的事件)才能改变state; 使用纯函数(函数的返回值只能依赖于它的参数,相同的输入,只能得到相同的结果)执行修改。 由三个部分构成: 1. …

2021年01月06日 0条评论 18点热度 0人点赞 阅读全文
Javascript

JavaScript设计模式-行为设计模式

行为设计模式用于不同对象之间职责划分、算法抽象,包含:模板方法模式、观察者模式、状态模式、策略模式、职责链模式、命令模式、访问者模式、中介模式、备忘录模式、迭代器模式、解释器模式。 模板方法模式(Template Method) 在父类中定义操作算法骨架,把一些实现步骤延迟到子类中,让子类可以不修改父类的算法结构的同时能重新定义算法中某个实现步骤。 模板方法模式就是把很多个模型抽象化归一,从中抽象提取一个最基本的模板(该模板可以作为实体对象也可以作为抽象对象),其他模块只需继承该模板,拓展一些方法即可。 比如一个网…

2021年01月06日 0条评论 23点热度 0人点赞 阅读全文
html/css

CSS3选择器

CSS3选择器分类 通过基本选择器就可以确定HTML树形结构中大多数的DOM元素节点。 选择器 类型 说明 * 通配选择器 选择文档中所有的HTMl元素 E 元素选择器 选择指定类型的HTMl元素 #ID ID选择器 选择指定ID属性值的元素 .class 类选择器 选择指定class属性的元素 selector1,selectorN 群组选择器 把每一个选择器匹配的元素集合并 层次选择器,常用的选择器 选择器 类型 说明 E  F 后代选择器 选择匹配F的元素,F被包含在E里面 E>F 子选择 选择F元素,…

2021年01月06日 0条评论 29点热度 0人点赞 阅读全文
Javascript

遍历对象

1、使用Object.keys()遍历 const str={"name":"duxin","num":"253","index":"958"} Object.keys(str).forEach((key)=>{console.log(key)}) 2、for..in遍历 for(let i in str){ console.log(i+"===="+str[i]) } 3、Object.getOwnPropertyNames(obj) Object.getOwnPropertyNames(str).forE…

2021年01月06日 0条评论 22点热度 0人点赞 阅读全文
12345…15

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
随笔 mysql Nginx 悦读 redux CSS 小程序 阅读 node vue react Echarts git 闲谈 taro flutter hook canvas JavaScript
分类
  • flutter (11)
  • html/css (23)
  • Javascript (23)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (10)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号