前端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就不用重复的复制粘贴了
请先登录后,再回复
行家里手-技能共享平台