JS设计模式--门面模式

最新推荐文章于 2022-07-28 10:30:00 发布

孤独的造梦者~君

最新推荐文章于 2022-07-28 10:30:00 发布

阅读量158

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zz_xiaojun/article/details/109304709

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JS设计模式 --最简单的模式：门面模式

门面模式的概念：就是为了简化API接口(简化代码)
看下面例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="CommonUtil.js"></script>
</head>
<body>
    <script charset="utf-8">

        // JS设计模式 --最简单的模式  ：门面模式
        // 门面模式的概念：就是为了简化API接口(简化代码)


        // 比如：做一件事情必须要调用函数a和函数b
        // function a(x){
        //        //do somenthing
        // };
        // function b(y){
        //        //do somenthing
        // };

        // // 把这两个函数放在一个方法里,这样就可以只调用ab函数就可以实现函数a和函数b的效果了
        // // 就可以简化代码了  这样就是一个最简单的门面模式了
        // function ab(x,y){
        //    a(x);
        //    b(y);
        // };



        // 现在有一个需求：获得页面上的元素，给得到的元素设置CSS样式
        window.onload=function(){
            // 给一个元素设置一个CSS样式
             var div1=document.getElementById('div1');
            //  div1.style.color='red';
             // div1.style['color']='red';  //两种写法

            //  给多个元素设置一个CSS样式
            // setStyle(['div1','div2','div3'],'color','blue');

            // 给多个元素设置多个CSS样式
            setCss(['div1','div2','div3'],{
                background:'green',
                fontSize:'18px',
                color:'red',
            });

        };
        //    参数：id名称数组，要改变的属性，要改变的属性值
        function setStyle(elementsId,prop,val){
             for(var i=0;i<elementsId.length;i++){
               document.getElementById(elementsId[i]).style[prop]=val;
             }
        };
        
     // 这就是一个简单的门面模式 把setStyle包含在里面，调用setCss方法时同时调用了setStyle方法，简化代码
         //    参数：id名称数组，一个对象里面包含要改变的属性和要改变的属性值
        function setCss(elementsId,options){  
             for(var prop in options){  //prop指key值
                //  严谨的判断 判断key是不是对象本身的
                 if(!options.hasOwnProperty(prop)) continue;
                 setStyle(elementsId,prop,options[prop]); //把key和value分别取出来，在调用setStyle方法
             }
        };




    </script>

    <div id="div1">Hello Word!</div>
    <div id="div2">Hello Word!</div>
    <div id="div3">Hello Word!</div>
    
</body>
</html>

门面模式算是最简单也最常用的设计模式了，但是要区分好下篇文章的适配器模式哈。

孤独的造梦者~君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS设计模式--门面模式

JS设计模式 --最简单的模式：门面模式门面模式的概念：就是为了简化API接口(简化代码)看下面例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
复制链接

扫一扫