前端架构的演进

一些历史和最佳实践

洪荒时代

<html>
<head>
    <title>An Example</title>
</head>
<body>
    <div id="word"></div>
    <button onClick="sayHello"></botton>
    <script>
        var sayHello = function() { 
            document.findElementById('word').html('Hello world');
        }
    </script>
</body>
</html>

缺点:

  • 所有逻辑都混在一起写,很难维护和阅读

MVC

Model

deck

By zation

deck

  • 481