其他 - Page 4 of 6

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, 设计模式阅读(2996)评论(0)

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

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

2018-12-19by SKILLNULL Vue, Webpack 阅读(6409)评论(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 阅读(6014)评论(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 阅读(7726)评论(0)

微信小程序将view动态填满全屏

一、在app.js利用官方方法获取设备信息，将获取到的screenHeight、windowHeight度量单位统一由rpx换算为px

注：官方文档给出【rpx换算px (屏幕宽度/750) 】【 px换算rpx (750/屏幕宽度)】

[crayon-6647064578c56[……]

2018-12-03by SKILLNULL 微信小程序阅读(7152)评论(0)

H5背景音乐自动播放(兼容微信IOS，进程后台切换自动停止播放，本文例子为Vue写法)

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

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

</div>

</template>

export default {

data() {

return {

playFlag: true,

playImg: require('../../static/play.png'),

pauseImg: require('../../static/pause.png'),

clickMusicBtn: false

}

},

mounted() {

this.audioAutoPlay('bgMusic');

document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q

if (this.clickMusicBtn) { // 点击了关闭音乐按钮

if (this.playFlag) {

this.audioAutoPlay('bgMusic');

this.playFlag = true;

} else {

this.audioPause('bgMusic');

this.playFlag = false;

}

text.innerHTML = e.hidden;

if (e.hidden) { // 网页被挂起

this.audioAutoPlay('bgMusic');

this.playFlag = true;

} else { // 网页被呼起

this.audioPause('bgMusic');

this.playFlag = false;

}

} else { // 未点击关闭音乐按钮

if (this.playFlag) {

this.audioPause('bgMusic');

this.playFlag = false;

} else {

this.audioAutoPlay('bgMusic');

this.playFlag = true;

}

text.innerHTML = e.hidden;

if (e.hidden) { // 网页被挂起

this.audioPause('bgMusic');

this.playFlag = false;

} else { // 网页被呼起

this.audioAutoPlay('bgMusic');

this.playFlag = true;

}

});

},

methods: {

bgMusicPlayOrPause(id) {

this.clickMusicBtn = !this.clickMusicBtn;

if (this.playFlag) {

this.audioPause(id);

this.playFlag = false;

} else {

this.audioAutoPlay(id);

this.playFlag = true;

}

},

audioPause(id) {

var audio = document.getElementById(id);

audio.pause();

document.addEventListener("WeixinJSBridgeReady", function () {

audio.pause();

}, false);

document.addEventListener('YixinJSBridgeReady', function () {

audio.pause();

}, false);

},

audioAutoPlay(id) {

var audio = document.getElementById(id);

audio.play();

document.addEventListener("WeixinJSBridgeReady", function () {

audio.play();

}, false);

document.addEventListener('YixinJSBridgeReady', function () {

audio.play();

}, false);

}

2018-12-03by SKILLNULL HTML&CSS, Vue, 微信阅读(7891)评论(0)

‘cross-env’ is not recognized as an internal or external command

webpack打包报错，原因是windows不支持 cross-env,安装模块即可:

npm install -g cross-env

2018-06-07by SKILLNULL Webpack 阅读(4580)评论(0)

IntelliJ IDEA 2021.3 (JetBrains WebStorm,JetBrains PyCharm等)激活破解

在使用前，请先移除之前试用过的其他任何激活补丁，包括不限于插件、Host配置、激活码等

本次介绍的最新的激活方法，原理是一个网络过滤器，可以把他理解为一个网络阻断器，阻断网络进行IDEA的校验，从而达到激活效果

下载ja-netfilter.rar

链接:[……]

2021-12-22by SKILLNULL 其他阅读(7360)评论(0)

git clone 出错 fatal: pack has bad object at offset 26060927: inflate returned -3

$ git clone http://xxx.xxx.cn/liyafei/developer.git
Cloning into ‘developer’…
remote: Counting objects: 10681, done.
remote: Compressing objects:[……]

2018-03-30by SKILLNULL Git 阅读(9165)评论(0)

Git分支操作

查看本地分支：git branch -t
合并本地两个分支：git merge branchOne branchTwo
切换分支：git checkout branchName

将本地指定分支推送到远程指定仓库指定分支： git push 远程仓库地址本地指定分支:远程指定分支[……]

2018-04-25by SKILLNULL Git 阅读(6780)评论(0)

2024年五月
一	二	三	四	五	六	日
« 4月
		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