七、View.js介绍 - 视图

视图，是用户视觉上在设备上看到的一页内容，也是由View.js驱动的单页应用的页面区块载体。

如下所示，ID为"view1"和"view2"的两个DOM元素，便是两个视图的布局骨架：

<!DOCTYPE HTML>
<html>
<head>
    <link rel = "stylesheet" href = "js/plugin/view/view.min.css"/>

    <link rel = "stylesheet" href = "css/main/view1.css"/>
    <link rel = "stylesheet" href = "css/main/view2.css"/>
</head>
<body>
    <section id = "view1" data-view = "true" data-view-default = "true" data-view-title="View title 1">
        ...
    </section>
    <section id = "view2" data-view = "true" data-view-title = "View title 2">
        ...
    </section>

    <script type = "text/javascript" src = "js/plugin/view/view.min.js"></script>

    <!-- 使能view1操作 -->
    <script type = "text/javascript" src = "js/main/view1/init.js"></script>
    <script type = "text/javascript" src = "js/main/view1/action.js"></script>

    <!-- 使能view2操作 -->
    <script type = "text/javascript" src = "js/main/view2/init.js"></script>
    <script type = "text/javascript" src = "js/main/view2/action1.js"></script>
    <script type = "text/javascript" src = "js/main/view2/action2.js"></script>
</body>
</html>

亦即，用户在手机屏幕上看到的界面，是由view1和view2提供的。当区块view1活动时，用户看到的是view1的表现效果；当活动的视图切换至view2时，用户看到的是view2的表现效果。

至于view1和view2的展示效果和操作体验，则是开发者使用html、css和js等web知识开发完成的效果。

View.js为开发者提供了多种视图切换方式，我们将会在后文中详细阐述。

七、View.js介绍 - 视图

猜你喜欢