함수 template_javascript 기술을 사용하여 간단하고 효율적인 JSON 쿼리를 작성하는 방법 소개

JSON은 JavaScript의 백미라고 할 수 있으며, 우아하고 간결한 코드로 Object와 Array의 초기화를 구현할 수 있습니다. 이는 또한 기호 분리보다 의미론적이며 XML보다 간결한 텍스트 기반 데이터 정의이기도 합니다. 따라서 점점 더 많은 JS 개발자가 이를 데이터 전송 및 저장으로 사용하고 있습니다.

JS 배열에는 데이터 쿼리 및 필터링을 용이하게 하는 유용한 메서드가 많이 내장되어 있습니다. 예를 들어, 다음과 같은 데이터가 있습니다.

코드 복사 코드는 다음과 같습니다.

var Heroes = [
          // 이름============공격======방어========힘====민첩===== 지능====
                                                  이름: '얼음방 마녀', DP: 38, AP: 1.3, STR: 16, AGI: 16, int: 21},
{name: 빌려준 흑마법사', DP: 39, AP: 1.1, STR: 17, Agi:16, Int:21},
{name:'나가 사이렌', DP:51, AP:6.0, Str:21, Agi:21, Int:18} ,
{이름 :'현상금 사냥꾼', DP:39, AP:4.0, Str:17, Agi:21, Int:16},
                                                                        ​18, Agi:22, Int:15},
{name:'빛의 수호자', DP:38, AP:1.1, Str:16, Agi:15, Int:22},
{name: '연금술사', DP:49, AP:0.6, Str :25, Agi:11, Int:25}
                                                                                                        방어력이 40보다 크고 방어력이 4보다 작은 영웅의 경우 Array의 필터 방법을 사용할 수 있습니다.

코드 복사

코드는 다음과 같습니다. var match = Heroes.filter(function( e) {                                                                                        .

루프 판단을 수동으로 작성하는 것에 비해 필터 방식은 매우 편리합니다. 하지만 함수 콜백을 기반으로 하기 때문에 사용할 때마다 함수를 작성해야 하는데, 이는 간단한 쿼리에는 매우 번거롭고, 콜백을 사용하는 효율성도 크게 떨어집니다. 하지만 이렇게 하려면 방법이 없습니다. 단순해지려면 어느 정도의 성능을 희생해야 합니다. 이보다 더 간단한 문장을 사용하고 코드 확장의 효율성을 충분히 누릴 수 있다면 얼마나 완벽할까요?

먼저 위 코드를 이렇게 작성할 수 있고,
질의 속도가 손으로 쓴 순회 판단과 같다
:

코드 복사

코드는 다음과 같습니다.

var match = Heroes.select('@DP>40 AND @AP 약간 SQL과 비슷해 보이는데 구문만 바뀌었나요? 이는 어휘 분석, 의미 해석 등 많은 스크립트 엔진 기능을 작성해야 한다는 의미가 아닐까요? 수천 줄의 코드도 처리할 수 없고 효율성도 확실히 떨어지게 됩니다. . . 그렇게 복잡하다고 생각한다면 대본의 본질을 깊이 이해하지 못한 것입니다. 모든 스크립팅 언어에는 VBS의 eval(), new Function()과 같이 런타임에 코드를 동적으로 해석하고 코드를 동적으로 작성하는 <script> </script>

분명히 다른 언어를 js 코드로 번역할 수 있다면 실행을 위해 호스트에 직접 전달할 수 있습니다!

예를 들어 위의 선택 문자의 경우 "@"를 "e."로, "AND"를 "&&"로 바꾸면 eval 구현에 전달할 수 있는 합법적인 js 표현식이 됩니다. .

그래서 우리가 해야 할 일은 원본 명령문을 js 명령문으로 변환하여 실행하는 것입니다. 그리고 효율성을 높이기 위해 변환된 js 표현식은 각 순회에서 판단을 위해 콜백에 의존하는 대신 실행 가능한 함수 본문을 생성하기 위해 컨텍스트 환경에 인라인됩니다.

따라서 함수 템플릿이 유용할 것입니다.

함수 템플릿 소개

C에는 매크로 및 클래스 템플릿과 같은 것이 있는데, 이를 통해 컴파일 단계에서 일부 계산을 완료하여 성능을 크게 향상시킬 수 있습니다. 런타임 코드. 엄격한 의미에서 스크립트가 컴파일되지는 않지만 처음 실행될 때 구문 분석되고 완전히 최적화됩니다. 이는 현재 주류 브라우저 간의 경쟁 지점입니다. 따라서 미리 제공된 템플릿 함수에 반복되는 평가 코드를 삽입해야 합니다. 준비가 되어 있고 표현식 계산만 필요한 함수:

코드 복사

코드는 다음과 같습니다.

/**
* 템플릿: tmplCount
* 기능: arr 배열에서 $express와 일치하는 표현식의 개수를 계산합니다.
*/
function tmplCount(arr) {
var count = 0;

for(var i = 0; i var e = arr[i];

if($express) {
🎜>위는 arr [] 매개변수를 순회하여 $express와 일치하는 숫자를 세는 템플릿 함수입니다. if(...) 내의 표현식을 제외하고 다른 모든 것이 준비되었습니다. $express 문자는 함수의 다른 문자와 충돌하지 않는 한 다른 식별자로 대체될 수도 있습니다.

인스턴스가 필요한 경우 먼저 tmplCount.toString()을 통해 함수를 문자열 형식으로 변환한 다음 $express를 원하는 표현식으로 바꾸고 마지막으로 이 문자열을 평가하여 인스턴스인 함수 유형 변수를 얻습니다. 템플릿 함수가 생성됩니다!


간단한 데모를 보여드리겠습니다.

코드 복사
코드는 다음과 같습니다.

/** * 함수: createInstance * 매개변수: exp * tmplCount 템플릿의 $express를 대체하는 데 사용되는 js 표현식 문자열 * 반환:

* 함수, 템플릿 tmplCount를 반환합니다. 예

*/
function createInstance(exp)
{
// 템플릿의 표현식 교체
var code = tmplCount.toString()
.replace ('$express', exp);

// 익명 함수가 오류를 직접 평가하는 것을 방지
var fn = eval('0,' code);

// 템플릿 인스턴스 반환


// 테스트 매개변수
var Student = [
{name: 'Jane', age: 14}, {name: 'Jack', age: 20},

{이름: '아담', 나이: 18}
];

// 데모1

var f1 = createInstance('e.age Alert(f1(student)) //1

// 데모2
var f2 = createInstance('e.name!="Jack" && e.age>=14');
Alert(f2(student)) //2

createInstance()의 매개변수 중에는 e라는 객체가 있는데, 이는 tmplCount 템플릿에 정의되어 있으며 순회 중에 특정 요소를 참조합니다. 반환된 f1과 f2는 tmplCount 템플릿의 두 인스턴스입니다. 최종 호출된 f1 및 f2 함수에는 동일한 함수를 사용하여 두 개의 함수를 미리 작성한 것처럼 이미 표현식 문이 포함되어 있으므로 콜백이나 기타 작업 없이 순회 중에 표현식이 직접 실행되므로 상당한 개선이 이루어졌습니다.

사실 직설적으로 말하면 tmplCount는 이 함수의 문자열을 제공하기 위해서만 존재하며 자체는 호출되지 않습니다. 실제로 문자열 형태의 정의는 동일하지만, 함수로 작성하는 것이 테스트하기에 더 직관적이고 편리합니다.

나중에 스크립트에 압축 최적화가 필요한 경우 tmplCount 템플릿이 포함되어서는 안 됩니다. 그렇지 않으면 해당 "e." 및 "$express"가 변경될 수 있습니다.

JSON 기본 쿼리 기능

함수 템플릿의 사용과 구현을 소개했으니 이제 이전 JSON 쿼리 언어를 다시 살펴보겠습니다. SQL과 유사한 명령문을 js 표현식으로 변환하고 함수 템플릿 인스턴스를 생성하기만 하면 됩니다. 동일한 명령문에 대해 매번 번역을 피하기 위해 캐시할 수 있습니다.

먼저 쿼리 템플릿을 구현합니다.

코드 복사

코드는 다음과 같습니다.

var __proto = Object.prototype;

//
// 템플릿: __tmpl
// 매개변수: $C
// 설명: _list 객체에서 $C와 일치하는 요소 집합을 기록하고 반환합니다.
//
var __tmpl = function(_list) {
var _ret = [];
var _i = -1;

for(var _k in _list) {
var _e = _list[_k];

if(_e && _e != __proto[_k]) {
if ($C)
                                                                                                                                                             
}.toString();

그런 다음 Object의 select 메서드 작성을 시작합니다.

코드 복사

코드는 다음과 같습니다. // // 메소드 구현 선택

//

var __cache = {};

__proto.select = function(exp) {
If(!exp)
return [];

var fn = __cache[exp];

try { if(!fn) {

var code = __interpret(exp); //표현식 해석

code = __tmpl.replace('$C' , code); 템플릿으로

                     fn = __cache[exp] = __compile(code);                                                                 ~
          fn(this) 반환;                                                                                                                                                  }
}

__cache 테이블은 쿼리 문의 캐시를 구현합니다. 반복 쿼리의 경우 성능이 크게 향상될 수 있습니다.

코드 복사


코드는 다음과 같습니다.

function __compile() {

return eval(' ​​0,' 인수[0]); } 빈 함수에 __compile을 별도로 작성하는 이유는 eval이 실행될 때 컨텍스트를 최대한 깔끔하게 하기 위함입니다. __interpret는 전체 시스템의 최우선 순위이며 쿼리문을 js문으로 변환하는 역할을 담당합니다. 구현은 의견의 문제이지만 가능한 한 단순하게 유지하고 구문을 과도하게 분석하지 마십시오.

특정 코드 보기:
jsonselect.rar

시연을 위해 현재 일부 기본 기능만 구현되어 있습니다. 앞으로는 LIKE, BETWEEN, ORDER BY 및 기타 일반적으로 사용되는 기능을 추가할 수도 있습니다.

데모

코드 복사

코드는 다음과 같습니다.

var Heros = [
// 이름 ====================== 힘 === 민첩 == ===지능== ==
{name:'얼음집 마녀', DP:38, AP:1.3, Str:16, Agi:16, Int:21},
{name:'침묵의 흑마법사', DP:39, AP :1.1, Str:17, Agi:16, Int:21},
                                                                      21, },
{name:'현상금 사냥꾼', DP:39, AP:4.0, Str:17, Agi :21, Int:16},
{name:'Venomancer' ', DP:45, AP:3.1, Str:18, Agi:22, Int:15},
{name:'빛의 수호자 ', DP:38, AP:1.1, Str:16, Agi:15 , Int:22},
                                                        

코드 복사 코드는 다음과 같습니다. // 쿼리: 힘, 민첩성이 20을 초과하는

// 결과: 나가 사이렌

var match = 영웅 .select('@Str>20 AND @Agi>20');

// 쿼리:
"Scholar"로 끝남 // 결과: Silence Warlock, Venomancer, Alchemist var match = Heroes.select('right(@name,1)="Shi" ');

// 쿼리:
체력이 500 이상 // 결과: Alchemist

var match = Heroes.select('100 @Str*19 > 500');