修改了[HTML字符查看小工具]，练练手，学学JS

本文链接：https://blog.csdn.net/mostone/article/details/2101037

前天难得工作上得空，就把以前的一个 JScript 小东西改了改。

这是以前闲时写的一个HTML特殊字符查看器(http://lingsmm.googlepages.com/char.html)，里面的 JS 代码比较传统，是一个个函数完成的。在看了一眼Prototype ajax (http://www.prototypejs.org/) 的代码后，也想尝试着用类的方式来写 JS 代码。

这个 JS 类库，我没有深入学习，具体的功能细节不清楚，甚至没用过个这类库，让我感兴趣的是一个很无聊的原因，那就是之前我根本不知道，原来还可以用“：”来定义类成员，在这之前，我都是定义一个函数，再参照 M$ 官方手册上的说明，用 prototype 来为类追加方法函数。发现了这个语法元素后，我一直想用用，正巧有空，就打开文本编辑器，将它改了一遍，顺便用定时器来动态创建字符列表。

以前显示字符表，是在一个循环里做的，当时也想做成动态显示，因此都是 createElement，而不是用 innerHTML，然而结果是浏览器在方法执行过程中，没有及时的刷新页面，效果根本出不来，而且显示速度，比 innerHTML要低（这点已经有朋友在我上次的帖子里提过了，当时我也未作解释），一个是后台多次渲染，一个是完了一次渲染的缘故吧。

另外，发现一个问题，就是引用类自身属性给其它成员赋值，会引用不到。

var CharView = {
    ViewModeType: {
    Block: 1,
    MultiRows: 2
   },

   ViewMode: this.ViewModeType.Block,
.....

这里，ViewMode 要引用类中的 ViewModeType，由于类还没有被实例化，因此 this 是引用不到的，在运行中，ViewMode 并未被赋值。（以上的分析是未作验证的，只是猜测）

在没有更好的办法前，于是在 CharView 变量之前，定义了一个 Common 变量，最终的代码是：

        var Common = {
        Version: "1.0.1",

        Browser: {
       IE:     !!(window.attachEvent && !window.opera),
       Opera: !!window.opera,
       WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
       Gecko: navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
       MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
   },

   ViewMode: {
    Block: 1,
    MultiRows: 2
   },

   Encode: function(value) {
    return value.replace("&", "&").replace("/"", """);
   },

   CharView: null

        };

        var CharView = {
   CssClassAttributeName: (Common.Browser.IE ? "className" : "class"),

ViewMode: Common.ViewMode.Block,
CharsArray: null,

在加载过程中，为了提醒用户，特意追加 Loading，字体使用了 CSS 的 text-decoration: blink，不过在 IE 下没有效果，只有在 FireFox 中才会闪烁，有个提示就够了，不是必须要闪烁，没必要追加 JS 控制闪烁。

当然了，这个 HTML 小页面，没有多大的实际使用价值，不过，拿来业余练练手，让自己保持学习状态，还是有意义的。

最后：文本编辑器 Notepad++ (http://notepad-plus.sourceforge.net/tw/site.htm) 真的比较强，虽然在公司里用的是 EditPlus 和 UE，但 Notepad++ 是免费的，功能也已经强大得完全足够我用了，所以特别向大家推荐，美中不足的是，它的快捷方式图标没有 alpha 通道，显示不平滑。