面向對象的封裝
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);