闭包的应用-点击图片切换至下一张图片

前端JS闭包的实际应用场景还是比较多的，这次开发就遇到了这样的需求，点击一张图片后，自动切换至下一张图片。如果使用JS闭包, 就能用很少的代码实现这一功能。

PS: 因为这一功能要求根据页面来做用户行为引导，只在版本更新之后第一次打开页面时才出现，因此要用到localStorage这个API。

解决过程：

1.在本地img文件中配置好每个页面所需要的图片，然后按照 ‘img/product/banner0.png’, ‘img/product/banner1.png’，  ‘img/product/banner2.png’ 这样的规律进行命名，因为需要根据点击的次数来加载下一张图片的地址。

 

2.写好前端html和样式，并绑定好点击事件

<!--用户行为引导-->
<div style="position: relative;" ng-if="isShowUserBanner">
    <img style="width: 72px;height: 40px;position: absolute;right: 30px;bottom: 160px;" src="img/bannar/skip.png" ng-click="skipPageBanner()">
    <img ng-style="{width:screenW+'px',height:screenH+'px'}"  ng-click="showNextBanner()" ng-src="{{userImage}}">
</div>
<!--用户行为引导end-->

3.封装一个服务（因为有很多页面需要用到，所以可以封装一个服务，增加代码的复用性）

.factory('showPageBanner', function ($window) {            //针对页面的用户行为引导banner
    //params: pageName指页面名称，如'myPage'，imgUrl-图片地址,如:'img/bannar/myModulePage/product-banner',bannerCount-当前页面的引导页总数，如:5
    return {
        isShowPageBanner: function ($scope, pageName, imgUrl, bannerCount) {
            var isAccess = $window.localStorage[pageName + 'Banner']; //根据浏览器缓存判断是否已经存在
            if (!isAccess) {
                $scope.userImage = imgUrl + 0 + '.png'; //动态拼出图片路径
                $scope.isShowUserBanner = true; 
                //利用闭包函数累计点击的次数
                var getIndex = (function () {
                    var i = 1;
                    return function () {
                        return i++;
                    };
                })();
                //点击切换至下一张图片
                $scope.showNextBanner = function () {
                    $window.localStorage[pageName + 'Banner'] = true;//根据页面名称存储至浏览器缓存
                    var str = getIndex();
                    if (str < bannerCount) {
                        $scope.userImage = imgUrl + str + '.png';
                    } else {
                        $scope.isShowUserBanner = false;
                    }
                };
                //点击‘跳过’，跳过用户行为引导
                $scope.skipPageBanner = function () {
                    $scope.isShowUserBanner = false;
                    $window.localStorage[pageName + 'Banner'] = true;
                };
            }
        }
    }
})

4.调用服务，实现功能

注入服务名称，然后在JS中调用
$scope.$on("$ionicView.loaded", function () {
    //判断是否加载用户行为引导Banner
    showPageBanner.isShowPageBanner($scope,'time','img/bannar/myModulePage/time-banner',4);
});

 

不足之处：其实这个功能如果能写成一个组件会更好，html就不用重复的复制粘贴了