JS的一个封装和继承知识

最新推荐文章于 2022-06-10 16:04:19 发布

GQ_cyan

最新推荐文章于 2022-06-10 16:04:19 发布

阅读量267

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/GQ_cyan/article/details/83183772

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

面向对象的封装

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);