mvc Structure_html/css_WEB-ITnose に基づくフロントエンドページフレームワークの構築-htmlチュートリアル-php.cn

mvc Structure_html/css_WEB-ITnose に基づくフロントエンドページフレームワークの構築

WBOY

リリース： 2016-06-24 11:39:59

オリジナル

1542 人が閲覧しました

私は 1 年間フロントエンドを開発してきました。私自身の実践からまとめた開発経験を少し共有したいと思います。人生には必ず波乱万丈がつきものです。私たちは皆、勉強や仕事をより効率的にする方法を学ばなければなりません。これはコードにも当てはまります。

それでは、私がまとめたフロントエンドフレームワーク構築(レイアウト構築)を紹介していきます。

1. プロジェクトのファイル構造。

2、index.html ページコンテンツ

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>index</title> 6     <link rel="stylesheet" href="css/layout.css"> 7     <link rel="stylesheet" href="css/bs.cut.min.css"> 8 </head> 9 <body>10     <div id="container">11         <div class="header"></div>12         <div class="contain"></div>13         <div class="footer"></div>14     </div>15 </body>16 <script>17     window.APP = {};18 </script>19 <script type="text/javascript" src="/framebj/thirdparty/jquery/1.11.1/jquery.min.js"></script>20 <script src="js/controller/index.js"></script>21 <script src="js/view/common.js"></script>22 <script src="js/view/index.js"></script>23 <script>24     $(function() {25         APP.controller.index.start();26     })27 </script>28 </html>

ログイン後にコピー

ページレイアウトスタイルは主にlayout.css にあります。ページ構造は上部、中間、下部で構成されます。ここでは、js がファイルの読み込みをどのように制御するかに焦点を当てます。ページの js の先頭で、グローバルオブジェクトを設定します。すべてのビジネスメソッドとプロパティはこのオブジェクトにリンクされます。ページ上の基本レイアウトに加えて、他のすべてのプログラムの実行は APP.controller.index.start() メソッドを通じて開始されます。このメソッドは制御層として機能します。コードは次のとおりです:

APP.controller = {};APP.controller.index = (function() {    var api = {};    api.start = function() {        APP.view.index.loadBody(function() {            addEvent();        });    }    function addEvent() {        // add someThing    }    return api;})()

ログイン後にコピー

その中で、start メソッドの APP.view.index.loadBody() メソッドは、MVC のビュー層として機能し、その主な機能はページに要素を追加することです。。コードは次のとおりです。

APP.view.index = (function() {    var api = {};    api.loadBody = function(callback) {        $('.header').html(APP.view.common.getBlueHeaderHtml());        callback.call(this);    };    return api;})()

ログイン後にコピー

ここで、すでに APP.view.index.loadBody() メソッドがあるのに、なぜこのメソッドに追加の共通ビューレイヤーを追加する必要があるのかを考えてみましょう。答えは簡単です。プロジェクトでは 1 つのページだけを作成することはできません。このようにして、ページの公開部分のコードを共通のビューレイヤー js に配置しました。新しいインターフェースだとパブリックモジュールからすぐに参照できるようになりましたが、ビュー層でもできるのでコントロール層でもできるのでしょうか？ここでは、ビュー層について簡単に説明します。興味があれば、ご自身で学習していただくか、私が喜んで共有します。以下はビューレイヤーの公開部分です。コードは次のとおりです。

APP.view={};APP.view.common = (function() {    var api = {};    api.getBlueHeaderHtml = function() {        return [            '<div class="banner">',            '<div class="page">',            '<ul class="pull-right nav icon-nav" style="top: 16px;">',            '<li><img src="http://placehold.it/48x48"><a href="">首页</a></li>',            '<li><img src="http://placehold.it/48x48"><a href="">考试</a></li>',            '<li><img src="http://placehold.it/48x48"><a href="">成绩查询</a></li>',            '<li><img src="http://placehold.it/48x48"><a href="">个人中心</a></li>',            '</ul>',            '<div class="logo">',            '<h1>福建业余无线电操作能力考试</h1>',            '</div>',            '</div>',            '</div>'        ].join('');    }    api.getGreenHeadHtml = function() {        // do same different html    }    return api;})()

ログイン後にコピー

これら 3 つのモジュールの開発を通じて、ページ構造を手動で変更することなく、ページヘッダーのさまざまな効果をすばやく作成できます。

もちろん、このスペースでは MVC のモデル層についてはあまり紹介しません。皆さんのアドバイスを歓迎します。添付ファイルのアップロード方法がわかりません (==) ソースコードが必要な場合は、私を直接追加してください。