生而为人我很遗憾的博客_Java,python,Mysql,redis,Objective-c,自动化运维,项目管理,安全技术,Hexo建站,java,python(2)

javascript设计模式-享元

这是一种优化性能代码的模式，最适合解决因创建大量类似对象而累及性能的问题。对于那些可能一连几天也不会重新加载的大型应用系统非常有用。它用于减少应用程序所需要数量，通过将对象内部划分为内在数据和外在数据两类来实现。管理享元外在数据有许多方法：1、数据库；2、组合模式(利用对象自身的层次关系保存数据并达到共享的目的)。这种优化的一步步骤如下：将所有外在数据从目标类中剥离，尽可能多地删除此类的改改。创建

数据

ide

字面量

原创 2023-05-26 08:50:47 89 阅读

javascript设计模式-装饰者

装饰者是一种为对象增加我的技术，它并不使用创建新子类手段，一切都在动态完成。这个过程相对于使用者来说是透明的。透明地把对象包装在具有同样接口的另一个对象之中。比如可以动态的为自行车对象添加可选的特色配件上。比如添加4个选件，可以新定义4个超类，但如果自行车种类过多，则需要派生出N多子类。基本是不可以维护。如果用装饰者，只需要维护4个类即可，一个选件一个类。通过装饰加在各个原有的自行车上。缺点在于，

子类

方法调用

装饰者模式

原创 2023-05-25 09:24:24 81 阅读

javascript设计模式-适配器

适配器可用来在现有接口和不兼容的类之间进行适配，又称为「包装器」。适配器可以被添加到现有代码中以协调两个不同的接口。适配器有利于大批量改写现有代码，但有时改写现有代码可能会比较方便。这种优化有点类似于JDK升级过程中保留老的API，但建议使用新的API的过程。门面元素展现的是一个简化接口，它并不提供额外的选择，而且有时为了方便完成某些常见任务它还会做出一些选择和假定。而适配器则要把一个接口转换为另

API

不兼容

封装

适配器

原创 2023-05-24 13:35:15 93 阅读

javascript设计模式-门面

它的作用有两个，一个是简化类的接口，另一个是消除类与使用它的客户代码之间的耦合。比如基于GUI的操作系统就是计算机的数据和功能的一个门面，每次点击等操作实际上是在跟一个门面打交道，间接地执行一些幕后的命令。如今的WEB应用程序开发要求必须尽量提高编程效率，要做到这一点最简单的是创建自己的工具集或使用第三方函数库。最简单的门面如下：function a(x) { // do stuff here

函数库

编程效率

应用程序开发

原创 2023-05-22 08:17:05 188 阅读

javascript设计模式-组合

组合模式是一种专为创建WEB上的动态用户界面而量身定制的模式。使用它，可以用一条命令在多个对象上激发复杂或递归行为，那些复杂行为被委托给各个对象。前提是每个对象必须实现相同的接口。接口检查越严格，其稳定性越高。可以用同样的方法处理对象的集合与其中的特定子对象，组合对象与组成它的对象实现了同一批操作；可以用来把一批子对象组织成树形结构，并且使整棵树都可以遍历，所有组合对象都实现了一个用来获取其子对象

i++

树形结构

用户界面

组合模式

原创 2023-05-21 11:05:46 106 阅读

javascript设计模式-桥接

桥接将抽象与实现隔离开来，以便二者独立变化。常用于事件驱动的程序设计。有些地方它和适配器与门面很类似。下面是最简单的桥接模式，但适配器是一种包装器。门面一般是同一个类中方法的抽象和组合，而桥接通常是收集几个类的。这种方式也要注意使用场合，如果一个函数只在一个地方专用，那就没必要用Bridge把它桥接出来。有些设计模式和队列混合使用会起到意想不到的效果。addEvent(element, 'clic

桥接

桥接模式

复杂度

原创 2023-05-20 10:01:09 93 阅读

javaScript设计模式-单例

它的好处是消除对象间的耦合度，在派生子类时提供了更大的灵活性。但盲目的把普通的构造函数扔在一边，并不值得提倡。如果要采一不可能另外换用一个类，或都不需要在运行期间在一系列可互换的类中进行选择，就不应该使用。这样在后期代码重构时还有机会使用。简单工厂这种方式只能处理一个工厂只生产一个品牌的商品，如果生产不同品牌的商品时，此方式就行不通了。var BicycleFactory = {//把生产Bicy

ide

子类

工厂模式

js

工厂

原创 2023-05-19 08:36:51 109 阅读

javaScript设计模式-单例

定义确保一个类只有一个实例，并提供全局访问点。原则这个模式有三种不同的实现方式，每种都合理。但各有各的用处，其实用static类也可以实现相似的功能，不同的是单例是使用再创建，static是JVM加载时就创建。实现单例提供了将代码组织为一个逻辑单元的手段，它有许多用途：可以用来划分命名空间，以减少网页中全局变量的数目，可以用分支技术来封装浏览器间的差异化。在网页上使用全局变量有很大风险，而用单体对

加载

命名空间

js

设计模式

单例

原创 2023-05-18 09:51:24 66 阅读

javaScript设计模式-继承2

继承在实现JS继承时需要注意一个类依赖另一个类的内部实现这样的耦合关系。如果设计的是一个供众人使用的API，最好使用类继承方式。原型的方式更简洁也更节省内存。掺元适合即要共享类的方法又不需要结对的情况。类式继承//superClass function Person(name) { this.name = name; } Person.prototype.getName = functio

javascript

js

设计模式

面向对象

原创 2023-05-17 08:21:20 94 阅读 yyds干货盘点

javaScript设计模式-面向对象基础1

一、接口在JS这种弱类型的语言中，类型不匹配错误很难跟踪。可以使用接口来进行类型检查。如果强制使用，又会弱化语言的灵活性。因为有额外的代码调用，所以又会降低性能。解决方法就是在开发时进行类型检查，在开始完成后删除此部分代码。但JS中的接口实现方式是模拟的，它以文档和方法检查相结合。缺点在于它只检查方法的名称，并不检查参数的名称，类型，数量以及方法的返回值。接口定义工具类var Interface

封装

私有方法

javascript

设计模式

面向对象

原创 2023-05-17 08:14:21 123 阅读

游戏引擎---gameEngine61

var getTimeNow = function () { return +new Date(); }; // Game....................................................................... // This game engine implements a game loop that draws sprites.

sed

Game

ide

js

canvas

原创 2023-05-13 09:40:03 94 阅读

Sprite---精灵对象60

// Painters................................................................... // Painters paint sprites with a paint(sprite, context) method. ImagePainters // paint an image for their sprite. var I

sed

ci

Image

js

canvas

原创 2023-05-13 09:39:29 140 阅读

Shape-形状对象59

/*这其实是一个图形基类*/ var Shape = function () { this.x = undefined; this.y = undefined; this.strokeStyle = 'rgba(255, 253, 208, 0.9)'; this.fillStyle = 'rgba(147, 197, 114, 0.8)'; }; Shape.proto

数组

2d

ide

js

canvas

原创 2023-05-13 09:38:50 119 阅读

Projection-投影对象58

//用某条轴上的最大值和最小值表示一段投影。 var Projection = function (min, max) { this.min = min; this.max = max; }; Projection.prototype = { overlaps: function (projection) { return this.max > project

最小值

js

canvas

原创 2023-05-13 09:38:11 164 阅读

Vector-向量对象57

var Vector = function(x, y) {//点的x，y坐标 this.x = x; this.y = y; }; Vector.prototype = { getMagnitude: function () { return Math.sqrt(Math.pow(this.x, 2) + M

Math

js

canvas

原创 2023-05-13 09:37:35 51 阅读

Shape.js-图形综合56

/* 这个类中对定了基类图形，子类多边形，图像，精灵，圆形放在了8.05节中 */ var Point = function (x, y) { this.x = x; this.y = y; }; var Shape = function () { this.x = undefined; this.y = undefined; this.strokeStyle

Math

scala

Source

原创 2023-05-13 09:37:02 139 阅读

AnimationTimer.js--动画计时器55

// An animation runs for a duration, in milliseconds. It's up to you, // however, to start and stop the animation -- animations do not stop // automatically. You can check to see if an animation is ov

sed

Time

Math

js

canvas

原创 2023-05-13 09:36:33 91 阅读

Stopwatch.js---一个简单的计时器工具类54

Stopwatch = function () { }; // You can get the elapsed time while the timer is running, or after it's // stopped. Stopwatch.prototype = { startTime: 0, running: false, elapsed: undefined,

sed

Time

js

canvas

原创 2023-05-13 09:35:42 149 阅读

文本光标、行、段落对象53

TextCursor = function (fillStyle, width) { this.fillStyle = fillStyle || 'rgba(0, 0, 0, 0.7)'; this.width = width || 2; this.left = 0; this.top = 0; }; TextCursor.p

Line

Data

ide

原创 2023-05-13 09:35:05 129 阅读

polygon.js---多边形52

//建立这样一个对象，每次绘制时可以加入到一个缓存中，以后可以实现拖动等操作 var Point = function (x, y) { this.x = x; this.y = y; }; var Polygon = function (centerX, centerY, radius, sides, startAngle, strokeStyle, fillStyle, fill

ide

Math

数组

原创 2023-05-13 09:34:33 258 阅读

requestAnimationFrame.js---封装动画Frame51

//主要是区分浏览器的不同，如果浏览器不支持requestNextAnimationFrame()方法，只能使用setTimeout()来代替。这种封装方式称为polyfill method，多平台智能适配方法，主要思想是利用不同平台的优缺点，当不满足时再用替代方法；个合集思想，而不是交集思想。 window.requestNextAnimationFrame = (function ()

firefox

Chrome

js

canvas

原创 2023-05-13 09:34:00 205 阅读

Gradle构建工具中文教程

Gradle 是一种开源构建自动化工具，可以构建几乎任何类型的软件。Gradle 对您要构建什么或如何构建它几乎没有任何假设。这使得 Gradle 特别灵活。Gradle 构建脚本是使用 Groovy 或 Kotlin DSL 编写的。在深入了解 Gradle 的细节之前，了解以下术语会很有帮助。一、术语项目：Gradle 构建的东西。项目包含一个构建脚本，它是一个位于项目根目录中的文件，通常名为

Gradle

maven

原创 2023-05-13 01:41:50 962 阅读 1点赞 yyds干货盘点

图片查看器50

<html> <head> <title>Panning Images</title> <style> body { background: rgba(100, 145, 250, 0.3); } #canvas {

ide

html

ci

js

canvas

原创 2023-05-12 00:57:10 171 阅读

图片查看器Pan49

var COREHTML5 = COREHTML5 || { }; // Constructor........................................................ COREHTML5.Pan = function(imageCanvas, image, viewportPercent, panCan

2d

Pan

sed

js

canvs

原创 2023-05-12 00:56:36 58 阅读

滑动条Slider48

var COREHTML5 = COREHTML5 || {} // Constructor........................................................ COREHTML5.Slider = function(strokeStyle, fillStyle, knobPercent, hp

ide

ci

2d

js

canvas

原创 2023-05-12 00:56:00 72 阅读

进度条Progressbar47

var COREHTML5 = COREHTML5 || {} // Constructor.................................................... COREHTML5.Progressbar = function(strokeStyle, fillStyle, horizonta

2d

js

canvas

原创 2023-05-12 00:55:21 69 阅读

圆角矩形RoundedRectangle46

var COREHTML5 = COREHTML5 || {} // Constructor........................................................ COREHTML5.RoundedRectangle = function(strokeStyle, fillStyle,

2d

General

js

canvas

原创 2023-05-12 00:54:47 45 阅读

自定义控件45

/*创建控件，然后将控件的DOM加入DOM结构树中的某个HTML元素中，这个操作可以通过appendTo(element)来完成。开发者也可以通过控件的domElement属性来访问其DOM元素，控制其外观，要实现控件最基本的要实现以下几个方法：【1】appendTo(element):将控件的DOM元素加入element参数所代表的元素之吕，并且根据外围的DOM元素大

控件

开发者

HTML

js

canvas

原创 2023-05-12 00:54:13 61 阅读

利用MTV弹离物体44

//HTML......................................................................... <body> <canvas id='canvas' width='500' height='300'> Canvas not supported </canva

ci

ide

Math

js

canvas

原创 2023-05-12 00:53:35 73 阅读

利用MTV分开和粘合物体43

//HTML......................................................................... <body> <canvas id="canvas" width="600" height="400"> Canvas not supported </canva

ci

Math

ide

js

canvas

原创 2023-05-12 00:52:41 45 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

生而为人的博客

javascript设计模式-享元

javascript设计模式-装饰者

javascript设计模式-适配器

javascript设计模式-门面

javascript设计模式-组合

javascript设计模式-桥接

javaScript设计模式-单例

javaScript设计模式-单例

javaScript设计模式-继承2

javaScript设计模式-面向对象基础1

游戏引擎---gameEngine61

Sprite---精灵对象60

Shape-形状对象59

Projection-投影对象58

Vector-向量对象57

Shape.js-图形综合56

AnimationTimer.js--动画计时器55

Stopwatch.js---一个简单的计时器工具类54

文本光标、行、段落对象53

polygon.js---多边形52

requestAnimationFrame.js---封装动画Frame51

Gradle构建工具中文教程

图片查看器50

图片查看器Pan49

滑动条Slider48

进度条Progressbar47

圆角矩形RoundedRectangle46

自定义控件45

利用MTV弹离物体44

利用MTV分开和粘合物体43

欢迎