JavaScript의 크로스 브라우저 JSON 직렬화

이 기사에서는 객체 직렬화의 이점, 현재 브라우저 구현의 이점을 검토하고 AJAX 기반 프로젝트에 도움이 될 수있는 코드를 개발할 것입니다. 문자 적 표기법을 사용하여 정의 된 상당히 복잡한 JavaScript 객체가 있다고 가정합니다.

var obj1 = {
    b1: true,
    s1: "text string",
    n1: 12345,
    n2: null,
    n3: undefined,
    a1: [ 1,1,2,3,5,8, [13, 21, 34] ],
    o1: {
        a: [3, 2, 1],
        b: {
            c: 42,
            d: [ 3.14, 1.618 ]
        }
    }
};

다양한 방법으로 객체 속성에 액세스 할 수 있습니다.

obj1.s1;                // returns "text string"
obj1["n1"];             // returns 12345
obj1.a1[6][1];          // returns 21
obj1["o1"]["b"]["c"];   // returns 42

이 객체는 또한 개별 인수를 지정하는 대신 JavaScript 함수 및 메소드로 전달 될 수 있습니다. 유용한 것들. 그러나이 개체를 쿠키에 저장해야한다면 어떻게해야합니까? AJAX 요청을 통해 객체를 웹 서비스에 전달 해야하는 경우 어떻게해야합니까? 해당 웹 서비스가 수정 된 버전의 객체를 반환하려면 어떻게해야합니까? 대답은 직렬화입니다.

직렬화는 객체를 문자열로 바꾸는 과정입니다. de-serialization은 그 문자열을 다시 기본 물체로 돌립니다
• 아마도 JavaScript에서 사용할 수있는 가장 좋은 문자열 표기법은 JSON - JavaScript 객체 표기법입니다. JSON은 위에 표시된대로 JavaScript 객체 문자 그럴 표기법에서 영감을 얻은 가벼운 데이터 간환 형식입니다. JSON은 PHP 및 기타 여러 서버 측 언어의 지원을받습니다 (JSON.org 참조). JavaScript에는 두 가지 JSON 방법이 있습니다.
JSON.stringify ( obj ) - javaScript 객체를 json 문자열로 변환합니다 json.parse ( str ) - json 문자열을 JavaScript 객체 로 다시 변환합니다.
• 불행히도, 이러한 방법을 제공하는 브라우저는 거의 없습니다. 현재까지 Firefox 3.5, Internet Explorer 8.0 및 Chrome 3 베타만이 기본 지원을 제공합니다. 일부 JavaScript 라이브러리는 자체 JSON 도구 (예 : Yui와 같은 ) 그러나 많은 사람들은 (jQuery 포함)하지 않습니다. 그러나 모든 것이 손실되지 않습니다. JavaScript는 유연하며 브라우저가 필요할 때마다 JSON Stringify 및 구문 분석 방법을 구현할 수 있습니다. 코드의 상단에서, 우리는 사용할 수없는 경우 기본 JSON 객체 또는 빈 객체를 가리키는 JSON 변수를 만듭니다.
json.stringify 코드는 조금 더 복잡합니다.

json.stringify를 사용할 수 없으면 단일 OBJ 매개 변수를 수용하는 새로운 함수를 정의합니다. 매개 변수는 단일 값, 배열 또는 위의 OBJ1과 같은 복잡한 객체 일 수 있습니다. 코드는 객체 유형을 검사합니다. 단일 값은 즉시 반환되며 문자열 만 수정되어 값 주위에 따옴표를 넣습니다. 배열 또는 객체가 전달되면 코드는 모든 속성을 통해 반복됩니다.

문자열 값은 인용문이 추가되었습니다 하위 어레이 또는 객체는 재귀 적으로 json.stringify 함수로 전달됩니다. 결과 값은 JSON [] 배열의 끝에 "이름 : value"문자열로 추가되거나 배열 항목의 경우 단일 값입니다. 마지막으로, JSON 어레이는 쉼표로 변환 된 목록으로 변환되어 배열 [] 또는 객체 {} 내에서 반환됩니다.필요에 따라 괄호. 뇌가 아프면 json.parse 코드가 훨씬 간단하다는 것을 알게되어 기쁩니다.

이렇게하면 eval ()을 사용하여 json 문자열을 객체로 변환합니다. 모든 프로젝트에서 JSON 직렬화 기능을 구현하기 위해 서두르기 전에 몇 가지 gotchas가 있습니다.

var obj1 = {
    b1: true,
    s1: "text string",
    n1: 12345,
    n2: null,
    n3: undefined,
    a1: [ 1,1,2,3,5,8, [13, 21, 34] ],
    o1: {
        a: [3, 2, 1],
        b: {
            c: 42,
            d: [ 3.14, 1.618 ]
        }
    }
};

이 코드는 의도적으로 짧게 유지되었습니다. 대부분의 상황에서는 작동하지만 Native JSON.stringify 및 JSON.PARSE 방법에는 미묘한 차이가 있습니다. 모든 JavaScript 객체가 지원되는 것은 아닙니다. 예를 들어, 날짜 ()는 빈 객체를 반환하는 반면, 기본 JSON 메서드는 날짜/시간 문자열로 인코딩합니다. 코드는 함수를 직렬화합니다 (예 : var obj1 = {myfunc : function (x) {}}; 기본 JSON 방법은 그렇지 않습니다 매우 큰 물체는 재귀 오류를 던질 것입니다 json.parse에서 eval ()의 사용은 본질적으로 위험합니다. 자신의 웹 서비스에 전화하는 경우 문제가되지 않지만 타사 응용 프로그램에 전화하면 실수로 또는 의도적으로 페이지를 중단하여 보안 문제를 일으킬 수 있습니다. 필요한 경우 더 안전한 (그러나 더 길고 느리게) JavaScript 파서는 json.org에서 구입할 수 있습니다.

코드가 유용하다는 것을 알기를 바랍니다. 자신의 프로젝트에서 자유롭게 사용하십시오. 리소스 파일 :
• JSON 직렬화 데모 페이지 전체 JavaScript 코드 (json-serialization.js) zip 파일로 전체 코드를 다운로드하십시오
관련 독서 :
• jQuery 플러그인을 개발하는 방법
자동 확장 Textarea jQuery 플러그인을 구축하는 방법 곧 출시 예정 : JSON 직렬화의 유용한 적용… JavaScript JSON SERIALIZATION에 대한 자주 질문
• JavaScript의 JSON 직렬화 란 무엇입니까?
JSON 직렬화는 JavaScript 객체를 JSON 문자열 형식으로 변환하는 프로세스입니다. 이것은 json.stringify () 메소드를 사용하여 수행됩니다. 결과 JSON 문자열은 저장 또는 서버로 보낼 수 있습니다. 클라이언트와 서버간에 데이터를 쉽게 전송할 수 있으므로 웹 개발에서 중요한 프로세스입니다.
• json.stringify ()를 JavaScript에서 JSON.Stringify ()를 어떻게 사용합니까?
json.stringify ()는 JavaScript의 JSON 문자열로 변환하는 메소드입니다. 간단한 예는 다음과 같습니다. ‘myjson’.

javaScript로 배열을 직렬화 할 수 있습니까?

예, json.stringify () 메소드를 사용하여 javaScript로 배열을 일련화 할 수 있습니다. 이 방법은 간단한 배열뿐만 아니라 객체의 배열에서도 작동합니다. 예는 다음과 같습니다.
• het adr = [1, 2, 3, 4];
let myjson = json.stringify (arr);
• console.log (myjson);
이 예에서는‘arr’가 json 문자열로 변환됩니다. javaScript에서 JSON 문자열을 어떻게 사로화합니까?

사제화는 JSON 문자열을 JavaScript 객체로 다시 변환하는 과정입니다. 이것은 json.parse () 메소드를 사용하여 수행됩니다. 예는 다음과 같습니다.

let myjson = '{ "name": "john", "age": 30, "city": "new York"}';

let obj = json.parse (myjson);
console.log (obj); json.parse ().

javaScript에서 함수를 직렬화하려고하면 어떻게됩니까?
json.stringify ()를 사용하여 javaScript에서 함수를 직렬화하려고하면 함수가 무시되며 결과 JSON 문자열에 나타나지 않습니다. JSON은 데이터 형식이며 JavaScript의 실행 능력을 지원하지 않기 때문입니다.
JavaScript에서 직렬화 프로세스를 사용자 정의 할 수 있습니까?

예, 교체기 기능을 사용하여 JavaScript에서 직렬화 프로세스를 두 번째 인수로 JSON.Stringify ()로 사용하여 JavaScript의 직렬화 프로세스를 사용자 정의 할 수 있습니다. 이를 통해 직렬화 프로세스 중에 값을 필터 아웃하거나 수정할 수 있습니다.

JavaScript JSON SERIALIZATION에서 꽤 인쇄하는 것은 JSON 문자열을보다 읽기 쉬운 방식으로 형식화하는 방법입니다. 이것은 json.stringify ()에 대한 세 번째 인수로 숫자를 제공하여 이루어집니다. 이는 들여 쓰기에 사용할 공간의 수를 나타냅니다. JavaScript의 날짜를 직렬화하고 실질화 할 수 있습니까?

예, 몇 가지 추가 단계가 필요합니다. 기본적으로 JavaScript의 날짜 개체를 직렬화하면 ISO 형식의 문자열로 변환됩니다. 사형화되면 자동으로 날짜 개체로 다시 변환되지 않습니다. 새 날짜 () 생성자를 사용하여 수동으로 다시 변환해야합니다.

javaScript의 TOJSON () 메소드는 무엇입니까?

javaScript의 tojson () 메소드는 json.stringify ()의 동작을 변경하는 데 사용됩니다. 객체에 tojson () 메소드가 있으면 json.stringify ()는 원래 오브젝트 대신에 반환하는 값을 직렬화합니다.

json 직렬화 중에 javaScript에서 많은 숫자를 처리 할 수 ​​있습니까? JavaScript는 최대 2^53 - 1의 숫자를 정확하게 나타낼 수 있습니다. 더 많은 숫자를 직렬화 해야하는 경우 먼저 정밀 손실을 피하기 위해 문자열로 변환해야 할 수도 있습니다.

위 내용은 JavaScript의 크로스 브라우저 JSON 직렬화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!