[JavaScript知识库]Vue入门（十一）

1、vueX补充

mapState, mapGetters, mapActions, mapMutations

昨天我们讲到vueX的基本使用，当一个组件需要获取多个状态的时候，代码会有些重复和冗余。

这时候就需要用到 mapState 辅助函数帮助我们生成计算属性

可以参考官方教程加深理解

• 来看看怎么使用吧！
  我们先在vuex配置里定义一些全局数据

• 1、在store/index.js中

//1、在store/index.js中
export default new vueX.Store({
   state:{
       count:10
   }
})

• 2、在组件里

//2、组件里
import { mapState } from "vuex";

export default {
  name: "Store01",
  data() {
    return {};
  },
  //1）、把vueX中的state用计算属性，很麻烦
//   computed:{
//       count(){
//           return this.$store.state.count
//       }
//  },
//  2)、使用mapState（不能再写其它计算属性）
//   computed: mapState({
//     // 箭头函数可使代码更简练
//     count: state => state.count,
//   }),
//  3)、使用mapState继续简写（不能再写其它计算属性）
//   computed: mapState(['count']),
//  4)、使用mapState，这样写
    computed:{    
    //展开运算符    
        ...mapState(['count']),
        a:function(){
            return 250;
        },
    }
};

• 3、模板里

<p>count:{{count}}</p>

要知道，在学习mapState以前，模板里获取state的值如下：

<p>count:{{$store.state.count}}</p>

其他三个函数用法类似，具体可以参考官方教程

2、postman

测试工具，测试后端接口的

使用方法及安装请参考Postman使用详解

3、移动端事件

pc端事件学了不少，移动端却还没怎么接触过，作为一名合格的前端开发人员，这怎么行呢？
直接进入主题！

3.1、click事件（单击事件）

类似于PC端的click，移动端也有click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟

那么，为什么移动端我们不用click呢？

移动端的click有300ms延迟的问题，在移动端浏览器中，连续两次点击是缩放操作，所以在用户点击屏幕后，浏览器会检查在300ms内是否有另一次点击，如果没有才触发click事件。因为有延迟，所以不使用。

3.2、touch类事件（触摸事件）

touchstart：手指触摸到屏幕会触发
touchmove：当手指在屏幕上移动时，会触发
touchend：当手指离开屏幕时，会触发
touchcancel：可由系统进行的触发，比如系统中其他打断了touch的行为，可以触发该事件
onorientationchange: 屏幕旋转事件

部分代码实例

document.getElementById("box").ontouchstart  = function(){
		console.log('我被摸了');//手指触摸到屏幕
	}
document.getElementById("box").ontouchend    = function(){
		console.log('摸我的人走了');//手指离开屏幕
	}

3.3、touch的优先级高于click

3.4、阻止click事件的触发

我们在开发移动端时，如果只希望触发touch类型的事件，就需要阻止click事件的触发

要知道：当用户在点击屏幕的时候，系统会触发touch事件和click事件，touch事件优先级高，touch事件触发完毕后， 才会去触发click事件.

在touch事件里使用event.preventDefault()就可以阻止click事件的触发

document.getElementById("box").ontouchstart  = function(event){
	console.log('我又被摸了');//手指触摸到屏幕
	event.preventDefault();//阻止click事件
}

3.5、点透

什么是点透

1、A 和 B两个html元素不是后代和继承关系(如果是后代继承关系的话，就直接是冒泡了)， A的z-index大于B，把A显示在B之上
2、A元素绑定touch事件， 在touch事件处理函数里，让A立即消失，
3、B元素绑定click事件

<div id="boxparent">
     <div id="box1">
     </div>
     <div id="box2">
     </div> 
</div>

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.ontouchstart=function(e) {
   box1.style.display = 'none';
};
box2.onclick = function() {
  console.log('box2被点了');
}

解析：
当用户在box1元素上触摸屏幕时，先触发box1元素的touch事件，然后隐藏了box1，当click（延迟200-300ms）触发时，发现没有box1了，只有box2，所以，就触发了box2元素的click事件。

点透和冒泡的区别：

冒泡：是元素之间存在父子关系。
点透：元素之间没有父子关系（叠放关系），只是由于click在移动端里有200-300ms的延时造成的。

3.6、第三方的移动端事件库

1. zepto.js

   Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。

• tap — 元素 tap 的时候触发。（叩击）

• singleTap and doubleTap — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用 tap 代替)。

• longTap — 当一个元素被按住超过750ms触发。

• swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向)

2. touch.js

   touch.js 是百度开发的一款插件，针对移动端应用的事件插件
   绑定事件

   touch.on( element, types, callback );
   //功能描述：事件绑定方法，根据参数区分事件绑定和事件代理。
   

   解除事件绑定

   touch.off( element, types, callback )
   

参数说明：

事件类型：

touch的配置：

touch.config(config)

config为一个对象

{
   tap: true,           //tap类事件开关, 默认为true
   doubleTap: true,     //doubleTap事件开关， 默认为true
   hold: true,           //hold事件开关, 默认为true
   holdTime: 650,      //hold时间长度
   swipe: true,           //swipe事件开关
   swipeTime: 300,         //触发swipe事件的最大时长
   swipeMinDistance: 18,      //swipe移动最小距离
   swipeFactor: 5,        //加速因子, 值越大变化速率越快
   drag: true,         //drag事件开关
   pinch: true,       //pinch类事件开关
}

事件代理格式：

1）、事件代理绑定
touch.on( delegateElement, types, selector, callback );
2）、解除事件代理绑定
touch.off( delegateElement, types, selector, callback )

参数说明：

事件处理对象（event）：

事件处理函数的第一个参数为事件对象，除了原生属性之外，百度手势库还提供了部分新属性

4、下拉刷新上拉加载（Better-scroll）

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。better-scroll 是基于原生 JS 实现的，不依赖任何框架。

详情戳这儿