JS链式调用的实现方法_javascript技巧-js教程-PHP中文网

JS链式调用的实现方法_javascript技巧

php中文网

发布： 2016-05-16 17:40:51

原创

1700人浏览过

链式调用
链式调用其实只不过是一种语法招数。它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的。该技术包括两个部分：

一个创建代表HTML元素的对象的工厂。

一批对这个HTML元素执行某些操作的方法。

调用链的结构
$函数负责创建支持链式调用的对象

复制代码代码如下:

(function() {
    /*
     * 创建一个私有class
     * @param {Object} els  arguments 所有参数组成的类数组
     */
    function _$(els) {
        this.elements = [];             //存放HTML元素
        for(var i=0, len=els.length; i            var element = els[i];
            if(typeof element === 'string') {
                element = document.getElementById(element);
            }
            this.elements.push(element);
        }
    }
    //对HTML元素可执行的操作
    _$.prototype = {
        each: function() {},
        setStyle: function() {},
        show: function() {},
        addEvent: function() {},
    };    
    //对外开放的接口
    window.$ = function() {
        return new _$(arguments);
    };   
})();

由于所有对象都会继承其原型对象的属性和方法，所以我们可以让定义在原型对象中的那些方法都返回用以调用方法的实例对象的引用，这样就可以对那些方法进行链式调用了。

复制代码代码如下:

//----------------------- test --------
$(window).addEvent('load', function() {
    $('test-1', 'test-2').show()
    .setStyle('color', 'red')
    .addEvent('click', function() {
        $(this).setStyle('color', 'green');
    });
})

链式调用的方法获取数据
使用回调函数从支持链式调用的方法获取数据。链式调用很适合赋值器方法，但对于取值器方法，你可能希望他们返回你要的数据而不是this(调用该方法的对象).解决方案：利用回调技术返回所要的数据.

MATLAB与VB混合编程技术研究 WORD版

本文档主要讲述的是MATLAB与VB混合编程技术研究；着重探讨了在VB应用程序中集成MATLAB实现程序优化的四种方法，即利用Matrix VB、调用DLL动态链接库、应用Active自动化技术和动态数据交换技术,并分析了集成过程中的关键问题及其基本步骤。这种混合编程实现了VB的可视化界面与MATLAB强大的数值分析能力的结合。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

查看详情

复制代码代码如下:

window.API = window.API || function() {
    var name = 'mackxu';
    //特权方法
    this.setName = function(name0) {
        name = name0;
        return this;
    };
    this.getName = function(callback) {
        callback.call(this, name);
        return this;
    };
};
//------------- test ---
var obj = new API();
obj.getName(console.log).setName('zhangsan').getName(console.log);

设计一个支持方法链式调用的JS库
JS库特征：

事件：添加和删除事件监听器、对事件对象进行规划化处理

DOM：类名管理、样式管理

Ajax：对XMLHttpRequest进行规范化处理

复制代码代码如下:

Function.prototype.method = function(name, fn) {
    this.prototype[name] = fn;
    return this;
};
(function() {
    function _$(els) {
        //...
    }
    /*
     * Events
     *      addEvent
     *      removeEvent
     */
    _$.method('addEvent', function(type, fn) {
        //...  
    }).method('removeEvent', function(type, fn) {

    })
    /*
     * DOM
     *      addClass
     *      removeClass
     *      hover
     *      hasClass
     *      getClass
     *      getStyle
     *      setStyle
     */
    .method('addClass', function(classname) {
        //...
    }).method('removeClass', function(classname) {
        //...
    }).method('hover', function(newclass, oldclass) {
        //...
    }).method('hasClass', function(classname) {
        //...
    }).method('getClass', function(classname) {
        //...
    }).method('getStyle', function(prop) {
        //...
    }).method('setStyle', function(prop, val) {
        //...
    })
    /*
     * AJAX
     *      ajax
     */
    .method('ajax', function(url, method) {
        //...
    });

    window.$ = function() {
        return new _$(arguments);
    };
    //解决JS库命名冲突问题
    window.installHelper = function(scope, interface) {
        scope[interface] = function() {
            return _$(arguments)
        }
    }  
})();