JS經常使用代碼片斷

時間  2019-12-05
標籤 經常 使用 代碼 片斷 欄目 JavaScript 简体版
原文   原文鏈接

js監聽滾動事件

window.onscroll=function(){ getScrollTop(); } 
function getScrollTop() { console.log(document.documentElement.scrollTop) }
複製代碼

獲取一個元素到視圖頂部的距離

var height = $(this).offset().top;
複製代碼

向上滾動相應的距離

$('html,body').animate({scrollTop:height})
複製代碼

頁面跳轉帶參數傳值

頁面參數傳值的做用就是從一個頁面跳到另外一個頁面，比方說從標題跳到詳情，須要傳遞參數到詳情頁面再調這個，可使用這個方法進行傳值，而後再請求接口。html

使用location跳轉:

location.href = "url.html?id=" + id
複製代碼

使用a標籤跳轉

<a :href="'url.html?id=' + id"></a>
複製代碼

獲取地址參數的方法

function getUrlParam(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	var r = window.location.search.substr(1).match(reg);
	if(r != null) {
		return(r[2]);
	}
}
複製代碼

調用地址參數的方法

getUrlParam('id')
複製代碼

控制手機物理返回按鍵

pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); }, 
複製代碼

進行調用

pushHistory();
window.addEventListener("popstate", function(e) {
  location.href=""''
}, false);
複製代碼

判斷是否在微信瀏覽器打開

有時候咱們寫的前端頁面，須要在不一樣的終端中顯示，好比微信瀏覽器、h五、WebApp，不用的終端須要不一樣的顯示方法，好比頂部導航欄在微信瀏覽器內是不須要顯示的，由於用戶體驗不太友好，就可使用這個方法進行隱藏。前端

function is_weixn() {
	var ua = navigator.userAgent.toLowerCase();
	if(ua.match(/MicroMessenger/i) == "micromessenger") {		
	  //TODO
	} else {
	  //TODO
}
}
複製代碼

判斷是Android仍是IOS

寫好的網頁須要在不一樣終端顯示，但h5在蘋果和安卓有些顯示效果是不一樣的，好比input標籤和font-weight屬性。由於蘋果會將有些屬性進行處理，因此調用這個方法能夠對有些顯示不一樣的標籤進行校訂，以達到相同的顯示結果。vue

var u = navigator.userAgent;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
				var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
				var b = document.getElementById('titleId');
				if(isAndroid) {
					//TODO

			}else if(isiOS) {
					//TODO

			};
複製代碼

判斷是pc端仍是移動端

browserRedirect() {
		const that = this;
		var sUserAgent = navigator.userAgent.toLowerCase();
		var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
		var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
		var bIsMidp = sUserAgent.match(/midp/i) == "midp";
		var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
		var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
		var bIsAndroid = sUserAgent.match(/android/i) == "android";
		var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
		var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
		document.writeln("您的瀏覽設備爲：");
		if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
			that.plant='wap';
		} else {
			that.plant='pc';
		}
	}
複製代碼

分頁加載數據 後臺拿到數據，前端進行渲染，數據多的狀況下要進行分頁顯示，提高用戶體驗，減小過的請求形成沒必要要的數據浪費和卡頓

//獲取滾動條當前的位置 
	getScrollTop() {
		var scrollTop = 0;
		if(document.documentElement && document.documentElement.scrollTop) {
			scrollTop = document.documentElement.scrollTop;
		} else if(document.body) {
			scrollTop = document.body.scrollTop;
		}
		return scrollTop;
	},

	//獲取當前可視範圍的高度 
	getClientHeight() {
		var clientHeight = 0;
		if(document.body.clientHeight && document.documentElement.clientHeight) {
			clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
		} else {
			clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
		}
		return clientHeight;
	},

	//獲取文檔完整的高度 
	getScrollHeight() {
		return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
	}
	//分頁加載數據實現
	window.onscroll = function() {
	if(that.getScrollTop() + that.getClientHeight() == that.getScrollHeight()) {
		axios.post(apiurl, {
				'page': that.page++; //滑動到底部讓頁碼數+1
			}).then(function(res) {
				data= data.concat(res.data.data.data);//使用js數組的concat方法將數據拼接起來.
			})
			.catch(function(error) {
				console.log(error);
			});
	}
}
複製代碼

可視化區域加載

$(function(){
				var object=$("object"); //獲得導航對象
				var win=$(window); //獲得窗口對象
				var sc=$(document);//獲得document文檔對象。
				win.scroll(function(){
				  if(sc.scrollTop()>=20){ //距離頂部大於20執行操做
						//TODO 
				  }else{
						//TODO
				  }
				}) 
				});
複製代碼

獲取驗證碼倒計時

jquery實現方法

var yzm = $('.get-yzm');//獲取驗證碼節點
    function time() {
        if (wait < 0) {
        yzm.text("獲取驗證碼"); //改變文字
        yzm.removeAttr("disabled"); //按鈕設置爲可點擊狀態
        wait = 60; //設置60秒倒計時
    		} else {
            yzm.attr("disabled", "true"); //開始計時，將按鈕設置爲不可點擊
            yzm.text(wait + "秒後重獲取"); //改變文字
            	wait--;
            setTimeout(function () {
            	time();
            }, 1000)
                }
            }
複製代碼

vue實現方法

<button class="getYZM" @click="onGetYZM()" :disabled="yzmBtn">{{yzmTip}}<button>
data:{
	yzmBtn:false,
	yzmTip:'獲取驗證碼',
}
methods:{
	function time() {
		if (wait < 0) {
	   that.yzmTip="獲取驗證碼"
		that.yzmBtn=false
		  wait = 60;
	 } else {
			that.yzmBtn=true;
			 that.yzmTip= wait + "秒後獲取";
			 wait -- ;
			setTimeout(function () {
				time();
			}, 1000)
		}
}
複製代碼

時間格式化輸出

製做時間倒計時的時候，只要傳入相應的秒數單位，就能夠轉化成年月日時分秒的時間戳。使用實例以下:

time(){
				var time = $('#times');//獲取要顯示倒計時的時間節點
					if (wait < 0) {
						time.text("00:00:00");                            
						wait = 10; //倒計時時間熟，設置起始秒數
					} else {
					   time.text(this.formatSeconds(wait)); //調用格式化的方法
						wait--;
						//調用計時器，開始計時
						setTimeout(function () {
							that.time();
						}, 1000)
					}
				},
//格式化時秒分
	 formatSeconds(s) {							          
						if(s > -1){
							var hour = Math.floor(s/3600);
							var min = Math.floor(s/60) % 60;
							var sec = s % 60;
							if(hour < 10) {
								t = '0'+ hour + ":";
						} else {
							t = hour + ":";
						}

						if(min < 10){t += "0";}
						t += min + ":";
						if(sec < 10){t += "0";}
						t += sec;
					}
					return t;
				}
複製代碼

合併兩個數組

var arr1 = [1,2,3,4,5,6];
var arr2 = [2,4,6];
複製代碼

ES5

concat (返回新數組，不會改變原來的數組,會形成內存浪費)

arr1.concat(arr2)
複製代碼

for循環(代碼閱讀性太差)

for(var i in arr2){
	arr1.push(arr2[i])
}
複製代碼

apply

arr1.push.apply(arr1,arr2);
複製代碼

ES6

[...arr1,...arr2]
arr1.push(...arr2)
複製代碼

優化

預先判斷arr一、arr2兩個數組哪一個更大，而後使用大數組合並小數組，這樣就減小了數組元素操做的次數！
複製代碼

for in 和 for of

  • for in 是es5標準,遍歷keyjquery

  • for of 是es6標準，遍歷value,android

    for (var key in arr){
  	console.log(arr[key]);
  }

  for (var value of arr){
  	console.log(value);
  }
複製代碼

for of若是要得到數組的鍵值，使用entries()方法

for(let i of b.entries()){
			console.log(i)
		}
複製代碼

獲取最大值

ES5

Math.max.apply(null,[14,3,77])
複製代碼

ES6

Math.max(...[14,3,77])	
複製代碼

獲取數組並集、交集、差集

並集

let union = new Set([...a,...b]);
//Set{1,2,3,4}
複製代碼

交集

let intersect = new Set([...a].filter(x=>b.has(x)));
//Set{2,3}
複製代碼

差集

let diffenence = new Set([...a].filter(x=>!b.has(x)));
//Set{1}
複製代碼

數組求和

ES5

for (var i = 0; i < array.length; i++){
sum += parseInt(array[i]);
}
複製代碼

ES6

var a=[4,5,6,7,8,9];
		var b;
		a.reduce(function(m,n){
				b=m+n;
				return m+n;
		});
		console.log(b);
複製代碼

閉包

保存即將要銷燬的數據 閉包就是可以讀取其餘函數內部變量的函數。閉包就是將函數內部和函數外部鏈接起來的一座橋樑。 能夠讀取其餘函數內部變量的函數，只要知足這一點的函數，均可以叫閉包 由於js做用域的問題，函數外部沒法範文函數內部的值，只有經過巧妙的方法去實現(閉包) 解決方法，就是在本身的函數內部定義一個函數E，而後再講函數E的值return回去 閉包不只能夠讀書函數內部的變量，還能讓這些變量始終保持在內存中。因此內存消耗很大 因此不能濫用閉包，不然會形成性能問題ios

apply()是函數對象的一個方法，它應用某一對象的一個方法，用另外一個對象替換當前對象。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程