独自の「JavaScript ライブラリ」を作成するのはとても簡単であることが判明
JavaScript ライブラリ は実際には関数のコレクションであり、これらの関数を自分で作成せずに呼び出すと便利な強力な関数です。この記事では、JavaScript ライブラリの作成方法と注意する必要があることについて説明します。に！ご来店をお待ちしております！
執筆内容：
JavaScriptライブラリのテンプレートコードの書き方
JavaScriptライブラリの書き方（例）
JavaScriptライブラリの改善（例）
JSライブラリをよりエレガントで合理的なものにするためには、書くときに2つの点に注意する必要がありますJS ライブラリ:
1. バージョン検出には機能検出を使用しないでください
ブラウザーの種類とバージョンが多すぎて、新しいブラウザーが常に登場しているため、多くの時間を費やすことは不可能です。さまざまなバージョンのブラウザを実際に検出するのにかかるコスト。 「バージョン検出」とも呼ばれる「ブラウザ検出」は、多くの場合、間違った方法であると考えられています。ブラウザ検出のベスト プラクティスは、コードが実行される前にオブジェクトの有無を検出する、一般にオブジェクト検出とも呼ばれる機能検出です。スクリプト オブジェクトまたはメソッドの内容は、ブラウザに関する特定の知識には依存しません。必要なオブジェクトとメソッドが存在する場合、ブラウザはそれを使用でき、コードは期待どおりに実行できます。機能検出では、 一意性: 一意の名前空間名を選択します (たとえば、Google マップではすべての識別子に G 接頭辞が追加されます)。js では大文字と小文字が区別されることに注意してください。 共有なし: 共有なしとは、何も共有しないことを意味します。独自の $function を作成すると、よく知られたライブラリ (Prototype など) の $function と競合し、Prototype の $ が使用できなくなる可能性があります。いくつかのよく知られたライブラリ (jQuery、プロトタイプ) または他の既存の関数と競合する場合は、匿名関数を使用してコードの非共有を実現します。例: この $() 関数を自分だけが使用できるようにするには、JS トリックを使用できます。 注: () JavaScript では 2 つの意味があります。1 つは演算子、もう 1 つは区切り文字です。 上記の匿名関数については 2 つの点を説明する必要があります: ①赤い括弧は匿名関数を表し、赤い括弧は除算を表し、内部の関数が一部であることを示します ②緑の括弧は演算子を表し、それを示します。赤い括弧内の関数 実行するには、匿名関数を定義して直接実行するのと同じです。 1. 次のテンプレートを使用して、独自の JavaScript ライブラリを作成できます2. HTML ページで独自の JS ライブラリの関数を参照する方法: 「挿入」→「HTML」→「スクリプトオブジェクト」→「スクリプト」を実行し、このHTMLページに挿入したいjsライブラリファイルを検索し、HTMLファイルのタイトルの下に挿入します(例: )。次に、JSライブラリ内の関数を呼び出します。 body 属性で、2 つの方法を使用します 注: 他の人が作成したライブラリを使用する場合でも相互干渉しないように、名前空間の名前として好きな名前を使用できます。 // JavaScript Document
if(document.body && document.body.getElementsByTagName){
//使用document.body.getElementsByTagName的代码
}//匿名函数
(function(){
//code,运行的代码
})();//JavaScript库模板代码
(function (){
function $(){
alert("被调用到喽！");
/*alert()是JavaScript脚本语言中窗口window对象的一个常用方法；
其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，
所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/
}
//注册命名空间 'myNameSpace' 到window对象上
window['myNameSpace'] = {}
//把$函数注册到 'myNameSpace'命名空间中
window['myNameSpace']['$']=$;
})();<title>ICTest</title>
<!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置-->
<script language="JavaScript" type="text/javascript" src="IC.js"></script>
①<body onload="myNameSpace.$()"></body> //myNameSpace为定义的命名空间，可以调用自己构建的JS库文件中到函数了 ②<body onload="window.myNameSpace.$()"></body> //在命名空间前加上window也可实现调用JS库中的函数
4. JavaScript ライブラリ
ここでは主に、JS ライブラリの匿名関数で一般的に使用される 2 つのメソッドを記述します: //ZAJ.js库代码
(function (){
function $(){
alert("AZJ.js库被调用到喽！");
}
//注册命名空间 'AZJ' 到window对象上
window['AZJ'] = {}
//把$函数注册到 'AZJ'命名空间中
window['AZJ']['$']=$;
})();
当从界面传递两个参数时，代码设计 运行结果，单击"Click Me"按钮,先弹出AZJtest，再弹出AZJtest2 实例深入：编写getElementByClassName()方法 1.在"AZJ.js"库中编写getElementByClassName()方法，代码设计如下 2.在HTML页面进行测试 测试方式同上面传递两个参数的方式，代码设计如下 运行结果，同上述方法中传递两个参数的情况。 文章写到这里，相信您也会编写简单的js库文件了吧，编写js库文件是不是很简单呢<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.$("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>
<span style="font-family:FangSong_GB2312;font-size:18px;">//ZAJ.js库代码
(function (){
//注册命名空间 'AZJ' 到window对象上
window['AZJ'] = {}
//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注册到 'window.AZJ'命名空间中
window['AZJ']['getElementsByClassName']=getElementsByClassName;
})();</span><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>
以上が独自の「JavaScript ライブラリ」を作成するのはとても簡単であることが判明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7326
9
1625
14
1350
46
1262
25
1209
29
JavaScriptの文字列文字を交換します
Mar 11, 2025 am 12:07 AM
JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
カスタムGoogle検索APIセットアップチュートリアル
Mar 04, 2025 am 01:06 AM
このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です！検索をyに制限することができます
独自のAjax Webアプリケーションを構築します
Mar 09, 2025 am 12:11 AM
それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
例JSONファイルの例
Mar 03, 2025 am 12:35 AM
この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。 このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。 キー価値ペア表記を使用して、あらゆる種類を保存できます
10 jQuery構文蛍光物
Mar 02, 2025 am 12:32 AM
コードプレゼンテーションを強化する：開発者向けの10個の構文蛍光物 ウェブサイトやブログでコードスニペットを共有することは、開発者にとって一般的な慣行です。 適切な構文ハイライターを選択すると、読みやすさと視覚的な魅力を大幅に改善できます。 t
8見事なjQueryページレイアウトプラグイン
Mar 06, 2025 am 12:48 AM
楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます
10 JavaScript＆JQuery MVCチュートリアル
Mar 02, 2025 am 01:16 AM
この記事では、JavaScriptとJQuery Model-View-Controller（MVC）フレームワークに関する10を超えるチュートリアルの厳選された選択を紹介します。これは、新年にWeb開発スキルを向上させるのに最適です。 これらのチュートリアルは、Foundatioのさまざまなトピックをカバーしています
＆＃x27; this＆＃x27; JavaScriptで？
Mar 04, 2025 am 01:15 AM
コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした
