设计模式之惰性模式

最新推荐文章于 2022-08-15 21:49:02 发布

蚕豆糯米饭

最新推荐文章于 2022-08-15 21:49:02 发布

阅读量688

点赞数 1

分类专栏：前端文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/qq_42778289/article/details/122290066

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

惰性模式：
惰性模式并不是经典设计模式中的一种，可以把它看作一种拓展的设计模式。

它的使用场景通常如下：
当执行某段代码前有前置逻辑判断，但该前置逻辑判断在特定环境下不会发生改变时，只需要执行一次。
如果已知前置的逻辑判断后，仍然每次执行方法都走一遍前置的逻辑判断，则会造成 js 性能浪费。此时可以使用惰性模式来解决该问题。

它的实现方式：

利用自执行函数实现
利用函数重写来实现

举子：

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

  /**
   * 惰性模式
   * 惰性模式并不是经典设计模式中的一种，可以把它看作一种拓展的设计模式。
   * 
   * 使用场景：
   * 当执行某段代码前有前置逻辑判断，但该前置逻辑判断在特定环境下不会发生改变时，只用执行一次
   * 如果已知前置的逻辑判断后，仍然每次执行方法都走一遍前置的逻辑判断，则会造成 js 性能浪费
   * 此问题可以用惰性模式解决.
   * 
   * 实现方法：
   * 1. 自执行函数
   * 2. 函数重写
   * 
   * 可以观察一下点击下列button时候js的执行逻辑
   * */ 

  // some function
  function logText( param1 ) {
    if( param1 == 1 ) {
      console.log( 111 );
    } else if( param1 == 2 ) {
      console.log( 2222 );
    } else {
      console.log( 333333 );
    }
  }

  // execute himself
  var logText_lazy_execute = function( param1 ) {
    if( param1 == 1 ) {
      return () => {
        console.log( 111 );
      }
    } else if( param1 == 2 ) {
      return () => {
        console.log( 2222 );
      }
    } else {
      return () => {
        console.log( 333333 );
      }
    }
  }()

  // function rewrite
  var logText_lazy_rewrite = function( param1 ) {
    if( param1 == 1 ) {
      logText_lazy_rewrite = function() {
        console.log( 111 );
      }
    } else if( param1 == 2 ) {
      logText_lazy_rewrite = function() {
        console.log( 2222 );
      }
    } else {
      logText_lazy_rewrite = function() {
        console.log( 33333 );
      }
    }
    logText_lazy_rewrite( param1 )
  }

  </script>

  <div>
    <h1> hahaha </h1>
    <button onclick="logText( 1 )" > hahaha </button>
    <button onclick="logText( 2 )" > hahaha </button>
    <button onclick="logText( 3 )" > hahaha </button>
    <br/>
    <h1> execute function </h1>
    <button onclick="logText_lazy_execute( 1 )" > execute himself </button>
    <br/>
    <button onclick="logText_lazy_execute( 2 )" > execute himself </button>
    <br/>
    <button onclick="logText_lazy_execute( 3 )" > execute himself </button>
    <br/>
    <h1> rewrite function </h1>
    <button onclick="logText_lazy_rewrite( 1 )" > rewrite function </button>
    <br/>
    <button onclick="logText_lazy_rewrite( 2 )" > rewrite function </button>
    <br/>
    <button onclick="logText_lazy_rewrite( 3 )" > rewrite function </button>
  </div>
  
</body>
</html>

蚕豆糯米饭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设计模式之惰性模式

惰性模式：惰性模式并不是经典设计模式中的一种，可以把它看作一种拓展的设计模式。它的使用场景通常如下：当执行某段代码前有前置逻辑判断，但该前置逻辑判断在特定环境下不会发生改变时，只需要执行一次。如果已知前置的逻辑判断后，仍然每次执行方法都走一遍前置的逻辑判断，则会造成 js 性能浪费。此时可以使用惰性模式来解决该问题。它的实现方式：利用自执行函数实现利用函数重写来实现举子：var addEvent = function( dom, type, fn ) { if( dom.addEv
复制链接

扫一扫

专栏目录