RequireJS入门（三）

最新推荐文章于 2020-08-07 15:57:53 发布

dakang

最新推荐文章于 2020-08-07 15:57:53 发布

阅读量585

点赞数

分类专栏：页面前端 Require.js

页面前端同时被 2 个专栏收录

205 篇文章 0 订阅

订阅专栏

Require.js

11 篇文章 0 订阅

订阅专栏

这篇来写一个具有依赖的事件模块event。event提供三个方法bind、unbind、trigger来管理DOM元素事件。

event依赖于cache模块，cache模块类似于jQuery的$.data方法。提供了set、get、remove等方法用来管理存放在DOM元素上的数据。

示例实现功能：为页面上所有的段落P元素添加一个点击事件，响应函数会弹出P元素的innerHTML。

创建的目录如下

为了获取元素，用到了上一篇写的selector.js。不在贴其代码。

index.html 如下

 
        <!doctype html> 
       
        <html> 
       
        <head> 
       
        <title>requirejs入门（三）</title> 
       
        <meta charset= 
        "utf-8" 
        > 
       
        <style type= 
        "text/css" 
        > 
       
        p { 
       
        width: 200px; 
       
        background: gray; 
       
        } 
       
        </style> 
       
        </head> 
       
        <body> 
       
        <p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p> 
       
        <script data-main= 
        "js/main"  
        src= 
        "require.js" 
        ></script> 
       
        </body> 
       
        </html>

cache.js 如下

 
        define( 
        function 
        () { 
       
        var  
        idSeed = 0, 
       
        cache = {}, 
       
        id =  
        '_ guid _' 
        ; 
       
        // @private 
       
        function  
        guid(el) { 
       
        return  
        el[id] || (el[id] = ++idSeed); 
       
        } 
       
        return  
        { 
       
        set:  
        function 
        (el, key, val) { 
       
        if  
        (!el) { 
       
        throw  
        new  
        Error( 
        'setting failed, invalid element' 
        ); 
       
        } 
       
        var  
        id = guid(el), 
       
        c = cache[id] || (cache[id] = {}); 
       
        if  
        (key) c[key] = val; 
       
        return  
        c; 
       
        }, 
       
        // 略去... 
       
        }; 
       
        });

cache模块的写法没啥特殊的，与selector不同的是返回的是一个JS对象。

event.js 如下

 
        define([ 
        'cache' 
        ],  
        function 
        (cache) { 
       
        var  
        doc = window.document, 
       
        w3c = !!doc.addEventListener, 
       
        expando =  
        'snandy'  
        + ( 
        '' 
        +Math.random()).replace(/\D/g,  
        '' 
        ), 
       
        triggered, 
       
        addListener = w3c ? 
       
        function 
        (el, type, fn) { el.addEventListener(type, fn,  
        false 
        ); } : 
       
        function 
        (el, type, fn) { el.attachEvent( 
        'on'  
        + type, fn); }, 
       
        removeListener = w3c ? 
       
        function 
        (el, type, fn) { el.removeEventListener(type, fn,  
        false 
        ); } : 
       
        function 
        (el, type, fn) { el.detachEvent( 
        'on'  
        + type, fn); }; 
       
        // 略去... 
       
        return  
        { 
       
        bind : bind, 
       
        unbind : unbind, 
       
        trigger : trigger 
       
        }; 
       
        });

event依赖于cache，定义时第一个参数数组中放入“cache”即可。第二个参数是为函数类型，它的参数就是cache模块对象。
这样定义后，当require事件模块时，requirejs会自动将event依赖的cache.js也下载下来。

main.js 如下

 
        require.config({ 
       
        baseUrl:  
        'js' 
       
        }); 
       
        require([ 
        'selector' 
        ,  
        'event' 
        ],  
        function 
        ($, E) { 
       
        var  
        els = $( 
        'p' 
        ); 
       
        for  
        ( 
        var  
        i=0; i<els.length; i++) { 
       
        E.bind(els[i],  
        'click' 
        ,  
        function 
        () { 
       
        alert( 
        this 
        .innerHTML); 
       
        }); 
       
        } 
       
        });