该一些细节。完善了demo

binnng · binnng · commit d5b23d2c91ec · 2014-10-18T09:48:59.000+08:00
diff --git a/debug.coffee b/debug.coffee
@@ -48,7 +48,7 @@
   class Debug
 
     # 种类和颜色
-    colorMap = 
+    debugMap = 
       log: "0074cc"
       danger: "da4f49"
       warn: "faa732"
@@ -57,7 +57,7 @@
 
     # 将不同类型的msg转换为可读的String
     render = (msg) ->
-      text = []
+      text = ""
       arr = []
 
       if isArray msg
@@ -83,13 +83,18 @@
     # debug 容器底部预留的高度
     parentBottom = 6
 
+    publicCss = [
+      "-webkit-transition: all .3s ease"
+      "transition: all .3s ease"
+    ]
+
     # 每个debug信息样式
     childCss = [
       "margin-top:-1px"
       "padding:.5em"
       "border-top:1px solid rgba(255,255,255,.1)"
       "margin:0"
-    ]
+    ].concat publicCss
 
     # debug容器的样式
     parentCss = [
@@ -105,12 +110,10 @@
       "color:#fff"
       "width:100%"
       "padding-bottom:#{parentBottom}px"
-      "-webkit-transition: all .3s ease"
-      "transition: all .3s ease"
-    ]
+    ].concat publicCss
 
     constructor: -> 
-      # 是否初始化; 是否收起
+      # 是否初始化，是否收起
       @isInit = @isHide = no
 
       # 当前消息，当前执行函数，当前颜色
@@ -136,6 +139,7 @@
 
       @
 
+    # `debug.print()`
     # 核心的输出debug信息方法
     print: ->
 
@@ -149,6 +153,7 @@
 
       @
 
+    # `debug.toggle()`
     # 隐藏和收起
     toggle: (event) ->
       (if @isHide then @show else @hide).call @, event
@@ -166,12 +171,19 @@
       @
 
     # 添加所有debug方法
-    for fn of colorMap
+    # ```
+    # debug.log()
+    # debug.danger()
+    # debug.warn()
+    # debug.error()
+    # debug.success()
+    # ```
+    for fn of debugMap
       @::[fn] = ((fn) ->
         (msg) ->
           @fn = fn
           @msg = render msg
-          @color = colorMap[fn]
+          @color = debugMap[fn]
           @print()
       ) fn
 
@@ -180,7 +192,7 @@
 
   # 绑定window，捕捉js报错信息
   bind WIN, ERROR, (error) ->
-
+    # 只输出有用的错误信息
     msg = [
       "Error:"
       "filename: #{error.filename}"
diff --git a/debug.js b/debug.js
diff --git a/demo.html b/demo.html
@@ -7,13 +7,10 @@
 	<meta  name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
 </head>
 <body style="background: #eee">
+	<p onclick="debug.error('error')" style="margin-top: 200px">增加一个错误信息</p>
 	<script type="text/javascript">
 		debug.success("This is success message:)");
-		debug.error("This is error message:)");
-		debug.log("This is primary message:)");
 		debug.log({a: 1, b: 2});
-		debug.log([1,2,3]);
-
 	</script>
 </body>
 </html>
diff --git a/demo/index.html b/demo/index.html
@@ -23,22 +23,53 @@
 			float: none;
 			margin: 0 auto;
 		}
+		
+		#buttons{
+			margin-top: 10px;
+		}
+		#buttons p{
+			text-align: center;
+			background-color: #0074cc;
+			margin: .4em 10px;
+			padding: .4em;
+			color: #fff;
+			border-radius: 2px;
+		}
+
+
+		#buttons .success{
+			background-color: #5bb75b;
+		}
+		#buttons .error{
+			background-color: #bd362f;
+		}
+		#buttons .warn{
+			background-color: #faa732;
+		}
+		#buttons .danger{
+			background-color: #da4f49;
+		}
   </style>
 </head>
 <body style="background: #eee">
 	<header>
-    <h1>Debug.js</h1>
+    <h1>debug.js</h1>
     <h2>在手机上打印调试信息。</h2>
   </header>
+  <section id="buttons">
+  	<p onclick="debug.success('success!')" class="success">输出一个成功信息</p>
+  	<p onclick="debug.error('error!')" class="error">输出一个错误信息</p>
+  	<p onclick="debug.warn('warning!')" class="warn">输出一个警告信息</p>
+  	<p onclick="debug.warn('danger!')" class="danger">输出一个危险信息</p>
+  	<p onclick="debug.log('primary!')" class="primary">输出一个普通信息</p>
+  	<p onclick="debug.log({a:1,b:2})">输出一个Obejct</p>
+  	<p onclick="debug.log([1,2,3])">输出一个Array</p>
+  </section>
   <section id="downloads">
-    <a href="https://github.com/binnng/debug.js" id="view-on-github" class="button"><span>View on GitHub</span></a>
+    <a href="../debug.js" id="view-on-github" class="button"><span>View on GitHub</span></a>
   </section>
 	<script type="text/javascript">
-		debug.success("This is success message:)");
-		debug.error("This is error message:)");
-		debug.log("This is primary message:)");
-		debug.log({a: 1, b: 2});
-		debug.log([1,2,3]);
+		debug.success("Welcome to debug.js:)");
 	</script>
 </body>
 </html>
