ホームページ > 記事 > ウェブフロントエンド > mvc Structure_html/css_WEB-ITnose に基づくフロントエンド ページ フレームワークの構築
mvc Structure_html/css_WEB-ITnose に基づくフロントエンド ページ フレームワークの構築
- WBOYオリジナル
- 2016-06-24 11:39:591513ブラウズ
私は 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 のモデル層についてはあまり紹介しません。皆さんのアドバイスを歓迎します。 添付ファイルのアップロード方法がわかりません (==) ソース コードが必要な場合は、私を直接追加してください。