前端
关注
分享
扫一扫
文章平均质量分 80
WaNgLu：）
这个作者很懒，什么都没留下…
展开
-
Publish/SubScribe（发布/订阅）模式
前言上一篇文章中，我们讲了如何利用Observer（观察者）模式实现多选框的全选， 本篇文章将带来Publish/SubScribe模式，并且利用该模式实现一个简易的消息通知功能，文章的最后还与Oberver进行对比。什么是发布者/订阅模式？Publish/Subscribe模式使用了一个主题/ 事件通道，这个通道介于希望接收到通知的对象（订阅者）和激活事件的对象之间（发布者）。实现class Pubsub { constructor() { .原创 2021-05-10 09:53:12 · 5569 阅读 · 0 评论 -
利用Observer（观察者）模式实现多选框的全选
一、什么是Observer（观察者）模式Observer(观察者)是一种设计模式，其中，一个对象（subject)维持一系列依赖于它（观察者）的对象，将有关状态的任何变更自动通知给他们。观察者模式是一个被称为目标的对象，将自己状态的变更自动通知给自己维护的一系列观察者的方法。二、具体实现我们实现Observer模式需要使用到以下组件：Subject（目标）:维护一系列的观察者，方便添加或者删除观察者。Observer(观察者)：为那些在目标状态发生改变时需要获得通知的对象提供一个更原创 2021-04-26 09:42:27 · 552 阅读 · 1 评论 -
浏览器渲染引擎&性能 之HTML解析器
前言我们都知道浏览器在解析HTML文件时，首先会构建DOM树，然后会解析CSS文件，构建CSS规则树，最后根据DOM树和CSS规则树构建渲染树，等到渲染树构建完成之后，浏览器开始布局渲染树并将其绘制到屏幕，那么浏览器是怎么构建DOM树和CSS树呢？本系列文章将带你从HTML解析器和CSS解析器内部进行分析，带你一步步了解整个构建过程。注：本文针对chrome浏览器而言，不同浏览器处理过程可能不用同。1. DOM模型DOM的全称是文档对象模型，它可以以一种独立于平台和语言的方式访问和修改一个文原创 2021-03-03 20:44:46 · 863 阅读 · 1 评论 -
大三的我竟然入职了百度
本人现在大三，这篇文章主要就是总结一下自己大学三年的学习过程，希望这篇文章可以给你带来一些的帮助。 高中的我都是吊儿郎当的，一点也不知道学习，这是对物理和数学比较感兴趣，学的比较认真。我会想着各种办法去偷懒，这样的后果就是没有考上一个很好的大学。但是也算是幸运吧，被本省一所三本大学的网络工程专业所录取。报道之前对大学充满着各种的向往，...原创 2020-11-12 15:26:01 · 836 阅读 · 5 评论 -
性能优化-----JavaScript的加载和执行
目录前言1. 脚本位置2. 组织脚本3. 延迟的脚本小结前言对于大多数的开发者来说，JavaScript在浏览器中的性能问题，可以认为是开发者所面临的最严重的可用性问题。Javascript执行过程耗时越久，浏览器等待响应的时间就越长（白屏时间较长，导致用户体验不好）。在页面加载的过程中，<script>标签每次出现都会霸道地让页面等待脚本的额解析和执行，无论当前的JavaScript代码是内嵌的还是包含在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。原创 2020-10-26 17:19:56 · 448 阅读 · 0 评论 -
JavaScript宽松相等（==）中你不知道的秘密
前言在日常的JavaScript开发中，我们经常使用宽松相等（==）和严格相等（===）来判断两个值是否"相等"，但是他们之间有一个很重要的区别，特别是在判断条件上。那么他们到底有什么区别呢？ 我想，很多人都会脱口而出：==比较值相等，===会判断值和类型是否相等。听起来还是挺有道理的，但是还是不够准确。正确的解释是：==允许在判断相等时进行强制类型转换，而===不允许。但是你了解==在判断是进行强制类型转换的具体规则吗？在ES5规范中提到了 “抽象相等比较算法”，定义了==运算符的行为。原创 2020-08-24 16:54:08 · 480 阅读 · 0 评论 -
【前端面试篇】JavaScript基础（二）
前言上一篇文章中详细介绍了JavaScript中重要的概念，涉及到闭包、原型、作用域、执行上下文等知识点，本篇文章将注重总结JavaScript中手写代码的一些面试题。问题1：JavaScript中模块加载方案有哪些？CommonJS：通过require来引入模块，通过module.exports定义模块的输出接口。这种模块加载方案是服务端的解决方案，它是以同步的方式引入模块的，因为在服务端文件都是存储在本地磁盘，所以读取非常快，所以采用同步的方式加载是没有问题的，但是如果在浏览器端，由于模块的原创 2020-08-15 16:55:48 · 301 阅读 · 0 评论 -
JS对象的五种创建模式
方法一：object构造函数模式 let p = new Object() p.name = 'Tom' p.age = 12 p.setName = function(name) { this.name = name } console.log(p.age, p.name) p.setName('jack') console.log(p.age, p.name)这种方式适用于起始时不确定原创 2020-08-12 11:47:03 · 215 阅读 · 0 评论 -
【前端面试篇】JavaScript基础（一）
前言本文将总结JS的相关知识以及面试常考知识点，不会细致的讲解，遇到重要的知识点我会推荐给大家几篇自认为不错的文章，方便大家更好的理解。原创 2020-08-10 15:36:23 · 286 阅读 · 0 评论 -
【前端面试篇】计算机网络相关
前言：本人大三学生党，最近在复习基础知识，会整理一些面试常考问题及答案，所以打算写这类型文章，来总结一些最近所学。如发现任何问题，可以留言，我会认真改正。本篇会讲计算机网络相关的问题，下期问题会是JavaScript相关，欢迎大家关注~~问题1：网站的性能优化有哪些？浏览器缓存（接下来问题会有） 资源打包压缩 图片资源优化（webP、svg、雪碧图） CND（接下来问题会有） 减少回流和重绘衍生问题1：什么是回流和重绘？回流：当渲染树中的部分或全部元素的尺寸、结构或某些属性发生改变原创 2020-08-05 17:06:56 · 2241 阅读 · 1 评论 -
前端面试必问：能否用js模拟实现call函数
前言要想实现它，就必须先了解它是做什么的，主要功能是什么MDN:Function.prototype.call() 文档一句话介绍call：call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。举个例子：var foo = { value: 1};function bar() { console.log(this.value);}bar.call(foo); // 1从以上代码发现：1. call改变了thi原创 2020-06-23 17:21:07 · 235 阅读 · 0 评论 -
面试官:能否用JavaScript实现深度克隆
前言前拷贝和深拷贝都是对于JS中的引用类型而言的，浅拷贝就只是复制对象的引用，如果拷贝后的对象发生变化，原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。首先，需要知道，JavaScript中的数据类型分为基本数据类型和引用数据类型，对于基本数据类型而言，没有深浅拷贝的区别，我们所说的深拷贝都是对于引用数据类型而言的。浅拷贝 const obj = { a: 'a', b: 'b', c: [1, 2, 3], d: { dd: 'dd' } } const array.原创 2020-06-22 16:45:48 · 413 阅读 · 4 评论 -
JS的数据类型（深入理解undefined与null）
JS的数据类型总体来说，JS的数据类型可以分为两大类基本数据类型：string: 任意字符串number: 任意数字（整数、小数）boolean: false/ trueundefined: undefinednull: null引入数据类型object: 任意对象Array: 一种特别的对象（数值下标属性，内部数据是有序的）Function:一...原创 2020-04-08 16:46:57 · 852 阅读 · 0 评论 -
深入理解Redux和React-Redux并完成自己的React和React-redux
React是什么？redux是一个独立专门用于做状态管理的JS库（不是React插件库），作用：集中式管理react应用中多个组件状态共享的状态React主要有三个大模块：action Creator、Store、Reducers接下来主要自己实现一下内容：1.createStore(reducer) ：接收一个reducer函数，返回一个store对象2.combine...原创 2020-04-05 15:42:28 · 270 阅读 · 0 评论 -
前后端交互（Promise、fetch、axios、async/awit用法）
1.Promise概述Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。1.2Promise的好处：1.2.1. 可以避免多层异步调用嵌套的问题（回调地狱）1.2.2. Promise对象提供了简洁的API，使得控制异步操作更加容易。1.3Promise的基本使用 var p = new Promise(funct...原创 2020-02-02 15:04:45 · 842 阅读 · 0 评论 -
Vue中的组件基础知识
创建组件的方式 // 1.1使用Vue.extend 来创建全局的Vue组件 var com1 = Vue.extend({ // 通过template属性，指定了组件要展示的HTML结构 template:'<h3>这是使用Vue.extend 创建的组件</h3>' }) ...原创 2020-01-18 15:55:44 · 296 阅读 · 0 评论 -
Vue中的生命周期函数详解
首先对Vue实例进行初始化，在初始化阶段，对象身上只有一些生命周期函数和默认的事件，其他的东西还都未创建。beforeCreate表示在初始化之前，执行beforeCreate函数时，data和methods中的数据还都没有被初始化。当created函数执行的时候，data和created都已经被初始化完毕，如果要调用methods中的方法和data中的数据，最早只能在created函数中操作...原创 2020-01-15 14:01:02 · 1299 阅读 · 0 评论 -
jQuery封装的ajxa
最基础的调用$.ajax('add.php',{ type:'post', success:function(res){ //这里res拿到的只是响应体 }})dataType用于设置响应体的类型，一旦设置dataType选项，就不在关心服务端响应的content-type了success函数中的res会自动根据服务端响应的content-...原创 2019-12-02 13:44:27 · 236 阅读 · 0 评论 -
ajax请求
AJAX基本内容注意：设计到AJAX操作的页面“不能”使用文件协议访问（文件的形式访问）第一步：创建XMLHttpRequset对象var xhr =new XMLHttpRequest();第二步：创建http请求xhr.open();open第一个参数设置请求方式（GET/POST）,第二个参数输入url地址，第三个参数是async，可以传入一个参数，默认为true...原创 2019-12-01 09:46:05 · 150 阅读 · 0 评论 -
CSS经典布局-------三列布局、双飞翼、圣杯布局、伪等高布局、
三列布局（定位）1.两边固定，中间自适应2.当中列要完整显示<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0;...原创 2019-11-25 09:31:46 · 372 阅读 · 1 评论 -
CSS3基础知识
表单伪类：enabled：匹配可编辑的表单：disable:匹配被禁用的表单：checked 匹配被选中的表单：focus 匹配获焦的表单自定义字体css3允许网页开发中为其网页指定在线字体。通过这种作者自备字体的方式，可以消除对用户电脑字体的依赖。不能在一个css选择器中定义@font-face@font-face{font-...原创 2019-11-11 13:02:12 · 289 阅读 · 0 评论 -
元素垂直水平居中几种方法
第一种：已知元素宽高，使元素水平居中代码如下:#test{ width: 200px; height: 200px; background: pink; margin: 0 auto; text-align: center; line-height: 200px; }margin:0 auto 使元素水平居中，上下的外边距...原创 2019-11-05 21:43:15 · 433 阅读 · 0 评论 -
canvas练习 --------马赛克效果
马赛克效果思路，在画布上选取一个马赛克矩形，从马赛克矩形中随机抽出一个像素点的信息(rgba)，将整个马赛克矩形中的像素点信息统一调成随机抽出的那个。以下的代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <...原创 2019-10-27 10:25:10 · 580 阅读 · 0 评论 -
canvas练习--------时钟
以下是一个通过canvas写的时钟小练习<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*清除浏览器的默认效果*/ *{ margin:...原创 2019-10-27 09:49:58 · 287 阅读 · 2 评论 -
canvas练习-------------签名效果
通过一段时间学习canvas，做了一个小的练习效果。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> /*清除浏览器的默认效果*/ *{ margin:0 ; p...原创 2019-10-27 09:39:17 · 432 阅读 · 0 评论 -
相对定位、绝对定位、固定定位
定位什么是定位： 定位指得就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素。通过position属性来设置元素的定位，可选值：- static：默认值，元素没有开启定位-relative：开启元素的相对定位-absolute：开启元素的绝对定位-fixed：开启元素的固定定位（也是绝对定位的一种）相对定位当元素的position属性设置为relati...原创 2019-09-02 18:25:03 · 437 阅读 · 0 评论 -
高度塌陷以及解决方法
高度塌陷问题在文档流中，父元素的高度默认被子元素撑开的，也就是说子元素多高父元素就多高，但是当为我们子元素设置浮动以后，子元素就会完全脱离文档流，此时会导致子元素无法撑开父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，导致页面的布局混乱。高度塌陷解决方法以下提出的解决方案将会越来越优化，最后一个方法是最为推荐的一个方法。一、我们可以将父元...原创 2019-08-22 20:34:01 · 2312 阅读 · 1 评论 -
文档流、浮动和清除浮动
文档流文档流处在页面的最底端，他表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。元素在文档流中的特点：块元素：1.块元素在文档流中会独占一行，块元素会自上向下排列。2.块元素在文档流中的默认宽度是父元素的100%。3.块元素在文档流中的高度默认被内容撑开。内联元素：1.内联元素在文档流中只占自身大小，默认会从左向右排列，如果一行中不足也容纳所以得内联元...原创 2019-08-22 18:25:13 · 176 阅读 · 0 评论 -
display、visibility和overflow
display通过display样式可以修改元素的类型，可选值：- inline ： 可以将一个元素作为内联元素显示- block ： 可以将一个元素作为块元素显示- inline-block ： 将一个元素转换为行内块元素（可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行）- none ： 不显示元素，并且元素不会再页面中继续占有位置vis...原创 2019-08-22 17:49:21 · 200 阅读 · 0 评论 -
前端HTML&CSS基础知识（样式的基础、优先级、文本标签、列表、长度单位、RGB、样式）
样式的继承：像儿子可以继承父亲的遗产一样，在CSS中，祖先上的元素，也没会被他的后代元素继承。利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素会自动继承这些样式，但并不是所有的样式都会被子元素所继承，比如：背景相关的样式、边框相关的样式、定位相关等都不会被继承。选择器的优先级：当使用不同的选择器，选中同一个元素并且设置相同的样式时，这时样式之间就产生了冲突，最终到底采...原创 2019-08-17 11:11:04 · 695 阅读 · 0 评论 -
前端的选择器
常用的选择器元素选择器作用：通过元素选择器，可以选中页面中所有指定的元素语法：标签名{ }例如：为页面中所有的p元素，设置一个字体颜色p{color :red;}id选择器作用：用过元素的id属性值选中唯一的一个元素语法：#id属性值{ }例如：为id属性值为p1的元素设置一个字体颜色#p1{color :red;}类选择器作用：通过元素...原创 2019-08-13 10:13:11 · 880 阅读 · 4 评论 -
前端的盒子模型介绍
盒子模型CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。一个盒子我们会分成几个部分：内容区、内边距、边框、外边框。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边...原创 2019-08-20 16:34:18 · 2154 阅读 · 0 评论 -
表格
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具。表格就是用来表示一些格式化数据的。在HTML中，使用table标签来创建一个表格，在table标签中，使用tr来表示表格中的一行，有几行就有几个tr，在tr中需要使用td来创建一个单元格，有几个单元格就有几个td。rowspan设置纵向合并单元格，colspan横向合并单元格。有一些情况是非常长的表格，这是就需要将表...原创 2019-09-02 21:08:59 · 192 阅读 · 0 评论 -
表单
表单的作用就是将用户信息提交给服务器的，比如：百度的搜索框、注册、登录，这些操作都需要填写表单。使用form标签创建一个表单，form标签中必须指定一个action属性，该属性指向的是一个服务器的地址，当我们提交表单时，将会提交到action属性对应的地址。使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项。在表单项中可以使用fieldset来为表单项进行分组，...原创 2019-09-02 21:51:51 · 261 阅读 · 0 评论 -
JS编写的位置和强制类型转换
JS编写的位置推荐使用的方式： 可以将JS代码编写到外部JS文件中，然后通过script标签引入，写到外部文件中可以在不同页面中引用，也可以利用浏览器的缓存机制。 script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了浏览器也会忽略。如果需要则可以在创建一个新的script标签用于编写内部代码。<script type="text/javas...原创 2019-09-14 20:54:14 · 241 阅读 · 0 评论 -
正则表达式详解
正则表达式- 正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式来检查一个字符是否符合规则。创建正则表达式的对象语法：- var 变量 = new RegExp(“正则表达式”，“匹配模式”)；在构造函数中可以传递一个匹配模式作为第二个参数，可以是： i 忽略大小写 g 全局匹配模式- 使用字面量来创建正...原创 2019-09-17 16:03:09 · 172 阅读 · 0 评论 -
事件、文档的加载、DOM的相关操作
事件事件就是用户和浏览器之间的交互行为 ，比如：点击按钮、鼠标移动、关闭窗口等等。我们可以再事件对应的属性中设置一些JS代码，这样当事件被触发时，这些代码将会执行，这种写法我们称为结构和行为耦合，不方便使用，不推荐使用。<button id = "btn" onmousemove = "alert('点我干嘛！！！');">我是一个按钮</button>文...原创 2019-09-22 11:22:41 · 266 阅读 · 0 评论 -
事件的冒泡、绑定、传播、委派
事件的冒泡(Bubble)所谓的事件的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡，可以通过事件对象来取消冒泡。可以将事件对象的cancelBubble设置为true，即可取消冒泡event.cancelBubble = true;事件的绑定- addEventListen...原创 2019-09-28 16:23:08 · 202 阅读 · 0 评论 -
滚轮事件和键盘事件
滚轮事件onmousewheel 鼠标滚轮的事件，会在滚轮滚动是触发，但是火狐浏览器不支持该属性。在火狐中，需要使用DOMMouseScroll来绑定滚轮事件。注意：该事件需要通过addEventListener（）函数来绑定。判断滚轮的方向wheelDelta 可以获取鼠标滚轮滚动的方向，向上滚120，向下滚-120，wheelDelta这个值不看大小，只看正负。火狐浏览器不支持wh...原创 2019-09-28 17:11:15 · 239 阅读 · 0 评论 -
定时调用和延时调用
定时调用setInterval（） ： 可以将一个函数，每隔一段事件执行一次参数：1.回调函数，该函数会每隔一段时间被调一次。2.每次调用间隔的时间，单位是毫秒返回值： 返回一个Number类型的数据，这个数字用来作为定时器的唯一标识var timer = setInterval(function(){ count.innerHTML = c++; },...原创 2019-09-28 17:22:58 · 495 阅读 · 0 评论