这个别名机制类似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 { 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>
具体用法看我的文档(已放出)