간단한 템플릿 문자열 바꾸기
var template = "{{name}} ， {{age}} ,{{name}} ， {{age}} ",
data = {name:"XXX",age:"16"};
render(template,data) //XX ， 16
사고방식: 문자열에 있는
{{key}} 와 같은 자리 차지 문자를 가져와 data[key] 로 대체합니다.그래서 우리는 {{key}}와 key 두 개의 양을 실현하기 전에 문자열 조작 MDN과 정규 표현식 자바스크립트 정규 진급의 길인 활학묘용 기음 정규 표현식을 알아야 한다.1. 렌더 함수 구현
/**
* [render render template data ]
* @param {[type]} template [ ]
* @param {[type]} data [ ]
* @return {[type]} [ ]
*/
// 1 - template ,
function render(template, data) {
return template.replace(/\{\{(.*?)\}\}/g, (match, $1) => data[$1.trim()]);
}
// 2 - data key, template
// function render(template, data) {
// Object.keys(data).forEach(key => {
// template = template.replace(new RegExp(`{{${key}}}`,'g'), data[key]);
// });
// return template;
// }
2. html 문서에서 템플릿 사용
템플릿을 정의하는 방법:
(1) 진실한dom 구조에서 템플릿 문법을 사용하여 구조와 스타일을 조정합니다 (2) 조정된 html 코드를 type 형식이 바뀌어 실행할 수 없는script 탭에 넣습니다 (가장 좋은 것은 type="text/template") (3) 템플릿 문법의 차지 문자를 대체합니다
template
<a href="{{href}}">{{text}}</a>
//
var templateDom = document.querySelector("#template"),
template = templateDom.innerHTML;
data = {
href:"http://blog.hackerwen.tech",
text:" "
}
var resultTemplate = render(template,data);
document.body.innerHTML = resultTemplate;
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
