发表于   |   分类于 ，   |     |   阅读次数

转载自：http://blog.csdn.net/xieyihua1994/article/details/51578325

幻数：就是具体的数，反映不出数字所代表的意义。
危害：幻数带来的主要问题是它们没有（抽象）语义。当我们阅读和维护带有幻数的代码时，不得不去一个个地搞清楚每个光秃秃的量到底代表的是什么意思。
没错，这样也能勉强度日，但带来的是不必要的精力浪费以及准确性的丧失。

仅仅只是文字的表达，我相信恐怕有些朋友难以理解，那我就举个例子说明一下。
比如：有下列一段代码。

1
for(var i = 0 ; i <16 ; i ++) { }

那么我就要问同学们有谁知道 i 为什么必须小于16吗？16代表的是什么？（大家肯定在想：我的天！！我怎么可能知道，这代码又不是我写的，我怎么会知道他在想什么。）

对！！！
就是因为代码不是我们自己写的，所以我们不知道这个16是什么意思，这也暴露了一个问题，这段代码的可读性比较差，因为读者根本不知道16是什么意思，我相信即使是代码的编写者，你问他，他也需要联系上下文才能回答你这个问题。
所以，这就是“幻术”。

如何避免这种情况呢？有很多种方式，比如枚举，宏替换都是解决幻数的有效方式。
上面的例子可以这样写：

1
2
var len = 16;
for(var i = 0 ; i <len ; i ++) { }

这样写就可以很好地理解这段代码的意思了。说到这里，我想大家应该都知道解决幻数的好处是什么了。因此我们写代码的时候，尽量避免幻数的出现。

发表于   |   分类于 ，   |     |   阅读次数

转载自：http://www.cnblogs.com/xxcanghai/p/5189353.html

题目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Foo() {
  getName = function () { alert(1); };
  return this;
}
Foo.getName = function () { alert(2); };
Foo.prototype.getName = function () { alert(3); };
var getName = function () { alert(4); };
function getName() { alert(5); }
//请写出以下输出结果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

答案

1
2
3
4
5
6
7
Foo.getName(); // 2
getName(); // 4
Foo().getName(); // 1
getName(); // 1
new Foo.getName(); // 2
new Foo().getName(); // 3
new new Foo().getName(); // 3
阅读全文 »

发表于   |   分类于 ，   |     |   阅读次数

修改时间
2016年10月25日11:32:22

本文主要讲述了indexedDB的初步使用，
主要包括数据的增、删、改、查、和索引的创建和查询

1. 检查浏览器是否支持indexedDB

1
2
3
4
5
6
7
8
9
10
11
window.indexedDB = window.indexedDB
  || window.mozIndexedDB
  || window.webkitIndexedDB
  || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction
  || window.webkitIDBTransaction
  || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange
  || window.webkitIDBKeyRange
  || window.msIDBKeyRange;
if (!window.indexedDB) console.warn("您的浏览器不支持indexDB");
阅读全文 »

发表于   |   分类于   |     |   阅读次数

1. 直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function getIconByFormat(format) {
  var icon = '';
  switch (format) {
    case 'ppt':
      icon = 'ppt';
      break;
    case 'doc':
    case 'docx':
      icon = 'word';
      break;
    case 'mid':
    case 'wma':
    case 'wav':
    case 'flac':
    case 'm4a':
    case 'voc':
    case 'mp3':
      icon = 'music';
      break;
    case 'flv':
    case 'avi':
    case 'mkv':
    case 'wmv':
    case 'mp4':
    case 'f4v':
    case 'mpg':
    case 'asf':
    case 'webm':
    case 'mov':
    case 'rmvb':
    case 'rm':
    case 'mp4':
      icon = 'video';
      break;
    case 'jpg':
    case 'jpeg':
      icon = 'image';
      break;
    default:
      break;
  }
  return icon;
}

结果

1
2
3
getIconByFormat("doc") => word
getIconByFormat("wmv") => video
getIconByFormat("jpeg") => image

发表于   |   分类于 ，   |     |   阅读次数

1. 直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
  <style>
    * {
      margin: 0;
    }
  </style>
</head>
<body>
<svg width="400" height="400">
  <title>SVG Analog Clock</title>
  <circle id="face" cx="125" cy="125" r="100"
          style="fill: #f1f1f1; stroke: #000;"></circle>
  <g id="ticks" transform="translate(125, 125)">
    <path id="triangle" d="M95 0 L 100 -5 L 100 5 Z"
          transform="rotate(360)"></path>
  </g>
  <g id="hands">
    <path id="hour" d="M 125 125 V 75"
          style="fill: none; stroke: black; stroke-width: 6"
          transform="rotate(0)"></path>
    <path id="minute" d="M 125 125 V 50"
          style="fill: none; stroke: black; stroke-width: 4"
          transform="rotate(0)"></path>
    <path id="second" d="M 125 125 Q 100 100 125 80 T 125 40 V 30"
          style="fill: none; stroke: #f00; stroke-width: 2"
          transform="rotate(0)"></path>
  </g>
  <g id="knob" transform="translate(125, 125)">
    <circle cx="0" cy="0" r="6" style="fill: #333;"></circle>
  </g>
</svg>
<script>
  var svgns = "http://www.w3.org/2000/svg";
  var face = document.getElementById("face"),
      ticks = document.getElementById("ticks"),
      triangle = document.getElementById("triangle"),
      txt = document.getElementById("txt");
  for (var i = 0; i < 11; i++) {
    var temp_triangle = triangle.cloneNode(true);
    var angle = i * 30 + 30;
    temp_triangle.setAttribute("transform", "rotate(" + angle + ")");
    ticks.appendChild(temp_triangle);
    ticks.setAttribute("transform", "translate(125, 125), rotate(-90)");
  }
  var hourHand = document.getElementById("hour"),
      minuteHand = document.getElementById("minute"),
      secondHand = document.getElementById("second");
  var hourTransform, minuteTransform, secondTransform;
  var secPer12Hours = 60 * 60 * 12,
      secPerHour = 60 * 60,
      secPerMinute = 60;
  (function init() {
    hourTransform = hourHand.transform.baseVal.getItem(0);
    minuteTransform = minuteHand.transform.baseVal.getItem(0);
    secondTransform = secondHand.transform.baseVal.getItem(0);
    updateClock();
  })()
  function updateClock() {
    var date = new Date();
    var sec = date.getMilliseconds() / 1000 +
        date.getSeconds() +
        date.getMinutes() * 60 +
        date.getHours() * 60 * 60;
    var hourAngle = (sec % secPer12Hours) * 360 / secPer12Hours,
        minuteAngle = (sec % secPerHour) * 360 / secPerHour,
        secondAngle = (sec % secPerMinute) * 360 / secPerMinute;
    hourTransform.setRotate(hourAngle, 125, 125);
    minuteTransform.setRotate(minuteAngle, 125, 125);
    secondTransform.setRotate(secondAngle, 125, 125);
    window.requestAnimationFrame(updateClock);
  }
</script>
</body>
</html>

说明

浏览器需要支持：requestAnimationFrame
有关requestAnimationFrame的相关知识请自行查阅

发表于   |   分类于   |     |   阅读次数

1. JavaScript栈的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Stack() {
  this.dataStore = [];
  this.top = 0;
  this.push = function (element) {
    this.dataStore[this.top++] = element;
  };
  this.pop = function () {
    return this.dataStore[--this.top];
  };
  this.peek = function () {
    return this.dataStore[this.top - 1]
  };
  this.length = function () {
    return this.top;
  };
  this.clear = function () {
    this.top = 0;
  };
}
阅读全文 »