> 웹 프론트엔드 > JS 튜토리얼 > ❄️Dev.to 새해 복 많이 받으세요! ️에 대한 내 결과

❄️Dev.to 새해 복 많이 받으세요! ️에 대한 내 결과

Linda Hamilton
풀어 주다: 2025-01-03 00:39:37
원래의
289명이 탐색했습니다.

안녕하세요 여러분! 2025년을 앞두고 이번 명절을 맞아 모두 축하드리고 싶습니다! 올해는 많은 일이 일어났습니다. 이번 글에서는 제가 그동안 진행한 작업을 요약해 보고자 합니다.

댓글로 성과를 공유할 수도 있습니다! 읽으면 재미있을 것 같아요!

❄️Happy New Year Dev.to! My results for ️

Cample.js

2024년 나의 주요 목표 중 하나는 가상 DOM 없이 반응성을 사용하여 웹에서 가장 빠른 프레임워크 중 하나로 프레임워크를 개선하는 것이었습니다. 2023년 말까지 프레임워크의 지표는 1.12였습니다. 꽤 좋은 결과였지만, 어쨌든 나에게는 속도가 느려서 안타깝다.

❄️Happy New Year Dev.to! My results for ️

어쨌든 반년쯤 지나 드디어 구현을 마칠 수 있었습니다. 네, 시간이 많이 걸렸습니다. 물론 그렇게 많은 시간이 걸려서 알아낼 수 없었습니다. 사실, 해결책은 표면적으로는 사소해 보였지만, 그런 일이 일어났습니다. 여름쯤에 1.08에서 시원한 결과로 마무리할 수 있었습니다.

❄️Happy New Year Dev.to! My results for ️

이제 작업이 완료되었다고 할 수 있습니다. 예, 속도보다 조금 더 오래 앉아 있으면 이미 1.05까지 속도를 높일 수 있지만 기본 솔루션이 이미 존재하므로 별 의미가 없습니다.

그 후, 나는 이미 내가 원하는 것을 하고 새로운 의미가 필요했기 때문에 내 영혼에 약간의 공허함이 있었기 때문에 구현할 수 있는 새로운 아이디어를 생각했습니다. 내 생각에 프레임워크의 가장 좋은 지속은 다음과 같습니다.

HPL

그때 저는 이미 프레임워크를 개발하는 데 특별한 의미가 없다는 것을 분명히 이해했습니다. 현대 UI 도구가 갖고 있는 기능은 단순히 엄청나기 때문입니다. 하지만 빠른 렌더링의 발전도 놓치고 싶지 않았습니다. 기존 프레임워크, 확장된 마크업 및 서버와의 작업 간에 공생을 만들기로 결정했습니다.

작업에 유용할 수 있는 작업 마크업이 있지만 프레임워크 내에서는 작동하지 않는 것을 직접 찾아보세요.

<div>



<p>I didn't want to waste so much time spent on the framework + the idea of ​​SSR was already actively developing and developing, that it would be stupid of me not to combine these two parameters into something more worthwhile. Which does not create an architecture, but only complements. This is exactly what the first version of HMPL was.</p>

<p>After working for several months, the first version of HMPL was released, which was also called <strong>cample-html</strong>. It was the same as what I had done before, but only in the context of working with the server. It looked like this:<br>
</p>

<pre class="brush:php;toolbar:false">const templateFn = CampleHTML.createTemplate(
  `<template data-cample data-src="/api/test" data-method="get"></template>`
);

// (After the response arrives from the server) { element = template (HTMLTemplateElement type), status = 200 }
const elementObj = templateFn({
  credentials: "same-origin",
  get: (prop, value) => {
    if (prop === "element") {
      console.log(value);
    }
  },
});
로그인 후 복사

이미 지금과 비슷해 보였지만 당시에는 베타 테스트에 가까웠습니다. 이 모듈의 정상적인 사용을 방해하는 미완성 작업이 많이 있었습니다. 게다가 이름도 길고 형편없어서 많은 부분을 바꿔야 했습니다.

6개월이 지난 지금, 이미 사용이 가능하다고 말할 수 있습니다. 메모, 이벤트, 양식 자동 본문 등 멋진 기능이 많이 구현되었지만 아직 주요 작업이 완료되지 않았습니다. 요청 간격을 만들고, 웹 소켓에 대한 지원을 추가하고, 계획에 있는 몇 가지 추가 구현도 가능하다는 것을 알았습니다.

지금까지 프로젝트에 대해 다음이 구현되었습니다.

"hmpl-js"에서 { 컴파일 } 가져오기;

const templateFn = 컴파일(
  `<div>
  <form onsubmit="function 막기(e){e.preventDefault();};return 방지(이벤트);">



<p>내 생각에는 이 기능이 정말 유망해 보이고 이러한 기능은 많은 사람들이 멋진 웹사이트를 만드는 데 도움이 될 수 있습니다.</p>

<h2>
  
  
  결론
</h2>

<p>올해는 더 많은 일을 하고, 기능을 추가하고, 버그를 개선할 수도 있었지만 2025년에는 이 모든 것이 더 좋아질 것이라고 생각합니다.</p>

<p>결과는 다음과 같습니다. 나는 아주 작은 일이 이루어 졌다고 생각하지만 그것이 밝혀진 방법입니다. 당신은 어떻게 지내고 있나요? 읽어보시면 재미있을 것 같습니다.</p>

<p><em><strong>글을 읽어주신 모든 분들께 감사드립니다! 새해에는 모든 일이 잘되고 꿈이 모두 이루어지고, 코드가 깨끗해지고, 버그가 줄어들기를 바랍니다!</strong></em></p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173583599171114.jpg" alt="❄️Happy New Year Dev.to! My results for ️"></p>


          

            
        
로그인 후 복사

위 내용은 ❄️Dev.to 새해 복 많이 받으세요! ️에 대한 내 결과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿