js apply 结合多态的应用

时间 2019-11-24
原文原文链接
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="./jquery.js"></script>
    <script>


 
        //  this指向外部数据.
        Function.prototype.bind = function (context) {
            var _self = this;
            return function () {
                // 修正this的指向问题.
                return _self.apply(context, arguments);
            }
        }


        /*
            能够修正配置文件,其余的操做都是一致的, 只有配置项是不一样的
        */

        var nodes = {
            root: '#root',
            table: '#tb',

            getRoot: function () {
                console.log(this.root);
            }
        };


        var nodes2 = {
            root: '#root1',
            table: '#tb1',

            getRoot: function () {
                console.log(this.root);
            }
        }


        var Ppt = function () {
            var root = this.root;
            var tb = this.tb;
            

            return {

                getRoot: function () {
                    return root;
                }
            }

        }.bind(nodes);



        var Tables = function () {
            var root = this.root;
            var tb = this.tb;

            return {
                getRoot: function () {
                    return root;
                }

            }
        }.bind(nodes2);



        // 对象的多态处理, 
        function getRoot(objects)
        {
            return objects.getRoot();
        }


        //  不一样的配置, 实现不一样处理, 具体的处理逻辑由子类去修改处理,
        console.log(getRoot(Ppt()));
        console.log(getRoot(Tables()));



       /*
       使用场景 :  多个页面上须要不一样的节点操做, 可是某些操做名称是一致的, 
                  那么能够将须要操做的节点写成配置文件的形式,对数据进行封装处理,
                 经过 bind方法将配置对象与操做对象进行耦合处理,
              
                 在this的指向被调整后, 每一个封装的对象是独立, 可是它们也具备共性, 此时使用多态去操做, 
                 绑定一些事件, 对象节点进行增删处理, 或是样式上的调整.

                 也能够对操做对象进行抽象,在父类中触发行为上的操做, 不用关心子类的实现.
        
       */



    </script>

</head>
<body>
    <div id="a"></div>         
</body>
</html>
js apply 结合 多态的应用

js apply 结合多态的应用
