<link rel="stylesheet" type="text/css" href="../assets/styles/page1.less" />
<link rel="stylesheet" type="text/css" href="http://cdn.com/project/assets/styles/page1.css?_=md5" />
フロントエンドプロジェクト構造設計詳細計画_html/css_WEB-ITnose
最初に、フロントエンド プロジェクトは非常に単純です。html を外部に配置し、新しい css と js フォルダーを作成します。
時間が経ちプロジェクトが大きくなるにつれて、次の問題が次々と現れ始めました:
関連する人気のあるフレームワークには、grunt、gulp、webpack、bower などが含まれます。
ドキュメントを読む意欲のある人は、すでにこれらの新しいガジェットを使用し、多くのフロントエンドの問題を解決しています。
多くのツールがありますが、多くの新しいチームにとって、プロジェクトを完璧に計画する方法は依然としてハードルです。
彼らは、これらのツールをいつどのように使用すればよいのか知りません。フロントエンド プロジェクトの設計は非常に恣意的なものになる可能性があり、このランダム性が多くの人を選択の際に混乱させる原因となっています。
この記事では、フロントエンド プロジェクトを再構築する際に役立つことを願って、完璧なフロントエンド プロジェクトの構造計画計画を提供します。
計画計画は、ファイルの配置方法とファイルの名前の付け方を定義するだけではなく、さらに重要なことに、ツールのサポートがなければ、すべての計画が無意味になります。
フロントエンドプロジェクトの構造
根目录 |- assets: 存放所有js和css等，这些资源可能发布到 CDN | |- images: 存放所有 CSS 样式需要的背景图片<br /> | |- fonts: 存放所有 CSS 样式需要的字体 | |- styles: 存放所有CSS<br /> | | |- common: 存放公共的 CSS 代码 | |- scripts: 存放所有 JS<br /> | | |- common: 存放公共的 JS 代码 |- include: 存放所有公共的 HTML 头尾片段 |- images: 存放前景图片和flash |- libs: 存放前端所需的第三方类库 |- views: 如果使用了后端 MVC 框架，则页面放在这里。 |- _my: 存放开发者自己需要的文件，这个文件夹应该被 GIT 和 SVN 忽略掉。 |- page1.html 存放最终的前端页面，如果使用了 MVC 框架则不需要。
HTMLドキュメントの構造
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>标题</title> <!-- #include virtual="/include/header.inc" --> <link rel="stylesheet" type="text/css" href="assets/styles/common/blog.css" /> <link rel="stylesheet" type="text/css" href="assets/styles/page2.css" /></head><body> <!-- #include virtual="/include/body.inc" --> 内容 <!-- #include virtual="/include/footer.inc" --> <script type="text/javascript" src="assets/scripts/common/blog.js"></script> <script type="text/javascript" src="assets/scripts/page2.js"></script> <!-- #include virtual="/include/stat.inc" --></body></html>
/include/header.inc:
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, maximum-scale=1, user-scalable=no" /> <meta name="apple-itunes-app" content="app-id, app-argument="> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="" /> <link rel="shortcut icon" href="favicon.ico" /> <link rel="apple-touch-icon" href="favicon.png"> <link rel="stylesheet" type="text/css" href="../assets/styles/common/common.css" />
/include/body.inc:
ここにいくつかのページを置くことができますサイト全体に共通 たとえば、サイト全体に緊急通知バナーを追加する必要がある場合は、ここに追加できます。
<!--[if lt IE 9]><div role="alert">你的浏览器实在<strong>太太太太太太旧了</strong>，放学别走，升级完浏览器再说 <a target="_blank" class="alert-link" href="http://browsehappy.com">立即升级</a></div><![endif]-->
/include/footer.inc:
ここには、著作権ステートメントなど、サイト全体に共通するいくつかのフッターを配置できます。
<div>版权所有 @copy; 2015 xuld</div><script type="text/javascript" src="assets/scripts/common/common.js"></script>
/include/stat.inc:
ここにウェブサイト統計コードを入れることができます。
<!-- 在这里添加网站统计代码 --><br />
その他のファイル
プロジェクト内に公開サイドバーや広告スペースなどがあれば、ご自身でインクルードに他のファイルを追加することもできます。
Web サイトに複数の異なる著作権表示が必要な場合は、footer-full.inc と footer-simple.inc をそれぞれ 1 つ作成し、footer-common.inc を公開します。
静的リソース参照
プロジェクトでless/sass/coffeeやその他のテクノロジーを使用する必要がある場合は、これらのファイルを直接参照できます。公開すると、公開ツールは次の作業を実行します:
1.less/sass/coffee ファイルをコンパイルし、対応する css/js ファイルに変換します。
2. HTML ファイル内のリソース参照アドレスを更新し、生成された css/js ファイルを参照します。
3. これらのリソース ファイルの参照アドレスにタイムスタンプを追加します。
4. プロジェクトが CDN を使用している場合、公開ツールはファイルを CDN に自動的にアップロードし、ファイル内のパスを CDN アドレスに変更する必要があります。
公開前:
<link rel="stylesheet" type="text/css" href="../assets/styles/page1.less" />
ログイン後にコピー
<link rel="stylesheet" type="text/css" href="../assets/styles/page1.less" />
公開後:
<link rel="stylesheet" type="text/css" href="http://cdn.com/project/assets/styles/page1.css?_=md5" />
ログイン後にコピー
<link rel="stylesheet" type="text/css" href="http://cdn.com/project/assets/styles/page1.css?_=md5" />
タイムスタンプの問題
静的ファイルのキャッシュにより、公開するたびにパスが変更されない場合、ページが正しく表示されなくなる可能性があります。更新します。オプションは 3 つあります:
パスに ?_=md5 を追加します
- ファイル名を page1_md5.js に更新します
- 20151021 という名前のフォルダーにコピーします
- 個人的には、変更量が大幅に増加するため、オプション 1 を使用することをお勧めします。小さく、エラーが発生しにくくなります。ただし、CDN がそれをサポートしていない場合は、他のソリューションを使用できます。
スクリプトとスタイル
プロジェクト内で 1 人が CSS を担当し、1 人が JS を担当し、1 人が HTML からバックグラウンド コードへの変換を担当する場合、上記のフォルダー構造はより合理的です。
css と js を同じ担当者が担当する場合は、styles フォルダーと scripts フォルダーを区別せず、assets ディレクトリに直接配置することをお勧めします。
同じ人が HTML をバックエンド コードに変換する場合は、ページに CSS と JS を直接記述することをお勧めします。公開ツールはそれを抽出する責任があります:
<style __dest="assets/styles/page1.css"> /* CSS 代码 */</style>
パブリック コードの依存関係
すべての HTML ページは次のようにする必要があります。それぞれ 3 つの js と 3 つの css を引用します:
サイト全体に共通の js: common/common.js
个别页面可以引入一些外部的js和css，比如 editor.js 这种比较大的文件。但原则上每个文件最多只能引 5个js和5个css。需要引的文件多时则需要打包合并。
出于性能考虑，有时候可以将页面私有的js和css直接内联到页面。
<script src="assets/page1.js?__inline"></script>
模块化组件
所有可复用组件、第三方框架都放在 libs，libs 文件发布时会被忽略掉，项目里也不能直接引用 libs 下的代码。
如果需要引用一个组件，有三种方案：
简单的文件包含
如果项目较小，并不需要太大模块化东西，直接使用文件包含是最方便的：
common.js
// #include /libs/3rdlibs/jquery-2.1.0.js// #include /libs/3rdlibs/jquery.mobile.js<br /><br /><br />// 其它项目需要的公共代码
发布工具会处理 #include 。
CommonJS 模块化方案
var $ = require('libs/3rdlibs/jquery');发布后，CommonJs 模块会被转换为标准的 AMD 模块。
打包问题
假设一个页面需要引用 common.js 和 page1.js ，而这2个js又分别引用了 libs 下的若干个组件（可能有重复）
那么 page1.js 可以添加如下指令排除掉 common.js 所引入的文件
// #exclude common.jsvar $ = require('libs/3rdlibs/jquery');最后生成的代码，page1.js 将包含所有所需的模块，并删除了 common.js 包含的模块。
项目发布和调试
以上所介绍的代码方案是不能直接在浏览器运行的，这里有三个方案可以实现本文所描述的各个功能：
- 在浏览器执行 JS 实现上文所描述的所有功能。优点：兼容性好，缺点：效率低。
- 监听文件改变，文件保存后就解析以上指令并生成文件。优点：兼容性好，处理方便，缺点：不稳定。
- 自定义服务器，这个服务器在请求时自动完成生成任务。优点：效率高且稳定，缺点：需要定制服务器，且只在开发时使用。
其它工具支持
占位图
对应经常切页面的哥们，占位图是非常有用的。
<img src="@100x100.jpg">
Ajax 接口模拟
a.njs:
writeJsonp({ a: 1});
写在最后
本文所描述的是一种建议的做法，也是一个发布工具所需要提供的功能。每个团队可以针对自己的需求做一些个别的定制。本文所提到的示例都是以 tpack 为原型书写的。不同的工具会有稍微不同的写法。但是其解决的问题是一样的。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7328
9
1626
14
1350
46
1262
25
1209
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
