链式调用

方才在JS里写CSS的时候，遇到了个比较恶心的问题

    this.createItem = function (text){
        return $c('div', function (ele){
            ele.append('div', function (contentEle){
                contentEle[0].className = 'content';
                if ( typeof text === 'string' ){
                    contentEle.text(text);
                }else{
                    contentEle.append(text);
                }
                contentEle.css({
                    'position': 'relative'
                });
            });
            ele.css({
                'position': 'relative'
            });
            ele.append($c('div', function (closeTag){
                closeTag[0].className = 'closeTag';
                closeTag.text('x');
                closeTag.css({
                    'position': 'absolute',
                    'right': '0px',
                    'top': '0px',
                    'cursor': 'pointer'
                });
            }))
        });
    };

那段css({})。。。。。。。打起来发现有点那啥的…………

于是想起来以前听闻过的 链式调用 ，遂马上开写

var cssLine = function (ele){
    var keys = Object.keys(ele[0].style);
    var obj = new function (){
        var cssObj = this;
        this.lineEnd = function (){
            return ele;
        };
        for ( var i in keys )
            this[ keys[i] ] = function (key){
                return function (set){
                    ele[0].style[key] = set;
                    return cssObj;
                }
            }(keys[i]);
    };
    return obj;
};

//use
cssLine(document.querySelectorAll('body'))
    .transition('opacity 1s')
    .opacity(0.5);

setTimeout(function (){
    cssLine(document.querySelectorAll('body'))
        .transition('opacity 1s')
        .opacity('1');
}, 1000);

好吧，这样写确实优雅了很多……而且简洁明了