よく使うJavaScriptスクリプトまとめ(1)_javascriptスキル

この記事では主に、一般的な JavaScript スクリプトの概要シリーズの最初の記事を紹介します。jquery はテキスト ボックスを数値入力のみに制限し、DOMContentLoaded イベントをカプセル化し、ネイティブ JS を使用して単純に AJAX をカプセル化します。 、およびクロスドメインリクエスト、JSONP、1000番目のフォーマット、必要な友人がそれを参照できます。

jquery はテキスト ボックスの入力を数字のみに制限します

jquery はテキスト ボックスの入力を数字のみに制限します。IE、chrome、FF と互換性があります (パフォーマンス効果は異なります) )、サンプルコード 以下のようになります。

$("input").keyup(function(){ //keyup イベント処理
$(this).val($(this).val(). replace(/D| ^0/g,''));
}).bind("paste",function(){ //CTR V イベント処理
$(this).val($(this ).val() .replace(/D|^0/g,''));
}).css("ime-mode", "disabled"); //CSS設定の入力方法は利用できません

上記のコードの機能は、0 より大きい正の整数のみを入力できることです。

$("#rnumber").keyup(function(){
$(this).val($(this).val().replace(/[^0-9.]/ g,''));
}).bind("paste",function(){ //CTR V イベント処理
$(this).val($(this).val().replace( /[^0-9.]/g,''));
}).css("ime-mode", "disabled") //CSS 設定入力方法は使用できません

上記のコードの機能は、0 ～ 9 の数字と小数点のみを入力できることです。

DOMContentLoaded イベントをカプセル化する

//domReady のイベントキューを保存
eventsQueue = [];
//DOM がロードされているか判定
isReady = false;
//DOMReady がバインドされているか判定
isBind = false;
/*Execute domReady()
*
*@param {function}
*@execute イベント ハンドラーをイベント キューにプッシュし、DOMContentLoaded
をバインドします * * If DOM のロードが完了したらすぐに実行 > *@param null
*@execute 最近のブラウザは、ie9 を含む addEvListener を通じて DOMContentLoaded をバインドします
ie6 ～ 8 は、doScroll を判断することによって DOM がロードされているかどうかを決定します
*@呼び出し元 domReady()
*/
function bindingReady (){
if (isReady) return;
if (isBind) return;
isBind = true;
if (window.addEventListener ) {
document.addEventListener('DOMContentLoaded' ,execFn , false);
}
else if (window.attachEvent) {
doScroll();
};
};
/*doScroll は ie6-8 の DOM がロードされているかどうかを判断します Completed
*
*@param null
*@doScroll を実行して DOM がロードされているかどうかを判断します
*@caller bindingReady( ）
* /
関数doscroll（）{。execfn（）; @param null
*@execute 実行キュー内のイベント ハンドラーをループします
*@caller bindingReady()
*/
function execFn(){
if (!isReady) {
isReady = true;
for (var i = 0; i eventQueue [i].call(window);
};
eventQueue = [] ; 🎜> });
//js file 2
domReady(function(){
});
//非同期ロードされる場合に注意s、domReady メソッドをバインドしません。それ以外の場合、関数は実行されません。
//非同期でロードされた JS がダウンロードされる前に DOMContentLoaded がトリガーされているため、実行時に addEventListener を監視できなくなります



使用AJAX を単純にカプセル化するネイティブ JS


まず、xhr オブジェクトが必要です。これは私たちにとって難しいことではありません。関数にカプセル化してください

var createAjax = function() {
var xhr = null;
try {
} Catch (e1) {
Try {
// 非 IE ブラウザ
xhr = new xmlhttprequest ();
} catch (e2) {
Window.alert (「ブラウザは ajax をサポートしていません。変更してください。」);
}
}
return xhr;
};


それでは、コア関数を書いてみましょう。

var ajax = function(conf) {
// 初期化
//type パラメータ、オプション
var type = conf.type;
//url パラメータ、必須
var url = conf.url;
//data パラメータはオプションであり、ポストリクエストでのみ必要です
var data = conf.data;
//datatype パラメータはオプションです
var dataType = conf. 🎜> //コールバック関数はオプションです
var success = conf.success;
if (type == null){
//type パラメータはオプションで、デフォルトは get
type = "get";
}
if (dataType == null){
Ajax エンジン オブジェクトを作成します
var xhr = createAjax();
// 開く
xhr.open(type , url, true);
//
を送信します if (type == "GET " || type == "get") {
("content-type",
"application/x -www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status = = 200) {
if(dataType == "text"||dataType=="TEXT") {
if (success != null){
==="XML") {
！= null）{
（datAtype == "json" || datatype == "json"）{
if（success！= null）{
}
}
} };
};
url:"test.jsp",
data:"name=dipoo&info=good",
dataType:"json",
success:function(data) {
alert(data.name);
}
});



クロスドメインリクエスト用の JSONP

/**
* リクエスト失敗時の処理を追加しました。あまり便利な機能ではありませんが、各ブラウザのスクリプトの違いを調べます
* 1、IE6/7/8 はスクリプト
の onreadystatechange イベントをサポートしています。 IE9/10 はスクリプト
の onload および onreadystatechange イベントをサポートします * 3. Firefox/Safari/Chrome/Opera はスクリプト
の onload イベントをサポートします * 4. IE6/7/8/Opera はスクリプト
の onerror イベントをサポートしませんスクリプト; IE9/10/Firefox/Safari/Chrome は
をサポートしています。Opera は onreadystatechange イベントをサポートしていませんが、これは素晴らしいです
* 6. IE9 と IETester を使用して IE6/ をテストします。 7/8 、そのreadyStateは常にloading、loadedです。コンプリートは登場しませんでした。
*
* 最終的な実装アイデア:
* 1. IE9/Firefox/Safari/Chrome は成功したコールバックに onload イベントを使用し、エラー コールバックに onerror イベントを使用します
* 2. Opera も成功したコールバックには onload イベントを使用します (onreadystatechange はまったくサポートしていません)。onerror をサポートしていないため、ここでは遅延処理が使用されます。
* つまり、成功コールバックの成功を待機し、成功後にフラグ ビット Done が true に設定されます。失敗した場合は実行されません。失敗した場合は実行されます。
※ここでの遅延時間の値は非常に微妙ですが、以前は2秒に設定されており、社内でテストした際には問題ありませんでした。しかし、自宅で 3G 無線ネットワークを使用した後、参照された js ファイルが存在するにもかかわらず、
* ネットワーク速度が遅すぎるため、失敗が最初に実行され、成功が後で実行されることがわかりました。したがって、ここでは 5 秒かかるほうが合理的です。もちろんそれは絶対的なものではありません。
* 3、IE6/7/8 成功コールバックは onreadystatechange イベントを使用し、エラー コールバックは実装がほとんど困難です。それは最も技術的なものでもあります。
※ http://www.php.cn/
参照 ※ nextSibling を使用してみると実装できないことがわかります。
* 厄介なのは、要求されたリソース ファイルさえ存在しないことです。そのreadyStateも「loaded」状態を経ます。この方法では、リクエストが成功したか失敗したかを知ることができません。
* 怖かったので、最終的にフロントエンドとバックエンドの調整メカニズムを使用して最後の問題を解決しました。リクエストが成功しても失敗しても callback(true) を呼び出すようにします。
※この時、バックグラウンドでjsonpが返されない場合はfailure、そうでない場合はsuccessをコールバックに成功と失敗を区別するロジックを入れています。
*
*
* インターフェース
* Sjax.load(url, {
* data ) // リクエストパラメータ (キーと値のペアの文字列または js オブジェクト)
* success / / リクエスト成功のコールバック関数
* Failure // リクエスト失敗のコールバック関数
* スコープ // コールバック関数の実行コンテキスト
* タイムスタンプ // タイムスタンプを付加するかどうか
* });
*
*/
Sjax =
function(win){
var ie678 = !-[1,],
opera = win.opera,
doc = win.document,
head = doc.getElementsByTagName('head')[0],
timeout = 3000,
完了 = false;
function _serialize(obj){
var a = [], key, val;
for(key in obj){
val = obj[key];
if(val.constructor == Array){
for(var i=0) ,len=val.length;i a.push(key '=' encodeURIComponent(val[i]));
}
}else{
a.push (key '=' encodeURIComponent(val));
}
}
return a.join('&');
}
function request(url,opt){
function fn(){}
var opt = opt || {},
data = opt.data,
success = opt.success || fn,
失敗 = opt.failure || fn,
スコープ = opt.scope ||勝ちます、timestamp = opt.timestamp;
If(data && typeof data == 'object'){
data = _serialize(data);
} }
var script = doc.createElement('script' ) ;
関数コールバック(isSucc){
if(isSucc){
🎜> 完了 = true;
//alert('警告: jsonp が返されませんでした。' );
}
}else{
Failure.call(scope);
}
🎜> script.onload = script.onerror = script.onreadystatechange = null;
jsonp = unknown;
もし( head && script.parentNode){
head.removeChild(script) 🎜> function fixOnerror(){
setTimeout(function(){
if(!done){
callback();
}
}, タイムアウト );
}
if(ie678){
script.onReadyStateChange = Function () {
var ReadyState = this.readyState
IF ( ! 完了 && (ReadyState == 'Loaded' || ReadyState == { callback (true );
}
}
//fixOnerror();
}else{
Script.onload = function(){
callback(true);
> script.onerror = function(){
callback();
}
if(オペラ){
fixOnerror();
}
}
        if(data){
url = '?' data;
}
if(タイムスタンプ){
if(data){
url = '&ts=';
}else{
url = '?ts='
}
url = (new Date).getTime();
}
script.src = url;
head.insertBefore(script, head.firstChild);
}
return {load:request};
}(this);

调用方式如下:

Sjax.load('jsonp66.js', {
success : function(){alert(jsonp.name)},
失敗 : function(){alert('error');}
}); 

千分位格式化

関数 toThousands(num) {
var num = (num || 0).toString(), result = '';
while (num.length > 3) {
result = ',' num.slice(-3) result;
num = num.slice(0, num.length - 3) );
}
if (num) { result = num result; }
return result;
}

以上は本文大家分享的 javascript 常用脚本了，希望大家能够喜欢。