Lassen Sie uns über die Delegation von JavaScript-Ereignissen sprechen und beurteilen, ob die URL legal und vollständig angeordnet ist.

Dieser Artikel vermittelt Ihnen relevantes Wissen über JavaScript, das hauptsächlich den zugehörigen Inhalt der Veranstaltungsdelegation vorstellt und beurteilt, ob die URL legal und vollständig ist. Ich hoffe, dass es für alle hilfreich ist.

【Verwandte Empfehlungen: JavaScript-Video-Tutorial, Web-Frontend】

1. Event-Delegation

Effektdemonstration

Anforderungen

Vervollständigen Sie JavaScript Code, die Anforderungen lauten wie folgt: JavaScript代码，要求如下：

• 给"ul"标签添加点击事件

• 当点击某"li"标签时，该标签内容拼接".“符号。如：某"li"标签被点击时，该标签内容为”.."

手撕代码

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>

这道题挺简单的，事件委托的原理实际就是利用了事件冒泡的机制。

事件冒泡：在一个对象上触发某类事件（比如单击click事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件就会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器）

在实际开发中，使用事件委托统一由父类捕捉并处理事件，这样可以减少子类事件的重复定义。

2、判断URL是否合法

要求

补全JavaScript代码，要求以Boolean的形式返回字符串参数是否为合法的URL格式。

注意：协议仅为HTTP(S)

手撕代码

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)}

这题就是考察了正则的应用，运用了大量的正则知识，包括：

• ^代表开头

• [A-Za-z0-9]表示匹配大小写字母和数字

• /表示匹配/，因为在正则里/有其它含义，所以要匹配/需要在前面使用对其进行转义

• ? 等价于{0,1}，表示出现一次或者不出现

• +表示出现的次数至少为1

• |（管道符），是或的意思，表示匹配|两边内容的其中任何之一

• .表示匹配.，与/一样，要匹配.需要在前面使用对其进行转义

• {n,m} 表示出现n-m次

• d匹配数字

• .就是[^nru2028u2029]，是通配符，表示几乎任意字符

• *表示出现次数为0次或者多次

• .*就是匹配任何多个任意字符

• $代表结尾

• g代表全局匹配

合法的URL格式如下：

• 协议部分http(s)可选: 表示为((https|http)://)?

• 域名部分 ：表示为(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+).)+

• 顶级域名，如com、cn等为2-6位：表示为([a-zA-Z]{2,6})

• 端口部分：表示为(:d+)?

• 请求路径如/login：表示为 (/.*)?

• 问号传参及哈希值如?age=1、#dom：表示为 (?.*)?和(#.*)?

3、全排列

要求

补全JavaScript

Fügen Sie ein Klickereignis zum „ul“-Tag hinzu
Wenn ein „li" auf das Tag >" geklickt wird, wird der Tag-Inhalt mit den Symbolen „.“ gespleißt. Beispiel: Wenn auf ein „li“-Tag geklickt wird, ist der Inhalt des Tags „..“

Hand -geschredderter Code

输入：_permute('abc')
输出：['abc','acb','bac','bca','cab','cba']

Diese Frage ist recht einfach. Das Prinzip der Ereignisdelegation nutzt tatsächlich den Mechanismus des Ereignis-Bubblings.

Event-Bubbling: Löst einen bestimmten Ereignistyp (z. B. ein Klickereignis) für ein Objekt aus. Wenn das Objekt einen Handler für dieses Ereignis definiert, ruft das Ereignis diesen Handler auf. Wenn der Ereignishandler oder das Ereignis „true“ zurückgibt, wird das Ereignis von innen nach außen an das übergeordnete Objekt dieses Objekts weitergegeben, bis es verarbeitet wird (alle ähnlichen Ereignisse des übergeordneten Objekts werden aktiviert) oder das erreicht Objekthierarchie Die oberste Ebene, also das Dokumentobjekt (einige Browser)

In der tatsächlichen Entwicklung wird die Ereignisdelegation verwendet, um Ereignisse durch die übergeordnete Klasse einheitlich zu erfassen und zu verarbeiten, wodurch wiederholte Definitionen von Unterklassenereignissen reduziert werden können.

🎜2. Bestimmen Sie, ob die URL legal ist 🎜🎜🎜Erfordert 🎜🎜, um den JavaScript-Code zu vervollständigen, was erfordert Boolean gibt zurück, ob der String-Parameter im zulässigen <code>URL-Format vorliegt. 🎜🎜Hinweis: Das Protokoll ist nur HTTP(S)🎜🎜🎜Handgeschredderter Code🎜

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) 🎜Diese Frage untersucht die Anwendung von Regelmäßigkeit und verwendet viel Regelmäßigkeit Wissen, einschließlich: 🎜🎜🎜🎜<code>^</code> bedeutet, mit 🎜🎜🎜🎜 zu beginnen. <code>[A-Za-z0-9]</code> bedeutet, Groß- und Kleinbuchstaben und Zahlen zuzuordnen 🎜🎜🎜 🎜<code>/</code> bedeutet Übereinstimmung mit <code>/</code>, da <code>/</code> in regulären Ausdrücken andere Bedeutungen hat. Um also mit <code>/</code> übereinzustimmen, müssen Sie dies tun Verwenden Sie <code> vor ></code>Escape it🎜🎜🎜🎜<code>?</code> entspricht <code>{0,1}</code> und gibt an, dass es einmal oder nicht angezeigt wird 🎜🎜🎜🎜<code>+</code> bedeutet, dass die Anzahl der Vorkommen mindestens 1 beträgt 🎜🎜🎜🎜<code>|</code> (Pipe-Zeichen), was <strong> oder </strong> bedeutet, zeigt an, dass <code>| übereinstimmt. Jeder Inhalt auf beiden Seiten von code>🎜🎜🎜🎜<code>.</code> bedeutet Übereinstimmung mit <code>.</code>, genau wie <code>/ code> muss mit <code> übereinstimmen. muss mit <code></code> davor maskiert werden 🎜🎜🎜🎜<code>{n,m}</code> bedeutet n-m mal 🎜🎜🎜 🎜<code>d</code> Übereinstimmende Zahlen 🎜🎜🎜🎜<code>.</code> ist <code>[^nru2028u2029]</code>, ein Platzhalterzeichen, das fast jedes Zeichen darstellt 🎜🎜🎜🎜 <code>*</code> stellt die Anzahl der Vorkommen 0 oder öfter dar. 🎜🎜🎜🎜<code>.*</code> steht für die Übereinstimmung mehrerer beliebiger Zeichen, die 🎜🎜🎜🎜<code>$</code> darstellt das Ende 🎜🎜🎜🎜<code>g code> steht für globale Übereinstimmung 🎜🎜🎜🎜Das legale <code>URL</code>-Format ist wie folgt: 🎜🎜🎜🎜Protokollteil <code>http(s) Optional: ausgedrückt als <code>((https |http)://)?</code>🎜🎜🎜🎜Domänennamensteil: ausgedrückt als <code>(([A-Za-z0-9]+ -[A-Za-z0-9]+|[A -Za-z0-9]+).)+</code>🎜🎜🎜🎜Top-Level-Domain-Namen, wie zum Beispiel <code>com</code> , <code>cn</code> usw. sind 2–6 Ziffern: ausgedrückt als <code>([a-zA-Z]{2,6})</code>🎜🎜🎜🎜Port-Teil: ausgedrückt als <code>(:d+)?</code>🎜🎜🎜🎜Der Anforderungspfad ist als /login</code>: ausgedrückt als <code>(/.*)?</code>🎜🎜🎜 🎜Fragezeichen zur Übergabe von Parametern und Hash-Werten wie <code>?age=1</code>, <code>#dom</code>: dargestellt als <code>(?.*)?</code> und <code>(#.*)?</code>🎜🎜🎜🎜<a id="3_141">🎜 3. Für die vollständige Anordnung 🎜🎜</a><a id="_142">🎜 ist 🎜🎜 zur Vervollständigung des <code>JavaScript-Code und erfordert, dass alle Permutationen und Kombinationen von Zeichenfolgenparametern in Form eines Arrays zurückgegeben werden. 🎜 Hinweis: 🎜🎜🎜🎜Die Zeichen im Zeichenfolgenparameter werden nicht wiederholt und enthalten nur Kleinbuchstaben.🎜🎜🎜🎜Das zurückgegebene Permutationsarray ist nicht reihenfolgesensitiv. Beispiel: 🎜rrreee. Handgeschredderter Code Vollständige Anordnung Es ist einer der gebräuchlichsten Algorithmen und es gibt viele Lösungen. Hier ist eine sehr clevere Lösung für Sie: 🎜<pre class="brush:php;toolbar:false">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="Lassen Sie uns über die Delegation von JavaScript-Ereignissen sprechen und beurteilen, ob die URL legal und vollständig angeordnet ist."></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="Lassen Sie uns über die Delegation von JavaScript-Ereignissen sprechen und beurteilen, ob die URL legal und vollständig angeordnet ist."></p><p>【相关推荐：<a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程">JavaScript视频教程</a>、<a href="https://www.php.cn/course/list/1.html" target="_blank">web前端</a>】</p>

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Delegation von JavaScript-Ereignissen sprechen und beurteilen, ob die URL legal und vollständig angeordnet ist.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!