动态添加css文件
应用场景:
- 1.换肤功能
- 2.一套代码不同地区使用,不同地区不同风格
- 3.一套代码不同用户使用,用户个性化设置功能
那么如何动态添加不同的css文件呢?
/**
* @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`)
//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
/**
* @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()
}
}
使用:
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 监听
//监听 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
)
监听:
//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身上存在的方法
function trigger(Node,EventType) {
if(EventType in Node)node[EventType]()
}
主动触发自定义方法
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')
「两年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - 前端开发中实用工具函数