前端开发中实用工具函数

2020-04-12 分类：JavaScript 作者：管理员阅读（1170）

动态添加css文件

应用场景：

1.换肤功能
2.一套代码不同地区使用，不同地区不同风格
3.一套代码不同用户使用，用户个性化设置功能

那么如何动态添加不同的css文件呢？

1
2
3
4
5
6
7
8
9
10
11
12

/**
* @param {String} cssName : css 名称不带后缀
* @param {String} prefix ：css 前缀
*/
function dynamicAddCss(cssName,prefix=""){
let link = document.createElement('link')
link.setAttribute('href',prefix+cssName+'.css')
link.setAttribute('type','text/css')
document.getElementsByTagName('head')[0].appendChild(link)
}
dynamicAddCss('a','http://www.baidu.com/app/a/')
dynamicAddCss('b','http://www.baidu.com/app/b/')

动态添加 js文件

有时候，我们前端开发中，有些数据文件是存到我们的服务器上，需要我们去获取这个数据再去做一些操作，比如 banner 配置数据，或是一些其他数据。

服务器上存放的 `banner.js` （`http://moxiaofei.com/banner.js`）

1
2
3
4
5
6
7
8
9

//http://moxiaofei.com/banner.js
const Config = {
banner:[
{img:'www.baidu.com/1.png',id:"1"},
{img:'www.baidu.com/2.png',id:"2"},
{img:'www.baidu.com/3.png',id:"3"},
{img:'www.baidu.com/4.png',id:"4"},
]
}

http://moxiaofei.com/json.js

1	var list = [1,2,3,4,5]

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/**
* @param {Array} scriptUrlArr : 需求动态添加的脚本URL数组
* @param {Function} callback : 回调函数
*/
function dynamicAddScript(scriptUrlArr,callback){
scriptUrlArr.forEach(scriptUrl=>{
let script = document.createElement('script')
script.setAttribute('src',scriptUrl)
document.body.appendChild(script)
})
window.onload = function(){
callback && callback()
}
}

使用：

1
2
3
4

dynamicAddScript(['http://moxiaofei.com/banner.js','http://moxiaofei.com/json.js'],() =>{
console.log(Config) //{banner: Array(3)}
console.log(list) //[1, 2, 3, 4, 5]
})

localStorage 监听

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

//监听 setItemEvent
localStorage.setItem = (Orgin=>{
return function(key,value){
let setItemEvent = new CustomEvent('setItemEvent',{detail:{setKey:key,value}})
window.dispatchEvent(setItemEvent)
Orgin.call(this,key,typeof value == 'string'? value : JSON.stringify(value))
}
})(localStorage.setItem)

//监听 getItemEvent
localStorage.getItem = (Orgin=>{
return function(key){
let result = JSON.parse(Orgin.call(this,key))
let getItemEvent = new CustomEvent('getItemEvent',{detail:{getKey:key,value:result}})
window.dispatchEvent(getItemEvent)
return result
}
})(localStorage.getItem)

//监听 removeItemEvent
localStorage.removeItem = (Orgin=>{
return function(key){
let removeItemEvent = new CustomEvent('removeItemEvent',{detail:{removeKey:key}})
window.dispatchEvent(removeItemEvent)
Orgin.call(this,key)
}
})(localStorage.removeItem)

监听：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//localStorage.setItem监听
window.addEventListener('setItemEvent',function(e){
console.log(e.detail)
})

//localStorage.getItem监听
window.addEventListener('getItemEvent',function(e){
console.log(e.detail)
})

//localStorage.removeItem监听
window.addEventListener('removeItemEvent',function(e){
console.log(e.detail)
})

主动触发DOM身上存在的方法

1
2
3

function trigger(Node,EventType) {
if(EventType in Node)node[EventType]()
}

主动触发自定义方法

1
2
3
4
5
6
7
8
9
10

let oDiv = document.querySeletor('#div')
document.body.addEventListener('DefineMethod', function(){
alert('自定义方法生效了')
})
function fireEvent(node,type) {
var event = document.createEvent('Event');
event.initEvent(type, true, true);
node.dispatchEvent(event)
}
fireEvent(oDiv,'DefineMethod')

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(1) 打赏