JS: Object Oriented (MVC)

MVC

1. Explain what he is

It is a design concept to logically separate the code,

Separated into three layers: control layer, view layer and data layer

2. What is the effect

Reduced coupling, improved code scalability, and ease of modification

 

M : Model, model. JavaBean

• Complete specific business operations, such as querying the database and encapsulating objects

V : view view. JSP, HTML, etc. for data display

C : Controller controller. Servlets

• Get View request

• Call the model to hand over the data to the view for display

html

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

data.js

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"
    }
];

model.js

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

view.js

// 创建不同类型的视图
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 view = 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;
}