生而为人我很遗憾的博客_前端

在React中使用Sass实现Css样式管理-10

0. 什么是SassSass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间：Sass 引入合理的样式复用机制，可以节约很多时间来重复。支持变量和函数，利用代码简洁。有两种文件后缀名，.sass和.sccs区别在于前者用缩进代替了后者的{}和分号，建议用sccs后续来书写sass

css

字符串

CSS

原创精选 2024-06-25 13:50:38 249 阅读 yyds干货盘点

OSX-02-Mac OS应用开发系列课程大纲和章节内容设计

本节笔者会详细介绍下本系统专题的大纲，以及每个专题章节的组织结构。这样读者会有一个全局的概念。在开始前还是在再介绍一下下面这个框架图，因为比较重要，在这里再冗余介绍一下。开发Apple公司相关产品的软件时，主要有两个框架可供使用：Cocoa和Cocoa Touch。Cocoa是一个开发Mac OS系统应用的开发工具包，而Cocoa Touch工具包主要用于IOS系统应用的开发，可以简单理解为Obj

macos

ios

objectivec

原创精选 2024-04-08 18:40:55 165 阅读

javascript设计模式-应用示例

事件工具类/* addEvent: simplified event attachment */ function addEvent( obj, type, fn ) { if (obj.addEventListener) { obj.addEventListener( type, fn, false ); EventCache.add(obj, type, fn); } else

Events

List

i++

原创 2023-06-02 08:40:43 89 阅读

javascript设计模式-责任链

责任链可以用来消除请求的发送者和接收者之间的耦合，这是通过实现一个由隐式地对请求进行处理的对象组成的链而做到的。链中的每个对象可以处理请求，也可以将其传给下一个对象。JS内部就使用了这种模式来处一事件捕获和冒泡问题。一般的结构如下：发送者知道链中的第一个接收者，它向这个接收者发送请求；第一个接收者都对请求进行分析，然后要么处理它，要么将其向下传递；每一个接收者知道其他对象只有一个，即它在链中的下家

ci

模块化

抛出异常

原创 2023-06-01 19:43:35 147 阅读

javascript设计模式-命令

命令是一种封装方法调用的方式，命令模式与普通函数不同。它可以用来对方法调用进行参数化处理和传送，经这样处理过的方法调用可以在任何需要的时候执行。它也可以用来消除调用操作的对象和实现操作的对象之间的耦合。它在创建用户界面时非常有用，特别是在需要不受限制的取消操作的时候。它还可以用来替代回调函数，因为它能够提高在对象间传递的操作的模块化程度。这种模式适合JSP中的ACTION的实现，在一个ACITO

封装

方法调用

命令模式

原创 2023-05-31 08:36:04 119 阅读

javascript设计模式-观察者

观察者是一种管理人与任务之间的关系的得力工具，实质就是你可以对程序中某个对象的状态进行观察，并且在其发生改变时能够得到通知。一般有两种实现方式推或拉，在这个过程中各方的职责如下：订阅者可以订阅和退订，他们还要接收，并且可以在由人投送和自己收取之间进行选择；发布者负责投关，他们可以在送出和由人取之间进行选择；function Publisher() { this.subscribers =

事件监听器

API

设计模式

javascript

原创 2023-05-29 09:04:21 80 阅读

javascript设计模式-代理

代理是一个对象，它可以用来控制对另一对象的访问。它与另一个对象实现同样的接口，并且会把任何方法调用传递给那个对象。另外那个对象通常称为本体。代理可以代替其本体被实例化，并使其可被远程访问。它还可以把本体的实例化推迟到真正需要的时候。对于实例化比较费时的本体，或尺寸比较大以至于不用时不宜保存在内存中的本体这特别有用。另外在处理那些需要较长时间才能把数据载入用户界面的类时，代理也非常有用。代理最适合的

实例化

加载

设计模式

javascript

原创 2023-05-29 09:00:08 56 阅读

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 163 阅读

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 阅读

图片查看器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 阅读

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

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

51CTO博客

生而为人的博客

在React中使用Sass实现Css样式管理-10

OSX-02-Mac OS应用开发系列课程大纲和章节内容设计

javascript设计模式-应用示例

javascript设计模式-责任链

javascript设计模式-命令

javascript设计模式-观察者

javascript设计模式-代理

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

图片查看器50

图片查看器Pan49

欢迎