[오픈소스 프론트엔드 프레임워크]일부 중학생 프레임워크 tntjs

11447 단어 opensourcehtmljavascript

처음부터 런타임 프런트엔드 프레임워크를 만들었습니다.



안녕하세요!

저희는 BugDuck이라는 이름의 오픈소스 팀으로 주로 중학교 개발자들로 구성되어 있습니다.

2022년 4월, 갑작스러운 생각으로 TNTjs를 시작했습니다. 처음에는 런타임 프로그래밍 언어를 외부 세계에 홍보하고 순수한 JavaScript로 구현했지만 나중에는 비현실적이라고 느꼈기 때문에 TNTjs를 실시간 동적 완전 반응형 프런트 엔드 프레임워크로 변경하고 양방향 데이터 바인딩을 지원했습니다.

이제 우리는 TNTjs를 다시 리팩토링하고 있습니다. 올해 7월 말에 tntjs Alpha 0.2.0을 출시할 예정입니다.

이제 TNTjs의 몇 가지 핵심 기능을 소개하겠습니다!

0.2.0에서는 Vuejs에서와 같이 reactive()를 사용하여 동적 변수를 사용할 수 있습니다. <v data="variableName"> 태그를 사용하여 데이터를 렌더링할 수도 있습니다.

<v data="x"></v>


그 이상으로 모든 핵심 기능을 TNTApp 최상위 클래스로 래핑했습니다. 다음과 같이 사용할 수 있습니다.

const app = new TNT.TNTApp()
    .useData({
      x: 233333
    })
    .mount(document.getElementById("app"));


TNTjs Alpha 0.2에서 우리는 가상 DOM을 사용하고 있으며 TNTjs Alpha 1.0보다 훨씬 빠릅니다. 10000개의 노드를 렌더링하는 데 약 200ms가 걸립니다. 그러나 - 여전히 매우 느리고 현재 성능을 개선하기 위해 노력하고 있습니다.
<t-for>를 사용하여 루프를 구현하고 <t-if> <t-elif> <t-else>를 사용하여 조건 렌더링을 구현할 수 있습니다.

다음은 TNTjs의 키친 싱크 데모입니다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TNTjs Demo</title>
  <script src="./dist/tnt.min.js"></script>
  <style>
    .green {
      color: green;
    }

    .red {
      color: red;
    }
  </style>
</head>

<body>
  <div id="root">
    <div>
      <h1>Counter</h1>
      <v data="nae"></v>
      Bar: <v data="bar"></v>
      <p :class="(sum % 2 === 0 ? 'green' : 'red')">
        Sum:
        <v data="sum"></v>
      </p>
      <button onClick="data.foo.push(1)">Plus 1</button>
      <button onClick="foo.push(-1)">Minus 1</button>
      <button onClick="foo.pop()">Pop top</button>
      <button onClick="bar++">Plus bar</button>
      <button onClick="foo[foo.length - 2] += 2">Plus 2</button>
      <t-if cond="sum % 2 === 0"> It's even! </t-if>
      <t-else> It's odd! </t-else>
      <br />
      <p>
        <code>data.foo</code>
        content:
      </p>
      [
      <t-for data="currentNumber in foo">
        <span onclick="alert(`You clicked: ${currentNumber}`)">
          <t-if cond="currentNumber > 0">
            <v data="`${currentNumber}`"></v>,
          </t-if>
          <t-else>
            &larr; 0
          </t-else>
        </span>
      </t-for>
      <t-if cond="foo.length && foo[foo.length - 1] > 0">
        <span>
          <v data="`${foo[foo.length - 1]}`"></v>
        </span>
      </t-if>
      ]
      <t-get src="./test.json" type="json">
        <v data="name"></v>
      </t-get>
    </div>
  </div>
</body>
<script>
  const app = new TNT.TNTApp()
    .useData({
      nae: 114514,
      foo: [],
      bar: 5,
    })
    .useComputed({
      sum() {
        let sum = 0;
        data.foo.forEach((v) => (sum += v));
        return sum;
      },
    })
    .useEffect(() => {
      console.log(`Sum changed: ${data.sum}`);
    })
    .onMounted((app) => {
      console.log("App mounted!");
    })
    .mount(document.getElementById("root"));
  data.foo = [233];
</script>

</html>


마지막으로 저희 프레임워크가 마음에 드신다면 GitHub에 별표를 남겨주세요!

TNTjs 개선에 대한 좋은 아이디어가 있으면 문제를 제기하거나 [email protected]으로 이메일을 보내주십시오.

마지막으로 모든 기여를 환영합니다. 기여자가 되려면 리포지토리를 포크하고 풀 요청을 제출할 수 있습니다. 검토해 드리겠습니다.

고맙습니다!
인터뷰 질문: 자바스크립트에서 `this`가 어떻게 작동하는지 설명하십시오[3분 이내].
Eclipse에서 GitHub의 개인 리포지토리에 SSH를 연결할 수 없게되면

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage