Rumah >hujung hadapan web >tutorial js >Mari kita bincangkan tentang delegasi acara JavaScript, menilai sama ada URL itu sah dan diatur sepenuhnya.

Mari kita bincangkan tentang delegasi acara JavaScript, menilai sama ada URL itu sah dan diatur sepenuhnya.

WBOY
WBOYke hadapan
2022-11-16 15:56:321706semak imbas

Artikel ini membawakan anda pengetahuan yang berkaitan tentang JavaScript terutamanya kandungan yang berkaitan dengan delegasi acara, menilai sama ada URL itu sah dan susunan penuh Mari kita lihat bersama berguna kepada semua orang.

Mari kita bincangkan tentang delegasi acara JavaScript, menilai sama ada URL itu sah dan diatur sepenuhnya.

[Cadangan berkaitan: Tutorial video JavaScript, bahagian hadapan web]

1. Delegasi acara

Demonstrasi kesan

Mari kita bincangkan tentang delegasi acara JavaScript, menilai sama ada URL itu sah dan diatur sepenuhnya.

Keperluan

LengkapJavaScriptKod, keperluannya adalah seperti berikut:

  • Tambah acara klik pada teg "ul"

  • Apabila teg " li", kandungan teg disambung dengan simbol ".". Contohnya: apabila teg "li" diklik, kandungan teg tersebut ialah ".."

Kod cincang tangan

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>事件委托</title>
    
            
  • .
  •         
  • .
  •         
  • .
  •     
    <script> // 补全代码 const ul = document.getElementsByTagName(&#39;ul&#39;)[0] ul.onclick = function (e) { const tar = (e || window.event).target // 如果点击的对象的名称是li // localName 获取标签名 if (tar.localName === &#39;li&#39;) { tar.innerHTML = tar.innerHTML + &#39;.&#39; } } </script>

Soalan ini agak mudah Prinsip delegasi acara sebenarnya menggunakan mekanisme event bubbling.

Acara menggelegak: mencetuskan jenis acara tertentu pada objek (seperti acara klik Jika objek mentakrifkan pengendali untuk acara ini, acara ini akan memanggil pengendali ini pengendali tidak ditakrifkan atau peristiwa itu kembali benar, maka peristiwa ini akan disebarkan ke objek induk objek ini, dari dalam ke luar, sehingga ia dikendalikan (semua peristiwa serupa objek induk akan diaktifkan), atau ia mempunyai mencapai tahap teratas hierarki objek, iaitu, objek dokumen (beberapa penyemak imbas)

Dalam pembangunan sebenar, delegasi acara digunakan untuk menangkap dan memproses acara secara seragam oleh kelas induk, yang boleh mengurangkan pertindihan peristiwa subkelas.

2 Tentukan sama ada URL itu sah

memerlukan

untuk melengkapkan kod JavaScript, memerlukan Boolean Borang mengembalikan sama ada parameter rentetan dalam format URL yang sah.

Nota: Protokol ini hanya HTTP(S)

Kod cincang tangan

const _isUrl = url => {
    // 补全代码
    let reg = /^((https|http):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]{2,6})(:\d+)?(\/.*)?(\?.*)?(#.*)?$/g;
    return reg.test(url)}

Soalan ini mengkaji aplikasi ungkapan biasa dan penggunaan banyak pengetahuan Biasa, termasuk:

  • ^ mewakili permulaan

  • [A-Za-z0-9] mewakili huruf besar dan huruf kecil dan nombor yang sepadan

  • / bermaksud padanan /, kerana / mempunyai makna lain dalam ungkapan biasa, jadi untuk memadankan / anda perlu menggunakan untuk melarikan diri

  • ? bersamaan dengan {0,1}, menunjukkan bahawa ia muncul sekali atau tidak

  • menunjukkan bahawa bilangan kejadian adalah pada. sekurang-kurangnya 1

  • | (watak paip) bermaksud atau , yang bermaksud memadankan mana-mana satu kandungan di kedua-dua belah |

  • . bermaksud memadankan . Seperti /, untuk memadankan . anda perlu melarikan diri dengan di hadapan

    bermakna n-m muncul
  • {n,m}

    sepadan dengan nombor
  • d

    ialah
  • , iaitu kad bebas watak dan mewakili hampir mana-mana aksara
  • .[^nru2028u2029]

    bermakna bilangan kejadian adalah 0 atau lebih kali
  • *

    bermaksud memadankan mana-mana berbilang aksara arbitrari
  • .*

    mewakili penamat
  • $

    mewakili perlawanan global
  • gFormat

    undang-undang adalah seperti berikut:

URLBahagian protokol

Pilihan: dinyatakan sebagai
  • http(s)((https|http)://)?Nama domain bahagian: dinyatakan sebagai

  • (([A-Za-z0-9] -[A-Za-z0-9] |[A-Za-z0-9] ).) Nama domain peringkat atas, seperti

    ,
  • , dsb., ialah 2-6 digit: dinyatakan sebagai
  • comcn([a-zA-Z]{2,6})Bahagian port: dinyatakan sebagai

  • (:d )?Laluan permintaan seperti

    : dinyatakan sebagai
  • /login(/.*)? Parameter tanda soal dan nilai cincang seperti

    ,
  • : dinyatakan sebagai
  • dan

    ?age=1#dom(?.*)?(#.*)?

  • 3 . Susunan penuh

memerlukan pelengkapan

Kod memerlukan semua pilih atur dan gabungan parameter rentetan untuk dikembalikan dalam bentuk tatasusunan. Nota:

JavaScript
Aksara dalam parameter rentetan tidak diulang dan hanya mengandungi huruf kecil

  • Susun atur atur atur yang dikembalikan bukan tertib sensitif

  • Contoh:

Kod cincang tangan
输入:_permute('abc')
输出:['abc','acb','bac','bca','cab','cba']

Susunan penuh ialah salah satu daripada algoritma yang lebih biasa, dan penyelesaiannya ialah: Terdapat banyak, berikut adalah penyelesaian yang sangat bijak untuk anda:
const _permute = string => {
    // 补全代
    const res = []; // 结果数组
    function search(str) {
    	console.log('1', 'str=' + str);
    	// 如果长度相等了就存放到结果数组中
        if (str.length === string.length) {
            res.push(str)
        }
        // 遍历string
        for (let char of string) {
        	console.log('2', 'str=' + str, 'char=' + char);
        	// 如果str内不含char,就使用str+char开始递归
            if (str.indexOf(char) <p>整体思路就是运用循环加递归,但这个过程中涉及到了<code>JavaScript</code>中循环的执行机制,我们以执行<code>console.log(_permute('ab'));</code>为例查看控制台打印结果:</p><p><img src="https://img.php.cn/upload/article/000/000/067/66e36e8cc39d1c0f975c61596092ab88-3.png" alt="Mari kita bincangkan tentang delegasi acara JavaScript, menilai sama ada URL itu sah dan diatur sepenuhnya."></p><p><code>search</code>函数中的<code>for</code>循环执行次数与<code>string</code>参数的长度相等,此时传递的<code>string</code>参数为<code>ab</code>,长度为2,即<code>search</code>函数中的<code>for</code>循环会执行两次。</p><p><strong>这里需要注意的就是:<code>for</code>循环中执行的递归(再次调用<code>search</code>函数)并不会中断当前的<code>for</code>循环,只会将还未执行的循环暂且搁置,等到系统空闲时这些搁置的循环才会开始执行</strong>( <code>javascript</code> 引擎在同一时刻只能处理一个任务,即<strong>单线程</strong>),具体过程见下方图解:</p><p><img src="https://img.php.cn/upload/article/000/000/067/6cdcbaa13171acb1aed4f70f827454d2-4.png" alt="Mari kita bincangkan tentang delegasi acara JavaScript, menilai sama ada URL itu sah dan diatur sepenuhnya."></p><p>【相关推荐:<a href="//m.sbmmt.com/course/list/17.html" target="_blank" textvalue="javascript视频教程">JavaScript视频教程</a>、<a href="//m.sbmmt.com/course/list/1.html" target="_blank">web前端</a>】</p>

Atas ialah kandungan terperinci Mari kita bincangkan tentang delegasi acara JavaScript, menilai sama ada URL itu sah dan diatur sepenuhnya.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam