Front-End Menjadi Usang-tutorial js-php.cn

Front-End is Becoming Obsolete

Pada tahun 2024, Elanat memberi makna baharu kepada pembangunan web dengan memperkenalkan WebForms Core. Teknologi WebForms Core membolehkan anda mengurus tag HTML daripada pelayan. Teknologi ini memudahkan proses pembangunan web yang kompleks. Dalam teknologi WebForms Core, beban pelayan adalah rendah dan serupa dengan respons JSON dalam rangka kerja bahagian hadapan. Respons pelayan hanyalah arahan kecil dalam format INI yang dihantar kepada klien, yang menghasilkan kemas kini halaman HTML. Teknologi ini membolehkan pengguna berinteraksi dengan bahagian lain aplikasi sementara menunggu respons pelayan.

Dalam artikel ini, kami akan membuktikan mengapa, walaupun teknologi Teras WebForms, bahagian hadapan menjadi usang.

Padamkan senario kenalan

Senario yang kami lihat ialah memaparkan senarai kenalan pada halaman pentadbir. Dalam senario ini, pentadbir boleh memadamkan kenalan daripada pangkalan data dengan mengklik pada butang padam. Dalam senario ini, keadaan halaman dikekalkan dan selepas memadamkan kenalan, teg kenalan juga dialih keluar daripada halaman HTML.

Dalam contoh ini, kami menggunakan rangka kerja CodeBehind.
Sila ambil perhatian bahawa teknologi WebForms Core boleh digunakan dalam semua bahasa pengaturcaraan dan semua rangka kerja belakang.

Menggunakan JavaScript

Dalam contoh ini, HTML menyediakan struktur bahagian hadapan, JavaScript mengendalikan logik bahagian klien dan pengawal C# mengendalikan operasi bahagian pelayan.

Hasil HTML ini menyediakan halaman web dengan tiga elemen div, setiap satu mengandungi mesej dan butang. Apabila butang diklik, ia memanggil fungsi DeleteContact JavaScript dengan Id tertentu.

Hasil HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Using JavaScript</title>
        <script src="/script/contact.js"></script>
    </head>
<body>
    <div>



<p>In the head section, a link to an external JavaScript file named contact.js has been added; the content of the contact.js file is as follows.</p>

<p>This JavaScript file defines the DeleteContact function, which sends an HTTP request to delete a contact and deletes the contact tag.</p>

<p><strong>JavaScript file (contact.js)</strong><br>
</p>

<pre class="brush:php;toolbar:false">function DeleteContact(Id)
{
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () 
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText == "true")
            document.getElementById("Row" + Id).outerHTML = null;
    }

    xmlhttp.open("GET", "/admin/contact/?do_delete=true&contact_id=" + Id, true);
    xmlhttp.send();
}

Salin selepas log masuk

Dalam pengawal, kaedah utama terlebih dahulu menyemak sama ada rentetan pertanyaan mengandungi parameter yang dipanggil do_delete atau tidak; jika ada, kaedah btn_Delete_Click dipanggil.
Dalam kaedah btn_Delete_Click, pengguna dipadamkan dan kemudian mengembalikan rentetan sebenar kepada klien.

Pengawal

using CodeBehind;

public class ContactController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Query["do_delete"].Has())
            btn_Delete_Click(context);
    }

    private void btn_Delete_Click(HttpContext context)
    {
        int Id = context.Request.Query["contact_id"].ToNumber();

        new Database().DeleteContact(Id);

        Write("true");
    }
}

Salin selepas log masuk

Menggunakan Teknologi Teras WebForms

Dalam contoh ini, HTML menyediakan struktur bahagian hadapan, WebFormsJS mengendalikan logik bahagian klien secara automatik dan pengawal C# mengendalikan operasi bahagian pelayan.

Output HTML ini menyediakan halaman web dengan tiga elemen div, setiap satu mengandungi mesej dan butang hantar, di dalam teg borang. Apabila butang diklik, keadaan halaman kekal statik dan XMLHttpRequest dihantar secara automatik ke pelayan oleh WebFormsJS.

Hasil HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Using JavaScript</title>
        <script src="/script/contact.js"></script>
    </head>
<body>
    <div>



<p>In the head section, a link to an external JavaScript file named contact.js has been added; the content of the contact.js file is as follows.</p>

<p>This JavaScript file defines the DeleteContact function, which sends an HTTP request to delete a contact and deletes the contact tag.</p>

<p><strong>JavaScript file (contact.js)</strong><br>
</p>

<pre class="brush:php;toolbar:false">function DeleteContact(Id)
{
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () 
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText == "true")
            document.getElementById("Row" + Id).outerHTML = null;
    }

    xmlhttp.open("GET", "/admin/contact/?do_delete=true&contact_id=" + Id, true);
    xmlhttp.send();
}

Salin selepas log masuk

Nota: Sila ambil perhatian bahawa kaedah Kawalan berkaitan dengan rangka kerja CodeBehind. Jika anda bekerja dengan rangka kerja yang belum mempunyai modul teknologi Teras WebForms, anda boleh menetapkan kaedah Form.Response() kepada respons pelayan.

Apakah yang diminta oleh pelanggan?
Teknologi WebForms Core adalah setia kepada struktur HTML, jadi URL berikut diminta.
/admin/contact/?btn_Delete=1

Apakah pelayan bertindak balas?

using CodeBehind;

public class ContactController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Query["do_delete"].Has())
            btn_Delete_Click(context);
    }

    private void btn_Delete_Click(HttpContext context)
    {
        int Id = context.Request.Query["contact_id"].ToNumber();

        new Database().DeleteContact(Id);

        Write("true");
    }
}

Salin selepas log masuk

Memadam tag adalah sangat mudah menggunakan teknologi WebForms Core. Anda hanya perlu mencipta contoh kelas WebForms, kemudian panggil kaedah Padam, dan akhirnya hantar arahan menggunakan kaedah Kawalan.

Nota: Menggunakan WebForms Core, anda boleh menggunakan pelbagai arahan pada halaman HTML, seperti mencipta teg, menambah atribut, menukar warna latar belakang, dsb.

Contoh

Dalam contoh ini, mesej yang menunjukkan bahawa kenalan telah berjaya dipadamkan dipaparkan kepada pengguna selama 3 saat.
Dalam kod berikut, selain memadamkan teg kenalan, teg h3 ditambahkan pada penghujung teg borang, dan dalam baris berikut, warna latar belakang teg ini ditukar kepada hijau dan teks mesej menunjukkan bahawa kenalan telah berjaya dipadamkan ditambah di dalam tag h3. Kaedah Padam juga memadamkan teg h3 dan kaedah AssignDelay menyebabkan kelewatan 3 saat untuk memadamkan teg h3.

<!DOCTYPE html>
<html>
    <head>
        <title>Using WebForms Core Technology</title>
        <script src="/script/web-forms.min.js"></script>
    </head>
<body>
    <form action="/admin/contact">
        <div>



<p>In the head section, a link to the WebFormsJS library has been added.</p>

<blockquote>
<p><strong>Note:</strong> In WebForms Core technology, the WebFormsJS library on the front-end automatically communicates with the WebForms class on the back-end.</p>
</blockquote>

<p>In the controller, the main method first checks whether the query string contains a parameter called btn_Delete or not; if present, the btn_Delete_Click method is called.<br>
In the btn_Delete_Click method, the user is deleted and then an instance of the WebForms class is created and the Delete method is called, and finally, by calling the Control method, the commands of the created instance of the WebForms class are placed in the server response and sent to the client.</p>

<p><strong>Controller</strong><br>
</p>

<pre class="brush:php;toolbar:false">using CodeBehind;

public class ContactController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Query["btn_Delete"].Has())
            btn_Delete_Click(context);
    }

    private void btn_Delete_Click(HttpContext context)
    {
        int Id = context.Request.Query["btn_Delete"].ToNumber();

        new Database().DeleteContact(Id);

        WebForms Form = new WebForms();

        Form.Delete("Row" + Id);

        Control(Form);
    }
}

Salin selepas log masuk

Kod yang dihantar dari pelayan kepada klien dalam contoh di atas juga mengikut arahan berikut.

[web-forms]
deRow1=1

Salin selepas log masuk

Dalam teknologi WebForms Core, jumlah pemprosesan yang diperlukan untuk menjana kod INI adalah sama dengan jumlah pemprosesan yang diperlukan untuk mensiri dan menjana format JSON dalam proses pembangunan rangka kerja bahagian hadapan; oleh itu, tekanan pada pelayan berada pada tahap paling optimum.

Contoh ini jelas menunjukkan bahawa teknologi WebForms Core membawa semua faedah JavaScript, dan tiada perbezaan prestasi antara WebForms Core dan JavaScript. Faedah teknologi WebForms Core pergi terus kepada pembangun yang mencari kesederhanaan tanpa mengorbankan prestasi. Pembangun tidak lagi perlu menulis kod JavaScript yang luas, seterusnya mengurangkan keperluan untuk kemahiran bahagian hadapan khusus. Ini adalah ciri pembangunan web moden!

Walaupun pembangunan web telah beralih dari bahagian belakang ke bahagian hadapan dalam beberapa tahun kebelakangan ini, pengenalan Teras WebForms yang tidak dijangka merupakan cabaran utama untuk pembangunan web bahagian hadapan. WebForms Core menyelesaikan masalah back-end dan menggalakkan pembangun web untuk memfokus pada back-end. Ini mewakili anjakan besar dalam cara pembangun mendekati aplikasi web.

Kelebihan Teras WebForms:

Kesederhanaan: Pendekatan WebForms Core menggunakan borang penyerahan HTML standard, yang ringkas, mudah dan pantas untuk dilaksanakan tanpa memerlukan pengetahuan JavaScript tambahan.
Pengurusan bahagian pelayan: Logik pengurusan sepenuhnya pada bahagian pelayan, menjadikannya alat yang berkuasa dan profesional untuk pembangun yang biasa dengan pengaturcaraan bahagian pelayan.
Mengekalkan keadaan halaman: Menggunakan WebForms Core memberikan pengalaman pengguna yang lancar, kerana teg diurus tanpa memuat semula seluruh halaman.
Maklum balas segera: Teg berubah serta-merta selepas respons pelayan, memberikan maklum balas segera kepada pengguna dan membenarkan pengguna untuk terus berinteraksi dengan halaman semasa permintaan sedang diproses.
Tiada markup diperlukan: Teknologi ini tidak memerlukan markup pada halaman; manakala menggunakan JavaScript memerlukan acara itu digunakan terus pada teg (atau secara tidak langsung dengan kaedah AddEventListener).
Penggunaan lebar jalur yang dikurangkan: Memandangkan pelayan boleh menghantar arahan mudah dalam format ringan seperti INI, keperluan untuk pakej JavaScript yang besar dikurangkan.
Interaktiviti lanjutan: Teknologi WebForms Core menyediakan alatan berkuasa untuk mencipta antara muka pengguna yang kompleks, mengurus keadaan dan memastikan pengalaman pengguna yang responsif, interaktif dan menarik.

Kesimpulan

Teknologi Teras WebForms Elanat mewakili pendekatan revolusioner yang boleh mengubah landskap pembangunan web dengan ketara. Dengan mengalihkan kawalan dari bahagian hadapan ke bahagian pelayan dan memudahkan pengurusan data, ia mencabar penguasaan rangka kerja pihak pelanggan sedia ada. Memandangkan teknologi ini mendapat daya tarikan, ia mungkin membawa kepada penilaian semula amalan pembangunan bahagian hadapan tradisional, yang berpotensi menjadikannya kurang relevan dalam konteks tertentu.

Atas ialah kandungan terperinci Front-End Menjadi Usang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!