好久沒有更新了,最近忙著做開發。
來說一下關於開發的一些注意事項:
在使用表單向數據庫提交數據時,要主要xxs的腳本攻擊。
前端主要使用的方式:
一種是:將html標籤進行轉義:--主要是在輸入的時候阻止
function htmlEncode(value){//這裡的value為輸入的值return $('<span/>').text(value).html();//這裡的span標籤沒有意義,也可以換為其他的
};
還有一種就是進行反轉儀---在獲取數據的時候阻止
function htmlDecode(value){
return $('<span/>').html(value).text()
}
關於圖片顯示問題:
若是一個api得到的就是圖片的鏈接;就不用使用ajax去獲取圖片了;直接將鏈接賦給img的src即可;
如:<img src="url"/>;
若是鏈接有問題或沒有數據:$("img").error(function(){
//圖片加載錯誤;
就可以把默認的無頭像的圖片賦給這個img;
$(this).attr({"src":"","title":"無頭像"})
})//但是使用這個方法juqery的庫文件好像得使用3.0以下的。
$("img").attr("onerror","this.src='../../resource/images/aim.jpg'")—高版本这样就可以
但是在這裡也要特別注意:若是一直找不到圖片;就會一直重複這個動作;最好就是執行一次后就將這個事件註 銷掉:使用unbind();
3.多使用數據臨時存儲那樣就不用多次使用ajax去請求數據,增加負擔,在一些可能需要進行多個api獲取數據,再將數據匹配時。
臨時存數據:sessionStorage.setItem('存儲名',Json.stringfy(Json對象))--將json對象轉為字符串存儲
讀數據:json.parse(seesionStorage.存儲名)---字符串轉為json對象;
還有長久的存儲數據:localStorage---使用方式跟sessionStorage是一樣的;不同就是要手動去清除數據;
當然他們還有其他方法:sessionStorage.removeItem("key")--刪除key;
sessionStorage.clear();--清除所有的key;
具體的內容大家可以自己搜索網上很全面的。
若是要使用到換膚什麼的就可以使用cookie操作,但是使用這些方法時,要先判斷瀏覽器是否將cookie關閉了,或者在移動端時開啟了無痕模式。
4.關於彈框插件的:http://layer.layui.com/---使用方式將下載裡面的layers和theme放置到js的位置;之後調用layer.js和jquery的庫文件即可。
實例:
alert彈框---layer.alert("彈框的內容",{title:"彈框的標題",icon:圖標樣式(值可為:1,2,3),skin:"layer-ext-moon"});
提示彈框---layer.msg('刪除成功',{icon:1,time:時間秒為單位});
confirm彈框---layer.confirm('彈框內容',{btn:['確定','取消'],title:'提示'},function(){})
5.对于某一个位置加载某个HTML:
$("#加載部分的id").load("被加載的html頁面");
但是HTML的结构:<style></style>
<script></script>
<div></div>
6.將省略號隱藏部分顯示出來
function overShow(obj, e) {
var target = e.target;
var containerLength = $(target).width();
var textLength = target.scrollWidth;
// console.log(containerLength+":"+textLength)
if (containerLength+1< textLength) {
obj.title= $(target).find("a").html();
}
}
7.簡單的正則表達式:
取字符串中的数字:
Str. replace(/[^0-9]/ig,"")
获取特定字符之间的值:
var reCat = /\[\w+?\]/gi;//这里是获取[]之间的值
var arrMactches = str.match(reCat);
for (var i = 0; i < arrMactches.length; i++) {
alert(arrMactches[i]);
};
關於字母數字或特殊字符的:
var reg = /(?=.*\d)(?=.*[A-z])^[0-9A-z].{2,}$/; if (!$(this).val().match(reg)) { errorTips("請重新輸入,密碼格式:字母,數字,且大於兩位數"); $(this).val(""); }
其他的可以參考:https://c.runoob.com/front-end/854
8.整理一些小的常用的:
a.關於偽元素:ul:hover li{display:block}--這樣可以移動到ul上但是它裡面的li可以實現一些樣式
b.text-align: center;//水平居中; vertical-align:middle;//垂直居中
c.之前碰到有個問題關於傳遞參數的:
若是参数要有引号就可以使用\’’+参数+’\’的形式传递;
例如:
tempStr+= '<a class="" href="javascript:void(0)" onclick="getData(\''+url+'\',\''+employeeId+'\',\''+pageIndex1+'\')"><span>上一页</span></a>';
d.關於鏈接上傳遞參數:
$(location).attr('href',"comment.html?#page=mine&oId="+oId) 這裡也要注意,之前我這樣寫的:$(location).attr('href',"comment.html?#page=mine"+"&oId="+oId);但是它 居然把後面的&oId="+oId傳遞到的其他頁面上。
e.還有就是關於input寫入進行搜索的時候最好將按回車也能實現;有些時候得考慮全面些;比如加載數據,先加載一部分,根據滾動條的位置是否到底部了再加載一部分數據;
若:
$(".draftBox").eq(0).scroll(function(){ nScrollHight = $(this)[0].scrollHeight; nScrollTop = $(this)[0].scrollTop; // console.log(nScrollHight+":"+nScrollTop) if(nScrollTop + nDivHight >= nScrollHight){ // alert("滚动条到底部了"); } })
在寫js時使用严格模式:在js的开头: "use strict";
雖然是小問題,但是有些時候就是一些小問題卡住你;