jQ原理

原创于 2022-06-05 16:16:43 发布 · 181 阅读

CC 4.0 BY-SA版权

文章标签：

1、oop三大特征：
封装：将一堆方法和属性放在一起。目的：将信息隐藏
继承：最大限度重用代码。目的：找到共性，精简代码，提高重用性
多态：不同类的同名方法。目的：使语言具有动态性，具有更好的通用性
2、构造函数、析构函数
构造函数：开辟内存空间
析构函数：释放内存空间
3、原型：该类的公共存储空间，用于节省内存
4、原型链：当访问对象的某个属性或方法时，先在自己的构造函数中寻找，如果没有，就在自己的原型中寻找，如果还没有，就找原型的原型，一直向上寻找一直找到object的原型，这样形成的一个链条称之为原型链
5、MVC是什么：
是一种设计理念，将代码进行逻辑分离，分离成控制层、视图层及数据层三层
6、MVC有什么作用：
降低了耦合度，提高了代码的扩展性，易修改性
7、为了避免内存浪费，不建议方法写在构造函数
this.sale = function(){
   console.log(‘全场8折’); //封装把属性和方法放在一起
}
8、建议：方法及公共属性写在原型中
原需要用构造函数名调用，实例对象不能调用
原型的本质是个对象_proto_
9、object指向null
10、反转字符串：
function reverseString(string){
   return string.split(‘’).reverse().join(‘’);
}
11、继承：
我们使用call和apply方式实现构造函数的聚成
call与apply的作用：改变this指向
12、原型继承：
B.prototype = A.prototype
这里有引用问题
修改A就会修改B，修改B就会修改A
推荐：
for(var x in A.prototype){
   B.prototype[x] = A.prototype[x];
}

微信朋友圈：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信朋友圈</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html {
            font-size: 62.5%;
        }
        .container {
            width: 320px;
            height: 568px;
            box-shadow: 1px 1px 3px gray;
            margin: 0 auto;
            overflow: scroll;
        }
        ul {
            background-color: #e5e5e5;
        }
        li {
            background-color: #fff;
            margin-bottom: 1px;
            font-size: 1.6rem;
        }
        li>img {
            width: 56px;
            height: 56px;
            border-radius: 4px;
            float: left;
            margin: 10px;
        }
        li>div {
            width: 236px;
            float: left;
            margin-top: 10px;
        }
        li>div .nick {
            color: #546589;
        }
        li>div .words {
            line-height: 20px;
        }
        li>div .pics {
            overflow: hidden;
        }
        li>div .pics img {
            width: 75px;
            height: 75px;
            float: left;
            margin-right: 1px;
            margin-top: 1px;
        }
        li>div .link {
            display: block;
            height: 50px;
            background-color: lightgrey;
            margin: 10px 0;
        }
        li>div .link img {
            float: left;
            width: 50px;
            height: 50px;
        }
        li>div .link p {
            float: left;
            width: 180px;
            overflow: hidden;
            line-height: 50px;
            margin-left: 3px;
            color: black;
        }
        li>div .videoImg {
            display: block;
            width: 220px;
            height: 160px;
            margin: 10px 0;
        }
        li>div .adLink {
            display: block;
            width: 180px;
            height: 200px;
            margin: 10px 0;
        }
        li>div .adLink img {
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
        </ul>
    </div>
</body>
<script src="js/data.js"></script>
<script src="js/model.js"></script>
<script src="js/view.js"></script>
<script>
    data.forEach(function(obj){  //只有纯数组可以用，类数组不可以用
        var model = createModel(obj);
        var view = createView(model);
        document.querySelector('ul').appendChild(view);
    })
</script>
</html>

/*
    type:
    *info  图文类型
    *video 视频类型
    *ad    广告类型
    *link  链接类型
*/

var data = [
    {
        head_pic: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
        nick: "hey，熊猫先生",
        words: "大郎，该吃药了！",
        type: "info",
        time: "1小时前",
        pics: [
            "https://t7.baidu.com/it/u=2582370511,530426427&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=2851687453,2321283050&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=4069854689,43753836&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=2141219545,3103086273&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=3332251293,4211134448&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=1035726655,1110652804&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=762481686,2214126081&fm=193&f=GIF"
        ]
    },{
        head_pic: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
        nick: "路人甲",
        words: "今天好像看到策哥了！",
        type: "video",
        time: "1小时前",
        video_url: "https://t7.baidu.com/it/u=4080826490,615918710&fm=193&f=GIF"
    },{
        head_pic: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
        nick: "hey，熊猫先生",
        words: "大郎，该吃药了！",
        type: "info",
        time: "1小时前",
        pics: [
            "https://t7.baidu.com/it/u=2582370511,530426427&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=2851687453,2321283050&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=4069854689,43753836&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=2141219545,3103086273&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF"
        ]
    },{
        head_pic: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
        nick: "hey，熊猫先生",
        words: "大郎，该吃药了！",
        type: "info",
        time: "1小时前",
        pics: [
            "https://t7.baidu.com/it/u=2582370511,530426427&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=2851687453,2321283050&fm=193&f=GIF"
        ]
    },{
        head_pic: "https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF",
        nick: "路人已",
        words: "今天好像看到策哥了！",
        type: "ad",
        time: "1小时前",
        ad_pic: "https://t7.baidu.com/it/u=3713375227,571533122&fm=193&f=GIF",
        link: "http://www.baidu.com"
    },{
        head_pic: "https://t7.baidu.com/it/u=2235903830,1856743055&fm=193&f=GIF",
        nick: "路人并",
        words: "今天好像看到策哥了！",
        type: "link",
        time: "1小时前",
        linkInfo: {
            pic: "https://t7.baidu.com/it/u=801209673,1770377204&fm=193&f=GIF",
            content: "这是个链接",
            url: "http://www.jd.com"
        }
    },{
        head_pic: "https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF",
        nick: "路人已",
        words: "今天好像看到策哥了！",
        type: "ad",
        time: "1小时前",
        ad_pic: "https://t7.baidu.com/it/u=3713375227,571533122&fm=193&f=GIF",
        link: "http://www.baidu.com"
    },{
        head_pic: "https://t7.baidu.com/it/u=2235903830,1856743055&fm=193&f=GIF",
        nick: "路人并",
        words: "今天好像看到策哥了！",
        type: "link",
        time: "1小时前",
        linkInfo: {
            pic: "https://t7.baidu.com/it/u=801209673,1770377204&fm=193&f=GIF",
            content: "这是个链接",
            url: "http://www.jd.com"
        }
    },{
        head_pic: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
        nick: "hey，熊猫先生",
        words: "大郎，该吃药了！",
        type: "info",
        time: "1小时前",
        pics: [
            "https://t7.baidu.com/it/u=2582370511,530426427&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=2851687453,2321283050&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=4069854689,43753836&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=2141219545,3103086273&fm=193&f=GIF",
            "https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF"
        ]
    },{
        head_pic: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
        nick: "路人甲",
        words: "今天好像看到策哥了！",
        type: "video",
        time: "1小时前",
        video_url: "https://t7.baidu.com/it/u=4080826490,615918710&fm=193&f=GIF"
    }
];

function Model(obj){
    this.head_pic = obj.head_pic;
    this.nick = obj.nick;
    this.time = obj.time;
    this.type = obj.type;
    this.words = obj.words;
}

// 子类
function InfoModel(obj){
    Model.call(this,obj);
    this.pics = obj.pics;
}
function AdModel(obj){
    Model.call(this,obj);
    this.ad_pic = obj.ad_pic;
    this.link = obj.link;
}
function VideoModel(obj){
    Model.call(this,obj);
    this.video_url = obj.video_url;
}
function LinkModel(obj){
    Model.call(this,obj);
    this.linkInfo = obj.linkInfo;
}

// 外部调用
function createModel(obj){
    var model = null;
    if(obj.type === "ad"){
        model = new AdModel(obj);
    } else if (obj.type === "link"){
        model = new LinkModel(obj);
    } else if (obj.type === "video"){
        model = new VideoModel(obj);
    } else if (obj.type === "info"){
        model = new InfoModel(obj);
    }
    return model;
}

// 创建不同类型的视图
function infoView(model){
    var d = document.createElement('li');
    d.innerHTML = `
    <img src="${model.head_pic}" alt="">
    <div>
        <p class="nick">${model.nick}</p>
        <p class="words">${model.words}</p>
        <div class="pics">
        
        </div>
        <p class="time">${model.time}</p>
    </div>
    `;
    // 根据数据的内容动态添加img
    var pics = d.querySelector(".pics");
    model.pics.forEach(function(url){
        pics.innerHTML += `
            <img src="${url}" />
        `
    })
    return d;
}
function adView(model){
    var d = document.createElement('li');
    d.innerHTML = `
    <img src="${model.head_pic}" alt="">
    <div>
        <p class="nick">${model.nick}</p>
        <p class="words">${model.words}</p>
        <a class="adLink" href="${model.link}">
            <img src="${model.ad_pic}" alt="">
        </a>
        <p class="time">${model.time}</p>
    </div>
    `;
    return d;
}
function linkView(model){
    var d = document.createElement('li');
    d.innerHTML = `
    <img src="${model.head_pic}" alt="">
    <div>
        <p class="nick">${model.nick}</p>
        <p class="words">${model.words}</p>
        <a href="${model.linkInfo.url}" class="link">
            <img src="${model.linkInfo.pic}" alt="">
            <p>${model.linkInfo.content}</p>
        </a>
        <p class="time">${model.time}</p>
    </div>
    `;
    return d;
}
function videoView(model){
    var d = document.createElement('li');
    d.innerHTML = `
    <img src="${model.head_pic}" alt="">
                <div>
                    <p class="nick">${model.nick}</p>
                    <p class="words">${model.words}</p>
                    <img class="videoImg" src="${model.video_url}" alt="">
                    <p class="time">${model.time}</p>
                </div>
    `;
    return d;
}


// 对外调用
function createView(model){
    var li = null;
    if(model.type === "ad"){
        view = adView(model);
    } else if (model.type === "link"){
        view = linkView(model);
    } else if (model.type === "video"){
        view = videoView(model);
    } else if (model.type === "info"){
        view = infoView(model);
    }
    return view;
}