項目：gdlt_custom_number 總結收穫和經驗

原創 small-dragon 2020-07-03 19:06

不懂的知識點：

$.ajax({
					type : 'POST',
					url : 'award.action',
					dataType : 'json',
					error : function() {
						alert('not connect'); //@todo3
					},
					success : function(result) {
						var json = eval("(" + result + ")"),
						msg = json[0].msg, 
						prizeId = parseInt(json[0].prizeId);
						var angle = parseInt(json[0].angle);
						hidebg.style.height = 2835 + 'px';
						$('#lotteryBtn').stopRotate();
						rotateFunc(angle, prizeId);
					}
			});

在上面有用到eval，網上說用類似JQuery.parseJSON()，鏈接如下

戳戳戳，eval與JQuery.parseJSON

順便說說JSON.parse(),用於將一個字符串解析成json對象

var str = '{"name": "smalldragon","age":"23"}';    JSON.parse(str);

JSON.stringify()用於將一個對象解析成字符串

var a ={a:1;b:2}; JSON.stringify(a);

大部分不支持使用eval的原因有： 1、性能不好 2、不安全 3、產生混亂的代碼邏輯


知識：

1.JQuery中find()函數和children()函數的區別。

一個是獲取所有後代元素，一個是隻獲取子元素

2.事件必須在元素已經存在的時候綁定

例如，先在已存在元素上addClass（"goto"）,然後再在下面跟着寫$(".goto").click(func);什麼的

3. get 和 set 滾動輪高度

function getScrollTop() {
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        return scrollTop;
    }
 
    function setScrollTop(scroll_top) {
        document.documentElement.scrollTop = scroll_top;
        window.pageYOffset = scroll_top;
        document.body.scrollTop = scroll_top;
    }
理由是： 關於scrollTop的文章

BackCompat： Standards-compliant mode is not switched on. (Quirks Mode) 
    CSS1Compat： Standards-compliant mode is switched on. (Standards Mode) 

var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight; 

總之像上面都設置上就可以了

3.如何在設置彈出窗口背景hidebg的高度?

在看了慕課網網站的源碼發現，以前我們都是這樣寫的,然後設置hidebg爲網頁的最大高度，document.documentElement.clientHeight

<div id="hidebg"></div>
<div id="popUp"></div>
但慕課網的html結構是下面這樣的，把hidebg樣式設爲下面那樣： 

#hidebg {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

這樣hidebg就佔據了整個屏幕，又學到一招
<div id="hidebg">
    <div id="popUp">
    </div>
</div>

4.background-size: contain(背景圖片包含在塊內)，cover（把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。），而且在實際應用中，發現，background-size:這行代碼要寫在background後面，否則無效,可能是後寫background會把background中未設置的屬性設爲默認了，包括background-size,這就是簡寫合併CSS樣式的規則，包括margin,padding,font這些可合併的屬性


5.<!docype html>這一行文檔說明非常重要，如果去掉，實際中寫的代碼在IE8~9樣式完全改變

6.在檢測時PC端還是mobile端用到的JS代碼

<script type="text/javascript"> 
        //平臺、設備和操作系統 
       
        var system = { 
            win: false, 
            mac: false, 
            xll: false, 
            ipad:false 
        }; 
        //檢測平臺 
        var p = navigator.platform; 
        system.win = p.indexOf("Win") == 0; 
        system.mac = p.indexOf("Mac") == 0; 
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
        system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
        //跳轉語句，如果是手機訪問就自動跳轉到wap.baidu.com頁面 
        if (system.win || system.mac || system.xll||system.ipad) {
        	
 
        } else { 
        	
 
            window.location.href = "mgdlt.jsp"; 
        } 
</script>

7.使用左右輪播圖時，雖說setTimeout()纔是真正的每隔一段時間，但是也不知道爲什麼就是會出錯，用了setInterval（）就可以

第二點是可以在設置了一張圖大小寬度的元素上使用hover事件，因爲子元素就不會變化，就不用使用mouseenter和mouseleave事件了

        var interval = 3000;
/*var timeoutId = setTimeout(function(){
                                   clearTimeout(timeoutId);
                       $(".right-arrow").click();
                       timeoutId = setTimeout(arguments.callee,interval);
                    }, interval);
$("#wrapper2").hover(function(){
console.log(1);
clearTimeout(timeoutId);
},function(){
console.log(2);
timeoutId = setTimeout(function(){
clearTimeout(timeoutId);
                       $(".right-arrow").click();
                       setTimeout(arguments.callee,interval);
                    }, interval);
</span>});*/
var timeoutId = setInterval(function(){
                               $(".right-arrow").click();
                            },interval);
$("#wrapper2").hover(function(){
       //console.log(1);
         clearInterval(timeoutId);
},function(){
         //console.log(2);
          timeoutId = setInterval(function(){
           $(".right-arrow").click();
          },interval);
});

8.取消綁定事件了怎麼再次綁定，只能重新綁定一個事件


9.跨域要用jsonp,而且要訪問的外域上的網址返回的是JSON纔行，不是就是出錯，而且在測試中JQuery的$.getJSON()會不進行下面的function，魂淡，原來在URL中callback前面是要&不是問號啊(更新，其實只是做個URL參數，寫爲第一個參數就爲問號)

/*var url = "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13662443836?callback=?";
		$.getJSON(url, function(json){
					 	for(var i in json){
					 		alert(i + ":" + json[i]);
						 }
				 	});*/
		 $.ajax({
             type: "get",
             url: "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13662443836",
             dataType: "jsonp",
             success: function(json){
                 for(var i in json){
					 alert(i + ":" + json[i]);
				 }
             },
             error: function(json){
                 for(var i in json){
					 alert(i + ":" + json[i]);
				 }
             }
         });


JS原生JSONP寫法，獲取的參數也必須是JSON數據：

var obj = document.createElement("script");
			function jsonpcallback(json) {
	           	 	for(var i in json){
						 alert(i + ":" + json[i]);
					 }
	        }
            obj.src = "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13662443836&callback=jsonpcallback";
            document.body.appendChild(obj);


10.JS控制按鈕，防止頻繁點擊

①JS高程上寫的函數節流方法

function throttle(method, context){
	clearTimeout(method.tId);
	method.tId = setTimeout(function(){
		method.call(context);
	}, 100);

②別人博客上寫的，通過變量來控制
var clicktag = 0;
            $('.a_cc').click(function () {
                if (clicktag == 0) {
                    clicktag = 1;
                    $(this).addClass("a_bb");
                    alert('click觸發了');
                    setTimeout(function () { clicktag = 0 }, 5000);
                }
            });

11.有異步AJAX的函數是不能做判斷的，


比如

if(!checkPhone()){
  alert("111");
}
alert("2222");
$.ajax({
			type : "POST",
			url : "http://localhost:8080/custom_number/checkPhone.action",
			dataType : 'json',
			data : {"phone":phone},
			cache : false,
			async:true, 
			error : function() {
				
				alert("3333");return false;
			},
			success : function(result) {
				alert("4444");  return true;
			}
		});

原本以爲是AJAX成功是這樣的順序：alert("4444")→alert("1111")→alert("2222");

但有異步AJAX的函數成功的順序是這樣的： alert("1111")→alert("2222")→alert("4444");

原因竟然是因爲異步的時候checkPhone()在判斷中默認是false，真的是醉了醉了，那還只能設爲同步了(async:false)

12.這次移動端的網頁是可以嵌入到聯通的一個APP，要實現分享功能時，同事都說直接在瀏覽器上打開是分享不了的。於是，我們就在網頁調用客戶端的分享功能來實現，然後才發現原來嵌入在APP上的網頁是可以獲取客戶端信息的。

代碼如下：

function shareClient() {
			var mobileVersion = uautil.getversion();
			//mobileVersion="3.2iphone";
			if(mobileVersion.indexOf('3.2') != -1){
				var shareJson = "{\"shareType\":\"url\",\"shareTitle\":\"私人定製靚號免費送！\",\"shareContent\":\"爲你打造專屬“密碼”，不花1分錢，留住美好記憶！\",\"shareURL\":\"http://gdlt10010.iimedia.cn\",\"shareIconURL\":\"http://gdlt10010.iimedia.cn/img3/shareIconURL.jpg\"}";
				if (mobileVersion.indexOf('iphone') != -1) {
					window.location = "clientAction={\"type\":\"share2\",\"url\":\"\",\"shareList\":\"sinaweibo,tencentweibo,qzone,wechat,wechatmoments,email,shortmessage,qq\",\"msg\":\"私人定製靚號免費送！\",\"shareJson\":" + shareJson +"}";
				} else {
					js_invoke.interact("{\"type\":\"share2\",\"url\":\"\",\"shareList\":\"sinaweibo,tencentweibo,qzone,wechat,wechatmoments,email,shortmessage,qq\",\"msg\":\"私人定製靚號免費送！\",\"shareJson\":" + shareJson + "}");
				}
			}else {
				if (mobileVersion.indexOf('iphone') != -1) {
					window.location = "clientAction={\"type\":\"share\",\"url\":\"gdlt10010.iimedia.cn\",\"shareList\":\"sinaweibo,tencentweibo,qzone,wechat,wechatmoments,email,shortmessage,qq\",\"msg\":\"私人定製靚號免費送！\"}";
				} else {
					js_invoke.interact("{\"type\":\"share\",\"url\":\"http://gdlt10010.iimedia.cn/gdltapp.html\",\"shareList\":\"sinaweibo,tencentweibo,qzone,wechat,wechatmoments,email,shortmessage,qq\",\"msg\":\"私人定製靚號免費送！\"}");
				}
			}
}	



var uautil={
	getuserAgent:function(){//獲取客戶端UA信息
		return navigator.userAgent.toLowerCase();
	},
	getagent:function(){//獲取客戶端類型		
		var agent = uautil.getuserAgent();
		if(/android/.test( agent )){
			return 'android';
		}else if(/iphone/.test( agent )){
			return 'iphone';
		}else{
			return 'other';
		}	
	},
	getversion:	function(){
		var versionStr = null;
		var agent = uautil.getagent();
		var agent2 = navigator.userAgent.toLowerCase();
		if(agent=='android'){			
			versionStr = agent2.match('unicom\\{version:([A-Za-z_]*@+[0-9]+.+[0-9]+),desmobile:[0-9]*\\}');
		}else if(agent=='iphone'){
			versionStr = agent2.match('unicom\\{version:([A-Za-z_]*@+[0-9]+.+[0-9]+)\\}');
		}
		return versionStr!=null?versionStr[1]:'';
	}	
};


項目鏈接：gdlt_custom_number

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

項目：LT沃寶遊戲大廳 總結與經驗

背景.這次的項目也是在做移動端頁面的，由於這個項目不賺錢，所以組長叫我不用用心地去做，也是比較粗糙地去做了 遺憾點：由於剛做完官網沒多久，對於SPA（單頁面應用）的處理還處於實驗階段，於是就把這次的項目也用SPA去做了，結果發現，只使

small-dragon 2020-07-03 19:06:15

前端編碼規範

small-dragon 2020-02-20 20:43:10

項目：××官網改版總結經驗和收穫

small-dragon 2020-02-20 20:43:10

前端提升法寶

small-dragon 2020-02-20 20:43:10

項目：gdlt_custom_number二期收穫與總結

small-dragon 2020-02-20 20:43:10

Javascript高級程序設計第十二章

small-dragon 2020-02-20 20:43:10

SQL注入漏洞

small-dragon 2020-02-20 20:43:10

項目：LT沃寶遊戲大廳 總結與經驗

背景.這次的項目也是在做移動端頁面的，由於這個項目不賺錢，所以組長叫我不用用心地去做，也是比較粗糙地去做了 遺憾點：由於剛做完官網沒多久，對於SPA（單頁面應用）的處理還處於實驗階段，於是就把這次的項目也用SPA去做了，結果發現，只使

small-dragon 2020-07-03 19:06:15

前端編碼規範

small-dragon 2020-02-20 20:43:10

項目：××官網改版總結經驗和收穫

small-dragon 2020-02-20 20:43:10

前端提升法寶

small-dragon 2020-02-20 20:43:10

項目：gdlt_custom_number二期收穫與總結

small-dragon 2020-02-20 20:43:10

Javascript高級程序設計第十二章

small-dragon 2020-02-20 20:43:10

SQL注入漏洞

small-dragon 2020-02-20 20:43:10

校招一些前端面試題集錦

small-dragon 2018-08-22 17:00:06