這個別名機制類似jQuery的noConflict。jQuery所佔用的全域變數有兩個:jQuery與$。你也可以說它們是其命名空間，整個架構就以樹狀式“單足獨立”地建立於其上。但是由於我的東西是架構，換言之存在許多檔案（如果你沒有把它整合到一個檔案的話），除了核心模組外，其他模組通過"require"方法動態載入到這個樹狀結構的命名空間上。可是，如果我把它的命名空間佔用了，那些其他模組並不能非常智能地找到新的命名空間，因此我們需要一個永久性命名空間，如Ext的Ext。但這些簡單的名字有很大機率被人佔用的，因此，這名字應該足夠長，足夠複雜，非常沒有意思，只能通過程式產生。因此我的架構搞了兩個命名空間，一個是"dom"，另一個是 escape(document.URL.split("#")[0])。對於這樣單頁面的application，它的命名空間便可以隨頁面而改變了。"#"是防止使用錨點導致document.URL發生改變的。
下面就是一個小小的實驗：
<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <title>別名機制 by 司徒正美 </title> <style type="text/css"> #box { width:200px; height:200px; border:1px solid black; position:absolute; left:20ex; top:100px; background-color:#EEE8AA; } </style> <link rel="kinetic-stylesheet" type="text/css" href="demo.kss" /> <script type="text/javascript"> var dom = {name:"別人的架構"};//一樣使用dom做命名空間 //================我的庫================= (function(window,undefined){ var dom = { name:"我的庫" }, _dom = window.dom//把別人的架構儲存到一個臨時變數中 //永久性命名空間，如果這個名字被其他架構佔用就沒救了 //永久性命名空間是用於模組載入時，讓新模組找到當前類架構的 var namespace = escape(document.URL.split("#")[0]); dom.alias = function(newName) { //如果不指定新名，則隨機產生一個，換言之，則進入忍者模式，需要用一個變數來接受它 newName = newName || "dom"+Math.random(); window.dom = _dom; return window[namespace] = window[newName] = dom; } window[namespace] = window.dom = dom; })(window); window.onload = function(){ var a = dom.alias("$$"); alert(a.name); alert(window.dom.name)//讓與別人 alert($$.name)//測試新的命名空間 alert(window[escape(document.URL.split("#")[0])].name)//測試永久性命名空間 } </script> </head> <body> <div id="box"></div> </body></html>
<br /><!doctype html><br /><html lang="en"><br /> <head><br /> <meta charset="utf-8" /><br /> <meta content="IE=8" http-equiv="X-UA-Compatible"/><br /> <title>別名機制 by 司徒正美 </title><br /> <style type="text/css"></p><p> #box {<br /> width:200px;<br /> height:200px;<br /> border:1px solid black;<br /> position:absolute;<br /> left:20ex;<br /> top:100px;<br /> background-color:#EEE8AA;<br /> }<br /> </style><br /> <link rel="kinetic-stylesheet" type="text/css" href="demo.kss" /></p><p> <script type="text/javascript"><br /> var dom = {name:"別人的架構"};//一樣使用dom做命名空間<br /> //================我的庫=================<br /> (function(window,undefined){<br /> var dom = {<br /> name:"我的庫"<br /> },<br /> _dom = window.dom//把別人的架構儲存到一個臨時變數中<br /> //永久性命名空間，如果這個名字被其他架構佔用就沒救了<br /> //永久性命名空間是用於模組載入時，讓新模組找到當前類架構的<br /> var namespace = escape(document.URL.split("#")[0]);<br /> dom.alias = function(newName) {<br /> //如果不指定新名，則隨機產生一個，換言之，則進入忍者模式，需要用一個變數來接受它<br /> newName = newName || "dom"+Math.random();<br /> window.dom = _dom;<br /> return window[namespace] = window[newName] = dom;<br /> }<br /> window[namespace] = window.dom = dom;<br /> })(window);</p><p> window.onload = function(){<br /> var a = dom.alias("$$");<br /> alert(a.name);<br /> alert(window.dom.name)//讓與別人<br /> alert($$.name)//測試新的命名空間<br /> alert(window[escape(document.URL.split("#")[0])].name)//測試永久性命名空間<br /> }</p><p> </script><br /> </head><br /> <body></p><p> <div id="box"></div></p><p> </body><br /></html><br />
運行代碼
具體用法看我的文件(已放出)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
