Parlons de la délégation d'événements JavaScript, en jugeant si l'URL est légale et entièrement organisée.-js tutoriel-php.cn

Cet article vous apporte des connaissances pertinentes sur JavaScript, qui présente principalement le contenu associé à la délégation d'événements, jugeant si l'URL est légale et complète. Examinons-le ensemble, j'espère que cela sera utile à tout le monde.

Parlons de la délégation d'événements JavaScript, en jugeant si l'URL est légale et entièrement organisée.

【Recommandations associées : Tutoriel vidéo JavaScript, front-end web】

1. Délégation d'événement

Démonstration d'effet

Parlons de la délégation dévénements JavaScript, en jugeant si lURL est légale et entièrement organisée.

. Exigences

Compléter JavaScript Code, les exigences sont les suivantes : JavaScript代码，要求如下：

给"ul"标签添加点击事件
当点击某"li"标签时，该标签内容拼接".“符号。如：某"li"标签被点击时，该标签内容为”.."

手撕代码

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>事件委托</title>

Copier après la connexion

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

事件冒泡：在一个对象上触发某类事件（比如单击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)}

Copier après la connexion

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

^代表开头
[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

Ajouter un événement de clic à la balise "ul"

li

.

li

..

Hand -shredded code

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

Copier après la connexion

Cette question est assez simple. Le principe de la délégation d'événements utilise en fait le mécanisme de bullage d'événements.

Event bouillonnant : déclenche un certain type d'événement (comme un événement de clic) sur un objet si l'objet définit un gestionnaire pour cet événement, alors l'événement appellera ce gestionnaire. Si ce gestionnaire n'est pas défini, Si le gestionnaire d'événement ou l'événement renvoie vrai, alors l'événement sera propagé à l'objet parent de cet objet, de l'intérieur vers l'extérieur, jusqu'à ce qu'il soit traité (tous les événements similaires de l'objet parent seront activés), ou qu'il atteigne le hiérarchie des objets Le niveau supérieur, c'est-à-dire l'objet document (certains navigateurs)

Dans le développement réel, la délégation d'événements est utilisée pour capturer et traiter uniformément les événements par la classe parent, ce qui peut réduire les définitions répétées des événements de sous-classe.

🎜2. Déterminez si l'URL est légale 🎜🎜🎜Nécessite 🎜🎜 de compléter le code JavaScript, nécessitant Boolean renvoie si le paramètre de chaîne est au format légal <code>URL. 🎜🎜Remarque : Le protocole est uniquement HTTP(S)🎜🎜🎜Code déchiqueté à la main🎜

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) 🎜Cette question examine l'application de la régularité et utilise beaucoup de régularité connaissances , notamment : 🎜🎜🎜🎜<code>^</code> signifie commencer par 🎜🎜🎜🎜<code>[A-Za-z0-9]</code> signifie faire correspondre les lettres et les chiffres majuscules et minuscules 🎜🎜🎜 🎜<code>/</code> signifie correspondre à <code>/</code>, car <code>/</code> a d'autres significations dans les expressions régulières, donc pour correspondre à <code>/</code> vous devez utiliser <code> devant ></code>Escape it🎜🎜🎜🎜<code>?</code> est équivalent à <code>{0,1}</code>, indiquant qu'il apparaît une fois ou n'apparaît pas 🎜🎜🎜🎜<code>+</code> signifie que le nombre d'occurrences est d'au moins 1🎜🎜🎜🎜<code>|</code> (caractère barre verticale), ce qui signifie <strong> ou </strong>, indiquant la correspondance <code>| N'importe lequel des contenus des deux côtés du code>🎜🎜🎜🎜<code>.</code> signifie correspondre au <code>.</code>, tout comme <code>/ code>, il doit correspondre à <code>.</code> doit être échappé avec <code></code> devant 🎜🎜🎜🎜<code>{n,m}</code> signifie n-m fois 🎜🎜🎜 🎜<code>d</code> Matching Numbers 🎜🎜🎜🎜<code>.</code> est <code>[^nru2028u2029]</code>, qui est un caractère générique et représente presque tous les caractères 🎜🎜🎜🎜 <code>*</code> représente le nombre d'occurrences 0 fois ou plus 🎜🎜🎜🎜<code>.*</code> correspond à n'importe quel nombre de caractères 🎜🎜🎜🎜<code>$</code> représente le fin 🎜🎜🎜🎜<code>g code> représente une correspondance globale 🎜🎜🎜🎜Le format légal <code>URL</code> est le suivant : 🎜🎜🎜🎜Partie du protocole <code>http(s) code> Facultatif : exprimé sous la forme <code>((https |http)://)?</code>🎜🎜🎜🎜Partie du nom de domaine : exprimée sous la forme <code>(([A-Za-z0-9]+- [A-Za-z0-9]+|[A -Za-z0-9]+).)+</code>🎜🎜🎜🎜noms de domaine de premier niveau, tels que <code>com</code>, <code>cn</code>, etc., comportent 2 à 6 chiffres : exprimés sous la forme <code>([a-zA-Z]{2,6})</code>🎜🎜🎜🎜Partie du port : exprimées sous la forme <code>(:d+)?</code>🎜🎜🎜🎜Le chemin de la requête est le suivant : <code>/login</code> : exprimé sous la forme <code>(/.*)?</code>🎜🎜🎜🎜 point d'interrogation transmettant des paramètres et une valeur de hachage tels que <code>?age=1</code>, <code>#dom</code> : représenté par <code>(?.*)?</code> et <code> (#.*) ?</code>🎜🎜🎜🎜<a id="3_141">🎜 3. L'arrangement complet 🎜🎜</a><a id="_142">🎜 nécessite 🎜🎜 de compléter le <code>JavaScript code> code et nécessite que toutes les permutations et combinaisons de paramètres de chaîne soient renvoyées sous la forme d'un tableau. 🎜 Remarque : 🎜🎜🎜🎜Les caractères du paramètre chaîne ne sont pas répétés et ne contiennent que des lettres minuscules🎜🎜🎜🎜Le tableau de permutation renvoyé n'est pas sensible à l'ordre🎜🎜🎜🎜Exemple : 🎜rrreee🎜🎜🎜Code déchiqueté à la main🎜🎜 Arrangement complet C'est l'un des algorithmes les plus courants, et il existe de nombreuses solutions. Voici une solution très intelligente pour vous : 🎜.<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="Parlons de la délégation dévénements JavaScript, en jugeant si lURL est légale et entièrement organisée."></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="Parlons de la délégation dévénements JavaScript, en jugeant si lURL est légale et entièrement organisée."></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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!