일반적으로 사용되는 JavaScript 스크립트 요약 (1)_javascript 기술

이 기사에서는 주로 일반적인 JavaScript 스크립트 요약 시리즈의 첫 번째 기사를 소개합니다. 제가 여러분과 공유할 내용은 jquery가 텍스트 상자를 입력 숫자로만 제한하고 DOMContentLoaded 이벤트를 캡슐화하며 기본 JS를 사용하여 AJAX를 간단히 캡슐화한다는 것입니다. , 도메인 간 요청, JSONP, 천 번째 형식, 필요한 친구가 참조할 수 있습니다.

jquery는 텍스트 상자에 숫자만 입력하도록 제한합니다

jquery는 텍스트 상자에 숫자만 입력하도록 제한하고 IE, Chrome 및 FF와 호환됩니다(성능 효과는 다릅니다). ), 샘플 코드는 다음과 같습니다.

$("input").keyup(function(){ //keyup 이벤트 처리
$(this).val($(this).val(). replacement(/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의 이벤트 큐 저장
eventQueue = [];
//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()
*/
함수 바인딩 준비(){
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
*@execute doScroll을 사용하여 DOM이 로드되었는지 확인합니다.
*@caller binReady( )
*/
함수 doScroll(){
시도해 보세요 {
                                                                      ~ > > *
* @param null
*@execute 실행 대기열에서 이벤트 핸들러를 반복합니다.
*@caller binReady()
*/
function execFn(){
if (!isReady) {
isReady = true;
for (var i = 0; i eventQueue [i].call(window);
        };
                eventQueue = [] ;                                               🎜> });
//js 파일 2
domReady(function(){
});
//참고로 js가 비동기적으로 로드되는 경우 바인딩하지 마세요. 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) {
// 초기화
//유형 매개변수, 선택사항
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){
//유형 매개 변수는 선택 사항이며 기본값은 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 (성공 != null){
                                            > !=" ) {
               if (성공 != null){
                                                                      ~ > > };
};
url:"test.jsp",
data:"name=dipoo&info=good",
dataType:"json",
성공:함수(data) {
경고(데이터. 이름);
}
})



교차 도메인 요청용 JSONP

/**
* 요청 실패 처리가 추가되었습니다. 이 기능은 그다지 유용하지는 않지만 다양한 브라우저에서 스크립트의 차이점을 연구합니다.
* 1, IE6/7/8은 스크립트의 onreadystatechange 이벤트를 지원합니다
* 2. IE9/10은 스크립트의 onload 및 onreadystatechange 이벤트를 지원합니다
* 3. Firefox/Safari/Chrome/Opera는 스크립트의 onload 이벤트를 지원합니다
* 4. IE6/7/8/Opera는 onerror 이벤트를 지원하지 않습니다 script; IE9/10/Firefox/Safari/Chrome은
을 지원합니다. * 5. Opera는 onreadystatechange 이벤트를 지원하지 않지만, 이는 놀라운 특성입니다
* 6. IE9 및 IETester를 사용하여 IE6/을 테스트합니다. 7/8, ReadyState는 항상 로드되고 로드됩니다. 완전한 것은 나타나지 않았습니다.
*
* 최종 구현 아이디어:
* 1. IE9/Firefox/Safari/Chrome은 성공적인 콜백을 위해 onload 이벤트를 사용하고 오류 콜백을 위해 onerror 이벤트를 사용합니다
* 2. Opera 또한 성공적인 콜백을 위해 onload 이벤트를 사용합니다(onreadystatechange를 전혀 지원하지 않습니다). onerror를 지원하지 않으므로 여기서는 지연된 처리가 사용됩니다.
* 즉, 대기 및 성공 콜백 성공, 성공 후 완료 플래그 비트가 true로 설정됩니다. 실패는 실행되지 않으며, 그렇지 않으면 실행됩니다.
* 여기서 지연 시간 값은 매우 까다롭습니다. 이전에는 2초로 설정되어 있었으며 회사에서 테스트했을 때 문제가 되지 않았습니다. 그런데 집에서 3G 무선 네트워크를 사용해본 결과 참조한 js 파일이 존재함에도 불구하고
* 네트워크 속도가 너무 느려서 실패가 먼저 실행되고 나중에 성공이 실행되는 것을 발견했습니다. 따라서 여기서는 5초가 소요되는 것이 더 합리적입니다. 물론 절대적인 것은 아닙니다.
* 3, IE6/7/8 성공 콜백은 onreadystatechange 이벤트를 사용하며, 오류 콜백은 구현하기가 거의 어렵습니다. 가장 기술적이기도 합니다.
* http://www.php.cn/
참조 * nextSibling을 사용해 보았는데 구현이 안되는 것을 확인.
* 역겨운 점은 요청한 리소스 파일조차 존재하지 않는다는 점입니다. ReadyState도 "로드됨" 상태를 거치게 됩니다. 이렇게 하면 요청이 성공했는지 실패했는지 알 수 없습니다.
* 두려웠기 때문에 마침내 프론트엔드와 백엔드 조정 메커니즘을 사용하여 마지막 문제를 해결했습니다. 요청이 성공하든 실패하든 callback(true)을 호출하도록 하세요.
* 이때 콜백에는 성공과 실패를 구분하는 로직이 들어있습니다. 백그라운드에서 jsonp가 반환되지 않으면 실패를 호출하고 그렇지 않으면 성공을 호출합니다.
*
*
* 인터페이스
* Sjax.load(url, {
* data ) // 요청 매개변수(키-값 쌍 문자열 또는 js 객체)
* 성공 / / 성공 콜백 함수 요청
* failure // 실패 콜백 함수 요청
*scope // 콜백 함수 실행 컨텍스트
* timestamp // 타임스탬프 추가 여부
* });
*
*/
Sjax =
function(win){
    var ie678 = !-[1,],
        Opera = win.opera,
        doc = win.document,
        head = doc.getElementsByTagName('head')[0],
        timeout = 3000,
        done = false;
    function _serialize(obj){
        var a = [], key, val;
        for(key in obj){
            val = obj[key];
            if(val.constructor == 배열){
               for(var i=0 ,len=val.length;i                    a.push(key '=' encodeURIComponent(val[i]));
               }
           }else{
                a.push (키 '=' encodeURIComponent(val));
            }
        }
        return a.join('&');
    }
    함수 요청(url,opt){
function fn(){}
        var opt = opt || {},
        데이터 = opt.data,
        성공 = 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){
🎜>             done = true; 경고: jsonp가 반환되지 않았습니다.' );
}
}else{
failure.call(scope);
}
                         🎜>               script.onload = script.onerror = script.onreadystatechange = null;
jsonp = 정의되지 않음;
만약에 ( head && script.parentNode){
head.removeChild(script); 🎜> function fixOnerror(){
setTimeout(function(){
if(!done){
callback();
}
}, timeout );
}
if(ie678){
script.onReadyStateChange = Function () {
var ReadyState = this.readyState
IF ( ! 완료 && (ReadyState == 'Loaded' || ReadyState == { 콜백 (true );
}
}
//fixOnerror();
}else{
Script.onload = function(){
           콜백(true);
                                            > script.onerror = function(){
콜백();
}
if(오페라){
fixOnerror();
}
}
        if(데이터){
            url = '?' 데이터;
        }
        if(타임스탬프){
            if(데이터){
               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', {
        성공: function(){alert(jsonp.name)},
        실패 : function(){alert('error');}
  }); 

千分位格式化

function 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) { 결과 = num 결과; >