静的ページ_html/css_WEB-ITnose を記述する作業にどのようにアプローチすればよいですか

固定ページとは

ポータル

記事のきっかけ

最近、会社のフロントエンド業務を担当しています。マーチャントバックエンドプロジェクトですが、残念なことに、私は静的なページを書くだけで、JSコードを書く必要はありません。最初はどうしてそんな低いことをすることができたのでしょうか？フロントエンドはハイエンドでなければなりません！ Angular と React についてはどうですか?結局のところ、JD を採用する際にも、対応するスキル ツリー要件があります。

写真をカットしてほしいのですが〜 ここまで言っても、できますか？

したがって、この記事はこの記事です。

剣を研ぐか、木を切るか

作業を始める前に要件を理解してください

固定ページを書く前に要件を理解する必要があるのか​​と疑問に思う人もいるかもしれません。

プロダクト マネージャーの Axure の指示に従っていると言ったらどうしますか?

それについて知った後、すべてのバックエンドがやり直される予定であることがわかりました。 。 。 。 。

作業を始めます。モダンなカットアウトを定義するにはどうすればよいですか?

UI フレームワーク

すべての背景はやり直す予定なので、統一されたスタイルが必須です。統一されたスタイルが必要なため、UI フレームワークが不可欠です。ここでは、Bootstrap をベースとして選択し、less を通じて詳細なカスタマイズを実行して、会社の統一スタイルの UI ライブラリを形成します。これを見ると、これは Bootstrap への言及ではないかと思われるかもしれません。そう思うなら、私ならそうするでしょう。

Bootstrap に基づいており、UI のカスタマイズにはあまり使用しません。たとえば、基本色、角丸、フォント サイズ、間隔、コンポーネント スタイルなどです。これらのタスクを通じて、less、ポータル

自動構築

なんてことだ! などの CSS 前処理言語を深く理解することができます。単に静的なページを書いているだけではないでしょうか？これは自動ビルドとどのような関係があるのでしょうか?あなたは物を投げる能力が高すぎます。

もちろん、従来のように DW を使用してページを描画する必要はありません。しかし、少しでも作業効率を追求するエンジニアであれば、必ず自動化施工を利用することになるでしょう。自動化のメリットについて見ていきましょう。

1. 重複した作業を削除します。自動化により、繰り返しの作業を構築ツールに引き渡すことができ、たとえば、一般的なヘッダー、テール、バナーなどを独立したテンプレートに抽象化して導入できます。

2. ビルドを通じて、コンパイル、圧縮、マージなどのコードを減らすことができ、それらはすべて command+s を押した瞬間に完了します

3. 低レベルの間違いを避けてください。画像を頻繁に切り取る人なら、一度は経験したことがあると思います。新しいHTMLをコピーした後、CSS参照の名前が変更されていないことがわかりました。このような問題は自動化することで解決できます。考えてみてください、人生はずっと良くなりました。

4. 自由に ctrl+c/v を押します。これについては説明する必要はありません~~結局のところ、コードの 80% はこの方法で生成されます。 。 。

5. 効率を向上させます。上記の問題を解決したら、効率を改善することはできませんか?

6. スキルツリーを追加する 自動構築のフロントエンドなので、結局のところ、gulp のスローガンはワークフローを自動化して強化することです。

7. 同じことをしてもっとメリットを考えている場合は、メッセージを残してください^_^

コラボレーション

従来の方法

従来のフロントエンドとバックエンドのカットアウト連携方法は、A (カットアップボーイ) が静的ページを書いた後、B (バックエンドエンジニア) にページを送信するように通知します。 QQ、メール等でAへ B、B コードをダウンロード後、ローカルでプレビューし、要件を満たしていることを確認した後、静的ページをバックエンドテンプレート（弊社で使用しているFreeMarkerなど）に設定する。

コード管理ツールと連携する

複雑なプロジェクトのほとんどは、コード管理ツール (Git、SVN などの一般的に使用されるツール) を使用します。コード管理ツールを使用すると、A は静的ページを作成した後、コードを送信して B に通知するだけで済みます。B はコードを取得してローカルでプレビューし、要件を満たしていると判断した後、静的ページを に設定します。バックエンドテンプレート。

どうやってやったの?

当社では、バックエンドでコード管理に SVN を使用しています。フロントエンド部門では自社で構築したGitlabを利用しています。フロントエンド エンジニアとして、私は Git に対する愛を隠しません。 SVN を使用させてください。満足していません。バックエンドを Git に移行しますか?これはスペースとタブの間の聖戦のようなものです~

もちろん、これは最も重要なことではありません。写真をカットする経験がある学生は、この経験を持っているはずです。幸いなことに、ページを書き終えた後、バックエンドのクラスメートは多くの場合、何らかの考えを表明します (ただし、彼らは自分たちでそれを書きません)。ここを変更し、あそこを変更する、というように。プロダクトマネージャーが叩かれるのはそういうことじゃないですか。これを避けるためには、バックエンドで使用する前に見てもらうのが最善ではないでしょうか。

私の計画は次のとおりです。

1. バックエンド エンジニアがオンラインでページをプレビューし、使用前に意見を言える場所を提供します。 Node.js を使用して、静的ページ プレビューを提供するサーバー サービスを提供します。

2. オンラインでソース コードをダウンロードできる場所を提供します。結局のところ、コード管理ツールの争奪戦を始めたくないのです^_^。Node.js を通じて動的パッケージングと圧縮機能を提供します。 、独立したパッケージ化と単一ページのパッケージ化をサポートします。

3. 上記の関数は、Gitlab の Hook 関数に基づいて自動化され、自動的にビルドおよびリリースされる必要があります。

ある程度の経験

いわゆるソリューションは、大きく 2 つのタイプに分けることができます:

1 つは普遍的なもので、多くの場合、Angular、React、vue などの一連のフレームワークを形成します。 ;

1 つは特定のビジネスに基づいており、多くの場合、複数のスキル ツリーによってまとめられた一連のプロセスです

vczero による

個人的には次のことに同意しますそれ この発言。私自身は、個人の全体的な資質をより適切にテストできる、ビジネスベースのソリューションをより重視しています。

私の意見では、最善のソリューションはなく、エンジニアは継続的な自己改善の過程で継続的なイノベーション基準を要求する必要があるだけです。私は、すべての技術研究はビジネスに基づいているべきだと主張します。

私はインタビューで、多くのプログラマーがフロントエンド、Angular、React、Node.js、NPM、Bower などの名詞を覚えるのを好むことに気づきました。よくよく聞いてみると、彼らのほとんどはデモにとどまっており、これらのテクノロジーの本質を理解し、そのテクノロジーの適用可能なシナリオを理解できず、職場でこれを自慢する人によく遭遇します。専門用語を一日中使っているのに、職場で自分のコンフォートゾーンを突破できない人たちを、私は猥褻とも呼びます。

結局のところ、私はプロダクトマネージャーが最も優れていると思います。世界の種におけるわいせつ行為の頻度。 そうです！私はとても直接的です。

どんな仕事をしていても最後に書きます どの事業でも成長してください

上の写真は百度~~~~