Prototype의 템플릿 클래스 Template_prototype에 대한 간략한 분석

Prototype을 사용해 본 사람이라면 Template이라는 클래스가 있다는 것을 아실 겁니다. 사용 예는 다음과 같습니다.

코드를 복사하세요

var str = '#{what}이 없어졌을 수도 있지만 #{how}의 시간이 있습니다'
var object = {
what : ' Swallows',
방법: 'return'
}
var template_1 = new Template(str);
var result = template_1.evaluate(object)

console.log( 'result:',result );
//출력: '제비가 갔을 수도 있지만 돌아올 때가 있습니다'

이것은 매우 편리하므로 구현 원리를 간략하게 분석해 보겠습니다. , 이는 소스 코드이기도 합니다. 해석에 대한 참고사항입니다.

먼저 일반적인 요구사항에서 사용될 몇 가지 상황을 살펴보겠습니다. 먼저 위의 예를 사용하여 양식을 결정해 보겠습니다. 대체 부분은 #{what} 형식의 콘텐츠입니다. object 객체에 대한 키입니다.
이제 질문이 있습니다. 객체가 중첩된 객체인 경우 어떻게 교체해야 할까요?
즉,

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

여기 소스 코드 패턴의 일반 var = /^([^.[] |[((?:.*?[^\])?)])(.|[|$)/; 목적. 비유하자면 어떤 깊은 중첩도 달성할 수 있습니다.

교체를 수행하려면 가장 중요한 것은 문자를 바꾸는 방법이 있어야 한다는 것입니다. 소스 코드는 gsub의 가장 간단한 버전입니다.

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

이 호출 방법과 원리는 동일합니다. 앞에서 언급한 교체와 유사하며 기본적으로 상호 교환이 가능합니다. http://www.cnblogs.com/xesam/archive/2011/12/05/2276783.html

코드 복사

코드 다음과 같습니다:
원래 예에서는 템플릿이 str이고, 패턴은 일치 규칙이며, 원래 예에서는 객체가 객체입니다. 이제 초점은 평가 메소드 구현에 남아 있습니다.
주로 gsub 메소드를 직접 호출합니다. gsub의 교체 방법.
가능한 상황
먼저 객체가 빈 객체이고 교체가 필요한 부분을 직접 삭제합니다
예를 들어

var str = '#{what} may have 사라졌지만 #{how}'의 시간이 있습니다.
var object = {}
그러면 그냥 return '가 갔을 수도 있지만 '


초의 시간이 있습니다. , 이스케이프된 부분은 직접 유지됩니다.

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

var str = '\# {what}은 갔을지 모르지만 \#{how}의 시간이 있습니다';
var object = {
what : 'Swallows',
how : 'return'
}

그런 다음 '\#{what}이 없어졌을 수도 있지만 \#{how}의 시간이 있습니다'를 반환합니다.

이러한 상황은 코드, 구체적으로 코드는 다음과 같습니다

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

템플릿 .prototype.evaluate = function(object) {
//gsub(str,pattern, replacement)
return gsub(this.template,this.pattern,function(match){
var before = match[ 1];//여기서 일치[ 1]는 Template.Pattern
var content = match[2];//match[1]에서 (^|.|r|n)의 일치 부분입니다. 여기서는 (# {(.*? )})일치하는 부분
var expr = match[3];//여기의 일치[1]은 Template.Pattern
에서 (.*?)의 일치하는 부분입니다.//예 :
// For s#{what}, before='s', content='#{what}', expr='what'

//먼저 객체는 빈 객체이고, 그 다음에는 직접 삭제합니다. 교체 부분
if(object == null){
return(match[1] '')
//두 번째, 이스케이프 부분은 직접 유지됩니다.
if (before == '\'){
return content;
}

//위의 두 가지 상황 외에 일반적인 교체 과정은 다음과 같습니다.
var ctx = object;

//앞서 말했듯이 다음 일반 규칙은 중첩된 개체를 일치시키는 것입니다. 중첩된 하위 개체 일치 항목이 있는지 확인하려면 마지막 (.|[|$)을 살펴보세요.
//'.' in #{what.name}
//또는 '[' in #{what[name]}
//즉, 다음 일치[3]

var 패턴 = /^([^.[] |[((?:.*?[^\])?)])(.|[|$)/
match = 패턴.exec( expr );

while (match != null) {
if(/^[/.test(match[1])){
var comp = match[2].replace(/ \ \]/g, ']');
}else{
var comp = match[1];
}
ctx = ctx[comp];//ctx[comp]가 A인 경우 문자열이면 다음 단계를 수행할 수 있습니다. ctx[comp]가 여전히 객체라면 죄송합니다. 초과 근무를 계속하세요.

if (null == ctx || '' == match[3]){//교체해야 할 항목이 object의 중첩된 하위 개체가 아닌 경우 루프를 직접 중단합니다. 교체가 완료되었으며 퇴근했습니다.
break;
}

//다음은 단지 키워드를 제거하는 것이며 다른 작업은 루프에서 사용되어 반복됩니다.
if('[' == match[3]){
expr = expr.substring(match[1].length)
}else{
expr = expr.substring(match[0) ].length)
}
match = Pattern.exec(expr);

ctx 이전에 반환
}; >
물론 소스 코드는 그렇게 간단하지 않습니다. 또한 str의 잘못된 문자 바꾸기, 바꾸기를 문자열로 처리하는 등의 작성 감지 및 판단도 포함됩니다. 자세한 내용은 소스코드를 확인하실 수 있습니다.
교체가 문자열인 경우를 처리하는 것이 조금 복잡할 수 있습니다. gsub와 템플릿 사이에 중첩된 호출이 있지만 결국 의미는 동일합니다.