フロントエンドのオフライン処理

ここでのオフライン処理とは、アプリケーションの実行中に実行するのではなく、事前にいくつかのイベントをオフラインで実行することを指します

実際、フロントエンドのオフライン処理は、CSSの背景画像などのいくつかのツールで見ることができ、一部の CSS ツール パッケージ化処理中に、画像のファイル サイズが比較的小さい場合、ツールはファイルの内容を読み取り、base64 に変換し、それを CSS ファイルに直接配置して、http リクエストを削減します。

同様に、文字列テンプレートを使用する場合は、実行時に対応する関数が生成されないように、事前に文字列テンプレートを js で関数に変換してください

その他のオフライン処理について話しましょう

オフライン テンプレートの処理

カスタム タグ

多くのフロント- end フレームワークは、vue に基づく要素などのカスタム タグの記述方法をサポートするようになりました。 inputnumber を例として見てみましょう: http://element.eleme.io/#/en-US/component/input-number

<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>

カスタム el-input-number タグ、最終的に生成される HTML Yes

<div class="el-input-number">
    <div class="el-input">
        <input type="text" autocomplete="off" class="el-input__inner">
    </div>
    <span class="el-input-number__decrease el-icon-minus is-disabled"></span>
    <span class="el-input-number__increase el-icon-plus"></span></div>

vueカスタム タグが最終的な HTML コンテンツに置き換えられます。このプロセスは実行時に行われます。実際、このプロセスはツールを使用してオフラインで処理でき、プログラムの実行中に行う必要はありません。

文字列テンプレート

文字列テンプレートは多くのフロントエンド ページで見ることができ、多くのテンプレート エンジンがあります。例としてアンダースコアのテンプレート メソッドを取り上げます: https://github.com/jashkenas/underscore/blob/master /underscore.js #L1579、関数を生成するとき、変数パラメーターがない場合、通常は with ステートメントの使用を避けます。それでは、変数の受け渡しや with ステートメントの使用を回避する方法はありますか。これはオフラインでも処理できます。たとえば、テンプレートは次のとおりです

<%for(var i=0;i<list.length;i++){%>
    <%=list[i].text%><%}%>

ツールを使用して簡単に次のコンテンツに変換できます

<%for(var i=0;i<obj.list.length;i++){%>
    <%=obj.list[i].text%>
<%}%>

これには、どんぐりのようなツールを使用する必要がありますが、確実に変換できます。

with ステートメントは実行時に行われず、その中の変数がどこで値を取得するかを知る方法がないため、これは間違っていると言う生徒もいます。はい、しかし、テンプレートで使用されるすべての変数は使用時に明示的に渡されるべきであるという点には完全に同意できます

たとえば、with

var tmpl=&#39;<%=getUser()%>&#39;;
_.template(tmpl,{});

を削除する前にウィンドウにgetUser()メソッドがあります

現時点では、それは機能します通常

パス オフラインツール処理の場合、with を削除した後、テンプレートは

var tmpl=&#39;<%=obj.getUser()%>&#39;;
_.template(tmp,{});

になります。これは現時点では機能しませんが、テンプレートで使用されているものはすべて、呼び出し時に明示的に渡す必要があることに同意できます。潜在的な問題。

もちろん、このテンプレート文字列のオフライン処理の最良の結果は、そこに関数を直接配置することです。

Css画像処理

私たちのプロジェクトでは、次のファイル構造を考慮してください

|____index.html
|____index.css
|____index.js

jsファイルは簡単にモジュール化できるため、通常、htmlとcssをjsファイルにパッケージ化します。このように、jsをオンデマンドで読み込むと、htmlやcssもオンデマンドで読み込まれるため、特別な処理は必要ありません。

最終的にパッケージ化され、index.js が次のようになったと仮定します

var Magix=require('magix');
var indexHTML=&#39;<div class="mp-et5-content">...</div>&#39;;
Magix.applyStyle(&#39;mp-ec5&#39;,&#39;.mp-et5-content{color:red}&#39;);

詳細については、パッケージ化ツール https://github.com/thx/magix-combine/issues/15 を参照してください。

スタイルは文字列に変換され、js ファイルに配置されます。

一つ見てみましょう: CSS で背景画像を使用する場合、ベスト プラクティスを達成するために、webp サフィックスをサポートする場合は webp を使用し、高解像度画面では 2x 画像を使用するなどしたいと考えています。純粋な CSS を使用して実装する場合、多くのメディア クエリを記述し、CSS コードを生成する必要があります。

其实这个事情我们没办法离线处理，但我们可以这样做：书写css仍然是写最基础的背景图，不去考虑webp，2倍图等事情，也不需要写media query之类的。在打包时，把图片这块调用js函数在运行时动态处理

如前面文件结构中的，假设index.css中使用了一个背景图

.title{background-image:url(//cdn/a.png)}

我们打包到js中时，完全可以变成

var Magix=require('magix');
var ataptImg=function(img){
  //处理webp 2倍图等
  return img
}
Magix.applyStyle('mp-ec5','.mp-et5-title{background-image:url('+adaptImg('//cdn/a.png')+'}');

这样可以很方便的处理掉这些事情。