フロントエンドプロジェクト構造設計詳細計画_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

フロントエンドプロジェクト構造設計詳細計画_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

最初に、フロントエンドプロジェクトは非常に単純です。html を外部に配置し、新しい css と js フォルダーを作成します。

時間が経ちプロジェクトが大きくなるにつれて、次の問題が次々と現れ始めました:

HTMLが多すぎて探すのが面倒

cssとjsを圧縮する必要がある

cssとjsをCDNに公開する必要がある

最初は単に 1 つの jQuery に依存していましたが、後からさらに多くのプラグインに依存していることがわかり、更新と保守が困難でした

html で共通ヘッダーを実装する方法

js と 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="http://cdn.com/project/assets/styles/page1.css?_=md5" />

タイムスタンプの問題

静的ファイルのキャッシュにより、公開するたびにパスが変更されない場合、ページが正しく表示されなくなる可能性があります。更新します。オプションは 3 つあります:

パスに ?_=md5 を追加します

ファイル名を page1_md5.js に更新します
20151021 という名前のフォルダーにコピーします

スクリプトとスタイル

プロジェクト内で 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: common/blog .js

Page private js: common/page1.js

cssとjsは同様に処理され、1対1に対応します。

个别页面可以引入一些外部的js和css，比如 editor.js 这种比较大的文件。但原则上每个文件最多只能引 5个js和5个css。需要引的文件多时则需要打包合并。

出于性能考虑，有时候可以将页面私有的js和css直接内联到页面。

<script src="assets/page1.js?__inline"></script>

模块化组件

所有可复用组件、第三方框架都放在 libs，libs 文件发布时会被忽略掉，项目里也不能直接引用 libs 下的代码。

如果需要引用一个组件，有三种方案：

简单的文件包含

基于 CommonJS 模块化方案

基于其它模块化方案

简单的文件包含

如果项目较小，并不需要太大模块化东西，直接使用文件包含是最方便的：

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="/static/imghwm/default1.png"  data-src="@100x100.jpg"  class="lazy" alt="フロントエンドプロジェクト構造設計詳細計画_html/css_WEB-ITnose" >

Ajax 接口模拟

a.njs:

writeJsonp({    a: 1});

写在最后

本文所描述的是一种建议的做法，也是一个发布工具所需要提供的功能。每个团队可以针对自己的需求做一些个别的定制。本文所提到的示例都是以 tpack 为原型书写的。不同的工具会有稍微不同的写法。但是其解决的问题是一样的。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

WebStorm Mac版

便利なJavaScript開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。