JavaScript - Page 4 of 7

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

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

41

42

43

44

/**

* 深度比较两个对象是否相等

* @type {{compare: compareObj.compare, isObject: (function(*=): boolean), isArray: (function(*=): boolean)}}

*/

var compareObj = {

// 比较两个对象是否相等

compare: function (oldData, newData) {

// 类型为基本类型时,如果相同,则返回true

if (oldData === newData) return true

if (compareObj.isObject(oldData) && compareObj.isObject(newData) && Object.keys(oldData).length === Object.keys(newData).length) {

// 类型为对象并且元素个数相同

// 遍历所有对象中所有属性,判断元素是否相同

for (const key in oldData) {

if (oldData.hasOwnProperty(key)) {

if (!compareObj.compare(oldData[key], newData[key])) {

// 对象中具有不相同属性返回false

return false

}

} else if (compareObj.isArray(oldData) && compareObj.isArray(oldData) && oldData.length === newData.length) {

// 类型为数组并且数组长度相同

for (let i = 0, length = oldData.length; i < length; i++) {

if (!compareObj.compare(oldData[i], newData[i])) {

// 如果数组元素中具有不相同元素,返回false

return false

}

} else {

// 其它类型,均返回false

return false

}

// 走到这里,说明数组或者对象中所有元素都相同,返回true

return true

},

// 判断此类型是否是Array类型

isObject: function (obj) {

return Object.prototype.toString.call(obj) === '[object Object]'

},

// 判断此对象是否是Object类型

isArray: function (arr) {

return Object.prototype.toString.call(arr) === '[object Array]'

}

2019-08-30by SKILLNULL JavaScript 阅读(4699)评论(0)

前端错误监控上报公共方法，可在父页面及iframe子页面同时使用

先创建公共文件error-reported.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

41

42

43

44

45

46

/**

* 获取前端错误信息进行上报

* @param iframe

*/

export function catchError (iframe) {

let _this = this || window

let source = '来自外层框架错误信息：'

if (iframe) {

_this = iframe.contentWindow

source = '来自iframe内部错误信息：'

}

_this?.addEventListener('error', function (event) {

let errorMessage = event && event.message

let errrorType = event && event.type

let errorStack = event && event.error && event.error.stack

let errorLineno = event && event.lineno

let errorColno = event && event.colno

let errorHref = event && event.target && event.target.location && event.target.location.href

let errorPathname = event && event.target && event.target.location && event.target.location.pathname

let errorParams = event && event.target && event.target.location && event.target.location.search

let errorOrigin = event && event.target && event.target.location && event.target.location.origin

let errorSrcElement = event && event.srcElement && event.srcElement.src

// 可忽略错误，不会在控制台打印，不会中断程序

if (errorMessage === 'ResizeObserver loop limit exceeded') return

let errorInfo = {

source: source, // 报错来源，来自iframe内还是外层

errorMessage: errorMessage || '', // 报错信息，对应message

errrorType: errrorType || '', // 报错类型，对应type

errorStack: errorStack || '', // 报错定位信息，对应error->stack

errorLineno: errorLineno || '', // 报错行号，对应lineno

errorColno: errorColno || '', // 报错列号，对应colno

errorHref: errorHref || '', // 报错完整页面url，对应target->location->href

errorPathname: errorPathname || '', // 报错路径，对应target->location->pathname

errorParams: errorParams || '', // 报错路径参数，对应target->location->search

errorOrigin: errorOrigin || '', // 报错域，对应target->location->origin

errorSrcElement: errorSrcElement || '', // 资源加载错误，对应target->srcElement->src

}

const info = window.JSON.stringify(errorInfo);

(new Image()).src = `/api/error/report?data=${info}`;

}, true)

}

然后在入口文件最前面引入error-reported.js

本文项目背景：使用art-template模板引擎建立了公共框架，使用iframe进行页面套用。所以整[……]

2022-03-28by SKILLNULL JavaScript 阅读(4111)评论(0)

JS合并两个函数

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

/**

* 合并两个函数

* @param functionA 先执行

* @param functionB 执行完 functionA 后返回

* @returns {*}

*/

function mergeFunction (functionA, functionB) {

if (!functionA || !functionB) return

var merge = functionB

functionB = (function () {

merge.call(this)

functionA.call(this)

})()

return functionB = merge

}

2019-07-09by SKILLNULL JavaScript, 前端阅读(5275)评论(0)

bootstrap-table使用stickyHeader固定表头时，表头不跟随表体水平滚动问题解决

解决方法：

1

2

3

4

5

6

7

8

onAll: function () {

// 修复stickyHeader表头不跟随表体水平滚动的问题

if (params.stickyHeader) {

var fixedTableBody = $(target).parents('div.fixed-table-body').on('scroll', function () {

$(fixedTableBody).find('.sticky-header-container.fix-sticky.fixed-table-container').css('transform', 'translateX(-' + this.scrollLeft + 'px)')

})

}

2019-07-08by SKILLNULL JavaScript 阅读(4788)评论(0)

二次封装bootstrap-table及功能优化

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

/**

* 设置bootstrat-table

* @param params

*/

function setBootstrapTable (target, params) {

// 默认设置表格内容居中

params.columns && params.columns.forEach(function (item) {

if (!item.align) {

item.align = 'center'

}

})

// 默认表格配置

var defaultParams = {

data: params.data || '', // 默认数据为空

showColumns: params.showColumns ? params.showColumns : false, // 默认关闭可隐藏列

search: params.search ? params.search : false, // 默认关闭搜索

searchAlign: params.searchAlign ? params.searchAlign : 'left', // 默认搜索框靠左

searchOnEnterKey: params.searchOnEnterKey ? params.searchOnEnterKey : false, // 默认关闭回车搜索

searchText: params.searchText ? params.searchText : '', // 搜索框默认填充内容，默认为空

showToggle: params.showToggle ? params.showToggle : false, // 默认关闭切换展示方式按钮

showExport: params.showExport ? params.showExport : false, // 是否打开下载，默认关闭

exportDataType: params.exportDataType ? params.exportDataType : 'all', // 下载范围 support: ‘basic’, ‘all’, ‘selected’. 默认all

exportTypes: params.exportTypes ? params.exportTypes : ['csv','excel'], // 下载类型， support types: ‘json’, ‘xml’, ‘png’, ‘csv’, ‘txt’, ‘sql’, ‘doc’, ‘excel’, ‘xlsx’. 默认 ['csv','excel']

formatSearch: function () { // 搜索框默认提示

return params.formatSearch ? params.formatSearch : '在当前表格中搜索'

},

formatNoMatches: function () { // 默认无数据展示内容

return params.formatNoMatches || '暂无数据'

},

formatLoadingMessage: function () { // 默认loading内容

return params.formatLoadingMessage || '努力加载中...'

},

formatColumns: function () { // 隐藏或显示列按钮的title, 默认为'显示或隐藏列'

return params.formatColumns ? params.formatColumns : '显示或隐藏列'

},

columns: params.columns || [] // 默认表头内容为空

}

// 将params中在默认表格配置中没有的属性，添加到默认表格配置中

for (var key in params) {

if (!defaultParams.hasOwnProperty(key)) {

defaultParams[key] = params[key]

}

if (params.fixedHeader) {

var clientHeight = $(target)[0].offsetParent.clientHeight

var offsetTop = $(target)[0].offsetTop

var tableHeight = clientHeight - offsetTop

defaultParams.height = tableHeight

}

// bootstrap-table表格渲染方法调用

$(target).bootstrapTable(defaultParams)

}

README.md

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

#### 表格组件，基于bootstrap-table

---

##### 使用方法

> html部分

```html

<tbody>

<tr>

</tr>

</tbody>

</table>

```

> javascript部分

```javascript

setBootstrapTable('#your_table_id', {

data: data, // 表格数据，若是动态渲染的数据，则为必填项

formatNoMatches: '没有数据', // 配置没有数据显示的文字，默认为'暂无数据'

formatLoadingMessage: 'loading...', // 配置loading文字，默认为'努力加载中...'

height: 500, // 设置表格高度从而来固定表头

fixedHeader: true, // 自动计算表格在当前视图中，去除上方元素后可用的高度，开启这个配置则覆盖默认的height属性

search: false, // 搜索，默认关闭

searchAlign: 'left', // 默认搜索框靠左

searchOnEnterKey: false, // 默认关闭回车搜索

searchText: '', // 搜索框默认填充内容，默认为空

showColumns: false, // 默认关闭可隐藏列

showToggle: true, // 默认关闭切换展示方式按钮

showExport: false, // 是否打开下载，默认关闭

exportDataType: 'all', // 下载范围 support: ‘basic’, ‘all’, ‘selected’. 默认all

exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'], // 下载类型， support types: ‘json’, ‘xml’, ‘png’, ‘csv’, ‘txt’, ‘sql’, ‘doc’, ‘excel’, ‘xlsx’. 默认 ['csv', 'excel']

formatColumns: '显示或隐藏列',// 隐藏或显示列按钮的title, 默认为'显示或隐藏列'

formatSearch: '在当前表格中搜索', // 搜索框内容，默认为'在当前表格中搜索'

onAll: function (name, args) { // 所有事件触发

// name: 触发的事件名称

// args: 触发事件的数据

},

columns: [ // 在这里进行表头设置

{

title: '表头一',

width: '100%', // 自定义宽度

sortable: true, // 是否排序

align: 'left', // 'left','center','right' 默认居中

showColumns: true, // 是否开启可隐藏列，默认开启

formatter: function (data) { // 格式化数据

// 例如： return data + '%' 则为数据返回添加上%，

// 如果数据需要%但是又要排序，则在此设置排序后的格式

}

]

})

```

> 更多配置项请查看 [官方文档][https://bootstrap-table.com/docs/api/table-options/]

2019-04-27by SKILLNULL JavaScript 阅读(4370)评论(0)

简述this,call,apply,bind之间的关系

一、什么是this？

this是JavaScript语言的一个关键字，它是函数运行时在函数体内部自动生成的一个对象，只能在函数体内部使用。函数的不同使用场合，this的指向不同。

在ES5中，this永远指向最终调用它的对象。

例1：这里最终调用函数a的对象是全局window,相当[……]

2018-12-03by SKILLNULL JavaScript 阅读(5382)评论(0)

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

解决方法：

1

2

3

4

5

6

7

8

9

audio.load()

let playPromise = audio.play()

if (playPromise !== undefined) {

playPromise.then(() => {

audio.play()

}).catch(()=> {

})

}

原因：

从Chrome50开始，对<video>或<audio>元素的play()调用返回一个Promise。一个异步返回单个结果的函数。如果回放成功，Promise就会实现，而play[……]

2018-12-03by SKILLNULL JavaScript 阅读(3976)评论(0)

前端内存泄漏检查判断及处理

什么是内存泄露？

已经不再使用的内存未能被程序释放，叫内存泄露(memory leak)。

内存泄露会带来什么样的后果？

内存泄露会因为减少可用内存数量从而降低计算机性能，严重的可能导致设备停止正常工作，或者应用程序崩溃。

什么情况下出现内存泄漏？

首先了解一下垃圾回收[……]

2018-12-03by SKILLNULL JavaScript 阅读(8141)评论(0)

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

41

42

43

44

45

46

(function rotate(){

var orientation=window.orientation;

var pd = null;

function createPd(){

if(document.getElementById('preventTran') === null){

var imgData = 'data:image/png;base64,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';

pd = document.createElement('div');

pd.setAttribute('id','preventTran');

pd.style.position = 'fixed';

pd.style.left = '0';

pd.style.top = '0';

pd.style.width = '100%';

pd.style.height = '100%';

pd.style.overflow = 'hidden';

pd.style.backgroundColor = '#2e2e2e';

pd.style.textAlign = 'center';

pd.style.zIndex = '99999';

document.getElementsByTagName('body')[0].appendChild(pd);

var img = document.createElement('img');

img.src = imgData;

pd.appendChild(img);

img.style.margin = '60px auto 30px'

var br = document.createElement('br');

var p = document.createElement('p');

p.style.width = '100%';

p.style.height = 'auto';

p.style.fontSize = '22px';

p.style.color = '#626262';

p.style.lineHeight = '34px';

p.style.textAlign = 'center';

p.innerHTML = '为了您的良好体验';

p.appendChild(br);

p.innerHTML += '请将手机/平板竖屏操作';

pd.appendChild(p);

}

if(orientation==90||orientation==-90){

if(pd == null && document.getElementById('preventTran') === null) createPd();

document.getElementById('preventTran').style.display = 'block';

}

window.onorientationchange=function(){

if(pd == null && document.getElementById('preventTran') == null) createPd();

document.getElementById('preventTran').style.display='none';

rotate();

};

})();

2018-05-25by SKILLNULL JavaScript 阅读(6422)评论(0)

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