衆妙之門 JavaScript與jQuery技術精粹(上)

相關知識點總結：

//定義一個對象
var car = {
    color:'red'
    wheels:4
    hubcaps:'spinning'
    age:4
}

//定義一個數組
var movie = [
    'harrypotter','hero','X-men'
]
//三重標記法
var direction = x<200?1 : -1

//定義json數據,json是瀏覽器運行中描述複雜數據最輕鬆的方式
var band = {
    'name':'potter',
    'members':[
    {
        'name':'A'
        'role':'L'
    },
    {
        'name':'B'
        'role':'M'
    }
    ],
    'year':'2015'
}

//尋找列表中最大的值
var numbers = [3,54,4646,223,12];
numbers.sort(function(a,b){return b-a});
max1 = numbers[0];
//尋找數組中最大值
max3 = Math.max(12,23,34,52,12);
//也可以用來測試瀏覽器支持的默認屬性,因爲只有一個屬性有返回值，另一個將是未定義，這樣不會出錯
var scollTop = Math.max(
    doc.documentElement.scrollTop,
    doc.body.scrollTop
);

//爲DOM元素中添加一個類
function addclass(elm,newclass){
    var classes = elm.className.split(' ');
    classes.push(newclass);
    elm.className = classes.join(' ');
}

//爲一類元素添加動作
<ul id="resources">
    <li><a href="http://1">1</a></li>
    <li><a href="http://2">2</a></li>
    <li><a href="http://3">3</a></li>
    <li><a href="http://4">4</a></li>
    <li><a href="http://5">5</a></li>
</ul>
(function(){
    var resources = document.getElementById('resources');
    var links = resources.getElementByTagName('a');
    var all = links.length;
    for(var i=0;i<all;i++){
        links[i].addEventListener('click',handler,false);
    };
    function handler(e){
        var x = e.target;
        //阻止鏈接自動跳轉
        e.preventDefault();
    };
})();
//或者
(function(){
    var resources = document.getElementById('resources');
    resources.addEventListener('click',handler,false);
    function handler(e){
        var x = e.target;
        if(x.nodename.toLowerCase()=='a'){
            e.preventDefault();
        }
    }
    }
)();

//JS中，任何在函數外定義的變量、函數、數組和對象都是全局的，即其他腳本都可以進行調用
//模塊模式或單例模式：避免全局變量
var myApplication = function(){
    var name = 'Chris';
    var age = 'age';
    return{
        creatMember:function(){
        ……
    },
        getMemberDetail：function(){
        ……
    }
    }
}();
myApplication.creatMember()
//另一種方式,調用時使用別名
var myApplication = function(){
    var name = 'Chris';
    var age = 'age';
    function creatMember(){
        creatMember:function(){
        ……
    },
    function getMemeberDetails(){
        ……
    }
    return{
        creat:creatMember,
        get:getMemberDetails
    }
}();
myApplication.get()

1.讓別人使用自己的JavaScript時，最好增加一個配置文件，讓別人可以在其中修改全局信息。
2.與後臺交互，如果使用Ajax，最好有緩存和json轉換機制，可以節約大量的時間和精力。
3.函數和對象需要經過類型校驗纔可以作爲參數傳遞給其他函數，安全有效。