js设计模式

128 阅读1分钟

1.备忘录模式

概念:在不破坏封装的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。这样以后就可将该对象恢复到原先保存的状态。

作用:在我们的开发中偶尔会遇到这样一种情况,需要对用户的行为进行撤销。要想实现撤销,首先需要保存软件系统的历史状态,当用户执行撤销时用之前的状态覆盖当前状态。本节介绍的备忘录模式提供了一种状态恢复的实现机制,使得用户可以方便的回到一个特定的历史步骤。

使用场景:分页控件、撤销组件

var Page = function(){  let page = 1,    cache = {},    data;  return function( page ){    if ( cache[ page ] ){        data =  cache[ page ];        render( data );    }else{        Ajax.send( 'cgi.xx.com/xxx', function( data ){           cache[ page ] = data;           render( data );        });    }  }}();

优点:备忘录模式在js中经常用于数据缓存。

2.迭代器模式

3.解释器模式

概念:对于一种语言,给出其文法形式,并定义一种解释器来解析句子当有一个语言需要解释执行,并且可以将该语言中的句子表示为一个抽象语法树的时候,可以考虑使用解释器模式。

<body>    <div class="wrap">        <div class="link-inner">            <a href="#">link</a>        </div>        <div class="button-inner">            <button id="button">text</button>        </div>    </div></body><script>    // 根据一个元素和他的一个父元素,解析成XX>XX>XX的格式    // 这个getSiblingName 只返回后缀部分,不包括自己本来的节点名字,节点元素名在后面的函数里拼如    function getSiblingName(node) {        if (node.previousSibling) {            var name = '';            var count = 1;            var nodeName = node.nodeName;            var sibling = node.previousSibling;            while (sibling) {                // 元素节点并且类型相同并且有名字                if (sibling.nodeType === 1 && sibling.nodeType === node.nodeType && sibling.nodeName) {                    if (nodeName === sibling.nodeName) {                        count++;                        name += count;                    } else {                        count = 1;                        name += '|' + sibling.nodeName.toUpperCase();                    }                }                sibling = sibling.previousSibling;            }            return name;        } else {            // 不存在就返回空字符串了            return '';        }    }    var Interpreter = (function () {        return function (node, wrap) {            var path = [];            wrap = wrap || document;            // 处理特殊情况            if (node === wrap) {                if (wrap.nodeType === 1) {                    path.push(wrap.nodeName.toUpperCase());                }                return path;            } else if (node.parentNode !== wrap) {                path = arguments.callee(node.parentNode, wrap);            } else {                if (wrap.nodeType === 1) {                    path.push(wrap.nodeName.toUpperCase());                }            }            var sublingsNames = getSiblingName(node);            if (node.nodeType === 1) {                path.push(node.nodeName.toUpperCase() + sublingsNames);            }            return path;        }    })();    var path = document.getElementById('button')    path.onclick = function () {        alert(Interpreter(document.getElementById('button')))    }</script>

缺点:1.解释器模式速度较慢,适用于比较简单的语法格式

           2.错误调试比较困难

优点:1.有效控制模块之间接口的复杂性,对于那种执行频率不高但代码频率足够高,且多样性很强的功能,解释器是非常适合的模式。

           2.可以方便地跨语言和跨平台