JavaScript相关知识和经验的碎片化记录

1、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种情况,解决方法是:不直接将该数据以参数形式传递,而是先将其赋值在一个隐藏的文本内,需要调用的函数里只需读取该文本里的内容即可。

2、jQuery.form插件库中的Ajaxsubmit插件在文件上传时的问题（IE10）

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

　　经实验：在IE8和IE9中，,默认通过iframe进行文件上传，而在IE10中，如果没有设置参数iframe为true时，默认是通过fileapi进行文件上传的。

　　注：该问题的出现是在笔者的项目中应用时出现的（受其它项目组用户控件的影响），经实验，在一个新建的空白页面中使用时不会出现在IE10中通过默认的fileapi进行文件上传会失败的问题。

3、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')

4、一次元素的单击事件被触发进而多次执行事件处理函数，该问题产生原因是元素被多次绑定单击事件

　　问题详细说明：

　　　　$('#id').event(function(){}); 　　//该语句被执行n次后，则id='id'的元素的event事件就被注册了n次，因此，触发该元素event事件时，会导致执行n次的事件处理函数

　　 该问题解决办法多种多样，笔者目前使用的方法是：

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

5、通过JavaScript使页面中的文本内容不能被选中

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

 6、获取图片的原始宽高

//获取图片的原始宽高
function getImageNatural(src, fcallback) {
    //$("<img/>")这里是创建一个临时的img标签，类似js创建一个new Image()对象
    $('<img/>').attr('src', src).load(function () {
        //如果要获取图片的真实的宽度和高度有三点必须注意
        //1、需要创建一个image对象：如这里的$("<img/>")
        //2、指定图片的src路径
        //3、一定要在图片加载完成后执行如.load()函数里执行
        fcallback({ 'realWidth': this.width, 'realHeight': this.height, 'AspectRatio': this.width / this.height });
    });
}

 7、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标准让你必须提前在头部依赖参数部分写好。这就是最明显的区别。

8、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" 才可以正确请求到后台数据。

9、使用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值相同，因而导致数组中都是同一个对象？？？？？？

10、各浏览器对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

11、基于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, '');
};

 12、禁用或启用页面滚动条（未隐藏，避免因窗口的宽度变大而导致抖动）

// 禁用或启用滚动条
(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();    // 禁用

......