- 博客(44)
- 收藏
- 关注
RSS订阅原创 设计模式-职责链模式
职责链模式职责链模式定义职责链模式实例小结职责链模式优点职责链模式缺点职责链模式定义职责链模式是指解决请求发送者和请求的接受者之间的耦合，通过职责链上的多个对象对分解请求流程，实现请求在多个对象之间的传递，直到最后一个对象完成请求的处理。职责链模式通过对需求的分解，把每件事情独立出一个模块对象去处理，这样完整的需求就被分解成一部分一部分相互独立的模块需求，通过这些对象的分工协作，每个对象只做与自己份内的事，无关的事传到下一个对象中去做，直到需求完成。职责链模式实例小结职责链模式优点解耦了请求
2021-12-13 21:36:31
372
原创 设计模式-组合模式
组合模式组合模式定义请求在树中传递的过程抽象类在组合模式的应用引用父对象组合模式应用场景绘制表单小结组合模式不是父子关系对叶对象操作的一致性双向映射关系用职责链模式提高组合模式性能组合模式定义组合模式又称部分-整体模式，将对象组合成树形结构①以表示“部分整体”的层次结构。组合模式通过对象的多态性表现②使得用户对单个对象和组合对象的使用具有一致性。①树形结构：组合模式提供了一种遍历树形结构的方案，通过调用组合对象的方法（例如下面创建文件夹的方法add），程序会递归调用组合对象下面叶节点的具有相同方法名的
2021-11-18 10:57:15
314
原创 设计模式-装饰者模式
装饰者模式装饰者模式定义AOPAOP装饰函数Function.prototype.beforeFunction.prototype.afterAOP应用小结装饰者模式VS继承装饰者模式定义装饰者模式是指在不改变原对象的基础上，通过对其进行包装拓展（添加属性或方法）使原有对象可以满足客户更复杂的需求。在开发过程中，有时候想要为函数添加一些功能，最简单粗暴的方法就是直接改写该函数，但这是最差的方法，违反了开放-封闭原则。而且，很多时候我们不想去修改原函数，比如我们想给window.onload事件绑定一个
2021-11-16 10:00:53
207
原创 设计模式-代理模式
代理模式代理模式定义代理模式应用跨域代理图片预加载防抖代理缓存代理代理模式定义代理模式是指当两个对象之间不能直接引用时，需要通过代理对象在这两个对象间起到中介的作用。代理可以代替其本体被实例化，并且使其可被远程访问。它还可以把本体实例化推迟到真正需要的时候，对于实例化比较费时的本体，或者尺寸较大处理起来耗时的类都可以使用代理。代理模式包含虚拟代理、远程代理和保护代理。代理类型说明虚拟代理虚拟代理是指用来代替巨大对象，确保它在需要的时候才被创建。在JavaScript中应用较多。
2021-11-12 16:53:17
1128
原创 设计模式-适配器模式
适配器模式适配器模式定义适配器模式的应用1.异类库适配2.数据适配2.1 参数适配2.2 适配后端接口数据3.computed小结1.适配器vs外观模式适配器模式定义适配器模式的作用是解决现有接口之间不兼容的问题，通过将一个对象或者类的方法属性转化成另外一个对象或者类的方法属性，以满足客户的使用需求。例如，当我们有GDMap和BJMap两个对象var GDMap = { show:function(){console.log('渲染广州地图;');}}var BJMap = { show
2021-11-11 11:48:07
1067
原创 设计模式-外观模式
外观模式外观模式定义外观模式应用1. 处理兼容2. 封装多个功能，简化底层操作总结外观模式定义外观模式又称为门面模式，可以为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更为简单。在JavaScript中有时也会用于对底层结构兼容性做统一封装来简化用户使用。外观模式应用1. 处理兼容2. 封装多个功能，简化底层操作总结...
2021-11-10 21:45:29
459
原创 设计模式-建造者模式
建造者模式建造者模式是将一个复杂对象的构建层和其表示层相互分离，同样的构建过程可采用不同的表示。建造者模式&工厂模式工厂模式主要是为了创建对象实例或者类簇（抽象工厂），关心的是最终创建的结果而不关心创建的过程。所以通过工厂模式可以得到对象的实例或者类簇。然而建造者模式在创建对象时更多的是关心这个对象创建的整个过程，甚至于创建对象的每一个细节。参考链接：一篇文章就彻底弄懂建造者模式(Builder Pattern)《JavaScript设计模式》...
2021-11-10 16:08:16
67
原创 设计模式-原型模式
原型模式原型模式原型优势原型模式原型模式是指用原型实例指向创建对象的类，使用于创建新的对象的类共享原型对象的属性和方法。在创建基类时，对于每次创建的一些简单且差异化的属性放在构造函数中，将一些消耗资源比较大的方法放在基类原型中，这样可以避免子类继承时每次初始化都要做一些重复性的东西，消耗性能。function Foo(){ this.a = 10;}Foo.prototype.render = function(){...};let f1 = new Foo();let f2 =
2021-11-10 11:21:28
201
原创 设计模式——单例模式
单例模式单例模式的定义定义单例模式基本结构单例模式的实现优雅的单例模式惰性单例模式单例模式的应用命名空间管理代码库的模块创建静态变量单例模式的优缺点单例模式的定义定义单例模式又称为单体模式，是只允许实例化一次的对象类。单例模式基本结构从广义的定义来说，单例模式只是一个用来划分命名空间并将一系列相关方法和属性组织在一起的对象，并且只能实例化一次。最简单的单例就是一个对象字面量。var single = { name:'Yimi', getName() {return this.name
2021-11-09 17:00:19
308
原创 设计模式-工厂模式
工厂模式简单工厂模式工厂方法模式抽象工厂模式抽象类抽象工厂模式简单工厂模式简单工厂模式：又叫静态工厂模式，由一个工厂对象决定创建某一种产品对象的实例。主要用来创建同一类对象。举个例子，比如书店里有各类书籍及其相关介绍等。当你要选择其中一类书籍时你只需要问书店老板，他会向你提供你所需要的，你只需要记住BookFactory这个工厂类即可。var StoryBook = function() { this.intro = "这是一本故事书。";}StoryBook.prototype =
2021-10-26 22:00:09
103
原创 字符串的扩展
字符串的扩展字符的Unicode表示字符串方法codePointAt()String.fromCodePoint()at()normalize()includes()startsWith()、 endsWith()repeat()padStart()、padEnd()字符串的遍历器接口模板模板字符串标签模板String.raw()字符的Unicode表示字符串方法JavaScript 许采用\uxxxx形式表示一个字符，其中 xxxx 表示字符的 Unicode 码点。但是，，这种表示法只限于码点在\
2021-10-14 17:50:20
380
原创 变量的解构赋值
变量的解构赋值数组的解构赋值基本用法默认值对象的解构赋值数组的解构赋值基本用法只要数据结构具有Iterator接口，都可以采用数据形式的解构赋值。let [foo] = 1; let [foo]= false ; let [foo] = NaN; let [foo] = undefined; let [foo]= null; let [foo] = {};以上语句都会报错，因为等号右边的值或是转为对象后不具备Iterator接口（前五个表达式），或者本身就不具备Iterator接口（最
2021-10-13 19:01:38
76
原创 手机端调试H5——vConsole
在开发H5中当需要调试页面时，我们可以利用pc端的控制台来进行页面调试，但有时候我们还需要在手机端进行调试，那么此时我们就需要使用到一些手机前端开发调试利器，可以方便我们在手机前端页面看到log日志，vconsole就是这样一个工具。vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。vconsole使用起来也比较方便，你可以通过npm或者cdn等方式引入，然后初始化vcon...
2019-09-11 15:12:19
786
原创 HTML之colgroup与col
colgroup<colgroup>标签用于对表格中的列进行组合，以便对其进行格式化。 通过使用 <colgroup>标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。 只能在 table 元素内使用 <colgroup> 标签。<table border="1" width="60%"> <colg
2019-02-15 10:30:54
1743
原创 DOMContentLoaded
DOMContentLoaded简介1、概念MDN解析：当初始HTML文档已完全加载和解析时，将触发DOMContentLoaded事件，而不需要等待样式表，图像和子框架页面加载（事件可以用来检测HTML页面是否完全加载完毕(fully-loaded)）。2、HTML解析过程与DOMContentLoaded触发时机1） 既无js也无css的情况下，HTML文档的解析过程：由图可见...
2019-01-28 10:22:26
18822
5
原创 实现可输入的下拉框
第一种方式：input + select<html><head> <meta charset="utf-8"> <title>js实现可输入的下拉框</title> <style type="text/css"> .wrap { position: relative; } .
2018-12-29 10:56:40
9182
2
原创 Node实现浏览器缓存
原理当浏览器第一次向服务端发送请求时，服务端会返回一个带有Last-Modified: Sat, 02 Dec 2017 04:03:14 GMT字段的响应头，该字段表明所请求的文件最新修改时间；当浏览器下一次向服务端发送请求时，请求头会带上 If-Modified-Since: Sat, 02 Dec 2017 04:03:14 GMT字段，该字段的值是上一次服务器 Last-Modified...
2018-11-14 15:42:35
943
原创 Node解析POST数据
表单的POST提交主要有三种数据格式：text/plainapplication/x-www-form-urlencodedmultipart/form-data其中，text/plain用的很少；application/x-www-form-urlencoded是默认，采用url编码方式，以xxx=xxx&amp;amp;xxx=xx...格式传输数据；multipart/form-data...
2018-11-13 16:22:59
2134
1
原创 Node服务器处理GET、POST请求
GET数据保存在"req.url"里面；而POST数据保存在body里面、比较大，因此会将数据分段进行传输，服务端监听data事件来接收每一段数据，同时服务端监听end事件来得知数据传输是否结束。例如：const http=require('http');const url=require('url');const querystring=require('querystring');l...
2018-11-13 11:09:34
689
原创 快应用入门：配置文件manifest文件
manifest.json文件中包含了应用描述、接口声明、页面路由信息manifest属性类型默认值必填描述packageString-是应用包名，确认与原生应用的包名不一致，推荐采用com.company.module的格式，如：com.example.demonameString-是应用名称，6个汉字以内，与应用商店保存的名称一致，用于在桌面...
2018-11-08 11:43:20
5221
原创 快应用入门：第一个快应用程序
快应用是九大手机厂商基于硬件平台共同推出的新型应用生态，依附在各大应用市场。用户无需下载安装，即点即用，享受原生应用的性能体验。2018年3月20日在北京推出“快应用”标准。该应用模块以标准js语法+重组css标签+Flexbox布局+mvvm模式。
2018-11-08 09:59:46
1060
原创 vue封装插件并发布到npm上
vue封装插件并发布到npm上项目初始化首先，要创建项目，封装vue的插件用webpack-simple很合适，vue init webpack-simple 项目名称此命令创建我们的项目的目录，创建文件夹和文件，最后结构是这样的然后根据需求，实现具体功能，这里我封装了一个轮播图组件mini-sliders，主要功能写在lib/slider.vue组件中功能写好后，我们要写index.j...
2018-11-06 10:49:00
2296
原创 CSS3 实现文字渐变的三种方式
1.background-clip、background-image相关属性background-image：为元素设置背景图像属性值url(‘URL’)指向图像的路径。none默认值。不显示背景图像。inherit规定应该从父元素继承 background-image 属性的设置。background-clip：规定背景的绘制区域...
2018-11-05 16:32:11
4551
1
原创 CSS3 之text-fill-color属性
text-fill-color是设置指定文字的填充颜色。若同时设置<text-fill-color > 和 <color >，< text-fill-color >定义的颜色将覆盖< color > 属性text-fill-color可以实现渐变色字体和镂空字体，具体如下：渐变色字体HTML代码<p class="font1">你...
2018-11-05 16:12:43
5477
1
原创 mask遮罩层详解
mask简介css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。mask和background用法是相仿的，mask的值有这些：mask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typ...
2018-11-05 16:02:25
7998
原创 SVG实现描边动画
SVG动画效果先来放一个自己写的效果：OK，现在我们来聊一聊SVG描边动画的实现一、基础知识1、stroke相关属性stroke：表示描边的颜色。stroke-width ：表示描边的粗细。stroke-linecap ：表示描边端点表现方式。可用值有：butt, round, square, inherit.stroke-linejoin 表示描边转角的表现方式。可用值有...
2018-11-02 15:03:25
1426
原创 svg动画
svg animation元素&lt;set&gt;：可以在特定时间之后修改某个属性值（也可以是CSS属性值）&lt;animation&gt;：基础动画元素，实现单属性的动画过渡效果&lt;animateColor&gt;：颜色动画&lt;animateTransform&gt;：变换动画效果&lt;animateMotion&
2018-11-01 15:23:47
1374
原创 svg入门
&lt;svg&gt;标签width：指定了svg图像在HTML元素中所占据的宽度height ：知道了svg图像在HTML元素中所占据的高度viewBox ： 展示svg图像的一部分，该属性有四个值，分别代表左上角的横坐标和纵坐标、视口的宽度和高度。如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于...
2018-10-31 16:41:32
279
原创 关于canvas的方法和属性
获取 Canvas 对象获取到 Canvas 的上下文环境的语法为：canvas.getContext(contextType, contextAttributes);上下文类型（contextType）：2d（本小册所有的示例都是 2d 的）：代表一个二维渲染上下文webgl（或"experimental-webgl"）：代表一个三维渲染上下文webgl2（或"experimenta...
2018-10-31 15:44:56
504
原创 Node爬虫之使用 async 控制并发
上文 《Node爬虫之使用 eventproxy 控制并发》我们说到用 node 爬了csdn首页数据，但是这些请求完全是并发的，如果某些网站有 “反爬” 机制，就很有可能封锁你的 IP。这样的情况下我们就可以使用 async 模块。主要用到的是 async 的 mapLimit(arr, limit, iterator, callback)接口。async.mapLimit(arr, 5, f...
2018-09-19 11:42:19
936
原创 Node爬虫之使用 eventproxy 控制并发
上一篇文章《Node实现简单爬虫》我们介绍了如何使用 superagent和cheerio来取主页内容，那只需要发起一次 http get 请求就能办到。但这次，我们需要取出每个主题的第一条评论，这就要求我们对每个主题的链接发起请求，并用 cheerio 去取出其中的第一条评论。eventproxy 模块在这之前，先介绍一下eventproxy模块，假设我们不使用 eventproxy 也不使...
2018-09-19 10:37:39
326
原创 Node实现简单爬虫
1、新建一个项目新建一个文件夹安装依赖 cnpm i --save PACKAGE_NAME写应用逻辑2、核心逻辑实现爬虫需要用到三个依赖，分别是express、superagent、cheeriosuperagent是个http方面的库，可以发起get或post请求cheerio可理解为Node.js版的jQuery，用来从网页中以css selector取数据，使用方式跟 j...
2018-09-19 09:08:48
495
原创 Windows下安装及使用NVM
所谓nvm就是一个可以让你在同一台机器上安装和切换不同版本node的工具。这里是一篇安装及使用教程。第一步：下载nvm可以到这里下载链接：https://pan.baidu.com/s/1wW4fH8XnXRiachXHb1Pckw 密码：pn90 或者到github上下载最新版本https://github.com/coreybutler/nvm-windows/releases...
2018-09-13 11:08:50
67225
18
原创 node定时器介绍
node定时器简介node的定时器共有四种，分别是： setTimeout() setInterval() setImmediate() process.nextTick() 前两个是语言的标准，后两个是node独有的。 node的异步任务可以分为两种，分别是追加在 本轮循环 的异步任务和追加在 次轮循坏 的异步任务。本轮循环一定早于次轮循坏执行。 node规定，process....
2018-09-11 17:27:01
546
原创 js判断是否是数组的方法
1.instanceof var arr = [1,2,3];arr instanceof Array要注意，instanceof Array 只适用于与数组初始化在相同上下文中才有效，且不能跨iframe 2.Array.isArray() Array.isArray([1,2,3]);3.constructor constructor 在其对应对象的原型下面，是自...
2018-09-11 17:11:52
13893
原创 JS获取元素样式之style、currentStyle、getComputedStyle
在js中获取元素的样式属性大多都是用ele.style.attr这种方式，但是这种方式是有局限性的，该方法只能获取到行内样式，获取不了外部样式。 如果要想获取元素的外部样式，可以选用currentStyle属性和getComputedStyle属性，但这两个属性不能设置样式,只能获取样式，而且这两个属性有其兼容性，具体来说： currentStyle属性 用法：ele.currentStyl...
2018-09-07 12:25:14
4200
原创 浅复制与深复制
浅复制举个复制代码的例子：function clone(p,s) { var s = s || {}; for (var prop in p) { s[prop] = p[prop]; } return s;}var a = {name: ’Chen‘,age: '12', hobby: {1: 'running', 2: 'swimming'}};var ...
2018-09-06 10:35:47
231
原创 JS继承之寄生继承
JavaScript继承还有一种继承模式——寄生继承。 举个例子：function object(o) { function F() {}; F.prototype = o; return new F();}var twoD = { name: '2D shape', dimensions: 2}function triangle(s, h) { var th...
2018-09-05 16:58:57
2777
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人