<script type="text/javascript">
//<![CDATA[
  function jsclass () {};

  jsclass.prototype = (function() {

    var static_p = 'http://www.never-online.net';
    var static_n = 0;

    return {

      show: function() {
        alert(static_p);
        alert(static_n);
      },

      update: function(val) {
        static_p = val;
        static_n++;
      }

    }
  })();

  var foo = new jsclass();
  foo.show();//output http://www.never-online.net and 0

  var bar = new jsclass();
  bar.update('static?');
  bar.show();//output static? and 1

  foo.show();//output static? and 1
//]]>
</script>

function anyNamespace.ui.Menu = (){}
function anyNamespace.ui.Menu.prototype = (function () {
 var Event = anyNamespace.util.Event;
 return {
 //code here
 }
})();

<script type="text/javascript">
//<![CDATA[
  var obj = (function () {
    var p = 'http://www.never-online.net';
    return {
      show: function() {
        alert(p);
      }
    }
  })();

  obj.show(); //http://www.never-online.net
  alert(obj.p); //undefined;
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
  var obj = (function () {
    var p = 'http://www.never-online.net';
    return {
      show: function() {
        alert(p);
      }
    }
  })();

  obj.show(); //http://www.never-online.net
  eval('p="eval you"', obj.show);
  obj.show(); //eval you
//]]>
</script>

function DragDropElement(source, handle, active) {
  if (!source) throw new Error('Invalid source!');
  this.source = source;
  this.handle = handle||source;
  this.active = active||source;
  return this;
}

var DragDropManager = {
  dragCurrent: null,//可以是简单拖放(Base DD)，代理拖放(Proxy DD)，slider(滑动条），resizer(拖动大小)，DD selector(拖放选择器，如像window拖动鼠标选择文件/夹)等等的实例
  onmousedown: function() {},
  onmousemove: function() {},
  onmouseup : function() {}
}

毫无疑问，我们可以使用observe模式来实现我们的自定义事件机制。关于实现实现observe模式，并非本文范围，感兴趣的朋友可以参阅相关资料。[code]var DragDropManager = {
  Event: CustomEvent,
  dragCurrent: null,
  onmousedown: function() {
    Event.dispatchEvent(dragCurrent, 'onDragStart');
  },
  onmousemove: function() {
    Event.dispatchEvent(dragCurrent, 'onDrag');
  },
  onmouseup : function() {
    Event.dispatchEvent(dragCurrent, 'onDragEnd');
  }
}

function DragDropElement(source, handle, active, sGroup) {
  if (!source) throw new Error('Invalid source!');
  this.source = source;
  this.handle = handle||source;
  this.active = active||source;
  this.sGroup = sGroup;
  return this;
}
function DragDropTarget(target, sGroup) {
  this.target = target;
  this.sGroup = sGroup;
  return this;
}
var DragDropManager = {
  Event: CustomEvent,
  dragCurrent: null,
  onmousedown: function() {
    Event.dispatchEvent(dragCurrent, 'onDragStart');
  },
  onmousemove: function() {
    Event.dispatchEvent(dragCurrent, 'onDrag');
    Event.dispatchEvent(dragCurrent, 'onDragEnter');
    Event.dispatchEvent(dragCurrent, 'onDragOver');
    Event.dispatchEvent(dragCurrent, 'onDragLeave');
  },
  onmouseup : function() {
    Event.dispatchEvent(dragCurrent, 'onDragEnd');
  },
  cacheLocation: function() {
  }
}

<textarea id="code" style="width:500px;height:300px;">
function Profile (){};
Profile.prototype = {
  _name: 'never-online',
  _url: 'http://www.never-online.net',
  get name() {
    return this._name;
  },
  set name(val) {
    this._name = val;
  }
}
var demo = new Profile();
alert(demo.name);
demo.name = 'BlueDestiny';
alert(demo.name);
</textarea>
<script>
//<![CDATA[
alert('alert');
var cd = document.getElementById('code');
if(/webkit/i.test(window.navigator.userAgent))
eval(cd.value);
else
alert('pls use safari browser or use based webkit browser! 请用safari打开此页面,否则看不到效果');
//]]>
</script>
<script type="application/javascript;version=1.7">
//<![CDATA[
eval(document.getElementById('code').value);
//]]>
</script>

<div tabindex="1" id="div">click here. try get focus</div>
<script>
var div = document.getElementById('div');
div.onfocus = function(){
document.write('you get focus');
}
</script>

<div id="demo" style="border:5px solid #000;left:500px;top:100px;position:absolute;width:300px;height:100px;padding:30px;background:#FFF046;font-family:Trebuchet MS;">webkitTransition of safari</div>
<script type="text/javascript">
//<![CDATA[
if(!/webkit/i.test(window.navigator.userAgent)) alert('请用safari打开本页面,或者用基于webkit的浏览器再重试');
else alert('点击任意的地方可看到效果');
document.onclick = function(event)
{
var d = document.getElementById('demo');
event = window.event || event;
var duration = 2;
d.style.webkitTransition = '-webkit-transform ' + duration + 's ease-in, opacity ' + duration + 's ease-in';
d.offsetTop; // Force style recalc
d.style.webkitTransformOrigin = "0 0";
d.style.webkitTransform = 'skew(30deg, 0deg) scale(0)';
d.style.opacity = '0';
}
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/
html,body {height:100%;width:100%;overflow:auto;}
#demo {position:absolute;width:350px;height:300px;padding:10px;border:5px solid #eee;}
/*]]>*/
</style>
</head>
<body>
<div id="demo">
<textarea cols="30" rows=""></textarea><br/><br/>
<input type="text" size="30"><br/><br/>
<input type="text" size="30"><br/><br/>
</div>

<script>
var d = document.createElement('div');
var s = d.style;
s.position = 'absolute';
s.border = '1px solid #000';
s.background = '#eee';
d.innerHTML = '<input/>'
document.body.appendChild(d);
s.display = 'none';
setTimeout(function(){
  s.overflow = 'auto';
  s.display = 'block';
},0)
</script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Rank's HTML document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <meta http-equiv="Pragma" content="no-cache" />
 <meta http-equiv="Cache-Control" content="no-cache" />
 <meta http-equiv="Expires" content="0" />
 <meta http-equiv="ImageToolbar" content="no" />
 <style type="text/css" title="default" media="screen">
 /*<![CDATA[*/
      .opacity { filter:alpha(opacity=20);opacity:0.2;background:#333;height:20px; }
      .opacity-invalid { filter:alpha(opacity=20);opacity:0.2;background:#333; }
 /*]]>*/
 </style>
 </head>
 <body>
    <div class="opacity"><a href="http://www.never-online.net">never-online</a></div>
    <div class="opacity-invalid"><a href="http://www.never-online.net">never-online</a></div>
 </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Rank's HTML document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <meta http-equiv="Pragma" content="no-cache" />
 <meta http-equiv="Cache-Control" content="no-cache" />
 <meta http-equiv="Expires" content="0" />
 <meta http-equiv="ImageToolbar" content="no" />
 <style type="text/css" title="default" media="screen">
 /*<![CDATA[*/
      body { margin:0;font:13px/1;font-family:Arial; }
      .panel { position:absolute;left:300px;top:100px;background:#eee;width:500px;height:300px;border:10px solid #555;padding:10; }
      .panel .header { background:#555;color:#fff; }
      .panel .header h3 { padding:10px;margin:0; }
      .panel .inner { padding:10px; }
      .panel .close { position:absolute;right:10px;top:10px;border:1px solid #fff;width:20px;height:20px;text-align:center;color:#fff;cursor:default; }
      .mask { filter:alpha(opacity:60);opacity:0.6;background:#333; }
      .proxy { position:absolute;background:#333;filter:alpha(opacity:60);opacity:0.6;display:none;z-index:999; }
 /*]]>*/
 </style>
 </head>
 <body>
    <div class="panel" id="panel">
      <div class="header"><h3>header here</h3></div>
      <div class="inner">inner contents, <a href="http://www.never-online.net/blog">this is a link</a></div>
      <span class="close">X</span>
    </div>
    <iframe style="width:100%;height:900px"></iframe>
    <div id='proxy' class="proxy"></div>

   <script type="text/javascript">
   //<![CDATA[
        var $ = function(id) {
          return typeof(id)=='string'?
          document.getElementById(id):id;
        }
        var panel = $('panel');
        var proxy = $('proxy');

        panel.onmousedown = function(e) {
          e = window.event || e;
          panel.deltaX = e.clientX - panel.offsetLeft;
          panel.deltaY = e.clientY - panel.offsetTop;

          with (proxy.style) {
            display = 'block';
            left = panel.offsetLeft +'px';
            top  = panel.offsetTop +'px';
            width = panel.offsetWidth +'px';
            height = panel.offsetHeight +'px';
          }

          document.onmousemove = function (e) {
            e = window.event || e;
            with (proxy.style) {
              left = e.clientX - panel.deltaX +'px';
              top = e.clientY - panel.deltaY +'px';
            }
          }
          document.onmouseup = function(e) {
            with (panel.style) {
              display = 'block';
              left = proxy.offsetLeft +'px';
              top = proxy.offsetTop +'px';
            }
            proxy.style.display = 'none';
            document.onmousemove = null;
          }
        }
   //]]>
   </script>
 </body>
</html>