في هذه المقالة أود أن أخبركم قليلاً عن المكتبة ، النسخة الأولى التي قمت بإنشائها في نهاية العام الماضي. النقطة بسيطة للغاية - لتوسيع قدرات لغة HTML بحيث يمكنك كتابة أشياء بسيطة وروتينية بدون جافا سكريبت: إرسال النموذج بتنسيق json ، وتحميل ملفات قالب HTML إلى صفحة معينة (بشكل أساسي نظام معياري لـ HTML عبر طلبات http / s) ، والتوربينات ( مرحبًا بمستخدمي RoR) ، نموذج بسيط يعتمد على ردود طلبات أجاكس وأكثر من ذلك بقليل.

تسمى المكتبة EHTML أو Extended HTML. إنه يقوم على الفكرة السيئة لمكونات الويب . وهو متوفر على جيثب ، وهناك وثائق منظمة بشكل جيد مع أمثلة. في هذه المقالة سوف أصف ببساطة الأفكار الرئيسية ، ربما ستذهب إلى شخص ما.

اتصال المكتبة

بادئ ذي بدء ، لاستخدامه ، لا تحتاج إلى أدوات npm أو cli لإنشاء مشروع ، كل ما هو مطلوب هو صفحة HTML حيث تقوم بتضمين البرنامج النصي للمكتبة:

<head>
  <script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
</head>

نظام الوحدات

لنبدأ بصفحة بسيطة - تجميع صفحة HTML من العديد من الآخرين:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
  </head>

  <body class="main">
    <div class="articles">
      <e-html data-src="/../html/first.html"></e-html>
      <e-html data-src="/../html/second.html"></e-html>
      <e-html data-src="/../html/third.html"></e-html>
    </div>
  </body>
</html>

للقيام بذلك ، نستخدم عنصرًا مخصصًا e-htmlله سمة واحدة data-src، حيث نشير إلى مكان توزيع جزء HTML من الصفحة. أي ، على سبيل المثال ، إذا first.htmlكان يبدو مثل هذا:

<div class="article">
  <!-- some content of the first article -->
</div>

ثم سيتم تقديم صفحتنا في النهاية على النحو التالي:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
  </head>

  <body class="main">
    <div class="articles">
      <div class="article">
        <!-- content of the first article -->
      </div>
      <div class="article">
        <!-- content of the second article -->
      </div>
      <div class="article">
        <!-- content of the third article -->
      </div>
    </div>
  </body>
</html>

أي أنه e-htmlسيتم استبدال العلامات بالمحتوى من ملف HTML الذي حددناه في data-srcالسمة.

<template/>. . e-wrapper, . <template/> is="e-wrapper" - . :

<!-- /../html/wrapper.html -->
<div class="base">
  <p>
    Header content
  </p>
  <p id="dynamic-content">
    <span>Default content</span>
  </p>
  <p>
    Footer content
  </p>
</div>

, :

<body class="main">
  <template 
    is="e-wrapper" 
    data-src="/../html/wrapper.html" 
    data-where-to-place="#dynamic-content" 
    data-how-to-place="instead">
    <p>
      Variation of content
    </p>
  </template>
</body>

, :

<div class="base">
  <p>
    Header content
  </p>
  <p>
    Variation of content
  </p>
  <p>
    Footer content
  </p>
</div>

data-src HTML , . data-where-to-place , e-wrapper . data-how-to-place . : instead( , data-where-to-place), before( ) after ( ). , e-html e-wrapper html . http , , — .

ajax

, json :

/../album/{title}
title = 'Humbug'
{
  "title": "Humbug",
  "artist": "Arctic Monkeys",
  "type": "studio album",
  "releaseDate": "19 August 2009",
  "genre": "psychedelic rock, hard rock, stoner rock, desert rock",
  "length": "39:20",
  "label": "Domino",
  "producer": "James Ford, Joshua Homme"
}

is="e-json", HTML:

<template is="e-json" data-src="/../album/Humbug" data-object-name="albumResponse">
  <div data-text="Title: ${albumResponse.body.title}"></div>
  <div data-text="Artist: ${albumResponse.body.artist}"></div>
  <div data-text="Type: ${albumResponse.body.type}"></div>
  <div data-text="Release date: ${albumResponse.body.releaseDate}"></div>
  <div data-text="Genre: ${albumResponse.body.genre}"></div>
  <div data-text="Length: ${albumResponse.body.length}"></div>
  <div data-text="Label: ${albumResponse.body.label}"></div>
  <div data-text="Producer: ${albumResponse.body.producer}"></div>
</template>

data-src , json , data-object-name — , http : body, headers statusCode. data-text , e-json .

. , :

title = 'Humbug'
{
  "title": "Humbug",
  "artist": "Arctic Monkeys",
  "songs": [
    { "title": "My Propeller", "length": "3:27" },
    { "title": "Crying Lightning", "length": "3:43" },
    { "title": "Dangerous Animals", "length": "3:30" },
    { "title": "Secret Door", "length": "3:43" },
    { "title": "Potion Approaching", "length": "3:32" },
    { "title": "Fire and the Thud", "length": "3:57" },
    { "title": "Cornerstone", "length": "3:18" },
    { "title": "Dance Little Liar", "length": "4:43" },
    { "title": "Pretty Visitors", "length": "3:40" },
    { "title": "The Jeweller's Hands", "length": "5:42" }
  ]
}

e-for-each :

<template is="e-json" data-src="/../album/Humbug" data-object-name="albumResponse">
    <div data-text="Title: ${albumResponse.body.title}"></div>
    <div data-text="Artist: ${albumResponse.body.artist}"></div>

    <div><b data-text="${albumResponse.body.songs.length} songs:"></b></div>
    <template 
      is="e-for-each"
      data-list-to-iterate="${albumResponse.body.songs}"
      data-item-name="song">
      <div class="song-box">
        <div data-text="No. ${song.index}/${album.songs.length}"></div>
        <div data-text="Title: ${song.title}"></div>
        <div data-text="Length: ${song.length}"></div>
      </div>
    </template>
</template>

data-list-to-iterate , . data-item-name , e-for-each .

e-for-each e-if :

<template is="e-json" data-src="/../album/Humbug" data-object-name="albumResponse">
    <div data-text="Title: ${albumResponse.body.title}"></div>
    <div data-text="Artist: ${albumResponse.body.artist}"></div>

    <div><b data-text="${albumResponse.body.songs.length} songs:"></b></div>
    <template is="e-for-each" 
      data-list-to-iterate="${albumResponse.body.songs}" 
      data-item-name="song">
      <template 
         is="e-if"
         data-condition-to-display="${(song.length.split(':')[0] * 60 + song.length.split(':')[1] * 1) <= 210}"
      >
        <div class="song-box">
          <div data-text="No. ${song.index}/${album.songs.length}"></div>
          <div data-text="Title: ${song.title}"></div>
          <div data-text="Length: ${song.length}"></div>
        </div>
      </template>
    </template>
</template>

data-condition-to-display e-if , .

— . json , e-form, .

, / :

/artist/{name}/albums/add 
name = 'Arctic Monkeys'
POST
Example of expected request body: {
  "title": "Humbug",
  "type": "studio album",
  "releaseDate": "19 August 2009",
  "genre": ["psychedelic rock", "hard rock", "stoner rock", "desert rock"],
  "length": "39:20",
  "label": "Domino",
  "producer": "James Ford, Joshua Homme"
}

, :

<e-form>

  Title:
  <input type="text" name="title">

  Type:
  <input type="radio" name="type" value="studio album" checked>
  <label for="one">One</label>

  <input type="radio" name="type" value="live album" checked>
  <label for="one">One</label>

  Release date:
  <input type="date" name="releaseDate">

  Genre:
  <input type="checkbox" name="genre" value="psychedelic rock">
  <input type="checkbox" name="genre" value="hard rock">
  <input type="checkbox" name="genre" value="stoner rock">
  <input type="checkbox" name="genre" value="desert rock">

  Total length:
  <input type="time" name="totalLength">

  Producer:
  <input type="text" name="producer">

  <button
    id="send"
    data-request-url="/artist/Arctic_Monkeys/albums/add"
    data-request-method="POST"
    data-request-headers="{}"
    data-ajax-icon="#ajax-icon"
    data-response-name="savedAlbum"
    onclick="this.form.submit(this)"
    data-actions-on-response="
      logToConsole('response: ', '${savedAlbum}');
    "
  />

  <img id="ajax-icon" src="/../images/ajax-loader.gif"/>

</e-form>

, , , . , , . ajax , . , — . , . .

إذا كنت مهتمًا بالفكرة وتريد حتى تجربة المكتبة عمليًا أو تعلم المزيد ، فإن مكتبة README تحتوي على معلومات شاملة حول العناصر المدعومة. يمكنك أيضًا مشاهدة مقطع فيديو حيث أكتب تطبيق مدونة بسيطًا حصريًا باستخدام EHTML.

يسعدني أن أجيب على الأسئلة إذا نشأت. وشكرا لاهتمامكم!

رابط اللفت .

HTML المتقدم

اتصال المكتبة

نظام الوحدات

ajax

More articles: