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

1条回答我要回复

君娜1151天前

前端JS闭包的实际应用场景还是比较多的，这次开发就遇到了这样的需求，点击一张图片后，自动切换至下一张图片。如果使用JS闭包, 就能用很少的代码实现这一功能。
PS: 因为这一功能要求根据页面来做用户行为引导，只在版本更新之后第一次打开页面时才出现，因此要用到localStorage这个API。
解决过程：
1.在本地img文件中配置好每个页面所需要的图片，然后按照 ‘img/product/banner0.png’, ‘img/product/banner1.png’，  ‘img/product/banner2.png’ 这样的规律进行命名，因为需要根据点击的次数来加载下一张图片的地址。
2.写好前端html和样式，并绑定好点击事件<!--用户行为引导-->
<div ng-if="isShowUserBanner">
<img src="img/bannar/skip.png" ng-click="skipPageBanner()">
<img ng- 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就不用重复的复制粘贴了