SKILLNULL, Author at SKILL.NULL

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 阅读(4709)评论(0)

iframe在ios上不能滚动问题解决方法

同这篇文章一样，用到了-webkit-overflow-scrolling: touch;属性。主要解决方案是在iframe外层添加一个div，然后设置-webkit-overflow-scrolling属性。

例如：

1

2

3

</div>

[c[……]

2019-08-20by SKILLNULL Browser Compatibility, HTML&CSS 阅读(13272)评论(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 阅读(4121)评论(0)

python3.7爬取墨菲定律保存在本地txt

书本内容来自书海阁《墨菲定律》

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

#!/usr/local/bin/python3.7

# -*- coding: utf-8 -*-

# @Time: 2019/07/15

# @Function 获取在线文本内容

import requests

from bs4 import BeautifulSoup

import re

import codecs

url = 'https://www.shuhaige.com/7518/'

header = {

'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36',

'Origin': 'https://www.shuhaige.com',

'Host': 'www.shuhaige.com'

}

# 设置代理服务器

proxies = {

'http:': 'http://121.232.146.184',

'https:': 'https://144.255.48.197'

}

def getContent():

contents = requests.get(url, headers=header).text

html = BeautifulSoup(contents, 'html.parser')

lists = html.select('dl')[0].select('a')

for list in lists:

itemUrl = f'https://www.shuhaige.com{list["href"]}'

itemContent = requests.get(itemUrl, headers=header).text

itemHtml = BeautifulSoup(itemContent, 'html.parser')

saveToTxt(itemHtml.select('div .content')[0], list.string)

# 写入文本文件

def saveToTxt(comments, title):

commentsList = ''

for item in comments:

comment_info = f'{item}'.replace(f'<br/>', '')

comment_info = re.sub(f'<p>.*</p>', '', comment_info)

commentsList += comment_info

with codecs.open(f'MoFeiDingLv/{title}.txt', 'w', encoding='utf-8') as file:

file.writelines(commentsList)

print(f'{title}写入文件成功!')

getContent()

2019-07-16by SKILLNULL Python 阅读(4595)评论(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, 前端阅读(5286)评论(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 阅读(4794)评论(0)

transform中translate导致页面模糊的原因探究

可以看出导致页面模糊的原因是因为，mian设置了overflow:hidden; 同时second-verify-box设置了transform属性。

但是同样拥有同样设置的login-wrap却没有出现这个问题，暂时将这个现象记录下来。

如果有人知道具体原因的，可以评论告知[……]

2019-07-04by SKILLNULL Browser Compatibility 阅读(4778)评论(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 阅读(4378)评论(0)

Mac去除select圆角

1

2

3

4

5

6

7

.border-radius-0 {

border-radius: 0;

-webkit-border-radius: 0;

-moz-border-radius: 0;

-khtml-border-radius: 0;

-webkit-appearance: button;

}

2019-04-26by SKILLNULL HTML&CSS 阅读(4572)评论(0)

移动端滚动不流畅问题

正常的移动端上下滑动，松开手指页面还会速度递减的再滑动一段距离，但是有时候会出现手指松开滑动就停止的情况，导致页面出现卡顿的现象。

出现的原因大多数是因为加了：

1	overflow: auto;

可以在添加了overflow: auto;的元素上再添加下面的[……]

2019-01-15by SKILLNULL Browser Compatibility 阅读(5829)评论(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