面向对象的封装
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);