Prototype의 템플릿 클래스 Template_prototype에 대한 간략한 분석
- WBOY원래의
- 2016-05-16 17:58:411414검색
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와 템플릿 사이에 중첩된 호출이 있지만 결국 의미는 동일합니다.
원래 예에서는 템플릿이 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와 템플릿 사이에 중첩된 호출이 있지만 결국 의미는 동일합니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：js 함수 type_javascript 기술다음 기사：js 함수 type_javascript 기술