JS進階學習路線——物件導向基礎

標籤：classname   空格   length   rip   att   ons   代碼實現   學習   rod   

比較傳統和對象的編程方式如何使用對象

定義兩個工具包

 /*產品工具包 - 儲存和產品有關的工具*/    var product={        name:‘iphone8‘,        description:‘各地區貨源已陸續到庫，我們將在十月十號左右發貨，對於此次延遲發貨給您帶來的不便表示致歉，望您諒解。‘,        price:6660,        /*繫結元素*/        bindDom:function(){},        /*綁定事件*/        bindEvents:function(){},        /*立即購買，暫時不考慮裡面的代碼是如何寫的*/        buy:function(){},        /*加入到購物車*/        addCart:function(){}    }

 

 /*購物車工具包 - 儲存和購物車有關的工具*/    var cart={        name:‘購物車‘,        products:[],        price:5000,        sum:0,        /*繫結元素*/        bindDom:function(){},        /*綁定事件*/        bindEvents:function(){},        /*結算*/        cartSum:function(){        }    }

綁定產品模組元素

window.onload=function(){        /*綁定產品模組元素*/        product.bindDom()        /*綁定購物車模組元素*/        cart.bindDom()        /*綁定產品模組事件*/        product.bindEvents()        /*綁定購物車模組事件*/        cart.bindEvents()    }

提煉對象的屬性和方法

產品對象
js使用函數+this的形式實現對象 - 這個時候的函數稱之為建構函式
js中我們一般將屬性放在上面的建構函式中，一般將方法放在下面的原型中
本質：其實是兩個對象 上面叫構造對象，下面叫原型對象 --- 簡稱雙對象定義對象法則 或者 雙函數定義對象法則

代碼實現

寫法

function 建構函式(){            this.屬性        }建構函式.原型.方法 = function(){};var 對象1 = new 建構函式();對象1.方法();

產品對象

//產品對象    /*對象內如何使用對象的屬性和方法：this，對象外如何使用：先執行個體化，後用點文法*/    function Product(name,price,description,youhuijia,zhekou,sales) {        /*屬性 行為*/        this.name =name;        this.price=price;        this.description = description;        this.youhuijia=youhuijia;        /*和產品對象相關的dom，統一管理，以後使用*/        this.doms={            btn:document.getElementById(‘btn‘),            name:document.getElementById(‘pname‘),            price: document.getElementById(‘pprice‘),            sum:document.getElementById(‘sum‘)        }    }    Product.prototype={        getPrice:function() {            return this.price        },        addToCart:function(){            alert(‘將物品添加到購物車‘)        },        bindDom:function(){            this.doms.name.innerHTML=this.name            this.doms.price.innerHTML=this.price            this.doms.des.innerHTML=this.description        },        bindEvents:function(){            /*this that之爭*/            var that = this;            this.doms.btn.onclick = function(){                that.addToCart()            }        }    }

逗逗加加法則和代碼拼接　　

  Product.prototype={         bindDom:function(dom){           var str = ‘‘           str+=‘<h1 id="pname">‘+this.name+‘</h1>‘           str+=‘<div id="pdes">‘+this.description+‘</div>‘           str+=‘<div >已售：<strong id="psales">‘+this.sales+‘</strong></div>‘           str+=‘ <div>原價：<strong id="pprice">‘+this.price+‘</strong>元</div>‘           str+=‘<div>優惠價：<strong id="pyouhui">‘+this.youhuijia+‘</strong>元</div>
           str+=‘<div>折扣：<strong id="pzhekou">‘+this.zhekou+‘</strong>折</div>‘           dom.innerHTML = str;      }}        

物件導向和列表

    var product1 = new Product()    product1.name = ‘SKII‘    product1.price = 1111    product1.zhekou = 3.5    product1.image = ‘img/boutque10_r2_c2.jpg‘    var product2 = new Product()    product2.name = ‘??????‘    product2.price = 1111    product2.zhekou = 3.5    product2.image = ‘img/boutque10_r2_c2.jpg‘    var product3 = new Product()    product3.name = ‘???‘    product3.price = 1111    product3.zhekou = 3.5    product3.image = ‘img/boutque10_r2_c2.jpg‘    var products = [product1,product2,product3]
    var str=‘‘    for(var i = 0,len=products.length;i<len;i++) {        str+= products[i].bindDom()    }    var container = document.getElementById(‘container‘)    container.innerHTML=str

　　

物件導向的字面量形式

json字面量其實字面量的一種簡化寫法

    // 這是JSON字串    var foo = ‘{ "prop": "val" }‘;    // 這是對象字面量    var bar = { "prop": "val" };    // 這是JSON字串，比如從AJAX擷取字串資訊    var my_json_string = ‘{ "prop": "val" }‘;    // 將字串還原序列化成對象    var my_obj = JSON.parse( my_json_string );    alert( my_obj.prop == ‘val‘ ); //  提示 true, 和想象的一樣!    // 將對象序列化成JSON字串    var my_other_json_string = JSON.stringify( my_obj );

根據某個元素中class為 clasName的所有元素

    function getByClass(obj,classname){        var elements = obj.getElementsByTagName(‘*‘);        var result = [];//    匹配字串開頭或者空格        var pattern = new RegExp( ‘^|\\s‘+ classname + ‘\\s|$‘);        for(var i = 0; i < elements.length; i++){            if(pattern.test(elements[i].className)){                result.push(elements[i]);            }        }        return result    }    var div = document.getElementById(‘div‘)    var length = getByClass(div,‘red‘).length    console.log(length)

　　

 

JS進階學習路線——物件導向基礎