Créez votre propre 'bibliothèque JavaScript', cela s'avère si simple-js tutoriel-php.cn

Bibliothèque JavaScript est en fait un ensemble de fonctions que vous pouvez facilement appeler sans avoir à écrire vous-même ces fonctions puissantes... Cet article explique comment créer une bibliothèque JavaScript et ce dont vous avez besoin. question à laquelle il faut prêter attention ! Dans l'attente de votre visite !

Contenu de l'écriture :

Questions à noter lors de l'écriture de bibliothèques JavaScript

Écriture de code de modèle pour la bibliothèque JavaScript

Écrire une bibliothèque JavaScript (exemple)

Bibliothèque JavaScript parfaite (exemple)

1. Problèmes à noter lors de l'écriture de bibliothèques JavaScript

Afin de rendre notre bibliothèque JS plus élégante et raisonnable, nous écrivons des bibliothèques JS. Veuillez faire attention à deux aspects :

1. N'utilisez pas la détection de version, mais utilisez la détection de capacités

Parce qu'il existe trop de types et de versions de navigateurs et que de nouveaux navigateurs apparaissent constamment. il nous est impossible d'investir beaucoup de temps et d'argent pour nous entraîner à détecter les différentes versions des navigateurs. La « détection du navigateur », également appelée « détection de version », est souvent considérée comme une mauvaise pratique. La meilleure pratique en matière de détection du navigateur est la détection des capacités, également appelée détection d'objet, qui fait référence à la détection d'un objet avant l'exécution du code. d'un objet ou d'une méthode de script ne dépend pas de votre connaissance spécifique du navigateur. Si les objets et méthodes nécessaires existent, le navigateur peut les utiliser et le code peut s'exécuter comme prévu. La détection de capacité utilise la méthode

// JavaScript Document
if(document.body && document.body.getElementsByTagName){
//使用document.body.getElementsByTagName的代码
}

Copier après la connexion

2. Utilisez l'espace de noms

lorsque vous utilisez plusieurs fichiers de bibliothèque js, afin d'éviter les différences dans les appels. Les conflits entre les fonctions du même nom dans les fichiers de la bibliothèque js sont généralement résolus à l'aide d'espaces de noms. JavaScript prend en charge les fonctions du même nom, mais n'utilise que la dernière fonction chargée (la surcharge n'est pas prise en charge, les paramètres ne sont pas pris en compte, seul le nom de la fonction est examiné), celle qui est chargée en dernier sera appelée. Par conséquent, si vous n’utilisez pas d’espace de noms, il est facile de rencontrer le problème des conflits de fonctions portant le même nom.

Deux principes d'utilisation des espaces de noms : l'unicité et l'absence de partage.

Unicité : choisissez un nom d'espace de noms unique (par exemple, Google Maps ajoute le préfixe G à tous les identifiants). Notez que js est sensible à la casse.

Pas de partage : aucun partage signifie ne rien partager ; lorsque vous créez votre propre fonction $, vous pouvez entrer en conflit avec la fonction $ dans une bibliothèque bien connue (telle que Prototype), provoquant l'échec de l'utilisation de $ dans Prototype, dans Afin de ne pas entrer en conflit avec certaines bibliothèques connues (jQuery, prototype) ou d'autres fonctions existantes, utilisez des fonctions anonymes pour parvenir au non-partage de code. Par exemple : pour vous assurer que vous seul utilisez cette fonction $(), vous pouvez utiliser une astuce JS.

//匿名函数
(function(){
//code,运行的代码
})();

Copier après la connexion

Remarque : () Il a deux significations en JavaScript : l'une est l'opérateur ; l'autre est le délimiteur.

Deux points doivent être expliqués à propos de la fonction anonyme ci-dessus :

①Les parenthèses rouges sont une fonction anonyme. Les parenthèses rouges représentent la division, indiquant que la fonction à l'intérieur est une partie

②Les parenthèses vertes représentent un opérateur, indiquant que la fonction entre parenthèses rouges doit être exécutée ; cela équivaut à la laisser s'exécuter directement après avoir défini une fonction anonyme.

2. Écriture de modèles de bibliothèque JavaScript

1 Vous pouvez utiliser le modèle suivant pour écrire votre propre bibliothèque JavaScript

//JavaScript库模板代码
(function (){
function $(){
alert("被调用到喽！"); 
/*alert()是JavaScript脚本语言中窗口window对象的一个常用方法；
其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，
所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/ 
}
 //注册命名空间 &#39;myNameSpace&#39; 到window对象上  
            window[&#39;myNameSpace&#39;] = {}  
          
 //把$函数注册到 &#39;myNameSpace&#39;命名空间中
 window[&#39;myNameSpace&#39;][&#39;$&#39;]=$; 
})();

Copier après la connexion

2. HTML Comment référencer les fonctions de votre propre bibliothèque JS sur la page :

Tout d'abord, exécutez "Insérer → HTML → Objet de script → Script", recherchez le fichier de bibliothèque JS que vous souhaitez insérer dans cette page HTML, et insérez-le sous le titre du fichier HTML, par exemple

<title>ICTest</title>
<!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置-->
<script language="JavaScript" type="text/javascript" src="IC.js"></script>

Copier après la connexion

Ensuite, appelez la fonction dans la bibliothèque JS dans l'attribut body, de deux manières

①<body onload="myNameSpace.$()"></body>   //myNameSpace为定义的命名空间，可以调用自己构建的JS库文件中到函数了
②<body onload="window.myNameSpace.$()"></body> //在命名空间前加上window也可实现调用JS库中的函数

Copier après la connexion

3. Écrivez votre propre bibliothèque JavaScript (exemple)

Implémentez un exemple simple d'apparition d'une boîte de dialogue lorsqu'une page Web est chargée. Dans cet exemple, nous utilisons le logiciel de programmation Dreamweaver 8.

1. Créez votre propre bibliothèque JS. J'ai nommé l'espace de noms WALY.js ici.

Remarque : vous pouvez utiliser votre nom préféré comme nom de l'espace de noms, afin qu'il n'y ait pas d'interférence mutuelle même lorsque vous utilisez des bibliothèques écrites par d'autres.

//ZAJ.js库代码
(function (){
function $(){
alert("AZJ.js库被调用到喽！"); 
}
 //注册命名空间 &#39;AZJ&#39; 到window对象上  
            window[&#39;AZJ&#39;] = {}      
 //把$函数注册到 &#39;AZJ&#39;命名空间中
 window[&#39;AZJ&#39;][&#39;$&#39;]=$;
})();

Copier après la connexion

2. Appelez la bibliothèque JS dans le code de la page HTML pour vérifier si la fonction dans WALY.js est appelée. Le nom du fichier HTML est WALYTest.html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>调用js库测试</title>
<!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置-->
<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
</head>
<body onload="AZJ.$();"> <!--在页面加载时，调用AZJ.js库中的函数；这里也可使用<body onload="window.AZJ.$();">-->
</body>

Copier après la connexion

3. Exécutez la page Web, le résultat de l'exécution est tel qu'indiqué dans la figure

.
[object Object]
Copier après la connexion

4. Améliorer la bibliothèque JavaScript

Ici, nous écrivons principalement deux méthodes couramment utilisées dans la fonction anonyme de la bibliothèque JS :

1.$()方法
2.getElementsByClassName()方法
实例初探:js库中只编写$()方法
1.建立"AZJ.js"库，编写$()方法,代码如下
//ZAJ.js库代码
(function (){
   //注册命名空间 &#39;AZJ&#39; 到window对象上  
        window[&#39;AZJ&#39;] = {} 
   //$函数等同于getElementByID；
function $(){
var elements=new Array(); 
//将传来的参数进行遍历
for(var i=0;i<arguments.length;i++){
var element=arguments[i];
//若参数为字符串类型，则取得该参数的id
if(typeof element==&#39;string&#39;){
element=document.getElementById(element);
}
//若参数长度为1，即只传递进来一个参数，则直接返回
if(arguments.length==1){
return element;
}
//若有多个参数传递进来，则将处理后的值压入elements数组中
elements.push(element);
}
//返回处理后的参数
return elements;
}
 
          
 //把创建的函数$注册到 &#39;window.AZJ&#39;命名空间中
 window[&#39;AZJ&#39;][&#39;$&#39;]=$;
          
})();
2.在HTML页面进行测试
当从界面只传递一个参数时，代码设计
<title>调用js库测试</title>
<!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置-->
<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
<script language="JavaScript" type="text/javascript" >
function testClick(){
var testInput=AZJ.$("testID");
alert(testInput.value);
}
</script>
</head>
<body >
<input type="text" value="AZJtest" id="testID"/>
<input type="button" value="Click Me" onclick="testClick()"/>
</body>

Copier après la connexion

Le résultat en cours d'exécution est : cliquez sur le bouton "Cliquez sur moi", un message de page Web apparaît : AZJtest

Créez votre propre bibliothèque JavaScript, cela savère si simple

当从界面传递两个参数时，代码设计

<span   style="max-width:90%"><title>调用js库测试</title>  
<!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置-->  
<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>  
<script language="JavaScript" type="text/javascript" >  
    function testClick(){  
        var testInput=AZJ.$("testID","testID2");  
        //由于这里是两个参数，所以用for语句遍历两个参数，分别显示出来  
        for(var i=0;i<testInput.length;i++){  
        alert(testInput[i].value);  
        }  
          
    }  
</script>  
</head>  
<body >  
<input type="text" value="AZJtest" id="testID"/>  
<input type="text" value="AZJtest2" id="testID2"/>  
<input type="button" value="Click Me" onclick="testClick()"/>  
</body></span>

Copier après la connexion

运行结果，单击"Click Me"按钮,先弹出AZJtest，再弹出AZJtest2

Créez votre propre bibliothèque JavaScript, cela savère si simple

实例深入：编写getElementByClassName()方法

1.在"AZJ.js"库中编写getElementByClassName()方法，代码设计如下

<span style="font-family:FangSong_GB2312;font-size:18px;">//ZAJ.js库代码  
    (function (){  
        //注册命名空间 &#39;AZJ&#39; 到window对象上    
        window[&#39;AZJ&#39;] = {}   
          
          //getElementsByClassName包含两个参数：类名，标签名  
          function getElementsByClassName(className,tag){  
              //对tag进行过滤，取出所有对象，如取出所有input类型对象。  
              var allTags=document.getElementsByTagName(tag);  
              var matchingElements=new Array();  
                
              //正则表达式  
              className = className.replace(/\-/g,"\\-");  
              var regex = new RegExp("(^|\\s)" +className+ "(\\s|$)");  
                
              var element;  
                
              //将取出的tag对象存入数组中。  
              for(var i=0;i<allTags.length;i++){  
                  element =allTags[i];  
                  if(regex.test(element.className)){  
                      matchingElements.push(element);  
                      }  
                  }  
              return matchingElements;  
              }  
          //把创建的函数getElementsByClassName注册到 &#39;window.AZJ&#39;命名空间中  
          window[&#39;AZJ&#39;][&#39;getElementsByClassName&#39;]=getElementsByClassName;  
        })();</span>

Copier après la connexion

2.在HTML页面进行测试

测试方式同上面传递两个参数的方式，代码设计如下

<span style="font-family:FangSong_GB2312;font-size:18px;"><title>调用js库测试</title>  
<!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置-->  
<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>  
<script language="JavaScript" type="text/javascript" >  
    function testClick(){  
        var testInput=AZJ.getElementsByClassName("testme","input");  
        //由于这里是两个参数，所以用for语句遍历两个参数，分别显示出来  
        for(var i=0;i<testInput.length;i++){  
        alert(testInput[i].value);  
        }  
          
    }  
</script>  
</head>  
<body >  
<input type="text" value="AZJtest" class ="testme" id="testID"/>  
<input type="text" value="AZJtest2" class="testme" id="testID2"/>  
<input type="button" value="Click Me" onclick="testClick()"/>  
</body></span>

Copier après la connexion

运行结果，同上述方法中传递两个参数的情况。

文章写到这里，相信您也会编写简单的js库文件了吧，编写js库文件是不是很简单呢

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!