文字顯示過長時以省略符號顯示並提示完整文字

此CSS只作用於單行文字的顯示上

.text-overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

為了達到只在過長被省略才顯示提示，需要用javascript判斷一下 (這邊以jQuery為例)

$(function() {
    $('.text-overflow-ellipsis').each(function() {
        if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
            $(this).attr('title', $(this).text());
        }
    });
});

取得瀏覽器顯示的Scrollbar寬度

有些情況下，需要取得Scrollbar寬度來動態計算元件長寬
參考了一下網路上的作法，用jQuery寫了一個function來做這件事

/**
 * 1. Generate nested divs
 * 2. Calculate the width of inner div before and after scrollbar becomes visible.
 * @returns calculated scrollbar width
 */
function getScrollbarWidth() {
    var $tempNode = 
        $('<div/>')
            .css({
                width: 100,
                position: 'absolute',
                top: -1000
            })
            .append($('<div/>', { height: 100 }))
            .appendTo('body');
 
    var withoutSroll = $tempNode.children(':first').innerWidth();
    var withScroll = $tempNode.css({ 'overflow-y': 'scroll' })
                        .children(':first').innerWidth();

    $tempNode.remove();
    return withoutSroll - withScroll;
}

Backbone.js 雜記

版本1.0.0

• extend Backbone.View 時傳入的參數：events，格式為
  

  {'event selector': 'callback'}

  底層使用 jQuery.on(event, selector, callback) 來完成事件註冊，要注意的是如果 selector 有值，根據 jQuery api 這事件只會發生在根 DOM 下符合 selector 條件的子 DOM 上。

  When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.

• Backbone的View與Model要達到資料與顯示同步，得自行從View用listenTo()對Model的資料變動時的事件作處理

alert('8' > '10'); // true？

在javascript內字串比較是依據長度，由左而右依序比較，規則是：

• 相等則往下一位字元比較，反之則得出結果
• 有值的比沒值的大

A的編碼是0041
B的編碼是0042

alert(‘A’ > ‘AB’); // false，因為最高位(最左邊)字元相等，而AB比較長
alert(‘B’ > ‘AB’); // true，最高位字元B比A大

再來看 ‘8’，‘1’，‘0’
0的編碼為0030
1的編碼為0031
8的編碼為0038

alert(‘8’ > ‘10’); // true

由於最高位’8’比’1’來的大，所以結果為true

ResouseBundle.getBundle(String)在static情境下的問題

如果在一個static block或是static變數中呼叫ResourseBundle.getBundle(String)
在某些特定的情況下可能會造成MissingResourceException

其原因出在官方文件中敘述此method等同於呼叫
getBundle(baseName, Locale.getDefault(), this.getClass().getClassLoader())

問題在於this.getClass().getClassLoader()的部分，this在static內是取不到參照的
而實際上底層的實作是透過下列這段code取得ClassLoader

/*
 * Automatic determination of the ClassLoader to be used to load
 * resources on behalf of the client.  N.B. The client is getLoader's
 * caller's caller.
 */
private static ClassLoader getLoader() {
    Class[] stack = getClassContext();
    /* Magic number 2 identifies our caller's caller */
    Class c = stack[2];
    ClassLoader cl = (c == null) ? null : c.getClassLoader();
    if (cl == null) {
        // When the caller's loader is the boot class loader, cl is null
        // here. In that case, ClassLoader.getSystemClassLoader() may
        // return the same class loader that the application is
        // using. We therefore use a wrapper ClassLoader to create a
        // separate scope for bundles loaded on behalf of the Java
        // runtime so that these bundles cannot be returned from the
        // cache to the application (5048280).
        cl = RBClassLoader.INSTANCE;
    }
    return cl;
}

這樣會導致你取得的ClassLoader跟預期的結果不同
進而取不到目標resource

若要在static中使用ResourceBundle.getBundle(String)最好的方式還是自行呼叫
ResourseBundle.getBundle(baseName, Locale.getDefault(), [TargetClass].class.getClassLoader())