Offline-Verarbeitung des Frontends

Die Offline-Verarbeitung bezieht sich hier darauf, dass einige Ereignisse im Voraus offline ausgeführt werden und nicht, während die Anwendung ausgeführt wird.

Tatsächlich kann die Offline-Verarbeitung des Frontends in einigen Tools beobachtet werden, z Hintergrundbild in CSS: Wenn einige CSS-Tools packen und verarbeiten und die Dateigröße des Bildes relativ klein ist, liest das Tool den Dateiinhalt, konvertiert ihn in Base64 und fügt ihn direkt in die CSS-Datei ein, um HTTP-Anfragen zu reduzieren.

Ähnlicherweise wandeln Sie bei Verwendung von String-Vorlagen die String-Vorlage im Voraus in eine Funktion in js um, um zu vermeiden, dass die entsprechende Funktion zur Laufzeit generiert wird

Lassen Sie uns über andere Dinge sprechen Offline-Verarbeitung

Offline-Verarbeitung von Vorlagen

Benutzerdefinierte Tags

Viele Front-End-Frameworks unterstützen jetzt die Möglichkeit, benutzerdefinierte Tags zu schreiben, z. B. Elemente basierend auf Vue. Nehmen wir als Beispiel die Eingabenummer: http://element.eleme.io/#/en-US/component/input-number

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

Ein benutzerdefiniertes el-input-number-Tag, das endgültig generiert wird html ist

<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 ersetzt das benutzerdefinierte Tag durch den endgültig implementierten HTML-Inhalt. Dieser Vorgang wird zur Laufzeit durchgeführt. Tatsächlich kann dieser Vorgang offline über Tools durchgeführt werden und muss nicht durchgeführt werden, während das Programm ausgeführt wird.

String-Vorlage

String-Vorlagen sind auf vielen Front-End-Seiten zu sehen, und es gibt viele Template-Engines. Nehmen Sie als Beispiel die Template-Methode im Unterstrich: https://github.com /jashkenas/underscore /blob/master/underscore.js#L1579, wenn beim Generieren einer Funktion kein variabler Parameter vorhanden ist, wird eine with-Anweisung hinzugefügt.

Gibt es also eine Möglichkeit? es nicht zu verwenden? Was ist mit der Übergabe von Variablen ohne Verwendung der with-Anweisung? Dies kann auch offline erledigt werden. Die Vorlage lautet beispielsweise wie folgt

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

Wir können sie mithilfe von Tools problemlos in den folgenden Inhalt umwandeln

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

Dies erfordert die Hilfe von Tools ähnlich wie Acorn, ist aber möglich ist auf jeden Fall angekommen.

Einige Schüler sagen, dass dies falsch ist, weil die with-Anweisung nicht ausgeführt wird und es keine Möglichkeit gibt, zu wissen, woher die darin enthaltenen Variablen ihre Werte beziehen. Ja, aber wir können völlig zustimmen, dass alle in der Vorlage verwendeten Variablen explizit übergeben werden sollten, wenn

verwendet wird. Beispielsweise gibt es eine getUser()-Methode im Fenster, bevor sie mit

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

< entfernt wird 🎜>Zu diesem Zeitpunkt kann es normal funktionieren

Nach der Verarbeitung mit Offline-Tools und nach dem Entfernen mit wird die Vorlage zu

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

Zu diesem Zeitpunkt funktioniert es nicht, aber wir sind uns einig Um es in der Vorlage zu verwenden, sollte es beim Aufruf explizit übergeben werden, um mögliche Probleme zu vermeiden.

Natürlich besteht das beste Ergebnis der Offline-Verarbeitung dieser Vorlagenzeichenfolge darin, eine Funktion direkt dort zu platzieren.

CSS-Bildverarbeitung

Berücksichtigen Sie in unserem Projekt die folgende Dateistruktur

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

Wir packen normalerweise HTML und CSS in JS-Dateien. Ja, weil JS-Dateien einfach sein können modularisiert und HTML und CSS können an JS-Dateien angehängt werden. Auf diese Weise werden beim Laden von js bei Bedarf auch HTML und CSS bei Bedarf geladen, und es ist keine spezielle Verarbeitung für sie erforderlich.

Angenommen, sie sind endgültig verpackt und die index.js lautet wie folgt

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;);

Weitere Informationen finden Sie im Verpackungstool https://github.com/thx/magix -combine/issues/15.

Der Stil wird in einen String umgewandelt und in der js-Datei abgelegt.

Schauen wir uns eines an: Wenn wir Hintergrundbilder in CSS verwenden, hoffen wir, zur Erzielung bewährter Methoden webp zu verwenden, wenn wir das webp-Suffix unterstützen, 2x Bilder auf hochauflösenden Bildschirmen verwenden usw. Wenn wir zur Implementierung reines CSS verwenden, müssen wir viele Medienabfragen schreiben und CSS-Code generieren.

其实这个事情我们没办法离线处理，但我们可以这样做：书写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')+'}');

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