프런트엔드 오프라인 처리

여기서 오프라인 처리란 일부 이벤트를 미리 오프라인으로 처리하고 애플리케이션이 실행되는 동안에는 수행하지 않는 것을 의미합니다.

실제로 프런트 엔드의 오프라인 처리는 다음과 같은 일부 도구에서 볼 수 있습니다. CSS의 배경 이미지, 일부 CSS 도구가 패키징 및 처리 중일 때 이미지의 파일 크기가 상대적으로 작은 경우 도구는 파일 내용을 읽고 이를 base64로 변환한 후 CSS 파일에 직접 넣어 http 요청을 줄입니다.

마찬가지로 문자열 템플릿을 사용할 경우에는 문자열 템플릿을 js에서 미리 함수로 만들어서 런타임 시 해당 함수가 생성되지 않도록 해주세요

다른 얘기를 해보자 오프라인 처리

템플릿의 오프라인 처리

사용자 정의 태그

이제 많은 프런트 엔드 프레임워크는 vue 기반 요소와 같은 사용자 정의 태그 작성 방법을 지원합니다. 입력 번호를 예로 들어 보겠습니다. http://element.eleme.io/#/en-US/comComponent/input-number

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

사용자 정의된 el-input-number 태그, 최종 생성된 html은

<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 문이 런타임에 있지 않고 그 안의 변수가 값을 얻는 위치를 알 수 있는 방법이 없기 때문에 이것이 잘못되었다고 말하는 학생들도 있습니다. 예, 하지만

을 사용할 때 템플릿에 사용되는 모든 변수를 명시적으로 전달해야 한다는 점에는 전적으로 동의합니다. 예를 들어

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

<을 사용하여 제거하기 전에 창에 getUser() 메서드가 있습니다. 🎜>이번에는 정상적으로 작동할 수 있습니다

오프라인 도구로 처리한 후 로 제거한 후 템플릿은

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

현재로서는 작동하지 않지만 동의할 수 있습니다. 일부 잠재적인 문제를 피하기 위해 호출할 때 템플릿에서 이를 사용하려면 명시적으로 전달해야 합니다.

물론, 이 템플릿 문자열을 오프라인으로 처리한 가장 좋은 결과는 거기에 직접 함수를 넣는 것입니다.

Css 이미지 처리

우리 프로젝트에서는 다음 파일 구조를 고려하세요

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

우리는 일반적으로 html과 css를 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를 참고하세요. -결합/이슈/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')+'}');

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