JavaScript 一些使用方法

1.jq 另一种取值方式

// var val =  $input.val()
var val = $("#input")['val'] 

2.正则表达式html模板的运用

<div id="template">
	<div>{{ firstName }} {{ lastName }}</div>
</div>

var mjson = { firstName:'lyqhn2012', lastName :'Hello' }

function createTemplate(tag,items){
	var tpls = {
		personInfo: $("#template").html()
	}
	var template =  tpls[tag]
	var regx = template.match(/({{.*?}})/g)
	
	regx.forEach(function(ap){
	   	template = template.replace(ap,eval(ap.replace(/^{{|}}$|\s/g,"")))   
	})
	
	return template
}
createTemplate("personInfo",mjson)

3.打乱数组顺序

var arr =[1,2,3,4];

arr.sort(function(){
	return Math.random() - 0.5;
})

// [4, 2, 1, 3]

4.js中this的指向

this 是永远指向最后调用它的那个对象

var o = {
  a: 2,
  m: function(){
    return this.a + 1;
  }
};
// 当调用 o.m 时,'this'指向了o.
console.log(o.m()); // 3

4.通过监听scroll事件，实现无限加载

// 注册无限加载事件
$(".infinite-content").height(document.documentElement.clientHeight).scroll(function(){
	var scrollTop = event.target.scrollTop || document.body.scrollTop,
		clientHeight = event.target.clientHeight,
		scrollHeight = event.target.scrollHeight,
		offsetBottom = scrollHeight - scrollTop - clientHeight;
		
	// 默认50
	var distance = event.target.dataset.instance || 50;
	// 判断执行状态
	if(offsetBottom <= distance){
		$(this).trigger("infinite");
	}
	return false;
})

var isLoading = false,
	maxCount = 14,
	lastCount = $(".productli").length;
	  		
// 注册加载事件,简单示例
$(".infinite-content").on("infinite",function(event){
	  			
		// 延时器，模拟加载动作
		var timer = setTimeout(renderHTML,1000);
		var self = this
			
		function renderHTML(){
			var selfHtml = "",length = 5;
				
			if(lastCount >= maxCount){
				clearTimeout(timer);
				// 注销无限加载事件
				$.detachInfiniteScroll($(self))
				return false;
			}
			
			for(var i=0;i< length; i++){
				selfHtml += $("#prodsTemplate").html();
			}
			
			lastCount += length;
			// 添加到列表
			$(".infinite-content-list").append(selfHtml);
			
			isLoading = false;
		}
});
// 注销无限加载
$.detachInfiniteScroll = function(eleObj) {
	eleObj.find(".infinite-scroll-preloader").remove();
	eleObj.off("infinite")
}
	

5.实现下拉效果(仅供参考)

.infinite-content {
    overflow: auto;
    margin-top: -50px;
}
.pull-to-content:before {
	font-size: 30px;
    content: "\e62e";
    line-height: 50px;
    display: block;
    background: #f9f9f9;
    text-align: center;
}

var scrollTop = 0,startY = 0,maxDistance = 50,isTrigger = false
// 下拉,注册 pullstart 事件接受返回结果
$(".pull-to-content").height(document.documentElement.clientHeight).scroll(function(){
		scrollTop = event.target.scrollTop || document.body.scrollTop;
		
	}).on("touchstart",function(event){
		startY = event.targetTouches[0].pageY;
		
	}).on("touchmove",function(event){
		var moveY = event.targetTouches[0].pageY;
		var distance = moveY - startY;
		
		if(scrollTop == 0 && moveY > startY && distance <= maxDistance){
			$(this).css({
				"transform":"translate3d(0px, "+ distance +"px, 0px)",
				"transition-duration":"0ms"})
			
			if(distance >= maxDistance -5 && !isTrigger){
				$(this).trigger("pullstart");
				isTrigger = true;
			}
		}
		
	}).on("touchend",function(event){
		isTrigger = false;
		$(this).css({"transform":"translate3d(0px, 0px, 0px)","transition-duration":"500ms"})
	})

$(".pull-to-content").on("pullstart",function(){
	console.log("下拉成功，执行操作")
})

6.网页禁用鼠标右键

//禁止使用右键
window.oncontextmenu = function () {
   return false;
}

7.获取鼠标或手指点击位置

function getTouches(event) {
	// touchstart touchmove
	if (event.touches !== undefined) {
		return {
			x: event.touches[0].pageX,
			y: event.touches[0].pageY
		};
	}
	// mousedown click event
	if (event.touches === undefined) {
		if (event.pageX !== undefined) {
			return {
				x: event.pageX,
				y: event.pageY
			};
		}
	
	if (event.pageX === undefined) {
		return {
				x: event.clientX,
				y: event.clientY
			};
		}
	}
}

8.自定义事件

let app = document.querySelector('#app');
// 绑定事件， 传递过来的值可以通过ev.detail 来获取
app.addEventListener('cat',(ev) => {
    const { detail } = ev;
    console.log(detail);  // hello
})
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
// 派发事件，需要传入两个参数，一个是事件类型，另外一个是一个对象，detail就是传递过去的值
app.dispatchEvent(event);