RequireJS入門（三） RequireJS入門（三）

時間 2019-12-14

標籤 requirejs 入門欄目 JavaScript 简体版

原文原文鏈接

RequireJS入門（三）

這篇來寫一個具備依賴的事件模塊event。event提供三個方法bind、unbind、trigger來管理DOM元素事件。javascript

event依賴於cache模塊，cache模塊相似於jQuery的$.data方法。提供了set、get、remove等方法用來管理存放在DOM元素上的數據。css

示例實現功能：爲頁面上全部的段落P元素添加一個點擊事件，響應函數會彈出P元素的innerHTML。html

建立的目錄以下java

爲了獲取元素，用到了上一篇寫的selector.js。不在貼其代碼。web

index.html 以下apache

 
          <!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也下載下來。dom

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); 
         
          }); 
         
          } 
         
          });