咨询AngularJS中结合_.memoize与_.random的代码运行原理

没问题，我来拆解这段AngularJS代码的工作原理，一步一步来：

这段代码实现了一个点击按钮随机切换页面多个区块显示/隐藏状态的功能，核心特点是：同一个区块的多次显示状态判断会得到完全一致的结果，不会出现同一区块内部分元素显示、部分隐藏的混乱情况。

先看核心的JavaScript部分：

$scope.changeVisibility = function() {
    $scope.visibility = _.memoize(function() {
        return !!_.random(0, 4);
    });
};
$scope.changeVisibility()

• $scope.changeVisibility()是初始化+重置函数，每次调用它都会重新定义$scope.visibility方法
• 重点是_.memoize——这是Lodash工具库的记忆化函数，作用是把传入的函数包装成“缓存结果”的版本：只要传入的参数相同，不管调用多少次，都会直接返回第一次计算的结果，不会重新执行原函数。
• 被包装的原函数逻辑：
  • _.random(0,4)生成0到4之间的随机整数（包含0和4）
  • !!把数字转换成布尔值：0会变成false，1-4会变成true。所以每个区块有20%的概率被隐藏，80%的概率显示。

再看对应的视图部分：

<button ng-click="changeVisibility()">Visibility change</button>
<div class="row">
    <div class="col" visible="visibility(1)"> 1. Row, 1. Col </div>
    <div class="col" visible="visibility(2)"> Mark Hane<br> 28 yearold<br> 234 SG </div>
    <div class="col" visible="visibility(3)">
        <div class="row" ng-if="visibility(3)"> 1. Row, 3. Col, 1. Row -- 1<br> 1. Row, 3. Col, 1. Row -- 2 </div>
        <div class="row" ng-if="visibility(3)"> 1. Row, 3. Col, 2. Row -- 1<br> 1. Row, 3. Col, 2. Row -- 2<br> 1. Row, 3. Col, 2. Row -- 3 </div>
    </div>
    <!-- ... 以此类推到visibility(9) -->
</div>

• 按钮绑定了ng-click="changeVisibility()"，点击后会重新生成$scope.visibility这个记忆化函数，相当于重置所有区块的显示状态规则
• 每个区块用visible指令（自定义的显示/隐藏指令，功能类似Angular原生的ng-show/ng-hide）或者ng-if调用visibility(n)，n是每个区块的唯一标识（1到9）
• 因为visibility是记忆化函数，比如第三个<div class="col">里的两个ng-if="visibility(3)"，不管调用多少次结果都一致——不会出现第一个子row显示、第二个子row隐藏的情况，保证了区块内部显示的一致性。

如果不用记忆化，直接把$scope.visibility写成：

$scope.visibility = function() {
    return !!_.random(0,4);
};

那每次调用visibility(n)都会重新生成随机数，同一个区块内的多个visibility(n)调用可能得到不同结果，导致页面显示混乱。而记忆化刚好解决了这个问题：同一个参数对应固定的随机结果，直到点击按钮重置规则。

内容的提问来源于stack exchange，提问作者phong ly