web前端

好久沒有更新了，最近忙著做開發。

來說一下關於開發的一些注意事項：

1. 在使用表單向數據庫提交數據時，要主要xxs的腳本攻擊。

   前端主要使用的方式：

   一種是：將html標籤進行轉義：--主要是在輸入的時候阻止
   function htmlEncode(value){//這裡的value為輸入的值

   return $('<span/>').text(value).html();//這裡的span標籤沒有意義，也可以換為其他的

   }；

   還有一種就是進行反轉儀---在獲取數據的時候阻止

   function htmlDecode(value){

   return $('<span/>').html(value).text()

   }

2. 關於圖片顯示問題：

   若是一個api得到的就是圖片的鏈接；就不用使用ajax去獲取圖片了；直接將鏈接賦給img的src即可；

   如：<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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";

雖然是小問題，但是有些時候就是一些小問題卡住你；