前端 - 關於開發時遇到的問題和解決方案；

工作不忙的時候，要學會總結。吃一塹長一智，道理如此；

1.關於移動端，頁面寬度超出屏幕寬度的問題；

布局時候不注意，對元素寬度設置100%，再設置padding或者margin就會出現這個問題；

解決方案就是去掉margin和padding，再low點，取消padding改用&nbsp；來懟；其實還是要根據頁面實際情況再加樣式；

 <h3 style="width: 100%;height: 3rem;line-height: 3rem;background-color: #f5f4f9;color:#999;font-weight: normal;">&nbsp;&nbsp;&nbsp;一個標題</h3>//這是body里面的一個標題;

2.工作中遇到如下需求，點擊輸入框彈出自定義彈窗，輸入框是input標簽；

但是在移動端，input會默認觸發手機的虛擬鍵盤，如何阻止手機虛擬鍵盤彈起呢？

目前我試過有兩個方案，一個是給input添加readonly屬性,另一個就是在input事件處理方法前面添加一句document.activeElement.blur() 。

使用readonly方式來阻止虛擬鍵盤彈出應該是最簡單最優雅的方式了。readonly 屬性規定輸入字段為只讀。只讀字段是不能修改的。不過，用戶仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文本。

值得一提的是它的取值，只要聲明了readonly屬性，不管取什么值都可以，比如readonly=””、readonly=”readonly”、readonly=”abc”都是一樣的

優點：簡單
缺點：在iOS的Safari中無效（未做更多情況測試）

document.activeElement是一個Web API接口。MDN上的解釋是：它返回當前頁面中獲得焦點的元素，也就是說，如果此時用戶按下了鍵盤上某個鍵，會在該元素上觸發鍵盤事件，該屬性是只讀的。

document.activeElement屬性始終會引用DOM中當前獲得了焦點的元素。元素獲得焦點的方式有用戶輸入(通常是按Tab鍵)、在代碼中調用focus()方法和頁面加載。

它里面有很多方法，在瀏覽器控制台查看，可以看到有很都方法；

那么document.activeElement.blur()為什么可以阻止虛擬鍵盤彈出呢？原因是：當你點擊input的時候，document.activeElement獲得了DOM中被聚焦的元素，也就是你點擊的input，而調用.blur()方法，blur我相信大家都知道吧，就是取消聚焦。獲得被聚焦的元素然后強制blur以達到沒有聚焦的樣子、、、感覺繞了。

優點：支持Android、iOS
缺點：需要添加額外的JS代碼

<div class="calendar">
    <div>
        <input type="text" id="datePicker" class="date_picker" placeholder="點擊選擇入住日期">
    </div>
</div>
//js代碼
$("#datePicker").focus(function(){
    document.activeElement.blur();
});

3.關於文件上傳到服務器問題；

function upload(e){//使用input標簽type=file，在onchange事件中調用此函數；

   var csrf = e.target.files;//file里面存放有文件的名字(name)、格式(type)、大小(size)、上傳時間(time)等等　　

　　var formData = new FormData();//創建一個FormData，存放要上傳的文件信息；這個formData對象對外不可見，打印出來也只是一個function；

　　formData.append("csrfmiddlewaretoken", csrf);/*獲取上傳的文件對象*/　　

　　$.ajax({

　　　　url: fileUrl,

　　　　type: "POST",

　　　　processData: false,//(默認: true) 默認情況下，通過data選項傳遞進來的數據，如果是一個對象(技術上講只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置為 false。

　　　　contentType: false,//(默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數情況。如果你明確地傳遞了一個content-type給 $.ajax() 那么他必定會發送給服務器（即使沒有數據要發送）

　　　　dataType: 'JSON',

　　　　cache: false,

　　　　data: formData,//XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件.

　　　　success: function (res) {}

　　　　//回調函數

　　}）

　　

如果上傳的文件是圖片，可以在當前頁面設置圖片預覽；

$("#avatarSlect").change(function () {
      var obj = $("#avatarSlect")[0].files[0];//獲取文件信息；
      var fr = new FileReader();//window內部有一個FileReader的構造函數；
      fr.onload = function () {
          $("#avatarPreview").attr('src', this.result);
             console.log(this.result);
             $("#avatar").val(this.result);
           };
         fr.readAsDataURL(obj);
　　　　　　//FileReader對象的readAsDataURL方法可以將讀取到的文件編碼成Data URL。
　　　　　　//Data URL是一項特殊的技術，可以將資料(例如圖片)內嵌在網頁之中，不用放到外部文件。
　　　　　　//使用Data URL的好處是，您不需要額外再發出一個HTTP 請求到服務器端取得額外的資料；
　　　　　　//readAsDataURL方法會使用base-64進行編碼，編碼的資料由data字串開始，后面跟隨的是MIME type，然后再加上base64字串，逗號之后就是編碼過的圖像文件的內容。
    })

 4.頁面間的跳轉傳參問題；

//獲取地址欄參數
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}

function NEWGetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURIComponent(r[2]); return null;
}

這兩個函數都是獲取url中的參數；分別使用unescape()和decodeURIComponent()進行解碼；

可以使用 unescape() 對 escape() 編碼的字符串進行解碼。（ECMAScript v3 反對使用該方法，應用使用 decodeURI() 和 decodeURIComponent() 替代它。）

一張圖看懂encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的區別；這篇文章解釋得更清楚點；

 

 5.一個bug理解同步和異步；

<script>
    test();
    var m = 1;
    function test() {
        setTimeout(() => {
            console.log(m)//1
        }, 1000);
        // console.log(m)//undefined
    }
</script>

先貼上代碼；

同步執行test函數，因為JS執行，變量m聲明提前而賦值不會提前，所以直接打印出來的m值為undefined。

異步打印m，此時的JS開始執行異步隊列，m已經被賦值，所以打印出1；

6.復制完內容后，在Android端微信H5內的input無法粘貼，而ios是可以的；

<textarea class="inputTitle" rows="1" type="text" id="title" placeholder="請輸入標題" onfocus="setText()">
</textarea>

js:function setText() {document.querySelector('#title').value = ' '};

我遇到這個奇妙的問題，textarea在focus的時候，不輸入任何內容，安卓手機長按不出現粘貼；目前的處理方法就是在focus的時候設置value為' '(一個空格)；這樣長按就會出來粘貼了；不是最優，但是親測有效;