JS的一個封裝和繼承知識
阿新 • • 發佈：2018-11-25
面向物件的封裝
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0;padding:0 } .con{ width:500px;height:600px;background: green; font-size: 30px; text-align: center; line-height: 600px; } </style> </head> <body> <div class="con">網頁內容</div> <div id="ad"></div> <div id="tagad" ad-type="1"></div> <script type="text/javascript" src="adsdk.js"></script> <script> JSsdk.getaddata({ url:"/study/sdkstudy/jssdk/index.json", method:"get", data:{ "page":1, //頁碼 "pageSize":10, //每頁的數量 "status":1 ,//稽核狀態【1表示待稽核，2表示稽核通過，3表示稽核未通過，預設全部】 "order":1 //排序【預設倒敘，當order為1時正序排列】 } }); </script> </body> </html>
adsdk.js:
/** * Created by Administrator on 2018-10-19. */ (function(win,doc){ function adSdk(containter){ this.containter=containter; } adSdk.prototype._ajax=function(params){ var url = params.url; var method = params.method; var data = params.data || {}; var success=params.success; var fail=params.fail; var xhr=new XMLHttpRequest(); xhr.open(method,url); if(method=="post"){ xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" ); } xhr.onreadystatechange = function() { if (xhr.readyState===4) { if (xhr.status===200) { //JSON.parse(xhr.responseText) success && success(JSON.parse(xhr.responseText)); } else { fail && fail('status: ' + xhr.status); } } } if(typeof data === 'object'){ try{ data = JSON.stringify(data); }catch(e){} } xhr.send(data); } /*請求圖片資料並繪製到頁面*/ adSdk.prototype.getaddata=function(params){ this._ajax({ url:params.url, method:params.method, data:params.data, success:function(res){ var datalist=res; var adcontainer=doc.getElementById("ad"); var img=doc.createElement("img"); var p=doc.createElement("p"); var content=doc.createTextNode(datalist.name); adcontainer.style.backgroundColor="red"; adcontainer.style.width="auto"; adcontainer.style.textAlign="center"; adcontainer.style.position="absolute"; adcontainer.style.top="10px"; adcontainer.style.padding="10px"; img.src=datalist.icon; img.style.width="200px"; img.style.height="200px"; adcontainer.appendChild(img); p.appendChild(content); adcontainer.appendChild(p); console.log(typeof res) }, fail:function(err){ console.log(err) } }) } win.JSsdk = new adSdk(); })(window,document)
JS的繼承
直接在頁面引用mao.相關屬性即可
(function() { function animal(name,age){ this.name=name; this.age=age; } animal.prototype.say=function(){ console.log(1111) } /*原型鏈繼承： * 父類的示例是子類的原型 * 缺點： * 1，無法繼續繼承； * 2，來自原型物件的所有屬性被所有例項共享； * 3，建立子類示例無法向父類建構函式傳參*/ //function cat(){} //cat.prototype = new animal(); //cat.prototype.name = 'cat'; /*構造繼承： * 使用父類的建構函式來增強子類例項，等於是複製父類的例項屬性給子類（沒用到原型） * 不能繼承原型上的東西 * 無法實現函式複用，每個子類都有父類例項函式的副本，影響效能*/ //function cat(name,age,color){ // animal.call(this,name,age); // this.color= color || 12; // this.run=function(){ // console.log("gogo") // } //} /*組合繼承： * 通過呼叫父類構造，繼承父類的屬性並保留傳參的優點，然後通過將父類例項作為子類原型，實現函式複用 * 缺點： * 呼叫了兩次父類建構函式，生成了兩份例項（子類例項將子類原型上的那份遮蔽了）*/ //function cat(name,age,color){ // animal.call(this,name,age); // this.color= color || 12; // this.run1=function(){ // console.log("gogo") // } //} //cat.prototype=new animal(); //cat.prototype.run=function(){ // console.log("iii") //} //cat.prototype.constructor=cat;//不要也行 /*寄生組合繼承 * 通過寄生方式，砍掉父類的例項屬性，這樣，在呼叫兩次父類的構造的時候，就不會初始化兩次例項方法/屬性，避免的組合繼承的缺點 * 缺點： * 實現較為複雜*/ //function cat(name,age,color){ // animal.call(this,name,age); // this.color= color; // this.run1=function(){ // console.log("gogo") // } //} //(function(){ // //建立空示例物件 // var jump = function(){} // jump.prototype=animal.prototype; // cat.prototype=new jump(); //})(); //cat.prototype.run=function(){ // console.log("iii") //} window.mao=new cat("cat",10,12) })(window);