Steve.js, библиотека JS, которая может преобразовывать строки в представления.

внешний интерфейс программист JavaScript
Steve.js, библиотека JS, которая может преобразовывать строки в представления.

"Время не упущено, творчество не останавливается, эта статья участвует вКонкурс эссе на конец 2021 года"

Итоги года (Интерлюдия)

2021 год подходит к концу, а этот год пролетел так быстро. Ребят, все флаги реализованы? Если этого не произойдет, не волнуйтесь. Жизнь — это процесс постоянного улучшения, понемногу каждый день.

В начале года я поставила перед собой цель: стабилизировать себя, читать больше книг и улучшать свои навыки. Пока фундамент заложен, неважно, насколько высоким будет здание в будущем, оно может стоять прямо!

Раньше я читал статью о глубине и широте технологий, и у меня есть глубокое понимание вышеизложенного. Как упоминалось выше: рекомендуется специализировать вещи и создавать высокое значение. Это значение часто больше, чем значение ширины, если только ваша ширина сама не стала своего рода высотой. Поэтому рекомендуется, чтобы программисты искали значение высоты . . .

Наступает новый 2022 год, давайте решать новые задачи вместе!

предисловие

Я давно не оформил первоначальное творение. Сегодня я отправлю статью о библиотеке JS -stre.js, разработанная мной.

Наконец-то я испытал радость от написания собственной JS-библиотеки или фреймворка, собственной документации и собственных инструментов для написания.

Если вы хотите узнать больше о Strve.js, вы можете начать с документации.

Официальная документация:

Woohoo.maomin.club/site/str VE клей…

нпм:

уууу, эта лошадь plus.com/package/str…

Гитхаб:

GitHub.com/Cat NC Один…

Strve.js

Библиотека JS, которая может преобразовывать строки в представления.

  • ⚡️ быстро

Супер быстрый виртуальный DOM.

  • 📦 Небольшое пространство

Размер файла исходного кода составляет всего 4 КБ.

  • 🗂 Гибкий

Легкая и гибкая разборка и сборка различных кодовых блоков.

представлять

Strve.js— это библиотека JS, которая может преобразовывать строки в представления. Строки здесь относятся к строкам шаблона, поэтому вам нужно толькоJavaScriptвзгляд на развитие.Strve.jsС ним не только легко начать работу, но и легко дизассемблировать и собирать различные блоки кода.

Если вы хотите начать работу с проектом, то посмотрите, как его установить ниже!

Установить

CDN

Если вы используете собственные модули ES.

<script type="module">
  import { Strve, render, updateView } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.min.js';
</script>

NPM

npm i strvejs

инструмент командной строки

create-strveосновывается наstrve.js, вы можете использовать его для более простого и гибкого создания страниц.

Установить глобально

npm install create-strve -g

Посмотреть версию

create-strve -v

Инициализировать проект

create-strve init <projectName>

Начать быстро

пытатьсяStrve.jsСамый простой способ — использовать прямые ссылки CDN. Вы можете открыть его в своем браузере и следовать примеру, чтобы изучить некоторые основы использования.

<!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>Strve.js</title>
</head>

<body>
    <div id="app"></div>
    <script type="module">
        import { Strve, render, updateView } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.min.js';

        const state = {
            arr: ['1', '2'],
        };

        function App() {
            return render`
              <div class='inner'>
                  <button id='btn2' onclick=${usePush}>push</button>
                  <ul>
                    ${state.arr.map((todo) => render`<li key=${todo}>${todo}</li>`)}
                  </ul>
              </div>
          `;
        }

        function usePush() {
            updateView(() => {
                state.arr.push('3');
            });
        }

        Strve('#app', {
            data: { state },
            template: App
        });
    </script>
</body>

</html>

Если вы хотите узнать больше оStrve.jsсодержание, вы можете продолжить чтение.

использовать

API

Strve.jsВ настоящее время существует только три API.

  • Strve
  • render
  • updateView

Разве это не просто! Приходите и посмотрите, что означают эти три API? Как их использовать?

Strve

  • параметр:

    • string
    • object

  • подробно:

инициализацияStrve.js. Первый параметр передает имя селектора узла, который необходимо смонтировать на HTML-странице. Второй параметр передается в объект, первое свойствоdataПредставляет значение объекта состояния, второй атрибутtemplateПредставляет шаблонную функцию.

Strve('#app', {
    data: { state },
    template: App
});

render

  • Типы:Function
  • подробно:

render``является функцией метки, синтаксис функции метки заключается в том, чтобы непосредственно следовать за именем функции со строкой шаблона и получать параметры из выражения интерполяции в строке шаблона. Например, вы можете написать теги HTML прямо в строке шаблона.

function App() {
    return render`
        <div class='inner'>
            <h1>Hello</h1>
        </div >
    `;
}

updateView

  • параметр:
    • Function
  • подробно:

Он имеет только один параметр, и этот параметр является функцией. Тело функции должно выполнять значения, которые изменят состояние страницы, например, в следующем примере.state.msg.

const state = {
    msg:'1'
};

function App() {
    return render`
        <div class='inner'>
            <button onclick=${useChange}>change</button>
            <p>{state.msg}</p>
        }
        </div >
    `;
}

function useChange() {
    updateView(() => {
        state.msg = '2';
    });
}

интерполяция

Strve.jsИспользуется синтаксис строки шаблона на основе JavaScript, позволяющий разработчикам декларативно привязывать DOM к данным базового экземпляра. всеStrve.jsВсе строки шаблона представляют собой допустимый HTML, поэтому их можно анализировать браузерами, совместимыми со спецификациями, и анализаторами HTML.

В базовой реализацииStrve.jsКомпилируйте строки шаблона в виртуальные функции рендеринга DOM с минимальными манипуляциями с DOM.

существуетStrve.js, вы можете сколько душе угодно использовать строки шаблонов JavaScript и почувствовать его неповторимое очарование!

текст

Наиболее распространенной формой привязки данных является использование символов.${}Текстовая интерполяция для:

const state = {
    msg: 'hello'
};

function App() {
    return render`
        <div class='inner'>
            <p>${state.msg}</p>
        </div >
    `;
}

В качестве альтернативы вы можете использовать более простую нотацию метода{}, также может достичь желаемого эффекта.

const state = {
    msg: 'hello'
};

function App() {
    return render`
        <div class='inner'>
            <p>{state.msg}</p>
        </div >
    `;
}

Однако, используя это обозначение{}Обратите внимание, что он работает только для интерполяции текста внутри меток. Например, в следующих случаях это не работает, но вы можете использовать мощные символы${}.

// Bad
function App() {
    return render`
        <div class='inner'>
            <input type="text" value={state.msg}/>
        }
        </div >
    `;
}

// Good
function App() {
    return render`
        <div class='inner'>
            <input type="text" value=${state.msg}/>
        }
        </div >
    `;
}

выражение

В настоящее время только символ${}выражения используются в . Например,

const state = {
    a: 1,
    b: 2
};

function App() {
    return render`
        <div class='inner'>
            <p>${String(state.a + state.b)}</p>
        }
        </div >
    `;
}

привязка свойств

Ранее мы могли видеть, что, используя обозначения${}можно использовать с атрибутамиvalueзначение привязки.

function App() {
    return render`
        <div class='inner'>
            <input type="text" value=${state.msg}/>
        }
        </div >
    `;
}

Кроме того, вы можете привязать другие свойства, такие какclass.

const state = {
    isRed: true
};

function App() {
    return render`
    <div class='inner'>
        <p class=${state.isRed ? 'red' : ''}>Strve.js</p>
    </div >
`;
}

условный рендеринг

Мы также можем использовать обозначение${}, это содержимое будет возвращено только в выражении инструкцииtrueзначение отображается.

const state = {
    isShow: false
};

function App() {
    return render`
        <div class='inner'>
            <button onclick=${useShow}>show</button>
            ${state.isShow ? render`<p>Strve.js</p>` : ''
        }
        </div >
    `;
}

function useShow() {
    updateView(() => {
        state.isShow = !state.isShow;
    });
}

Рендеринг списка

мы можем использовать обозначение${}Отображает список на основе массива. Например, мы используем массивmapметод для отображения списка, а элементы массива могут добавляться динамически.

const state = {
    arr: ['1', '2']
};

function App() {
    return render`
        <div class='inner'>
            <button onclick=${usePush}>push</button>
            <ul>
            ${state.arr.map((todo) => render`<li key=${todo}>${todo}</li>`)}
            </ul>
        }
        </div >
    `;
}

function usePush() {
    updateView(() => {
        state.arr.push('3');
    });
}

обработка событий

мы можем использовать роднойonclickДиректива для прослушивания событий DOM и выполнения некоторого кода JavaScript при запуске события. нужно использовать символы${}для привязки событий.

function App() {
    return render`
        <div class='inner'>
            <button onclick=${useClick}>sayHello</button>
        }
        </div >
    `;
}

function useClick() {
    console.log('hello');
}

В паре с Vue.js

Strve.jsЕго можно использовать не только отдельно или сVue.jsДля использования с. Вам нужно позвонить после завершения монтирования примера VueStrve()зарегистрированный метод, а первый параметр уже находится вtemplateесть на этикетке.

App.vue

<template>
  <div id="container">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld ,{hello} from './components/HelloWorld.vue';
import { about,state } from './components/About.vue';
import { render, Strve } from "strvejs";
const AppTm = () => render`
      <div>
        ${hello()}
        ${about()}
      </div>
`;
export default {
  name: "App",
  components:{
    HelloWorld
  },
  mounted() {
    Strve("#container", {
      data: {state},
      template: AppTm,
    });
  },
};
</script>

Если вам нужно поделиться методом с Vue, рекомендуется использоватьsetupиспользуется в методе.

HelloWorld.vue

<template>
  <div>
    <img src="../assets/logo.png" alt="" @click="useCliimg">
  </div>
</template>
<script>
import { render } from "strvejs";
import styles from '../assets/hello/hello.module.css';

export const hello = ()=>render`
<h2 class="${styles.color}" onclick=${useCliimg}>hello</h2>
`
function useCliimg(){
    console.log(1);
}

export default {
  name:'HelloWorld',
  setup(){
    return {
      useCliimg
    }
  }
}
</script>

Если вы хотите полностью использовать компоненты VueStrve.js, конечно. В конце концов, однако, рекомендуется использоватьexport defaultИмя экспортируемого компонента.

About.vue

<script>
import { render, updateView } from "strvejs";
import styles from '../assets/about/about.module.css';

export const about = ()=>render`
<div>
    <p>{state.msg}</p>
   <h2 class="${styles.color}" onclick=${useClick}>about</h2>
</div>
`
export const state = {
    msg:"hello"
}

function useClick() {
    updateView(()=>{
        state.msg = 'world';
    })
}
export default {
    name:"About"
}
</script>

В паре с React.js

Strve.jsа такжеVue.jsпо сравнению сReact.jsБолее гибко использовать вместе. Его также необходимо вызвать после завершения первого рендеринга компонента.Strve()Способ регистрации метода.

App.js

import {useEffect} from 'react'
import {Strve,render,updateView} from 'strvejs';
import './App.css';

const state = {
  msg:"Hello"
}

function Home(){
  return render`<h1 onclick=${useClick}>{state.msg}</h1>`
}

function useClick(){
  updateView(()=>{
    state.msg = "World";
  })
}

function App() {
  useEffect(()=>{
    Strve(".App",{
      data:{state},
      template: Home
    })
  })
  return (<div className="App"></div>);
}

export default App;

инструмент

create-strve

Мы кратко представилиcreate-strveосновывается наStrve.js, вы можете использовать его для более простого и гибкого создания страниц.create-strveиспользуетсяViteЭто новый инструмент для разработки интерфейса, который может значительно улучшить опыт разработки интерфейса.

Установить

Установить глобально

npm install create-strve -g

Посмотреть версию

create-strve -v

Инициализировать проект

create-strve init <projectName>

запускать

yarn dev
# OR
npm run dev

развертывать

yarn build
# OR
npm run build

настроить

потому чтоcreate-strveиспользуетсяViteпостроить, чтобы вы могли следоватьViteКонвенционная конфигурация для пользовательской конфигурацииcreate-strve.

разное

Об авторе

Категории