Talking about Performance and Data Separation

Inadvertently saw an article on the separation of performance and data, a detailed look, feeling and their understanding is not the same, there is this exploration.

1. What is performance and data separation?
Statement 1: Separation of performance and data is MVC, which separates data from business logic and distributes it by the controller. Obviously not.

Statement 2: Separation of presentation and data is the separation of Css and html+data. It is convenient to modify the presentation of pages, such as template making.

Statement 3: Representation and data separation is MVC in javascript, which separates data acquisition from data display.

Statement 4: Presentation and data separation are javascript controls data filling, and html is responsible for presentation

among

Statement 1 is obviously inconsistent.

Statement 2 should be called separation of expression and structure.

Say 3. Here's how to study and copy other people's code.

<html xmlns="http://www.w3.org/1999/xhtml&...;>
<head>

<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //Define a controller
        var piliController = {
            //Select View
            start: function () {
                this.view.start();
            },
            //Mapping user actions to model updates
            set: function (name) {
                this.model.setPerson(name);
            }
        };
        piliController.model = {
            piliKV: {
                'Ye Xiao Chu': 'The sword is crazy.',
                'One page book': 'Best practices',
                'Su Zhen Zhen': 'White lotus'
            },
            curPerson: null,
            //Data model is responsible for business logic and data storage
            setPerson: function (name) {
                this.curPerson = this.piliKV[name] ? name : null;
                this.onchange();
            },
            //Notify synchronous updates of data
            onchange: function () {
                piliController.view.update();
            },
            //Queries for the current state from the corresponding view
            getPiliAction: function () {
                return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
            }
        };
        piliController.view = {
            //User Triggered change Event
            start: function () {
                $('#pili').change(this.onchange);
            },
            onchange: function () {
                piliController.set($('#pili').val());
            },
            update: function () {
                $('#end').html(piliController.model.getPiliAction());
            }
        };
        piliController.start();
    });
</script>

</head>
<body>

<select id="pili">
 <option value="Ye Xiao Chu">Ye Xiao Chu</option>
    <option value="One page book">One page book</option>
    <option value="Su Zhen Zhen">Su Zhen Zhen</option>
</select>
<div id="end"></div>

</body>
</html>
Write really good code, personal idea is why not select in js with view generated?

That's Ajax.

Would it be better to combine 3 and 4?

Author QQ group 148042812

Tags: Front-end Javascript JQuery

Posted on Sat, 05 Oct 2019 19:05:43 -0700 by bdemo2