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>