小熏的编程日记

仕様
商品番号     MJSS-9050
JAN     4535506090508
メディア     マキシシングル CD
組枚数     1
アーティスト/ キャスト
原田ひとみ(飛鳥)今井麻美(斑鳩)小林ゆう(葛城)水橋かおり(柳生)井口裕香(雲雀)
内容
2011年9月22日発売予定の超人気ゲーム: ニンテンドー3DS『閃乱カグラ -少女達の真影-』のOPとEDをカップリング。
収録曲
1     乱れ咲き     原田ひとみ
2     真影     近藤あいる
3     乱れ咲き (オリジナル・カラオケ)
4     真影 (オリジナル・カラオケ)
阅读全文…

JavaScript Style Rules

2.1 Naming 命名
通常地，像下面一样命名:

functionNamesLikeThis
variableNamesLikeThis
ClassNamesLikeThis
EnumNamesLikeThis
methodNamesLikeThis
SYMBOLIC_CONSTANTS_LIKE_THIS

函数名、变量名、方法名：首字母小写
类名、枚举名：首字母大写
常量：恒大写，下划线分割

2.1.1 属性和方法
私有属性、变量和方法应该以下划线结尾
受保护属性、变量和方法不应当以下划线结尾（和公有一样）
关于私有、受保护，参考visibility一节

2.1.2 方法和函数的参数
可选的参数以「opt_」开头
如果函数接受不定参数，应当将此参数放在参数列表的最后，并且以var_args命名
但在函数体内不应使用var_args。使用arguments数组来代替。

2.1.3 属性的Getters和Setters
ECMAScript5的Getters和Setters不建议使用。
如果使用了，那么Getters中不应该修改可见的状态
错误的用法：

/**
 * WRONG -- Do NOT do this.
 */
var foo = { get next() { return this.nextId++; } };
};

2.1.4 存取函数
属性的Getters和Setters不是必需的。
但是，如果要写，那么Getters必须写成getFoo()、Setters必须写成setFoo(value)的形式。
布尔型的Getters可以写成isFoo()，并且通常看起来更自然。

2.1.5 命名空间
JavaScript没有原生的包或命名空间机制。
全局的命名冲突很难debug，而且在两个工程合并时会导致棘手的问题。
我们采取约定俗成的方式来防止冲突来实现代码重用。

2.1.5.1 为全局的代码使用命名空间
总是使用和工程名或类库名相同的词作为（伪）命名空间的前缀。
例如，如果你正在写一个叫”Sloth”的工程，合理的（伪）命名空间应该是sloth.* ：

var sloth = {};

sloth.sleep = function() {
  ...
};

许多JavaScript类库提供创建命名空间的高级函数，如the Closure Library和Dojo toolkit：

goog.provide('sloth');

sloth.sleep = function() {
  ...
};

2.1.5.2 明晰命名空间的所有权
当创建子命名空间时，确保父命名空间的所有人知道你在干什么。
例如，当你开始一个为sloths创建hats的工程时，确保Sloth团队知道你在使用sloth.hats命名空间

2.1.5.3 内部代码不能使用和外部代码相同的命名空间
外部代码是指不在你的代码库中的代码，它们独立地编译（通常是引入的第三方类库，但也有可能是别的团队写的类库）。
内部代码和外部代码的命名空间要严格分离。
比如，一个外部库定义了foo.hats的命名空间，foo.hats.*变得可用，
但你的代码不能在foo.hats下面定义任何符号。
错误的写法：

foo.require('foo.hats');

/**
 * WRONG -- Do NOT do this.
 * @constructor
 * @extend {foo.hats.RoundHat}
 */
foo.hats.BowlerHat = function() {
};

如果需要在外部命名空间中定义新的API时，应当显式的导出API函数（并且仅导出这些函数）
内部代码在调用这些函数时仍然使用内部名称，这可以保持一致并且编译器可以优化它们：

foo.provide('googleyhats.BowlerHat');

foo.require('foo.hats');

/**
 * @constructor
 * @extend {foo.hats.RoundHat}
 */
googleyhats.BowlerHat = function() {
  ...
};

goog.exportSymbol('foo.hats.BowlerHat', googleyhats.BowlerHat);

2.1.5.4 别名以增加可读性
使用本地别名替代全修饰名，以增加可读性。
本地别名必须和全修饰名的最后部分吻合。
例如：

/**
 * @constructor
 */
some.long.namespace.MyClass = function() {
};

/**
 * @param {some.long.namespace.MyClass} a
 */
some.long.namespace.MyClass.staticHelper = function(a) {
  ...
};

myapp.main = function() {
  var MyClass = some.long.namespace.MyClass;
  var staticHelper = some.long.namespace.MyClass.staticHelper;
  staticHelper(new MyClass());
};

不要别名命名空间。
错误的写法：

myapp.main = function() {
  var namespace = some.long.namespace;
  namespace.MyClass.staticHelper(new namespace.MyClass());
};

避免直接使用别名的属性，除非它是一个枚举
正确的写法：

/** @enum {string} */
some.long.namespace.Fruit = {
  APPLE: 'a',
  BANANA: 'b'
};

myapp.main = function() {
  var Fruit = some.long.namespace.Fruit;
  switch (fruit) {
    case Fruit.APPLE:
      ...
    case Fruit.BANANA:
      ...
  }
};

错误的写法：

myapp.main = function() {
  var MyClass = some.long.namespace.MyClass;
  MyClass.staticHelper(null);
};

永远不要在全局环境创建别名。请仅在函数内使用它们。

2.1.6 文件名
文件名保持全小写，以避免在大小写敏感的平台上发生混乱。
文件名的扩展名应该是js，除在分隔时使用「-」或「_」外，不应包括其他的标点符号。
（优选使用「-」）

2.2 自定义的toString()方法
必须总是能成功调用并且没有任何副作用。
自定义toString()是好的，但必须保证：
(1)总是能成功调用
(2)没有任何副作用
如果你的toString没有满足这些要求，很容易就会导致严重问题。
例如，如果toString()里调用了一个做断言的方法，断言失败时可能会尝试输出发生失败的类的名称（跟踪失败发生在哪里），而输出类名当然又要调用到toString()

2.3 延迟初始化
可以。
不总是可能在声明时就初始化变量，所以延迟初始化时可以的。

2.4 Explicit scope
总是使用显式范围
（待译）
Always use explicit scope – doing so increases portability and clarity. For example, don’t rely on window being in the scope chain. You might want to use your function in another application for which window is not the content window.

2.5 代码格式化
基本上使用C++的格式化规则，
除了下面几点以外。

2.5.1 大括弧
为了避免解析器隐含的插入分号，总是在入口的那一行开始大括弧。
例如：

if (something) {
  // ...
} else {
  // ...
}

2.5.2 数组和对象的初始化
当一行能写得下时，可以全部写在一行：

var arr = [1, 2, 3];  // 「[」后面和「]」前面没有空格！
var obj = {a: 1, b: 2, c: 3};  // 「{」后面和「}」前面没有空格！

多行数组的初始化则缩进2个空格，和块的方式类似，例如：

// Object initializer.
var inset = {
  top: 10,
  right: 20,
  bottom: 15,
  left: 12
};

// Array initializer.
this.rows_ = [
  '"Slartibartfast" <fjordmaster@magrathea.com>',
  '"Zaphod Beeblebrox" <theprez@universe.gov>',
  '"Ford Prefect" <ford@theguide.com>',
  '"Arthur Dent" <has.no.tea@gmail.com>',
  '"Marvin the Paranoid Android" <marv@googlemail.com>',
  'the.mice@magrathea.com'
];

// Used in a method call.
goog.dom.createDom(goog.dom.TagName.DIV, {
  id: 'foo',
  className: 'some-css-class',
  style: 'display:none'
}, 'Hello, world!');

书写属性的初始化时不要对齐
正确的写法：

CORRECT_Object.prototype = {
  a: 0,
  b: 1,
  lengthyName: 2
};

错误的写法：

WRONG_Object.prototype = {
  a          : 0,
  b          : 1,
  lengthyName: 2
};

2.5.3 函数参数列表
如果可能，全部的参数都写在同一行。
但当一行超过80个字符位，为了更加容易阅读，必须换行。
为了节省空间，可以尽量写满80字符，也可以为了更加易读，每行只放一个参数。
每行缩进4个字符位，或者对齐圆括弧。

一些例子：

// Four-space, wrap at 80.  Works with very long function names, survives
// renaming without reindenting, low on space.
goog.foo.bar.doThingThatIsVeryDifficultToExplain = function(
    veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo,
    tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) {
  // ...
};

// Four-space, one argument per line.  Works with long function names,
// survives renaming, and emphasizes each argument.
goog.foo.bar.doThingThatIsVeryDifficultToExplain = function(
    veryDescriptiveArgumentNumberOne,
    veryDescriptiveArgumentTwo,
    tableModelEventHandlerProxy,
    artichokeDescriptorAdapterIterator) {
  // ...
};

// Parenthesis-aligned indentation, wrap at 80.  Visually groups arguments,
// low on space.
function foo(veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo,
             tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) {
  // ...
}

// Parenthesis-aligned, one argument per line.  Visually groups and
// emphasizes each individual argument.
function bar(veryDescriptiveArgumentNumberOne,
             veryDescriptiveArgumentTwo,
             tableModelEventHandlerProxy,
             artichokeDescriptorAdapterIterator) {
  // ...
}

当调用的函数本身已经缩进时，参数列可以选择再缩进4个字符也可以选择对齐函数
例如，下面的几种写法都是可以的：

if (veryLongFunctionNameA(
        veryLongArgumentName) ||
    veryLongFunctionNameB(
    veryLongArgumentName)) {
  veryLongFunctionNameC(veryLongFunctionNameD(
      veryLongFunctioNameE(
          veryLongFunctionNameF)));
}

2.5.4 匿名函数的传入
当在参数列表中声明匿名函数时，为了使匿名函数更可读（避免整个函数块显示在右半屏幕），
匿名函数体应当从调用语句的位置起再缩进2个字符位，
或者从函数的声明位置起缩进2个字符位。
例如：

// 匿名函数在调用语句的同一行中声明
prefix.something.reallyLongFunctionName('whatever', function(a1, a2) {
  if (a1.equals(a2)) {
    someOtherLongFunctionName(a1);
  } else {
    andNowForSomethingCompletelyDifferent(a2.parrot);
  }
});

// 匿名函数另起一行声明
var names = prefix.something.myExcellentMapFunction(
    verboselyNamedCollectionOfItems,
    function(item) {
      return item.name;
    });

2.5.5 更多的缩进
实际上除了数组/对象的初始化以及传递匿名函数外，所有的换行都应该：
要不左对齐上一行的表达式，
要不缩进4个字符。而不是缩进2个字符。

例如：

someWonderfulHtml = '' +
                    getEvenMoreHtml(someReallyInterestingValues, moreValues,
                                    evenMoreParams, 'a duck', true, 72,
                                    slightlyMoreMonkeys(0xfff)) +
                    '';

thisIsAVeryLongVariableName =
    hereIsAnEvenLongerOtherFunctionNameThatWillNotFitOnPrevLine();

thisIsAVeryLongVariableName = 'expressionPartOne' + someMethodThatIsLong() +
    thisIsAnEvenLongerOtherFunctionNameThatCannotBeIndentedMore();

someValue = this.foo(
    shortArg,
    'Some really long string arg - this is a pretty common case, actually.',
    shorty2,
    this.bar());

if (searchableCollection(allYourStuff).contains(theStuffYouWant) &&
    !ambientNotification.isActive() && (client.isAmbientSupported() ||
                                        client.alwaysTryAmbientAnyways())) {
  ambientNotification.activate();
}

2.5.6 空白行
使用空白行将逻辑上相关的代码分组。
例如：

doSomethingTo(x);
doSomethingElseTo(x);
andThen(x);

nowDoSomethingWith(y);

andNowWith(z);

2.5.7 二元和三元运算符
总是将运算符集中在一行，这样就不用考虑解析器隐含插入分号的问题。
否则换行和缩进就要遵守上面的规则。

var x = a ? b : c;  // 如果写得下，都写在一行

// 缩进4个字符位也可以
var y = a ?
    longButSimpleOperandB : longButSimpleOperandC;

// 或者缩进时对齐第一个操作数
var z = a ?
        moreComplicatedB :
        moreComplicatedC;

2.6 圆括号
仅在语法或语义需要时候使用。

永远不要为一元运算符例如delete、typeof、void使用圆括号。
也不要在关键字例如return、throw、case、in、new后面使用圆括号。

2.7 字符串
选择使用单引号「’」。
为了保持兼容，推荐选择「’」而不是「”」，在创建包含HTML的字符串时更容易：

var msg = 'This is some HTML';

2.8 可见性(私有域和受保护域)
推荐使用JSDoc的@private和@protected标签，以指示类、函数和属性的可见性。

在使用Closure Compiler编译时，参数「–jscomp_warning=visibility」可以让编译器检测到违反可见性时发出警告。

标记为@private的全局变量和函数仅允许被相同文件中的代码使用。

构造函数如果以@private标记，即意味着只能在同一文件中创建类实例时被调用，
或者在实例化类的静态实例成员时被调用。（防止类在文件外被实例化）
同一文件中的静态属性和instanceof操作符也仍可访问构造函数。

全局的变量/函数/构造函数不应该标记@protected。

// File 1.
// AA_PrivateClass_ and AA_init_ are accessible because they are global
// and in the same file.

/**
 * @private
 * @constructor
 */
AA_PrivateClass_ = function() {
};

/** @private */
function AA_init_() {
  return new AA_PrivateClass_();
}

AA_init_();

@private的属性可被同一文件的任何代码访问，同时也可被拥有这个属性的类的静态方法或实例方法所访问（跨文件时）。
但不能在另外一个文件中被子类所访问或复写。

@protected的属性可被同一文件的任何代码访问，同时也可被派生子类的静态方法或实例方法所访问。

注意JavaScript的这些标签和C++/Java不同。
JavaScript的private和protected允许从同一文件中的任何地方访问，不仅仅是同一个类内。
同样，和C++不一样的是，private的属性不允许被子类复写。

// File 1.

/** @constructor */
  AA_PublicClass = function() {
};

/** @private */
AA_PublicClass.staticPrivateProp_ = 1;

/** @private */
AA_PublicClass.prototype.privateProp_ = 2;

/** @protected */
AA_PublicClass.staticProtectedProp = 31;

/** @protected */
AA_PublicClass.prototype.protectedProp = 4;

// File 2.

/**
 * @return {number} The number of ducks we've arranged in a row.
 */
AA_PublicClass.prototype.method = function() {
  // Legal accesses of these two properties.
  return this.privateProp_ + AA_PublicClass.staticPrivateProp_;
};

// File 3.

/**
 * @constructor
 * @extends {AA_PublicClass}
 */
AA_SubClass = function() {
  // Legal access of a protected static property.
  AA_PublicClass.staticProtectedProp = this.method();
};
goog.inherits(AA_SubClass, AA_PublicClass);

/**
 * @return {number} The number of ducks we've arranged in a row.
 */
AA_SubClass.prototype.method = function() {
  // Legal access of a protected instance property.
  return this.protectedProp;
};

注意在JavaScript中，没法分别一个类型（例如AA_PrivateClass_）和这个类型的构造函数。
也没有方法表明一个类型是公有的，而同时它的构造函数是私有的。
（因为给构造函数起个别名就可以轻易绕过编译器的安全性检查）

注：
JavaScript本身不支持私有、保护、公有机制，如果不是利用闭包来实现，类的成员都是直接可达的。
在注释中添加JSDoc中约定的标签后，一些编译器可以实现安全性检查，以使得代码更加安全稳定。
但事实上浏览器的JS解析器仍然会忽略所有注释。添加约束标签是为了让开发者遵守约定。
这种保护私有域的书写方式和闭包方式是完全不同的。
阅读全文…

估计有不少人使用Flash MP3 Player JW作为wordpress博客的播放插件。
xml方式配置播放列表（dewplayer同样支持），另外拖曳式编辑播放列表也算是这个插件的一个特点

余希望新曲插入到播放列表头部， 但插件只支持插入到尾部，再通过拖曳调整，当曲目列表太庞大时很烦，拖半天都拖不到头部

于是暴力修改源码

打开插件下的inc/class.playlist_editor.php，搜索“add new song”，会找到相关代码段
再定位到 （2.3版本是539行）

$list_item.appendTo($songs_list);

很简单，将appendTo函数改成prependTo函数。这些函数是jQuery库操纵DOM元素的函数。

不过暴力修改代码之后想直接插入到尾部就不行了，比较好的方法是加多一个新添加曲目插入位置的配置项
余现在只是用Flash MP3 Player JW作为侧边栏的widget，整碟试听的播放列表如果用Flash MP3 Player JW来编辑很痛苦，因此余不需要新添加曲目插入到尾部的功能。本着够用就是好的原则，这次于是就这样了

整碟试听的播放列表现在是用记事本之类的工具编辑，但已经很烦了，准备写个程序为dewplayer自动生成播放列表

组内计划依照Google的JavaScript编程规约来进行开发。非常认真的学习了一下，于是顺手简单地翻译成了中文。
Style Rules部分等有空再翻。因为是原创，虽然可能别人也翻译过了，但转载时仍请注明出处。

余刚学习JavaScript不久，不可避免对原文的理解有错误，如有错误或不当地方请指出。

Google JavaScript Style Guide 中文简要翻译

1. Language Rules部分

1.1 var
总是使用var声明变量。（理由不多说了）

1.2 Constants
使用大写字母和下划线『_』来声明常量。可以在注释中适当使用@const标签。
但不要使用const限定词来修饰变量。IE浏览器不会解析const。
例如，对于简单的类型，命名规则已经足够：

/**
 * The number of seconds in a minute.
 * @type {number}
 */
goog.example.SECONDS_IN_A_MINUTE = 60;

对于复杂类型，使用@const标签：

/**
 * The number of seconds in each of the given units.
 * @type {Object.<number>}
 * @const
 */
goog.example.SECONDS_TABLE = {
  minute: 60,
  hour: 60 * 60
  day: 60 * 60 * 24
}

这允许编译器强制检查是否有改变。

1.3 Semicolons
总是使用分号『;』来结束语句。（理由也不多说了）

1.4 Nested functions
嵌套函数（函数体内定义的函数）：可以使用。
嵌套函数有时候非常有用，自己决定在需要时使用。

1.5 Function Declarations Within Blocks
在块中定义函数：不要这样干。
虽然大多数JS解析器支持，但这不是ECMAScript标准。
ECMAScript标准只允许在脚本的全局环境或者函数体内定义函数。
请使用匿名函数并赋值给一个变量来替代。

错误的用法：

if (x) {
  function foo() {}
}

正确的用法：

if (x) {
  var foo = function() {}
}

1.6 Exceptions
应当使用异常处理。异常是不可避免的。

1.7 Custom exceptions
自定义异常：可以使用。自己决定在需要时使用。

1.8 Standards features
为了保持最大兼容，使用标准特性而不要使用非标准特性。
例如使用string.charAt(3)而不是使用string[3]。
又如使用DOM的函数来操作HTML元素而不是使用特定的省略记法。

1.9 Wrapper objects for primitive types
包装内置数据类型：没有理由这样干，而且这样做很危险。

不要这样干：

var x = new Boolean(false);
if (x) {
  alert('hi');  // Shows 'hi'.
}

但类型转换是OK的：

var x = Boolean(0);
if (x) {
  alert('hi');  // This will never be alerted.
}
typeof Boolean(0) == 'boolean';
typeof new Boolean(0) == 'object';

1.10 Multi-level prototype hierarchies
（自定义的）多层原型继承体系：不推荐。
如果你以自定义的类B为原型导出类D，那么你就构造了一个多层原型继承体系。
这些体系比它们乍看起来要难正确使用。

所以，使用Google的Closure库（the Closure Library）中的goog.inherits()或类似的类库来实现。

function D() {
  goog.base(this)
}
goog.inherits(D, B);

D.prototype.method = function() {
  ...
};

注：过长的原型链同时会导致性能问题。

1.11 Method definitions
将方法定义为原型方法。
原型方法定义的例子：

Foo.prototype.bar = function() { ... };

当有多个原型方法要添加时：

Foo.prototype.bar = function() {
  /* 注释 */
};

注：原型方法比构造函数中定义的对象方法效率要高
例如1.11-1的getFullName效率不如1.11-2的getFullName。
1.11-1

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;

    this.getFullName = function() {
        return this.firstName + " " + this.lastName;
    };
}

1.11-2

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

Person.prototype.getFullName = function() {
    return this.firstName + " " + this.lastName;
};

1.12 Closures
闭包：可以使用，但要慎重。
这里有一份闭包指南：http://jibbering.com/faq/notes/closures/

要注意到的一点是，一个闭包函数会在它的作用域内保留一个指针。
如果将一个闭包函数赋给DOM元素，会引起循环引用，并导致内存泄漏。例如：

function foo(element, a, b) {
  element.onclick = function() { /* uses a and b */ };
}

闭包函数会保持对element，a和b的引用，即使它从来不使用element。而element也保持对闭包的引用，这构成了一个循环，占用的内存将不会被回收。

应当使用下面的方式代替：

function foo(element, a, b) {
  element.onclick = bar(a, b);
}

function bar(a, b) {
  return function() { /* uses a and b */ }
}

注：闭包可以轻易产生循环引用，导致闭包和在闭包作用域链上的变量都不会被释放。这也正是能够通过闭包方式实现类私有成员的方法之一。对于不涉及DOM/ActiveX元素的闭包，在代码执行完毕后循环引用可以被JS引擎检测到，从而成功释放内存。当加入DOM/ActiveX后，会截断JS引擎的检测，导致内存泄漏。

阅读全文…

工作后干的活有点乱七八糟，被折磨死
每一段时间就要学新的语言。2011下半年是C#，2012年，轮换到了JavaScript

最近的任务是用ExtJS设计前端，这玩意强大到足以取代Silverlight，非常适合配合RESTful API使用，使用AJAX获取JSON或XML类型的数据，前端页面的生成完全不需要PHP/JSP，仅HTML+JS已经足够。这种情况下，前端可以和API所在服务端完全分离，部署在不同的服务器上，甚至前端可以放在用户本地运行

第一个任务是攻克多语言化(老大乃将这种任务扔给素人情何以堪)
网上搜索了一下，还有人专门写了插件（ext-locale-loader），但这种需要给每一自设计的页面弄一份语言拷贝的方式让余菊花一紧
后来阅读ExtJS的自带文档，发现有本地化的详细指引（$EXTJS_FOLDER/docs/index.html#!/guide/localization）
一步步来就实现了ExtJS自身的UI元件在用户选择不同语言时的本地化

实现后的效果

演示页面：extlocalize.html
ExtJS语言列表RawData：languages.js（仅保留4个语言）
逻辑+UI：extlocalize.js
切换语言的逻辑其实非常简单，判断页面的传入参数（没错，静态页面也可以有参数），利用AJAX加载语言文件，然后执行语言文件中的代码，更新字符串

extlocalize.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Localization example</title>
    <!-- Ext Library Files -->
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
    <script src="ext/ext-all-debug.js"></script>
    <!-- App Scripts -->
    <script src="languages.js"></script>
    <script src="extlocalize.js"></script>
</head>
<body>
    <div id="languages"></div>
    <div id="datefield"></div>
    <div id="emailfield"></div>
    <div id="grid"></div>
</body>
</html>

languages.js

/**
 * by kuyur@kuyur.info
 * 2012.2.3
 */
Ext.namespace('Ext.local');

Ext.local.languages = [
    ['en', 'English'],
    ['ja', 'Japanese(日本語)'],
    ['zh_CN', 'Simplified Chinese(简体中文)'],
    ['zh_TW', 'Traditional Chinese(繁體中文)']
];

extlocalize.js

/**
 * by kuyur@kuyur.info
 * 2012.2.3
 */
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'ext/examples/ux/');
Ext.require([
    'Ext.data.*',
    'Ext.tip.QuickTipManager',
    'Ext.form.*',
    'Ext.ux.data.PagingMemoryProxy',
    'Ext.grid.Panel'
]);

Ext.onReady(function() {

    MultiLangDemo = (function() {
        return {
            init: function() {
            	var store = Ext.create('Ext.data.ArrayStore', {
            	    fields: ['code', 'language'],
            	    data  : Ext.local.languages //from languages.js
            	});

            	var combo = Ext.create('Ext.form.field.ComboBox', {
            	    renderTo: 'languages',
            	    margin: '10, 0, 0, 10',
            	    store: store,
            	    displayField: 'language',
            	    queryMode: 'local',
            	    emptyText: 'Select a language...',
            	    hideLabel: true,
            	    width: 200,
            	    listeners: {
            	        select: {
            	            fn: function(cb, records) {
            	                var record = records[0];
            	                window.location.search = Ext.urlEncode({"lang":record.get("code")});
            	            },
            	            scope: this
            	        }
            	    }
            	});

            	var params = Ext.urlDecode(window.location.search.substring(1));

            	if (params.lang) {
            	    var url = Ext.util.Format.format('ext/locale/ext-lang-{0}.js', params.lang);

            	    Ext.Ajax.request({
            	        url: url,
            	        success: this.onSuccess,
            	        failure: this.onFailure,
            	        scope: this
            	    });

            	    // check if there's really a language with passed code
            	    var record = store.findRecord('code', params.lang, null, null, null, true);
            	    // if language was found in store, assign it as current value in combobox

            	    if (record) {
            	        combo.setValue(record.data.language);
            	    }
            	} else {
            	    // no language found, default to english
            	    this.setup();
            	}

            	Ext.tip.QuickTipManager.init();
            },
            onSuccess: function(response) {
                try {
                    eval(response.responseText);
                } catch (e) {
                    Ext.Msg.alert('Failure', e.toString());
                }
                this.setup();
            },
            onFailure: function() {
                Ext.Msg.alert('Failure', 'Failed to load locale file.');
                this.setup();
            },
            setup: function() {
                Ext.create('Ext.FormPanel', {
                    renderTo: 'datefield',
                    margin: '10, 0, 0, 10',
                    frame: true,
                    title: 'Date picker',
                    width: 380,
                    defaultType: 'datefield',
                    items: [{
                        fieldLabel: 'Date',
                        name: 'date'
                    }]
                });
                Ext.create('Ext.FormPanel', {
                    renderTo: 'emailfield',
                    margin: '10, 0, 0, 10',
                    labelWidth: 100,
                    frame: true,
                    title: 'E-mail Field',
                    width: 380,
                    defaults: {
                        msgTarget: 'side',
                        width: 340
                    },
                    defaultType: 'textfield',
                    items: [{
                        fieldlabel: 'Email',
                        name: 'email',
                        vtype: 'email'
                    }]
                });

                var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
                var ds = Ext.create('Ext.data.Store', {
                     fields: ['month'],
                     remoteSort: true,
                     pageSize: 6,
                     proxy: {
                         type: 'pagingmemory',
                         data: monthArray,
                         reader: {
                             type: 'array'
                         }
                     }
                 });

                Ext.create('Ext.grid.Panel', {
                    renderTo: 'grid',
                    margin: '10, 0, 0, 10',
                    width: 380,
                    height: 203,
                    title:'Month Browser',
                    columns:[{
                        text: 'Month of the year',
                        dataIndex: 'month',
                        width: 240
                    }],
                    store: ds,
                    bbar: Ext.create('Ext.toolbar.Paging', {
                        pageSize: 6,
                        store: ds,
                        displayInfo: true
                    })
                });
                // trigger the data store load
                ds.load();
            }
        };
    })();

    MultiLangDemo.init();
});

以上仅是ExtJS UI自身的本地化。

自己系统中的文字如何本地化呢？
余的做法基本是沿着ExtJS本地化的思路，将系统用到的字符串集中在单个文件中，这也有利于后期扩展更多的语言
像Date picker/Email Field/Month Browser/Month of the year就是系统自身的语言，不应该硬编码到UI中
在加载ExtJS语言文件的时候，同时也加载系统自身的语言文件进行刷新
系统语言文件也必须使用和ExtJS语言文件相同的后缀，如en/ja/zh_CN/zh_TW

效果：

演示页面：multiplelanguages.html
逻辑+UI：multiplelanguages.js
语言列表RawData：languages.js（和上面一样）
系统默认语言文件（必须）：myproject-js/myproject-lang.js（余将默认语言弄成了日文）
系统的本地化语言文件（可选）：（没有参数时会保留默认语言文件中的设定）
locale/myproject-lang-en.js
locale/myproject-lang-ja.js
locale/myproject-lang-zh_CN.js
locale/myproject-lang-zh_TW.js

multiplelanguages.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Localization example</title>
    <!-- Ext Library Files -->
    <script src="myproject-js/myproject-lang.js"></script>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
    <script src="ext/ext-all-debug.js"></script>
    <!-- App Scripts -->
    <script src="languages.js"></script>
    <script src="multiplelanguages.js"></script>
</head>
<body>
    <div id="languages"></div>
    <div id="datefield"></div>
    <div id="emailfield"></div>
    <div id="grid"></div>
</body>
</html>

multiplelanguages.js
将UI的生成全部集中到setup函数里了

/**
 * by kuyur@kuyur.info
 * 2012.2.3
 */
Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', 'ext/examples/ux/');
Ext.require(['Ext.data.*', 'Ext.tip.QuickTipManager', 'Ext.form.*', 'Ext.ux.data.PagingMemoryProxy', 'Ext.grid.Panel']);

Ext.onReady(function() {

    var params;
    MultiLangDemo = (function() {
        return {
            init: function() {
                // load ExtJS locale
                params = Ext.urlDecode(window.location.search.substring(1));
                if (params.lang) {
                    var url = Ext.util.Format.format('ext/locale/ext-lang-{0}.js', params.lang);
                    Ext.Ajax.request({
                        url: url,
                        success: this.onLoadExtLocaleSuccess,
                        failure: this.onLoadExtLocaleFailure,
                        scope: this
                    });
                } else {
                    // no language found, locale of ExtJS will be english as default
                    this.loadmyprojectLocale();
                }
            },
            onLoadExtLocaleSuccess: function(response) {
                try {
                    eval(response.responseText);
                } catch (e) {
                    Ext.Msg.alert('Failure', e.toString());
                }
                this.loadmyprojectLocale();
            },
            onLoadExtLocaleFailure: function() {
                Ext.Msg.alert('Failure', 'Failed to load locale file.');
                this.loadmyprojectLocale();
            },
            loadmyprojectLocale: function() {
                // load locale for myproject
                if (params.lang) {
                    var urlmyprojectLocale = Ext.util.Format.format('locale/myproject-lang-{0}.js', params.lang);
                    Ext.Ajax.request({
                        url: urlmyprojectLocale,
                        success: this.onLoadmyprojectLocaleSuccess,
                        failure: this.onLoadmyprojectLocaleFailue,
                        scope: this
                    });
                } else {
                    this.setup();
                }
            },
            onLoadmyprojectLocaleSuccess: function(response) {
                try {
                    eval(response.responseText);
                } catch (e) {
                    Ext.Msg.alert('Failure', e.toString());
                }
                this.setup();
            },
            onLoadmyprojectLocaleFailue: function() {
                Ext.Msg.alert('Failure', 'Failed to load myproject locale file.');
                this.setup();
            },
            setup: function() {
                var store = Ext.create('Ext.data.ArrayStore', {
                    fields: ['code', 'language'],
                    data: Ext.local.languages //from languages.js
                });

                var combo = Ext.create('Ext.form.field.ComboBox', {
                    renderTo: 'languages',
                    margin: '10, 0, 0, 10',
                    store: store,
                    displayField: 'language',
                    queryMode: 'local',
                    emptyText: myproject.Message.SelectALanguage,
                    hideLabel: true,
                    width: 200,
                    listeners: {
                        select: {
                            fn: function(cb, records) {
                                var record = records[0];
                                window.location.search = Ext.urlEncode({
                                    "lang": record.get("code")
                                });
                            },
                            scope: this
                        }
                    }
                });
                if (params.lang) {
                    // check if there's really a language with passed code
                    var record = store.findRecord('code', params.lang, null, null, null, true);
                    // if language was found in store, assign it as current value in combobox
                    if (record) {
                        combo.setValue(record.data.language);
                    }
                }

                Ext.create('Ext.FormPanel', {
                    renderTo: 'datefield',
                    margin: '10, 0, 0, 10',
                    frame: true,
                    title: myproject.Message.PickDate,
                    width: 380,
                    defaultType: 'datefield',
                    items: [{
                        fieldLabel: myproject.Message.Date,
                        name: 'date'
                    }]
                });
                Ext.create('Ext.FormPanel', {
                    renderTo: 'emailfield',
                    margin: '10, 0, 0, 10',
                    labelWidth: 100,
                    frame: true,
                    title: myproject.Message.EmailFieldTitle,
                    width: 380,
                    defaults: {
                        msgTarget: 'side',
                        width: 340
                    },
                    defaultType: 'textfield',
                    items: [{
                        fieldlabel: 'Email',
                        name: 'email',
                        vtype: 'email'
                    }]
                });

                var monthArray = Ext.Array.map(Ext.Date.monthNames, function(e) {
                    return [e];
                });
                var ds = Ext.create('Ext.data.Store', {
                    fields: ['month'],
                    remoteSort: true,
                    pageSize: 6,
                    proxy: {
                        type: 'pagingmemory',
                        data: monthArray,
                        reader: {
                            type: 'array'
                        }
                    }
                });

                Ext.create('Ext.grid.Panel', {
                    renderTo: 'grid',
                    margin: '10, 0, 0, 10',
                    width: 380,
                    height: 203,
                    title: myproject.Message.MonthList,
                    columns: [{
                        text: myproject.Message.MonthTitle,
                        dataIndex: 'month',
                        width: 240
                    }],
                    store: ds,
                    bbar: Ext.create('Ext.toolbar.Paging', {
                        pageSize: 6,
                        store: ds,
                        displayInfo: true
                    })
                });
                // trigger the data store load
                ds.load();
            }
        };
    })();

    MultiLangDemo.init();
});

myproject-js/myproject-lang.js

/**
 * by kuyur@kuyur.info
 * 2012.2.3
 */
var myproject = {};
myproject.Message = {};
myproject.Message.SelectALanguage = '言語を選択ください...';
myproject.Message.PickDate = '日付を選択';
myproject.Message.Date = '日付';
myproject.Message.EmailFieldTitle = 'メールアドレス';
myproject.Message.MonthList = '月の一覧';
myproject.Message.MonthTitle = '月順';

locale/myproject-lang-en.js

/**
 * by kuyur@kuyur.info
 * 2012.2.3
 */
if (myproject.Message) {
	myproject.Message.SelectALanguage = 'Select a language...';
	myproject.Message.PickDate = 'Date Picker';
	myproject.Message.Date = 'Date';
	myproject.Message.EmailFieldTitle = 'Email';
	myproject.Message.MonthList = 'Month Browser';
	myproject.Message.MonthTitle = 'Month of the year';
}

locale/myproject-lang-ja.js

/**
 * by kuyur@kuyur.info
 * 2012.2.3
 */
if (myproject.Message) {
	myproject.Message.SelectALanguage = '言語を選択ください...';
	myproject.Message.PickDate = '日付を選択';
	myproject.Message.Date = '日付';
	myproject.Message.EmailFieldTitle = 'メールアドレス';
	myproject.Message.MonthList = '月の一覧';
	myproject.Message.MonthTitle = '月順';
}

locale/myproject-lang-zh_CN.js

/**
 * by kuyur@kuyur.info
 * 2012.2.3
 */
if (myproject.Message) {
	myproject.Message.SelectALanguage = '请选择一种语言...';
	myproject.Message.PickDate = '选择日期';
	myproject.Message.Date = '日期';
	myproject.Message.EmailFieldTitle = '电子邮件地址';
	myproject.Message.MonthList = '月份一览';
	myproject.Message.MonthTitle = '月份';
}

locale/myproject-lang-zh_TW.js

/**
 * by kuyur@kuyur.info
 * 2012.2.3
 */
if (myproject.Message) {
	myproject.Message.SelectALanguage = '請選擇一種語言...';
	myproject.Message.PickDate = '選擇日期';
	myproject.Message.Date = '日期';
	myproject.Message.EmailFieldTitle = '電子郵件地址';
	myproject.Message.MonthList = '月份一覽';
	myproject.Message.MonthTitle = '月份';
}

注意事项：
1.ExtJS库的解压目录名要一致，代码中的为ext
2.由于AJAX的本地请求会因为安全问题被浏览器禁止，需要将文件放到服务器才能测试

源文件下载：localize.rar

Disc 1

01     オープニング     1:44
02     タイトル     0:57
03     セレクト     1:10
04     マップ     1:18
05     スタートデモ1     0:58
06     スタートデモ2     0:13
07     コーネリア     2:25
08     メテオ     1:48
09     タイタニア&マクベス     2:16
10     セクターX     2:36
11     ゾネス     2:21
12     エリア6     2:06
13     ベノム     1:57
14     セクターY&ダーラ     2:17
15     フィチナ&セクターZ     1:55
16     ボルス     1:30
17     カタリナ     2:21
18     アクアス     2:31
19     ワープ     2:01
20     キャットのテーマ     0:16
21     ビルのテーマ     0:11
22     ボスA     1:53
23     ボスB     1:35
24     ボスC     1:27
25     スターウルフのテーマ     2:12
26     作戦完了     0:58
27     作戦失敗     1:07
28     プレイヤーダウン     0:07
29     ゲームオーバー     0:45
30     トレーニング     1:06
31     バトルセレクト     0:40
32     バトル     1:28
33     バトルクライマックス     0:35
34     バトル終了1     0:30
35     バトル終了2     0:31
36     決意     0:13
37     地下基地内     0:35
38     アンドルフ     2:17
39     最終決戦     1:44
40     オールクリア     0:58
41     スタッフクレジット1     5:10
42     スタッフクレジット2     4:19
Disc length 65:01

阅读全文…

Disc 1

01     オープニングムービー     1:11
02     タイトル     1:08
03     オプション／ライセンス管理     0:35
04     メインメニュー     2:28
05     コースインファンファーレ     0:15
06     ルイージサーキット／マリオサーキット     2:10
07     モーモーカントリー     2:12
08     キノコキャノン     1:57
09     キノピオファクトリー     2:34
10     ココナッツモール     2:17
11     DKスノーボードクロス     2:13
12     ワリオこうざん     2:18
13     デイジーサーキット     2:13
14     ノコノコみさき     2:06
15     メイプルツリーハウス     2:22
16     グラグラ火山     2:37
17     カラカラいせき     2:18
18     ムーンリッジ&ハイウェイ     2:04
19     クッパキャッスル     2:45
20     レインボーロード     2:48
21     一位ゴールファンファーレ(グランプリ・VS)     0:07
22     上位ゴールファンファーレ(グランプリ・VS)     0:08
23     上位ゴールリザルト(グランプリ・VS)     0:54
24     下位ゴールファンファーレ(グランプリ・VS)     0:09
25     下位ゴールリザルト     0:43
26     ブロック広場     2:00
27     アクアリゾート     2:21
28     ファンキースタジアム     1:48
29     ワンワンルーレット     2:20
30     ドッスンさばく     2:12
31     チーム内一位(バトル)／新記録更新(タイムアタック)ファンファーレ     0:06
32     チーム勝利(バトル)／ランクイン(タイムアタック)ファンファーレ     0:06
33     引き分けファンファーレ     0:06
34     チーム勝利(バトル)／ランクイン(タイムアタック)リザルト     0:27
35     チーム敗北(バトル)／ランク外(タイムアタック)ファンファーレ     0:06
36     チーム敗北(バトル)／ランク外(タイムアタック)リザルト     0:48
37     マリオカートチャンネル メニュー     0:47
38     ランキング     1:00
39     Wi-Fiメニュー     2:37
40     Wi-Fi観戦中／ゴーストリプレイ     0:54
41     ウィニングラン～廟彰式     1:28
42     スタッフロールA     1:48
43     スタッフロールB     2:20
Disc length 65:46

阅读全文…

Disc 1

01     オープニング     0:15
02     メインテーマ     2:55
03     飛行機 イントロ     0:21
04     飛行機     4:00
05     飛行機 成功ジングル     0:10
06     ロケットベルト イントロ     0:27
07     ロケットベルト     4:37
08     ロケットベルト 成功ジングル     0:10
09     グライダー イントロ     0:27
10     グライダー     4:39
11     グライダー 成功ジングル     0:11
12     結果画面     1:51
13     ジェット機     4:00
14     飛行機 時間切れジングル     0:10
15     スーパーロケットベルト     3:37
16     ロケットベルト 失敗ジングル     0:09
17     ペダルグライダー     4:10
18     グライダー 時間切れジングル     0:11
19     ムササビ・タイム     1:10
20     グライダー 失敗ジングル     0:09
21     飛行機 失敗ジングル     0:09
22     出現ジングル     0:12
23     おめでとうファンファーレ     0:15
24     スタッフクレジット     3:34
Disc length 37:49

―――――――――――――――――――――――――――――――――――――――――――――

虚木ノ咎人
arcane753.(MANYO・霜月はるか・日山尚)
NAM-003

C81 12/31(土)西あ-09b

其処は、空木の蝶が生まれた沼――
arcane753.(霜月はるか・MANYO・日山 尚)が贈るオリジナルアルバム「羽ノ亡キ蝶」に纏わる、
新たな物語を紡ぐボーカルCD

―――――――――――――――――――――――――――――――――――――――――――――

01.虚木ノ咎人
02.蜘蛛の居る沼
03.冬空に舞う蝶
04.虚木ノ咎人（off vocal)
05.蜘蛛の居る沼（off vocal)
06.冬空に舞う蝶（off vocal)

01 作・編曲：MANYO / 作詞：日山尚 / 歌：HaRuhiCo・霜月はるか
02 作曲：霜月はるか /編曲：MANYO / 作詞：日山尚 / 歌：霜月はるか
03 作・編曲：MANYO / 作詞：日山尚 / 歌：霜月はるか・真理絵

―――――――――――――――――――――――――――――――――――――――――――――

C81自摸第17弹

试听：

阅读全文…