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);