오픈 소스 모험: 에피소드 20: Imba 2 ROT-N

7318 단어 javascriptimba
가장 간단한 ROT-N 디코더를 사용하여 Imba 1 앱을 Imba 2로 포팅하고 싶습니다. Here's Imba 1 version .

상자에 텍스트를 붙여넣거나 파일 업로드를 사용하면 ROT-1에서 ROT-25까지 모든 ROT-N을 디코딩합니다. 기본 해킹 문제에 다소 유용합니다.

Imba 1 앱.imba



여기에는 복잡한 것이 거의 없습니다. rot(n)는 회전을 수행하고, upload는 업로드 이벤트를 처리하고, render는 보기를 렌더링합니다.

tag App
  def setup
    @text = "Hello, world!"

  def rot(n)
    @text.replace /[a-z]/gi do |c|
      let i = c.charCodeAt(0)
      if i >= 97 and i <= 122
        String.fromCharCode(((i - 97 + n) % 26) + 97)
      else if i >= 65 and i <= 90
        String.fromCharCode(((i - 65 + n) % 26) + 65)
      else
        c

  def upload(event)
    let file = event.native:target:files[0]
    return unless file
    let reader = FileReader.new

    reader:onload = do |event|
      @text = event:target:result
      @error = nil
      Imba.commit
    reader.read-as-text(file)

  def render
    <self>
      <div.contents>
        <header>
          "ROT-N"
        <textarea[@text]>
        <div>
          <input#file type="file" :change.upload>
        <table>
          for i in [1..25]
            <tr .{"rot-{i}"}>
              <th>
                i
              <td>
                rot(i)

Imba.mount <App>


임바 1 앱.scss




@import 'normalize-scss';
@include normalize();

.App {
  display: flex;
  justify-content: space-around;
  max-width: 1000px;
  margin: auto;

  header {
    font-size: 64px;
    text-align: center;
  }
  textarea {
    min-width: 50vw;
    min-height: 100px;
  }
  th {
    padding-right: 5px;
  }
}


시작하기



GitHub Pages, SCSS와 같이 내가 좋아하는 설정이 있는 상용구가 있었지만 npx imba create imba2-rotn 로 새로 시작하겠습니다.

거기에는 .vscode 및 .editorconfig 4칸 들여쓰기를 강제하는 정말 끔찍한 설정이 있습니다. Imba가 탭을 고집하더라도 시각적으로 2칸 간격이어야 합니다. 그렇지 않으면 엉덩이처럼 보입니다.

좋아, 그것으로 우리는 코딩을 시작할 수 있습니다.

앱/index.html



제목만 변경하면 되고 나머지는 괜찮습니다.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Imba 2 ROT-N</title>
    <!-- reference to the client script styles -->
    <style src='*'></style>
  </head>
  <body>
    <!-- reference to the client script -->
    <script type="module" src="./client.imba"></script>
  </body>
</html>


앱/클라이언트.imba



이것은 직접 번역에 상당히 가깝습니다.

tag app
  prop text = "Hello, World!"

  def rot(n)
    text.replace /[a-z]/gi do |c|
      let i = c.charCodeAt(0)
      if i >= 97 and i <= 122
        String.fromCharCode(((i - 97 + n) % 26) + 97)
      else if i >= 65 and i <= 90
        String.fromCharCode(((i - 65 + n) % 26) + 65)
      else
        c

  def upload(event)
    let file = event.target.files[0]
    return unless file
    let reader = new FileReader
    reader.onload = do |event|
      text = event.target.result
      imba.commit()
    reader.readAsText(file)

  <self>
    <div.contents>
      <header>
        "ROT-N"
      <textarea bind=text>
      <div>
        <input#file type="file" :change.upload>
      <table>
        for i in [1 .. 25]
          <tr>
            <th>
              i
            <td>
              rot(i)

  css
    display: flex
    justify-content: space-around
    max-width: 1000px
    margin: auto
    ff: sans

    header
      font-size: 64px
      text-align: center

    textarea
      min-width: 50vw
      min-height: 100px

    th
      padding-right: 5px

imba.mount <app>


몇 가지 차이점:
  • CSS가 구성 요소에 없으며 Svelte가 하는 것처럼 일반적인 방식으로 번역됩니다
    • .
  • 래핑render 기능이 없으며 단지 <self>(<app-tag>가 됨, 최상위 수준의 모든 웹 구성 요소임)
  • 구문이 약간 다릅니다<textarea[text]> <textarea bind=text>
  • 범위에 필요한 추가 공간[1 .. 25]
  • 더 이상 : 대 . 구별
  • 더 이상 read-as-text 되기 readAsText - Imba 2는 여전히 이름에 -를 허용하지만 이름을 일부 유니코드 문자로 변환하므로 모든 DOM API는 uglyCamelCame가 됩니다.
  • Ruby 스타일FileReader.new은 이제 JavaScript 스타일new FileReader입니다.
  • ()가 필요한 곳과 필요하지 않은 곳이 어디인지 잘 모르겠습니다. 지금은 규칙이 다릅니다
    • .

    그러나 전반적으로 매우 간단한 포트였습니다.

    소스 코드



    소스 코드는 imba2-rotn repository에 있습니다. 언젠가는 GitHub Pages 지원을 추가하려고 합니다.

    다음에 온다



    다음 몇 개의 에피소드에서는 Imba 1 앱을 몇 개 더 Imba 2로 이식한 다음 Imba 상황에 대한 제 생각을 요약하겠습니다.
    JavaScript로 업로드하기 전에 이미지 자르기
    redux 툴킷

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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