《众妙之门 JavaScript与jQuery技术精粹》

近期，反复思考后，还是把所有的笔记通过随笔的方式整理出来放在论坛里，可以让自己对学过的知识有个比较系统而清晰的呈现；

同时，为以后用到相关的知识点做一个整理和查阅。

（一）JSON-P 的实例代码展示

<div id="delicious"></div>
<script type="text/javascript">
    // 可以在JavaScript中直接使用JSON，并且封装在函数调用中时，可作为API的返回值。
    // 这称为JSON-P格式，被很多API函数支持。可以使用数据端点在脚本语句中直接返回JSON-P格式。
    function delicious(o){
        var out = "<ul>";
        for(var i=0; i<o.length; i++){
            out += '<li><a href="' + o[i].u + '">' + o[i].d + '</a></li>';
        }
        out += '</ul>';
        document.getElementById('delicious').innerHTML = out;
    }
    // 这里调用了delicious Web服务来获得最新的JavaScript书签（JSON格式），然后将其显示为无序列表。
    // 其实，JSON可能是在浏览器运行中描述复杂数据最轻松的方式了，甚至可以再PHP中调用json_decode()函数。
</script>
<script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script>

（二）找出一组数字中的最大数

<script type="text/javascript">
    var number = [3,342,23,22,124];
    var max = 0;
    for(var i=0; i<number.length; i++){
        if(number[i] > max){
            max = number[i];
        }
    }
    alert(max);
</script>

<!--可以不通过循环而这样实现-->
<script type="text/javascript">
    var number = [3,342,23,22,124];
    number.sort(function(a,b){return b - a });
    alert(number[0]);
</script>

<!--可以利用Math.max()函数，返回一列参数中的最大值-->
<script type="text/javascript">
    alert(Math.max(3,342,23,22,124));
</script>

（三）利用Math.max()函数解决IE一个小问题

<script type="text/javascript">
    var scrollTop = Math.max(
        document.documentElement.scrollTop,
        document.body.scrollTop
    );
    alert(scrollTop);
    // 测试浏览器支持的默认属性。只有一个属性有返回值，另一个将是未定义。
</script>

（四）利用一个函数将CSS类添加到元素中

<div id="div" class="box"></div>
<input type="button" value="addclass"/>
<script type="text/javascript">
    // 经典实例：利用字符串的split()和join()函数，编写addClass()函数。
    function addClass(elm, newclass){
        var c = elm.className;
        elm.className = (c === '') ? newclass : c + ' ' + newclass;
    }
    // 问题是，当需要在DOM元素中添加一个类时，要么是将它作为第一个类添加，要么是将它和一个空格键一起加在已经存在的类前面。
    // 当删除该类时，也需要删除相应的空格（这在过去更为重要，因为有些浏览器会因为多余的空格报错）。
    var button = document.getElementsByTagName('input')[0];
    var div = document.getElementById('div');
    button.onclick = function(){
        addClass(div, 'box2');
    }
    // 这个方法的缺点：无法只能判断是否已有新的class类，只会无限制的添加。
</script>
<script type="text/javascript">
    function addClass(elm, newclass){
        // 把字符串转成数组
        var classes = elm.className.split(' '); 
        classes.push(newclass);
        // 把数组转成字符串
        elm.className = classes.join(' ');
    }
    var button = document.getElementsByTagName('input')[0];
    var div = document.getElementById('div');
    button.onclick = function(){
        addClass(div, 'box2');
    }
</script>

（五）事件代理描述

<h2>Great Web resources</h2>
<ul id="resources">
    <li><a href="http://opera.com/wsc">opera web standards curriculum</a></li>
    <li><a href="http://sitepoint.com">sitepoint</a></li>
    <li><a href="http://alistapart.com">A list Apart</a></li>
    <li><a href="http://yuiblog.com">YUI Blog</a></li>
    <li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>
    <li><a href="http://oddlyspecific.com">Oddly specific</a></li>
</ul>
<script type="text/javascript">
    // 通常事件处理程序是在整个链接中使用循环：
    (function(){
        var resources = document.getElementById('resources');
        var links = resources.getElementsByTagName('a');
        var all = links.length;
        for(var i=0; i<all; i++){
            // Attach a listener to each link
            links[i].addEventListener('click',handler,false);
        }
        function handler(e){
            var x = e.target;    // get the link that was clicked
            alert(x);
            e.preventDefault();
        }
    })();
</script>

<script type="text/javascript">
    // 也可以通过一个事件处理程序来实现：利用了事件冒泡机制
    (function(){
        var resources = document.getElementById('resources');
        resources.addEventListener('click',handler,false);
        function handler(e){
            var x = e.target;
            if(x.nodeName.toLowerCase() === 'a'){
                alert('Event delegation: ' + x);
                e.preventDefault();
            }
        }
    })();
</script>
<script type="text/javascript">
    // 说明：以上例子在IE6浏览器中会运行失败。对于IE6，需要使用事件模型而不是W3C，这就是我们在这种情况下使用库的原因。
    // 这种方法的好处在于，可以使用单独的事件处理程序。例如，想要在列表中动态地进行添加操作，如果使用事件代理（即事件冒泡到父级），
    // 则不需要进行任何改变，只需要在事件处理过程中重新分配处理程序，并对列表重新进行循环操作就可以了。
</script>

（六）匿名函数和模块模式

<script type="text/javascript">
    // JavaScript最令人烦恼的事情是变量的范围没有定义。任何在函数外定义的变量、函数、数组和对象都是全局的，这意味着相同页中的其他脚本都可以进行调用，因而经常出现参数被覆盖现象。
    // 解决办法就是将变量封装在一个匿名函数中，在定义完函数后立即调用。
</script>

<script type="text/javascript">
    // 1.先来生成3个全局变量和2个全局函数
    var name = 'Chris';
    var age = '34';
    var status = 'single';
    function createMember(){
        // [...]
    }
    function getMemberDetails(){
        // [...]
    }
    // 该页中其他的脚本如果含有名为status的变量的话就会出问题。如果将它们封装在名为myApplication的匿名函数中，就可以解决这个问题了。但是这样定义使得参数在函数外不起作用，如果这正是所需要的，没有问题。
    var myApplication = function(){
        var name = 'Chris';
        var age = '34';
        var status = 'single';
        function createMember(){
            // [...]
        }
        function getMemberDetails(){
            // [...]
        }
    }();
    // 另外，可以省略定义的名字：
    (function(){
        var name = 'Chris';
        var age = '34';
        var status = 'single';
        function createMember(){
            // [...]
        }
        function getMemberDetails(){
            // [...]
        }
    })();
</script>

<script type="text/javascript">
    // 2.如果需要部分变量或函数可被外部调用，则需要这样改写程序，为了可以调用createMember()或getMemberDetails()函数，将它们作为myApplication的属性返回：
    var myApplication = function(){
        var name = 'Chris';
        var age = '34';
        var status = 'single';
        return {
            function createMember(){
                // [...]
            },
            function getMemberDetails(){
                // [...]
            } 
        }
    }();
    // myApplication.createMember() and myApplication.getMemberDetails() now works.
    // 这种用法被称为模块模式或单例模式。Yahoo用户接口函数库YUI中经常使用它。
    // 如果要从一个方法中调用另一个方法，还必须在调用时加上myApplication前缀，因此，我更倾向于返回这些我想要其成为全局元素的元素的指针，这样还可以缩短外部调用时的使用长度。
</script>

<script type="text/javascript">
    // 我将这种方法称为 “揭示模块模式”。
    var myApplication = function(){
        var name = 'Chris';
        var age = '34';
        var status = 'single';
        function createMember(){
            // [...]
        },
        function getMemberDetails(){
            // [...]
        } 
        return {
            create: createMember,
            get: getMemberDetails
        }
    }();
    // myApplication.create() and myApplication.get() now work.
</script>

（七）跨浏览器的事件监听器方法

<!--Stoyan Stefanov 的添加和删除跨浏览器的事件监听器方法-->
<!--作者在他的《JavaScript Patterns》一书中有介绍-->
<script type="text/javascript">
    // utils：实用工具
    var utils = {    
        addListener: null,
        removeListener: null
    };
    // the implementation
    if(typeof window.addEventListener === 'function'){
        utils.addListener = function(el, type, fn){
            el.addEventListener(type, fn, false);
        };
        utils.removeListener = function(el, type, fn){
            el.removeEventListener(type, fn, false);
        };
    } else if (typeof document.attachEvent === 'function'){
        utils.addListener = function(el, type, fn){
            el.attachEvent('on' + type, fn);
        }
    }
</script>

（八）数组长度缓存的重要性

<script type="text/javascript">
    // 数组长度缓存的重要性！！！
    for(var i=0; i<myArray.length; i++){
        /* do stuff */
    }
    // 对长度进行缓存可以比反复访问它快上190倍。-Nicholas C.Zakas
</script>

<script type="text/javascript">
    // 以下是对数组长度进行缓存的一些方法：
    /* cached outside loop */
    var len = myArray.length;
    for(var i=0; i<len; i++){

    }

    /* cached inside loop */
    for(var i=0, len=myArray.length; i<len; i++){

    }

    /* cached outside loop using while */
    var len = myArray.lenght;
    while(len--){
        
    }
</script>

（九）JSON.stringify()把对象转换成JSON字符串

<!--
    JSON.parse()          把严格的json字符串，转换成对象
    JSON.stringify()      把对象转换成json字符串
-->
<script type="text/javascript">
    var myDate = {};
    myDate.dataA = ['a', 'b', 'c', 'd'];
    myDate.dataB = {
        'animal': 'cat',
        'color': 'brown'
    };
    myDate.dataC = {
        'vehicles': [{
            'type': 'ford',
            'tint': 'silver',
            'year': '2015'
        },{
            'type': 'honda',
            'tint': 'black',
            'year': '2012'
        }]
    };
    myDate.dataD = {
        'buildings':[{
            'houses':[{
                'streetName': 'sycamore close',
                'number': '252'
            },{
                'streetName': 'slimdon close',
                'number': '101'
            }]
        }]
    };
    console.log(myDate);    // Object
    var jsonDate = JSON.stringify(myDate,null,4);
    console.log(jsonDate);
    // 额外的调试小技巧，如果你想要使得终端控制台显示的JSON更为美观可读，可以使用stringify()函数的以下额外参数实现：
    console.log(
        JSON.stringify({
            'foo': "hello", 
            'bar': "world"
        },null,4)
    );
</script>

（十）针对命名空间变量存在性的检查

<script type="text/javascript">
    // 针对命名空间变量存在性的检查：
    /* 无效检查 */
    if( !MyNamespace ){
        MyNamespace = {};    // 如果MyNamespace变量之前未经声明，那么！MyNamespace会报错：RefernceError.
    }
    /* 有效方式 */
    if( !MyNamespace ){
        var MyNamespace = {};
    }
    // or 
    var MyNamespace = MyNamespace || {};
    // or
    if( typeof MyNamespace == 'undefined'){
        var MyNamespace = {};
    }
</script>

（十一）关于JavaScript的十个古怪之处和秘密

<script type="text/javascript">
    // 1.Null 是一个对象
    alert(typeof null);    // object
    alert(null instanceof Object);    //false
</script>

<script type="text/javascript">
    // 2.NaN 是一个数字，并且NaN不等于自身
    alert(typeof NaN);    // number
    alert(NaN === NaN);    //false
</script>

<script type="text/javascript">
    // 3.空数组 == false
    alert(new Array() == false);    // true
    // 空数组非常奇特：它们实际上等于true，但是在和布尔值比较时，却被看做false
    var someVar = [];    // empty array
    alert(someVar == false);    // true
    if(someVar){ alert('hello') };        // alert runs
    // 为了避免强制类型转换，我们使用值、类型比较符 "==="
    var someVar = 0;
    alert(someVar == false);    // true
    alert(someVar === false);    // false zero is a number, not a boolean
    // 如果你想更深入地了解JavaScript比较两个数值的内部原理的话，请查看文件说明书 ECMA-262 的11.9.2节。
</script>

<script type="text/javascript">
    // 4.正则表达式replace()函数可以接受回调函数
    alert('10 13 21 49 32'.replace(/d+/g,'*'));        // replace all numbers with *
    // 如果我们想要控制只替换30以下的数，怎么做 ?
    alert('10 13 21 49 32'.replace(/d+/g,function(){
        return parseInt(match) < 30 ? '*' : match;
    }));
</script>

<script type="text/javascript">
    // 5.正则表达式不仅仅是比较和替换
    // test()函数比较有趣，它和比较工作方式相同但它并不返回比较值：它只确认类型是否匹配，这样会使计算更轻便。
    alert(/w{3,}/.test('Hello'));    // false
    // 动态模式
    function findWord(word, string){
        var instanceOfWord = string.match(new RegExp(''+word+'', 'ig'));
        alert(instanceOfWord);
    }
    findWord('car', 'Carl went to buy a car but had forgotten his credit card.');
</script>

<script type="text/javascript">
    // 6.你可以伪造范围
    var animal = 'dog';
    function getAnimal(adjective){
        alert(adjective +' '+ this.animal);
    }
    getAnimal('lovely');    // lovely dog
    
    var myObj = {animal: 'camel'};
    getAnimal.call(myObj, 'lovely');    // lovely camel
</script>

<script type="text/javascript">
    // 7.函数可以执行自身
    (function(){
        alert('hello');
    })();

    var someVar = 'hello';
    setTimeout(function(){ alert(someVar); }, 1000);    // goodbye
    var someVar = 'goodbye';

    var someVar = 'hello';
    setTimeout((function(someVar){
        return function(){ alert(someVar); }    // hello
    })(someVar),1000);
    var someVar = 'goodbye';
</script>

<script type="text/javascript">
    // 8.火狐读取和返回RGB格式，而不是十六进制
    var ie = navigator.appVersion.indexOf('MSIE') != '-1';
    var t = document.getElementsByTagName('title')[0];
    alert(ie ? t.currentStyle.color : getComputedStyle(t,null).color);
</script>

<script type="text/javascript">
    // 9.    0.1 + 0.2 !== 0.3
    // 这类问题涉及机器精读的概念
</script>

<script type="text/javascript">
    // 10.未定义可以被定义
    var someVar;
    alert(someVar == undefined);    // true
</script>