鐃宿種申鐃塾居申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃獣わ申鐃塾わ申鐃緒申鐃宿￥申鐃緒申鐃瞬わ申覆鐃緒申里脳匆鐃夙常申録鐃緒申

鐃緒申鐃緒申廛襯鰹申鐃緒申匹蓮鐃重�鐃緒申鐃書き器申鐃緒申鐃銃わ申鐃緒申泙鐃緒申鐃�

1. Branch when possible - 分鐃緒申鐃熟なわ申呂鐃緒申

鐃緒申鐃緒申麓鐃緒申鐃薯見わ申鐃緒申鐃緒申鐃潤い鐃叔わ申鐃順う鐃緒申鐃緒申鐃緒申鐃緒申鐃瞬ラウ鐃緒申鐃緒申鐃出縁申鐃緒申addListener()鐃緒申佑鐃緒申襦ｏ申鐃叔緒申鐃緒申鐃緒申鐃粛わ申鐃緒申弌鐃緒申焚鐃緒申鐃�OK鐃緒申

function addListener(el, type, fn) {
    if ( window.addEventListener ) {
        el.addEventListener(type, fn, false);
    } else if ( window.attachEvent ) {
        var f = function() {
            fn.call(el, window.event);
         };
         el.attachEvent('on'+type, f);
    } else {
         element['on'+type] = fn;
    }
};

鐃叔も、鐃緒申鐃緒申鐃緒申鐃�addListener()鐃渋行のわ申鐃俊に￥申鐃瞬ラウ鐃緒申鐃緒申判鐃緒申両鐃緒申分鐃緒申鐃緒申鐃緒申必鐃竣わ申鐃緒申鐃緒申泙鐃緒申鐃宿器申鐃夙わ申鐃緒申百鐃緒申屮薀�鐃緒申鐃緒申判鐃緒申鬚靴討鐃緒申泙鐃緒申里任鐃緒申鐃�

鐃淑駕申鐃塾よう鐃祝わ申鐃緒申鐃出￥申鐃緒申鐃淑�鐃緒申鐃熟最緒申琉鐃緒申悩僂澆泙鐃緒申鐃�

var addListener = (function() {
    if ( window.addEventListener ) {
        return function(el, type, fn) {
            el.addEventListener(type, fn, false);
        };
    } else if ( window.attachEvent ) {
        return function(el, type, fn) {
            var f = function() {
                fn.call(el, window.event);
            };
            el.attachEvent('on'+type, f);
        };
    } else {
        return function(el, type, fn) {
            el['on'+type] = fn;
        }
    }
})();

2. Make Flags - 鐃春ラグ鐃緒申鐃獣てわ申鐃緒申鐃緒申

鐃緒申鐃緒申鐃叔のポワ申鐃緒申箸蓮鐃�!!expresssion鐃緒申expression鐃塾件申鐃緒申鐃緒申鐃叔わ申鐃緒申屐鐃緒申鐃緒申佑砲覆鐃殉わ申鐃緒申鐃塾わ申鐃緒申

function toBool(expression){ return expression ? true : false }

鐃夙わ申襪鰹申箸鐃緒申鐃緒申泙鐃緒申鐃緒申鐃�!!expresssion鐃緒申鐃緒申鐃緒申鐃淑件申任鐃緒申鐃�

3. Make bridges - 鐃緒申鐃熟わ申鐃緒申鐃緒申鐃宿わ申鐃術意わ申鐃処う

鐃緒申鐃緒申鐃緒申鐃緒申如鐃�

addListener(element, 'click', getUserNameById);
function getUserNameById(e) {
    var id = this.id;
    // id鐃緒申鐃緒申鐃�
}

鐃夙書くと￥申鐃瞬ラウ鐃緒申鐃緒申鐃緒申存鐃緒申鐃緒申鐃宿わ申鐃緒申鐃緒申討鐃緒申泙鐃緒申泙鐃緒申鐃�this鐃祝駕申鐃緒申鐃緒申鐃暑か鐃熟ブラウ鐃緒申鐃緒申鐃祝わ申辰動曚覆襪�鐃緒申任鐃緒申鐃�

鐃淑駕申鐃塾よう鐃祝駈申鐃熟わ申鐃緒申鐃緒申鐃宿わ申颪韻弌鐃緒申鐃緒申譴�鐃緒申茲件申泙鐃緒申鐃�

function getUserNameById(id) {
    // id鐃緒申鐃緒申鐃�
}
function getUserNameByIdBridge (e) { // 鐃緒申鐃緒申廼鐃緒申呂鐃�
    getUserNameById(this.id);
}
addListener(element, 'click', getUserNameByIdBridge);

4. Try Event Delegation - 鐃緒申鐃駿ワ申醗兢鐃緒申鐃夙ってみよう

<ul id="example">
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
    <li>thunk</li>
</ul>

鐃塾よう鐃緒申HTML鐃祝￥申li鐃薯クワ申奪鐃緒申鐃緒申鐃緒申櫃鵬鐃緒申鐃緒申鬚靴鐃緒申鐃緒申箸鐃緒申泙鐃緒申鐃緒申鐃緒申両鐃順、li鐃緒申鐃夙にワ申鐃駿ワ申肇魯鐃宿ラー鐃緒申鐃宿加わ申鐃緒申鐃所、鐃緒申鐃緒申鐃叔わ申ul鐃祝以駕申鐃塾ハワ申疋蕁種申鐃緒申媛辰鐃緒申鐃出よい鐃塾でわ申鐃緒申

var element = document.getElementById('example');
addListener(element, 'click', handleClick);
function handleClick(e) {
    var element = e.target || e.srcElement; // 鐃緒申鐃緒申鐃�element鐃緒申ul鐃緒申鐃緒申離鐃緒申鐃獣ワ申鐃緒申鐃曙たli
    // element鐃緒申鐃緒申鐃�
}

5. Include methods with your getElementsByWhatever - getElementsByHogeHoge鐃祝メソ鐃獣ドわ申鐃熟わ申鐃緒申茲�鐃祝わ申鐃銃わ申鐃緒申鐃緒申

getElementsByHogeHogge()鐃夙わ申鐃緒申鐃緒申DOM鐃緒申鐃醇か鐃初規鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申任鐃緒申鐃緒申鐃緒申个鐃緒申箸鐃緒申鐃緒申愎鐃緒申呂茲�鐃夙わ申鐃緒申鐃夙思わ申鐃殉わ申鐃緒申鐃緒申鐃緒申鐃熟わ申鐃緒申粉鐃緒申鐃緒申鐃�

function getElementsBySelector(selector) {
    var elements = [];
    for ( ... ) {
        if ( ... ) elements[elements.length] = el;
    }
    return elements;
}

鐃緒申鐃緒申鐃叔￥申鐃緒申鐃緒申鐃緒申鐃緒申縫鐃緒申鐃緒申鐃出ッワ申鐃舜随申鐃緒申鐃熟わ申鐃緒申茲�鐃祝わ申鐃銃わ申鐃緒申鐃出￥申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申任鐃緒申鐃�

function getElementsBySelector(selector, callback) {
    var elements = [];
    for ( ... ) {
        if ( ... ) {
            elements[elements.length] = el;
            callback(el);
        }
    }
    return elements;
}
getElementsBySelector('#example p a', function(el) {
    // 鐃緒申鐃緒申 el 鐃緒申鐃緒申鐃�
});

6. Encapsulate your code - 鐃緒申鐃緒申鐃宿をカプワ申鐃暑化鐃緒申鐃処う

鐃緒申鐃緒申蓮鐃緒申愎鐃緒申妊鐃緒申鐃緒申鐃緒申廚鐃緒申鐃緒申鐃緒申箸鐃緒申鐃緒申鐃緒申箸任鐃緒申諭鐃�

var a = 'foo';
var b = function() {
    // 鐃淑んか緒申鐃緒申
};
var c = {
    thunk: function() {
    },
    baz: [false, true, false]
};

鐃夙書くわ申鐃術随申a,b,c鐃緒申Window鐃緒申鐃緒申鐃緒申鐃出ワ申砲覆辰討鐃緒申泙鐃緒申泙鐃緒申鐃緒申鐃�

(function() {
  var a = 'foo';
  var b = function() {
    // 鐃淑んか緒申鐃緒申
  };
  var c = {
    thunk: function() {
    },
    baz: [false, true, false]
  };
}();

鐃夙わ申鐃緒申弌鐃�Window鐃緒申鐃緒申鐃緒申鐃出ワ申鐃緒申竸鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃殉わ申鐃緒申余鐃縮でわ申鐃緒申鐃緒申Google Analytics鐃緒申urchin.js鐃熟わ申鐃緒申鮓�緒申鐃獣わ申鐃淳わ申鐃緒申鐃夙思わ申鐃殉わ申鐃緒申

7. Reinvent the Wheel - 鐃緒申鐃舜わ申鐃夙�鐃緒申鐃緒申鐃処う

鐃緒申鐃緒申鐃銃逸申鐃瞬器申鐃獣わ申鐃緒申鐃緒申鐃緒申里鐃緒申鐃緒申鐃緒申鐃緒申任鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申泙鐃緒申鐃�

Digital Web Magazine - Seven JavaScript Techniques You Should Be Using Today
Often, when I sit down to prototype out code or build a widget, I鐃緒申m almost positive someone has already accomplished what I鐃緒申m about to attempt. But nevertheless, it鐃緒申s worth my effort to see if I can do it better. Not every wheel is round. Nor does every round wheel have twenty-inch shiny spinners. Imagination with such a highly flexible language can take you a long way.
[鐃緒申鐃緒申鐃宿わ申遒件申颪�わ申鐃緒申鐃所ウ鐃緒申鐃緒申鐃緒申鐃獣トわ申鐃獣わ申鐃所し鐃銃わ申鐃緒申箸鐃緒申鐃緒申鐃淑�鐃緒申鐃緒申鐃緒申鐃緒申箸鐃緒申討鐃緒申襪鰹申箸鐃緒申未鐃獣�鐃緒申鐃緒申鐃緒申鐃叔にわ申辰討鐃緒申鐃緒申鐃緒申鐃緒申鐃夙わ申鐃緒申鐃塾わ申鐃緒申鐃緒申鐃緒申楼呂任鐃緒申鐃緒申鐃緒申鐃叔も、鐃緒申辰箸鐃緒申泙鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申里鐃緒申鐃淑�鐃叔試す鐃緒申鐃粛はわ申鐃緒申泙鐃緒申鐃緒申鐃緒申亮鐃緒申悗鐃緒申鐃緒申討鐃緒申櫃鐃緒申謄團鐃緒申團鐃緒申箸鐃緒申鐃緒申錣縁申任呂覆鐃緒申里任鐃緒申鐃緒申鐃緒申鐃循ど緒申鐃緒申文鐃緒申鐃淑のでわ申鐃緒申鐃初、鐃緒申鐃緒申鐃熟の果てまで行ってわ申鐃殉わ申鐃緒申?]

Perl Monger鐃緒申多鐃緒申鐃緒申JavaScript鐃祝わ申魯泙鐃緒申鐃粛鰹申鐃緒申鐃緒申鐃叔わ申鐃粛￥申鐃叔わ申CPAN鐃緒申鐃緒申鐃緒申鐃淳わ申鐃緒申鐃淑わ申鐃緒申function $(id){ return document.getElementById(id) }鐃緒申鐃初い鐃淑らい鐃緒申鐃緒申任鐃緒申発鐃緒申鐃緒申鐃暑け鐃宿￥申addLisetner()鐃緒申鐃初い鐃叔わ申發�鐃緒申鐃峻ペわ申鐃緒申鐃緒申砲覆襪�....鐃緒申鐃夙わ申鐃獣て￥申JSAN鐃熟わ申鐃緒申辰鐃�CPAN鐃緒申鐃緒申鐃緒申鐃緒申茲�鐃淑居申鐃盾す鐃暑し....

Dan the Rhino Tamer