JavaScript相關知識和經驗的碎片化記錄

一、JavaScript提示「未結束的字符串常量」錯誤解決方法

1.1 JavaScript引用時,使用的字符語言不一致. 
  好比:<script type=」text/javascript」 src=」xxx.js」 charset=」UTF-8″>.xxx.js文件內部使用的是GB2312的格式,外面調用使用的是UTF-8,因此文件內部部分特殊字符由於格式不一致,出現亂碼,形成此緣由. 
1.2 JavaScript輸出HTML字符時,先後標記不匹配. 
  這種比較常見,每每在輸出字符串時,出現單引號(')或雙引號(」)不配對,或者是在document.write()的時候,沒有正確輸出單引號(')或雙引號(") 
1.3 參數內出現HTML標記語言或包含換行符 
  如:通常測試時只使用單行的數據,是正常的,未出現這個錯誤，
當測試時使用多行數據,並使用回車鏈換行,就出行了此錯誤.由於裏面包含了換行符 

對於第1.3種狀況,解決方法是:不直接將該數據以參數形式傳遞,而是先將其賦值在一個隱藏的文本內,須要調用的函數裏只需讀取該文本里的內容便可。

二、jQuery.form插件庫中的Ajaxsubmit插件在文件上傳時的問題（IE10） 

$(‘#id’).ajaxsubmit({ 
    …, 
    iframe:true,   //不考慮ie的版本，都使用iframe來進行文件的上傳 
    … 
});

　　經實驗：在IE8和IE9中，,默認經過iframe進行文件上傳，而在IE10中，若是沒有設置參數iframe爲true時，默認是經過fileapi進行文件上傳的。

　　注：該問題的出現是在筆者的項目中應用時出現的（受其它項目組用戶控件的影響），經實驗，在一個新建的空白頁面中使用時不會出如今IE10中經過默認的fileapi進行文件上傳會失敗的問題。

三、jquery 中的 $("#id") 與 document.getElementById("id") 的區別

var canvas_air=$('#air');

alert(canvas_air);
alert(document.getElementById('air')); 

兩個alert()分別顯示爲：[object Object]和[object HTMLCanvasElement]

實際上，$('#air')[0]等同於$('#air').get(0),還等同於 document.getElementById('air')

四、一次元素的單擊事件被觸發進而屢次執行事件處理函數，該問題產生緣由是元素被屢次綁定單擊事件

　　問題詳細說明：

　　　　$('#id').event(function(){}); 　　//該語句被執行n次後，則id='id'的元素的event事件就被註冊了n次，所以，觸發該元素event事件時，會致使執行n次的事件處理函數

　　 該問題解決辦法多種多樣，筆者目前使用的方法是：

　　　　$('#id').off('event').event(function(){});　　//先移除元素的事件event，再從新註冊event事件

五、經過JavaScript使頁面中的文本內容不能被選中

<div class="ui_test" onselectstart="javascript:return false;" unselectable="on"><p>文本內容</p></div>

 六、獲取圖片的原始寬高

//獲取圖片的原始寬高
function getImageNatural(src, fcallback) {
    //$("<img/>")這裏是建立一個臨時的img標籤，相似js建立一個new Image()對象
    $('<img/>').attr('src', src).load(function () {
        //若是要獲取圖片的真實的寬度和高度有三點必須注意
        //一、須要建立一個image對象：如這裏的$("<img/>")
        //二、指定圖片的src路徑
        //三、必定要在圖片加載完成後執行如.load()函數裏執行
        fcallback({ 'realWidth': this.width, 'realHeight': this.height, 'AspectRatio': this.width / this.height });
    });
}

  七、JavaScript模塊化的規範

• CommonJS規範

          CommonJS是一個更偏向於服務器端的規範。模塊是同步加載的，當要用到該模塊了，現加載現用，這種同步機制到了瀏覽器裏邊就有問題了，瀏覽器同步加載模塊會致使性能、可用性、調試和跨域訪問等問題，因此說該規範更偏向於服務器端的應用。Node.js採用了這個規範。 根據CommonJS規範，一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件並執行，最後返回文件內部的exports對象。

• AMD規範

          AMD規範實現異步加載依賴模塊，而且會預加載，偏向於瀏覽器端的模塊化規範。AMD和CommonJS是兼容的，只要稍稍調換一下調用方法就實現了同步加載

define(function (require, exports, module) {
    var a = require('a'),
    　　b = require('b');
    exports.action = function () {};
});

          AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。

• CMD規範

 　　  CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。

　　　一樣Seajs也是預加載依賴js跟AMD的規範在預加載這一點上是相同的，明顯不一樣的地方是調用，和聲明依賴的地方。AMD和CMD都是用define和require，可是CMD標準傾向於在使用過程當中提出依賴，就是無論代碼寫到哪忽然發現須要依賴另外一個模塊，那就在當前代碼用require引入就能夠了，規範會幫你搞定預加載，你隨便寫就能夠了。可是AMD標準讓你必須提早在頭部依賴參數部分寫好。這就是最明顯的區別。

八、JQuery中經過ajax請求 Web API 時，傳遞被Asp.net(C#)後臺標記爲 [FromBody]的參數須要注意：

$.ajax({
    type: "POST",
    contentType: "application/json",
    url: sWebAPIUrl + '/api/AnswerAndKnowledge/Lg_Marking_SetAnswers',
    data: JSON.stringify({
        sItemId: oItemInfo.sItemId, nShortAnswerFlag: oItemInfo.nShortAnswerFlag,
        sSubjectName: oItemInfo.sSubjectName, AnswersInfo: oAnsSetInfoArr
    }),
    success: function(rdata){
        console.log(rdata);
    }
});

注意：Ajax請求須要一塊兒設置 data：JSON.stringify(json對象) 和 contentType: "application/json" 才能夠正確請求到後臺數據。

九、使用array.push()方法產生的問題，循環將json對象壓入數組中時全部的元素都一致（全都爲循環最後一次所賦的值）

錯誤用法：

var obj = { id: null, name: ''};
var str = [];
for (var i = 0; i < 5; i++) {
    obj.id = i;
    obj.name = 'name_' + i;
    str.push(obj);
    console.info(obj);
}
console.info(str);

 正確用法：

var str = [];
for (var i = 0; i < 5; i++) {
    var obj = {id: i, name: 'name_' + i,};
    str.push(obj);
    console.info(obj);
}
console.info(str);

緣由：對象是同一個對象，動態建立對象時，不斷對對象賦值，push進數組，數組[obj,obj,obj],全部的obj值相同，於是致使數組中都是同一個對象？？？？？？

十、各瀏覽器對Cookie有必定的限制，在使用時須要格外注意

各瀏覽器對cookie的不一樣限制：
　　　　　　　    IE6.0 　　　　 IE7.0/8.0/9.0+ 　　 Opera 　　　　　　 FF 　　　　　　 Safari 　　　　 Chrome
cookie個數 　　每一個域爲20個 　每一個域爲50個 　 每一個域爲30個 　　 每一個域爲50個 　　 沒有個數限制 　　 每一個域爲53個
cookie大小　　4095個字節 　　 4095個字節 　　 4096個字節 　　　 4097個字節 　　　4097個字節 　　　 4097個字節

總之，在進行頁面cookie操做的時候，應該儘可能保證cookie個數小於20個，總大小小於4KB

十一、基於String的原型重寫trim()方法，使得trim()方法可以去掉字符串首末的特定字符

String.prototype.trim = function (char, type) {
    if (char) {
        if (type == 'left') {
            return this.replace(new RegExp('^\\' + char + '+', 'g'), '');
        } else if (type == 'right') {
            return this.replace(new RegExp('\\' + char + '+$', 'g'), '');
        }
        return this.replace(new RegExp('^\\' + char + '+|\\' + char + '+$', 'g'), '');
    }
    return this.replace(/^\s+|\s+$/g, '');
};

 十二、禁用或啓用頁面滾動條（未隱藏，避免因窗口的寬度變大而致使抖動）

// 禁用或啓用滾動條
(function (window) {
    var keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

    function preventDefault(e) {
        e = e || window.event;
        //阻止默認事件
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    }

    function preventDefaultForScrollKeys(e) {
        e = e || window.event;
        if (keys[e.keyCode]) {
            preventDefault(e);
            return false;
        }
    }

    var oldonwheel, oldonmousewheel1, oldonmousewheel2,
        oldontouchmove, oldonkeydown, isDisabled;

    function disableScroll() {
        if (window.addEventListener) { // older FF
            window.addEventListener('DOMMouseScroll', preventDefault, false);
        }
        oldonwheel = window.onwheel;
        window.onwheel = preventDefault; // modern standard

        oldonmousewheel1 = window.onmousewheel;
        window.onmousewheel = preventDefault; // older browsers, IE
        oldonmousewheel2 = document.onmousewheel;
        document.onmousewheel = preventDefault; // older browsers, IE

        oldonkeydown = document.onkeydown;
        document.onkeydown = preventDefaultForScrollKeys;
        isDisabled = true;
    }

    function enableScroll() {
        if (!isDisabled) return;
        if (window.removeEventListener)
            window.removeEventListener('DOMMouseScroll', preventDefault, false);

        window.onwheel = oldonwheel; // modern standard

        window.onmousewheel = oldonmousewheel1; // older browsers, IE
        document.onmousewheel = oldonmousewheel2; // older browsers, IE

        document.onkeydown = oldonkeydown;
        isDisabled = false;
    }

    window.scrollHanlder = {
        disableScroll: disableScroll,
        enableScroll: enableScroll
    };
}(window));

調用方式：

window.scrollHanlder.enableScroll();     // 啓用
window.scrollHanlder.disableScroll();    // 禁用

 

......