Webエンジニアリング構造にツッコミを入れる

概要

一般的によく見られるWebページの構造は、3つの部分で構成されています.

テンプレートhtml(エンジニアリングによってはバックエンドと協力する必要がありますが、最終的にはhtml

にレンダリングされます.

スタイルcss(一般にlessまたはsassによってコンパイルされた

)

スクリプトjavascript(ほとんどのオリジナルJavascriptは、coffeescript、typescript、またはES 6+コンバータなどで変換されて

になります.

Webエンジニアリングの進化

最初は、最も簡単なwebページから始まり、htmlで、cssとjavascriptはhtmlに直接書かれています.このときのページは次のように構成されています.

html

そして、cssとjavascriptが増え始め、cssとjavascriptを別のファイルに分け、linkラベルとscriptで導入します

html

いくつかのcss

javascript

最後に、html、css、javascriptはますます多くなり、ますます複雑になり、特に多くの人が開発している場合、これはまるで悪夢です.
このときよくすることは、機能別にモジュール別に分けて、共通のテンプレート、スタイル、javascriptライブラリを剥離することです.
このとき、Webページの構成要素はこうなります.

共通のテンプレート(頭部、底部、浮上操作欄等

)

コンポーネントのテンプレート(ページをめくる、フレームを弾くなど)

業務機能のテンプレート

共通のスタイルまたは変数(lessまたはsass

が必要)

コンポーネントのスタイル

業務機能の様式

ツールライブラリjavascript(jqueryとそのプラグイン、各種polyfill、その他のコンポーネントなど)

エンジニアリングアーキテクチャ型javascript(angular,reactおよびそのプラグインなど)、

具体的なビジネスロジックのjavascript

最後のシナリオをめぐって,各開発者は自分の方法に基づいて自分のエンジニアリングを構築したり,yeaomanのような既存のツールに直接依存したりする.

本題にもどる

ツッコミの対象はyeomanで構築されたプロジェクトで、compassとrequriejs、jqueryに基づいています.

cssの面では、

なんとすべてのページが同じcssファイルを使用しているのか、構築ツールは工事下のすべてのscssファイルを1つのファイルにコンパイルしているのか、

@import 'style1';
@import 'style2';
@import 'style3';
...（      ）

すべてのテンプレートがこのファイルを参照し、

名前の競合

scssを変更するには、再コンパイルしてまとめる必要があります(このプロセスは秒レベルと推定されます).これによりgrunt lreloadの自動リフレッシュが虚構になります.

jsの面で

requirejsを使用してモジュールをロードすると、奇妙な点は、すべての第1レベルのページがmainを導入していることです.js、main.js内部でページのタイプを判断し,対応するモジュールを再ロードする.次に、さまざまなjqueryプラグインがあります.jqueryのプラグインは通常$オブジェクトの下に掛けられているので、jqueryとそのプラグインのjsを導入するだけで、プラグインを使用したい場合は.では、ここでjqueryプラグインはどのように使用されていますか?一度に全部ロードするなんて

//libs.js
define(['jquery','addOne1','addOne2',...（     ）],function($){
  return $
})

プログラムの初期化時に、エンジニアリング下のすべてのjqueryプラグインが初期化されます.その後、プラグインを使用する必要がある場合、libsを1つ導入すればよい.jsでいいですが、明らかに非常に多くて非常に冗長です.

end

残りの他はツッコミを入れるのがおっくうで、主にその中の各種の冗長なコードに対して、問題は大きくありませんが、特に今のコンピュータの性能の下で、複数の数百KBは基本的に使用に影響しませんが、コードの大量の冗長に対して不快です.先端のおかずとして、私はずっとプログラム猿、あるいはエンジニアだと思っています.いろいろなツールを使って、もっと速く、もっと軽く、もっと簡潔な目標を追求するために努力して、絶えずそれに近づいてこそ、もっと速く成長することができます.