关注前端 | 前端博客
当前位置: JavaScript > 前端开发中实用工具函数

前端开发中实用工具函数

2020-04-12 分类:JavaScript 作者:管理员 阅读(134)

动态添加css文件

应用场景:

  1. 1.换肤功能
  2. 2.一套代码不同地区使用,不同地区不同风格
  3. 3.一套代码不同用户使用,用户个性化设置功能
  4. 那么如何动态添加不同的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) 打赏

    感谢您让我添加个鸡腿!

    支付宝
    微信
    1

    感谢您让我添加个鸡腿!

    支付宝
    微信
标签:

上一篇:

下一篇:

共有 0 条评论 - 前端开发中实用工具函数

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线