其他 - Page 4 of 6

JavaScript设计模式样例七 —— 原型模式

原型模式(Prototype Pattern)

1

2

3

定义：用于创建重复的对象，同时又能保证性能。

目的：用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。

场景：在运行期建立和删除原型。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

let productPrototype = {

init: (type) => {

this.type = type

},

getType: () => {

return this.type

}

let prototype = (type) => {

function F () {

}

F.prototype = productPrototype

let f = new F()

f.init(type)

return f

}

let car = prototype('丰田CHR')

console.log(car.getType())

Github地址：https://github.com/skillnull/Design-Mode-Example[……]

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(4130)评论(0)

JavaScript设计模式样例六 —— 抽象工厂模式

抽象工厂模式(Abstract Factory Pattern)

1

2

3

定义：抽象工厂模式提供了一种方式，可以将一组具有同一主题的单独的工厂封装起来。或者说，是其他工厂的工厂。

目的：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。

场景：系统的产品有多于一个的产品族，而系统只消费其中某一族的产品。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

class User {

constructor (type) {

if (new.target === User) {

throw new Error('抽象类不能实例化！')

}

this.type = type

}

class UserOfWechat extends User {

constructor (name) {

super('wechat')

this.name = name

this.viewPage = ['首页', '通讯录', '发现页']

}

class UserOfQQ extends User {

constructor (name) {

super('qq')

this.name = name

this.viewPage = ['首页', '通讯录', '发现页']

}

function getUser (type) {

switch (type) {

case 'wechat':

return UserOfWechat

break

case 'qq':

return UserOfQQ

break

default:

throw new Error('参数错误')

break

}

let WechatUserClass = getUser('wechat')

let QQUserClass = getUser('qq')

let wechatUser = new WechatUserClass('卡卡罗特')

let qqUser = new QQUserClass('贝吉塔')

Github地址：https://github.com/skillnull/Design-Mod[……]

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(3857)评论(0)

JavaScript设计模式样例五 —— 建造者模式

建造者模式(Builder Pattern)

1

2

3

定义：使用多个简单的对象一步一步构建成一个复杂的对象。

目的：将一个复杂的构建与其表示相分离，使得同样的构建过程可以创建不同的表示。

场景：一些基本部件不会变，而其组合经常变化的时候。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

// 声明一个产品类

class Product {

constructor () {

}

// 声明一个建造者类

class BuilderProduct {

constructor () {

// 建造产品名称

this.nameBuilder = (name) => {

this.name = name || null

}

// 建造产品版本

this.versionBuilder = (version) => {

this.version = version || null

}

// 建造产品生产日期

this.createTimeBuilder = (createTime) => {

this.createTime = createTime || null

}

// 组合建造产品

this.getProduct = () => {

let product = new Product()

if (this.name) {

product.name = this.name

}

if (this.version) {

product.version = this.version

}

if (this.createTime) {

product.createTime = this.createTime

}

return product

}

// 声明一个需求类

class Demand {

constructor (demands) {

let builderProduct = new BuilderProduct()

builderProduct.nameBuilder(demands.name)

builderProduct.versionBuilder(demands.version)

builderProduct.createTimeBuilder(demands.createTime)

return builderProduct.getProduct()

}

let demand = new Demand({

name: 'SKILL.NULL'

})

Github地址：https://github.com/skillnull/Design-Mode-Example

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(3917)评论(0)

JavaScript设计模式样例四 —— 单例模式

单例模式(Singleton Pattern)：

1

2

3

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

目的：阻止其他对象实例化其自己的单例对象的副本，从而确保所有对象都访问唯一实例。

场景：如一个系统中可以存在多个打印任务，但是同时只能有一个正在工作的任务。

例：JS代码实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

// 惰性单例

let lazySingle = (() => {

let _instance = null

// 单例

Single = () => {

let privateAttribute = '我是私有属性'

privateMethod = () => {

// 私有方法

}

return {

publicMethod: () => {

// 对外暴露方法

},

publicAttribute: '我是对外暴露属性'

}

// 提供一个全局访问点

return () => {

if (!_instance) {

_instance = Single()

}

return _instance

}

})()

Github地址：https://github.com/skillnull/Design-M[……]

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(4086)评论(0)

JavaScript设计模式样例三 —— 装饰模式

装饰模式(Decorator Pattern)：

1

2

3

4

定义：在不改变原对象的情况下，动态的给对象添加一些额外的职责。就功能而言，装饰模式相比生成子类更为灵活。

目的：把类的核心职责和装饰功能区分开。可以去除相关类中重复的逻辑。

场景：当系统需要扩展一个类的功能，或者客户端需要动态的给一个对象添加功能，并且使用继承或生成子类会很复杂的时候。

装饰模式体现了"多用组合，少用继承"这一设计原则。

例：JS代码实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

// 一辆小汽车的构造函数

function ACar () {

// 一辆原味小汽车的价格是 99 元

this.price = function () {

return 99

}

// 装饰器 —— 汽车喇叭

function carTrumpet (car) {

let price = car.price()

car.trumpet = function () {

console.log('滴滴滴')

}

// 一个喇叭加价 10 元

car.price = function () {

return price + 10

}

// 装饰器 —— 行车记录仪

function carRecorder (car) {

let price = car.price()

car.recorder = function () {

console.log('让一让啊让一让我有行车记录仪')

}

// 一个行车记录仪加价 9.9 元

car.price = function () {

return price + 9.9

}

// 初始化一辆小汽车

let car = new ACar()

// 给小汽车装上喇叭

carTrumpet(car)

// 给小汽车装上行车记录仪

carRecorder(car)

// 最后小汽车的价格是 118.9 元

console.log(car.price())

Github地址：https://github.com/skillnull/Design-M[……]

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(5055)评论(0)

JavaScript设计模式样例二 —— 策略模式

策略模式(Strategy Pattern)：

1

2

3

定义：定义了一族算法；封装了每个算法；这族的算法可互换代替。

目的：将算法的使用与算法的实现分离开来。

场景：可用来消除大量的条件分支语句。

例：JS代码实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// 策略算法封装

let strategy = {

add (number1, number2) {

return number1 + number2

},

sub (number1, number2) {

return number1 - number2

},

mul (number1, number2) {

return number1 * number2

},

div (number1, number2) {

return number1 * number2

}

// 策略算法调用封装

function callStratery (strategyType, number1, number2) {

return strategy[strategyType](number1, number2)

}

// 策略算法调用

callStratery(add, 1, 2) // return 3

Github地址：https://github.com/skillnull/Design-Mo[……]

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(5316)评论(0)

JavaScript设计模式样例一 —— 工厂模式

工厂模式(Factory Pattern):

1

2

3

定义：定义一个创建对象的接口，但让实现这个接口的类来决定实例化哪个类。工厂方法让类的实例化推迟到子类中进行。

目的：工厂模式是为了解耦，把对象的创建和使用的过程分开。

场景：需要生成复杂对象，需要降低耦合度的场景。

例：JS代码实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

let operationFactory = {

createOperate (operate) {

let oper = null

switch (operate) {

case '+':

oper = new operationFactory.OperationAdd()

break

case '-':

oper = new operationFactory.OperationSub()

break

case '*':

oper = new operationFactory.OperationMul()

break

case '/':

oper = new operationFactory.OperationDiv()

break

}

},

OperationAdd () {

// TODO run the addition operation

},

OperationSub () {

// TODO run the subtraction operation

},

OperationMul () {

// TODO run the multiplication operation

},

OperationDiv () {

// TODO run the division operation

}

Github地址：https://github.com/skillnull/[……]

2023-08-18by SKILLNULL JavaScript, 设计模式阅读(4413)评论(0)

Vue项目SEO优化的另一种姿态

背景：当前项目首页和登陆后的平台在一个项目里，路由采用hash模式，现在要做SEO优化，这时候同构SSR(Server Side Rendering)服务端渲染代价显然太大，影响范围比较广，同样更改当前项目路由为history模式采用预渲染(Prerending)代价也不小。最终决定将首页单独出一个[……]

2018-12-19by SKILLNULL Vue, Webpack 阅读(8419)评论(0)

批量修改历史commit的用户名user.name邮箱user.email

配置当前的用户名邮箱可以当前项目配置或者全局配置。

仅当前项目配置：

1 2	git config user.name 'your-user-name' git config user.email 'your-user-email'

全局配置：

1 2	git config --global user.name 'your-user-name' git config --global user.email 'your-user-email'

新建shell脚本 change-email-nam[……]

2023-08-08by SKILLNULL Git 阅读(8364)评论(0)

在vue中使用import()来代替require.ensure()实现代码打包分离

一、require.ensure() 方法来实现代码打包分离

require.ensure() 是 webpack 特有的，已经被 import() 取代。

1

2

3

4

5

6

require.ensure(

dependencies: String[],

callback: function(require),

errorCallback: function(error),

chunkName: String

)

给定 dependencies 参数，将其对应的文件拆分到一个单独[……]

2018-12-03by SKILLNULL Vue, Webpack 阅读(10055)评论(0)

2025年十二月
一	二	三	四	五	六	日
« 11月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31