前端 - Page 5 of 12

前端批量打包下载图片

先引用jquery、jszip、FileSaver，然后封装下载方法：

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

一、引用

二、方法封装

var FunLib = {

// 图片打包下载

download: function (images) {

FunLib.packageImages(images)

},

// 打包压缩图片

packageImages: function (imgs) {

var imgBase64 = []

var imageSuffix = [] // 图片后缀

var zip = new JSZip()

var img = zip.folder("images")

for (var i = 0; i < imgs.length; i++) {

var src = imgs[i].url

var suffix = src.substring(src.lastIndexOf("."))

imageSuffix.push(suffix)

FunLib.getBase64(imgs[i].url).then(function (base64) {

imgBase64.push(base64.substring(22))

if (imgs.length === imgBase64.length) {

for (var i = 0; i < imgs.length; i++) {

img.file(imgs[i].name + imageSuffix[i], imgBase64[i], {base64: true})

}

zip.generateAsync({type: "blob"}).then(function (content) {

saveAs(content, "images.zip")

})

}

}, function (err) {

console.log(err)

})

}

},

// 传入图片路径，返回base64

getBase64: function (img) {

var image = new Image()

image.crossOrigin = 'Anonymous'

image.src = img

var deferred = $.Deferred()

if (img) {

image.onload = function () {

var canvas = document.createElement("canvas")

canvas.width = image.width

canvas.height = image.height

var ctx = canvas.getContext("2d")

ctx.drawImage(image, 0, 0, canvas.width, canvas.height)

var dataURL = canvas.toDataURL()

deferred.resolve(dataURL)

}

return deferred.promise()

}

三、方法调用

FunLib.download([{url:'imageUrl1',name:'图片1'},{url:'imageUrl2',name:'图片2'})]

2019-09-18by SKILLNULL JavaScript 阅读(4661)评论(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, 设计模式阅读(4436)评论(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, 设计模式阅读(3522)评论(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 阅读(4858)评论(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 阅读(13751)评论(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 阅读(4271)评论(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, 前端阅读(5499)评论(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 阅读(4931)评论(0)

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

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

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

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

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

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