Tindak balas ketergantungan JavaScript: Peningkatan Progresif Mitos-tutorial js-php.cn

The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement

mata teras

Pengkritik PE sering mendakwa bahawa ini bermakna menyokong penyemak imbas lama, tetapi sebenarnya, memberikan sandaran kepada pelayar yang lebih tua adalah kelebihan PE, dan bukannya matlamat utamanya.
Rangka kerja JavaScript boleh memberikan manfaat jangka pendek, tetapi boleh menyebabkan pengunjung yang dikurangkan dan kesulitan penyelenggaraan jangka panjang. Mereka tetap teguh pada masa kini, tidak seperti PE, yang membolehkan API moden tanpa melanggar permohonan.
Peningkatan progresif memisahkan kandungan, susun atur, dan fungsi untuk penyelenggaraan mudah, mengurangkan beban ujian, menyokong pelbagai peranti, dan memastikan SEO dan kebolehcapaian. Walaupun kebangkitan rangka kerja JavaScript, teknologi ini masih berfungsi.

Pendek kata - saya setuju. Lain -lain juga bersetuju, termasuk pakar web PPK (

soalan sudut

), Jeremy Keith ( momentum sudut ), dan Jake Archibald ( peningkatan progresif masih penting ).

Walaupun peningkatan kerangka pelanggan yang pesat, aplikasi web yang agak sedikit sesuai untuk menggunakan kerangka JavaScript.

Peningkatan progresif tetap menjadi pilihan terbaik untuk menyelesaikan masalah pembangunan web seperti sokongan pelayar, penyelenggaraan, dan perkembangan aplikasi masa depan yang luas.

Penggunaan kerangka klien telah meningkat. Mereka menyediakan mod pengekodan sisi pelayan seperti MVC, pandangan templat, komponen yang boleh diguna semula, pengesahan bentuk, dan banyak lagi. AngularJS mungkin yang paling terkenal dan popular, tetapi bukan satu -satunya penyelesaian. Tidak seperti rangka kerja pelayan, alternatif klien mesti dijalankan pada pelayar dengan JavaScript moden yang didayakan. Tanpa JavaScript, mereka gagal. Tidal adalah contoh biasa; jika JavaScript tidak tersedia, pengguna akan melihat halaman kosong. Tiada kandungan, tiada kesilapan, dan tiada borang pendaftaran. Walaupun hampir tidak ada alasan untuk tidak memaparkan mesej, aplikasi bergantung JavaScript mempunyai beberapa kes penggunaan yang baik:

Prototaip Cepat mensimulasikan laman web dan aplikasi, kerana rangka kerja pelanggan menyediakan banyak komponen dan pintasan.
Aplikasi klien tulen Jika aplikasi anda mudah dan tidak memerlukan interaksi pelayan selain muat turun awal, rangka kerja JavaScript mungkin pilihan yang baik (dengan andaian anda boleh memadam kandungan yang tidak diingini).
Aplikasi perusahaan dalaman JavaScript paksa bukan masalah apabila anda memahami khalayak dan peranti yang anda gunakan. Angular pada asalnya direka untuk aplikasi perusahaan.
antara muka halus Pertimbangkan permainan tindakan, peta Google, dan dokumentasi. Membangunkan alternatif bebas JavaScript adalah sia-sia. Google mencipta versi HTML asas Google Maps, tetapi sebenarnya aplikasi yang berbeza dan ditinggalkan pada tahun 2010.

Terdapat kes-kes lain, tetapi kebanyakan laman web dan aplikasi yang dihadapi awam tidak termasuk dalam kategori ini. Tiada siapa yang akan menghalang anda daripada menggunakan kerangka klien, bagaimanapun, apabila anda mempunyai tukul, semuanya kelihatan seperti kuku. Quote Louis sekali lagi: & gt; Pemaju seolah -olah menggunakannya hanya demi menggunakan alat -alat baru yang mempesonakan, bukan kerana mereka menyelesaikan masalah sebenar.

Apakah peningkatan secara beransur -ansur?

Peningkatan Progresif (PE) bukan teknologi, tetapi kaedah pembangunan. Saya menulis beberapa tutorial dan contoh pada tahun 2009, tetapi konsep ini telah dibincangkan sejak tahun 2003. Anda bermula dengan membina tahap pengalaman pengguna asas dan kemudian menambah ciri -ciri yang lebih canggih apabila penyemak imbas anda menyokongnya. Tekan PE ke Logik yang melampau:

Anda membuat aplikasi HTML tulen, dan semua pemprosesan penting dilakukan di sisi pelayan. Ia boleh berjalan di mana -mana pelayar;
Anda menggunakan CSS untuk meningkatkan susun atur. CSS sudah siap kerana pelayar mengabaikan sifat yang mereka tidak faham. Anda boleh meningkatkan lagi dengan pilihan seperti pertanyaan media atau peraturan @supports. Aplikasi ini masih berfungsi di mana -mana sahaja, tetapi memberikan pengalaman yang lebih baik untuk penyemak imbas dengan keupayaan CSS moden.
Anda menggunakan peningkatan JavaScript. JavaScript adalah lapisan yang paling tidak stabil, kerana sokongan bahasa dan API berbeza dari penyemak imbas ke pelayar. Dengan mengandaikan ia berjalan, anda akan menguji ketersediaan sebelum menggunakannya. Sebagai contoh, apabila kanvas atau SVG disokong, anda boleh menukar jadual data ke dalam carta yang indah.

Setiap penyemak imbas menerima aplikasi terbaik yang dapat dikendalikannya. Mungkin tidak ada dua pelayar yang menawarkan pengalaman yang sama. Reka bentuk responsif pertama mudah alih dan keutamaan luar talian yang kurang digunakan adalah contoh teknik peningkatan progresif. Mari kita periksa kritikan PE.

Mitos: Tidak ada yang melumpuhkan JavaScript

Orang kedua tahu apa JavaScript. Beberapa penyemak imbas membenarkan pengguna melumpuhkan JavaScript (mudah) Ini betul -betul betul. pengkritik pe kemudian menyimpulkan: & gt; Mereka yang tidak mempunyai JavaScript mendapatkan apa yang mereka layak.

Adalah berbahaya untuk mengandaikan bahawa JavaScript akan sentiasa, di mana sahaja, dan pada bila -bila masa untuk mencapai tahap yang diperlukan untuk permohonan anda. Setiap orang mempunyai JavaScript, bukan? Ini menunjukkan. Peningkatan progresif bukan untuk pengguna yang melumpuhkan JavaScript. Ia adalah untuk meningkatkan pengalaman pengguna apabila ciri -ciri JavaScript tertentu tersedia. Apabila JavaScript dilumpuhkan, aplikasi itu boleh memberikan antara muka yang buruk, tetapi pengguna masih akan mendapat sesuatu .

Mitos: Tidak ada yang menggunakan penyemak imbas lama

Apa maksud kita dengan "lama"? Bagi kebanyakan pemaju, ia adalah pelayar yang telah dikeluarkan selama lebih dari dua belas bulan. Tidak semua orang boleh menggunakan aplikasi terkini dan terbaik:

organisasi besar dan jabatan kerajaan
dilumpuhkan
orang negara membangun
kelas kurang kaya dalam komuniti
Sesiapa yang menggunakan iPhone 5.0 atau Android 4.0 dan ke bawah.

jabatan -jabatan ini mungkin tidak penting kepada anda. Tetapi tidakkah mereka penting? Peningkatan progresif tidak membuat sebarang andaian mengenai penonton anda. Ini tidak berlaku dengan rangka kerja pelanggan. Mereka yang tidak dapat menggunakan aplikasi anda akan hilang dari log pelayan. Ia tidak lama lagi akan menjadi nubuatan yang memuaskan diri: "Tiada siapa yang menggunakan aplikasi kami pada pelayar lama, jadi kami boleh terus melakukannya ..." Mitos: Peningkatan Progresif adalah anti-Javascript

secara progresif meningkatkan kelebihan asas kemasukan web. Tapak atau aplikasi yang boleh dijalankan pada mana -mana peranti rangkaian di mana sahaja di dunia boleh dibangunkan. Lebih baik peranti, lebih baik pengalaman pengguna. Rangka kerja pelanggan menjadikan JavaScript sebagai kebergantungan mutlak. Anda tidak lagi mengekod web. Aplikasi anda menggunakan web sebagai mekanisme penghantaran untuk enjin runtime tertentu. Penyemak imbas adalah sistem operasi dan kemas kini anda boleh memecahkan permohonan anda.

Mitos: Peningkatan Progresif membuat andaian mengenai pengguna dan peranti

PE adalah tentang tidak melakukan
andaian. Anda tidak menganggap apa -apa - ini adalah premis teras teknologi ini. Rangka kerja JavaScript akan membuat anda tersilap berfikir bahawa semua orang menggunakan pelayar yang kuat pada peranti yang berkuasa. Kami telah membuat andaian ini sebelum ini. Bagaimanakah ini berbeza daripada mengandaikan bahawa semua orang menggunakan jalur lebar? Atau setiap orang mempunyai sekurang-kurangnya skrin 17 inci yang sekurang-kurangnya 960 piksel lebar? Atau adakah semua orang akan menggunakan IE6 sekarang dan pada masa akan datang? Mitos: Peningkatan Progresif bermaksud sokongan untuk pelayar yang sudah lapuk

pengkritik yang dipertingkatkan secara progresif berfikir anda akan menghabiskan masa anda bekerja pada pelayar lama. Sebenarnya, sebaliknya: anda tidak perlu berurusan dengan pelayar lama kerana sandaran yang betul sudah ada. Menyokong penyemak imbas lama adalah kelebihan PE -
daripada Target
. Anda boleh menyokong pelayar terburuk, tetapi anda boleh membina mana -mana asas yang anda suka. Sebagai contoh, saya sedang membangunkan aplikasi di mana AddEventListener adalah keperluan untuk kebanyakan JavaScript berjalan. Oleh itu, IE8 dan ke bawah tidak akan dapat memaparkan peningkatan ciri. Saya dapat menyelesaikan masalah ini, tetapi ia tidak bernilai pelaburan kerana ia adalah aplikasi perusahaan tanpa pengguna IE lama. Walau bagaimanapun, pengguna IE8 masih boleh menggunakan sistem dan boleh memperbaikinya jika diperlukan.
Mitos: Aplikasi Rangka Kerja JavaScript adalah lebih sejuk

Anda boleh menggunakan teknologi PE untuk membuat aplikasi yang kelihatan sama. Alasan kekeliruan adalah bahawa kebanyakan kerangka JavaScript menyediakan pelbagai widget pra-maju yang kelihatan baik. Widget yang sama ini boleh digunakan dalam aplikasi yang dipertingkatkan secara progresif, bagaimanapun, tanpa JS, mereka kembali kepada alternatif HTML asas. PE juga membolehkan anda menggunakan API HTML, CSS, dan JavaScript moden yang belum muncul dalam mana -mana penyemak imbas. Pertimbangkan API Fetch - alternatif moden untuk XMLHTTPREQUEST. Ia menyokong minimally, tetapi saya boleh menggunakannya tanpa masalah kerana saya boleh kembali ke XMLHTTPREQUEST atau permintaan pelayan. Rangka kerja JavaScript tetap tegas pada masa kini - bukan masa depan. Mitos: Secara beransur -ansur dipertingkatkan menghalang pembangunan web

atau, lebih khusus, rangka kerja pelanggan berada di barisan hadapan teknologi, mendorong web ke hadapan. Maaf, tetapi ini adalah ilusi. Rangka kerja seperti AngularJS melaksanakan ciri-ciri ajaib, tetapi, jika anda menggali lebih mendalam, anda masih menggunakan operasi HTML, CSS, JavaScript, dan DOM. Pada masa yang terbaik, ia adalah abstraksi. Paling teruk, ia adalah gangguan. Rangka kerja pelanggan anda hanya sebaik penyemak imbas yang membangunkannya. AngularJS 2.0 ditulis semula sepenuhnya kerana ciri -ciri seperti object.observe () dan komponen web tidak biasa apabila AngularJS 1.x dibebaskan. Rangka kerja ini memaksa anda menggunakan teknologi lama, tetapi menyembunyikan pelaksanaan dari anda. PE membolehkan anda menggunakan API moden tanpa melanggar permohonan anda. Nasib baik dalam menaik taraf dari Angular 1 ...

Mitos: Rangka Kerja JavaScript menjadikan pembangunan lebih mudah

Bahagian ini betul - tetapi hanya jika anda mula membina permohonan anda. Anda boleh mengakses pelbagai kawalan yang mengurangkan masa pembangunan awal. Walau bagaimanapun, anda kemudian terperangkap dalam skop rangka kerja, yang boleh menyebabkan masalah kemudian. Anggapkan bahawa permohonan anda telah berjalan untuk seketika dan pelanggan memerlukan sokongan
Browserx
. Ia digunakan oleh pelanggan utama dan tidak terlalu lama; Mereka mungkin menjangkakan masa pembangunan menjadi beberapa hari, tetapi mungkin tidak mungkin jika kerangka JavaScript anda tidak serasi. Untuk aplikasi yang dibangunkan menggunakan teknologi PE, masalah ini mungkin tidak pernah berlaku; Peningkatan selanjutnya boleh ditambah tanpa penulisan semula utama.
Mitos: Peningkatan Progresif adalah dua kali ganda beban kerja

Ini adalah petikan yang paling popular dari pengkritik. Satu -satunya orang yang mengatakan PE terlalu banyak bekerja adalah mereka yang tidak pernah mencubanya atau gagal dalam beberapa cara. Jika anda tidak berfikir tentang PE dari awal, ia hanya akan mengambil masa dua kali lebih lama. Cuba untuk membina semula PE ke aplikasi yang sedia ada akan ditakdirkan untuk gagal - terutamanya untuk aplikasi yang bergantung kepada JavaScript. Mari kita pertimbangkan contoh mudah, seperti senarai paging hasil pertanyaan carian. Halaman pertama memuat kembali semua HTML. Ia pantas, JavaScript tidak perlu berbuat apa -apa. Di sebalik tabir, kami menggunakan pertanyaan pangkalan data dan memasukkan hasilnya ke dalam templat HTML. Anda boleh dengan cepat menyesuaikan perkhidmatan yang sama untuk mengembalikan hasilnya sebagai data JSON atau hasil HTML tanpa tajuk dan footer. Apabila pengguna mengklik pada "Page 2", hasil halaman kedua akan dipaparkan:

Dengan JavaScript, kita boleh memintas klik dan menggunakan teknologi Ajax untuk mendapatkan hasil halaman. Data HTML boleh dimasukkan ke dalam halaman menggunakan innerHTML. Sebagai alternatif, kita boleh menggunakan halaman 1 sebagai templat untuk data JSON yang dikembalikan.

Jika JavaScript, XMLHTTPREQUEST, atau FETCH tidak tersedia- atau panggilan AJAX gagal -Kami boleh meminta halaman kedua penuh HTML.

Ini memerlukan lebih banyak kerja, tetapi ia pasti tidak menggandakan jumlah kerja. Kami mendapat manfaat daripada penyelesaian toleransi kesalahan lintas penyemak imbas.

mitos: secara beransur -ansur dipertingkatkan tanpa makna - pembangunan laman web atau kepupusan

Logik di sebalik hujah ini adalah bahawa laman web akhirnya akan menjadi usang. Oleh itu, anda boleh menggunakan rangka kerja yang mensasarkan teknologi tertentu pada masa tertentu. Saya harap begitu. Jika kod anda baik, ia akan digunakan lebih lama daripada yang anda harapkan. Kod buruk bertahan lagi kerana tiada siapa yang mahu menyentuhnya. Walau bagaimanapun, sekali lagi menggunakan peningkatan progresif, anda tidak membuat apa-apa andaian selain daripada Web akan diteruskan sebagai sistem berasaskan HTML berasaskan klien/pelayan. Web perlu berubah secara asas untuk menjadikan aplikasi anda gagal -ia tidak lagi menjadi web!

Mitos: Peningkatan Progresif adalah teknologi lama yang disyorkan oleh pendahulu lama

Quote Oddz: & gt; Lonjakan dalam kerangka JavaScript sisi klien telah menjadikan anda minoriti bersama dengan "senior lama" yang lain.

Ya, terima kasih! Pemulihan JavaScript diketuai oleh orang -orang yang telah membangun di web untuk beberapa waktu. Adakah kita semua orang yang degil yang takut teknologi baru dan tidak dapat mengikuti masa? Mungkin. Atau mungkin kerana kita telah mempelajari beberapa pelajaran dari banyak, banyak kesilapan sejarah kita? Rangka kerja JavaScript menimbulkan soalan yang biasa:

sesetengah orang mencampur html dan ciri -ciri seperti yang kita gunakan untuk menggunakan pengendali onclick, seperti

Mereka mensasarkan penyemak imbas tertentu. Terdapat kebangkitan semula "cara terbaik untuk melayari ..." mesej dan tag.

Mereka membuat andaian mengenai web hari ini -contohnya, JavaScript berfungsi di mana sahaja, dan 2MB setiap halaman adalah munasabah.

Mereka tidak mempunyai rancangan untuk masa depan.

Rangka Kerja JavaScript terutamanya memberi manfaat kepada pemaju - daripada pengguna. Mereka boleh memberikan faedah jangka pendek dengan kos pengunjung yang dikurangkan dan penyelenggaraan jangka panjang yang menyakitkan. Dan jangan lupa SEO. Google mengindeks halaman JavaScript, tetapi ia tidak semestinya dapat menjejaki setiap cawangan logik. Ia juga sukar untuk dihubungkan kembali ke URL tertentu melainkan anda menulis kod anda dengan teliti. Peningkatan Progresif melengkapkan kelebihan Web:

Ia memisahkan kandungan, susun atur dan fungsi untuk penyelenggaraan mudah

Anda menulis kod pertahanan, kesalahan-toleran, peranti bebas untuk web-
bukan penyemak imbas
anda boleh menyokong pelbagai peranti

beban ujian anda dikurangkan kerana aplikasi anda masih boleh dijalankan apabila terdapat kegagalan

SEO dan kebolehcapaian terbina dalam (atau memerlukan kurang usaha)

laman web dan aplikasi akan dijalankan pada pelayar yang dikeluarkan hari ini, semalam dan esok

Tidak ada yang menyangkal kelebihan peningkatan atau mencadangkan teknik yang lebih baik.

Hanya satu kelemahan: jelas bahawa banyak pemaju masih tidak mempercayai atau memahami peningkatan progresif. Long Live Rebound of JavaScript Dependencies!

Soalan Lazim (FAQ) Mengenai JavaScript Dependencies dan Progressive Enhancement

Apakah kebergantungan JavaScript?

Ketergantungan JavaScript bermaksud bahawa kod JavaScript bergantung kepada fail atau perpustakaan JavaScript lain untuk dijalankan secara normal. Sebagai contoh, jika fail JavaScript menggunakan fungsi atau pembolehubah yang ditakrifkan dalam fail atau perpustakaan lain, dikatakan bergantung pada fail atau perpustakaan tersebut. Ketergantungan boleh menjadikan kod lebih cekap dan terkawal, tetapi mereka juga boleh memperkenalkan kerumitan dan masalah yang berpotensi jika tidak diuruskan dengan betul.

Apakah peningkatan progresif dalam JavaScript?

Peningkatan Progresif adalah falsafah reka bentuk yang mula -mula menekankan kandungan web teras dan kemudian secara beransur -ansur menambah lapisan penyampaian dan fungsi yang lebih terperinci dan kompleks di atasnya. Dalam konteks JavaScript, ini bermakna kod penulisan yang menyediakan fungsi asas kepada semua pelayar, sambil menyediakan fungsi lanjutan kepada penyemak imbas yang dapat menyokongnya.

Bagaimanakah kebergantungan JavaScript mempengaruhi peningkatan secara beransur -ansur?

Ketergantungan JavaScript boleh menghalang pelaksanaan yang dipertingkatkan secara progresif. Sekiranya fail JavaScript sangat bergantung pada fail atau perpustakaan lain yang tidak semua penyemak imbas menyokong, ia mungkin tidak memberikan fungsi asas kepada penyemak imbas tersebut. Ini bertentangan dengan prinsip peningkatan progresif, yang bertujuan untuk menyediakan fungsi teras kepada semua pengguna.

Apakah kelebihan peningkatan secara beransur -ansur?

Peningkatan Progresif memberikan banyak faedah. Ia memastikan semua pengguna dapat mengakses kandungan teras dan ciri -ciri halaman web, tanpa mengira fungsi penyemak imbas mereka. Ia juga menggalakkan amalan web yang baik seperti HTML semantik dan pemisahan kebimbangan, dan menjadikan laman web lebih tahan terhadap masalah yang berpotensi dengan JavaScript atau CSS.

Apakah kelemahan ketergantungan JavaScript?

Walaupun ketergantungan JavaScript boleh menjadikan kod lebih cekap dan terkawal, ia juga boleh memperkenalkan kerumitan dan masalah yang berpotensi. Sekiranya pergantungan tidak diuruskan dengan betul, ia boleh menyebabkan masalah seperti kod kembung, masa pemuatan perlahan, dan kemungkinan konflik antara fail atau perpustakaan yang berbeza. Ia juga boleh menjadikan kod lebih sukar untuk dikekalkan dan debug.

Bagaimana untuk menguruskan kebergantungan JavaScript dengan berkesan?

Terdapat beberapa strategi untuk menguruskan kebergantungan JavaScript dengan berkesan. Strategi ini termasuk menggunakan modul modul seperti webpack atau rollup yang dapat membungkus semua kebergantungan ke dalam satu fail; .

Bagaimana untuk mencapai peningkatan progresif dalam kod JavaScript saya?

Melaksanakan peningkatan progresif dalam kod JavaScript anda termasuk kod menulis, menyediakan fungsi asas kepada semua pelayar, dan kemudian secara beransur -ansur menambah ciri -ciri yang lebih canggih kepada pelayar yang dapat menyokongnya. Ini boleh dilakukan dengan menggunakan pengesanan ciri untuk memeriksa sama ada penyemak imbas menyokong ciri sebelum menggunakannya dan memastikan bahawa kod anda boleh diturunkan dengan elegan dalam pelayar yang tidak menyokong ciri -ciri tertentu.

Apakah hubungan antara kebergantungan JavaScript dan rangka kerja JavaScript pelanggan?

Rangka kerja JavaScript pelanggan biasanya sangat bergantung pada ketergantungan JavaScript. Rangka kerja ini (seperti React, Sudut, dan Vue.js) mengandungi banyak ciri terbina dalam dan perpustakaan yang boleh dielakkan oleh kod anda. Walaupun ini boleh membuat pembangunan lebih cepat dan lebih mudah, ia juga boleh membawa kepada masalah yang berpotensi jika kebergantungan ini tidak diuruskan dengan betul.

Apakah peranan peningkatan progresif dalam rangka kerja JavaScript pelanggan?

Peningkatan Progresif boleh memainkan peranan utama dalam rangka kerja JavaScript klien. Rangka kerja ini sering merangkumi ciri-ciri yang membolehkan pemaju melaksanakan peningkatan tambahan, seperti penyampaian pelayan dan segmentasi kod. Ciri -ciri ini dapat membantu memastikan aplikasi web anda menyediakan fungsi teras kepada semua pengguna tanpa mengira fungsi penyemak imbas mereka.

Bagaimana untuk mengimbangi ketergantungan JavaScript dan peningkatan progresif dalam projek pembangunan web saya?

Ketergantungan JavaScript seimbang dan peningkatan progresif memerlukan perancangan yang teliti dan amalan pengekodan yang baik. Anda harus meminimumkan kebergantungan dalam kod anda dan pastikan ia diuruskan dengan betul. Pada masa yang sama, anda harus bekerja keras untuk mencapai peningkatan tambahan, memastikan aplikasi web anda menyediakan fungsi teras kepada semua pengguna. Ini mungkin melibatkan penggunaan pengesanan ciri, downgrade elegan, dan teknologi lain.

Atas ialah kandungan terperinci Tindak balas ketergantungan JavaScript: Peningkatan Progresif Mitos. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!