자, 이전 기사에서 dom 구조의 템플릿 문자열을 토큰 데이터 구조로 변환하는 코드를 작성했으므로
이제 데이터와 결합된 토큰을 사용하여 dom 문자열을 생성해야 합니다.
먼저 템플릿 문자열과 데이터 구조를 살펴보겠습니다.
먼저 이 데이터에서 데이터를 가져온 다음 템플릿 문자열 문은 먼저 개체의 학생 루프를 사용한
다음 각 학생 목록과 각 첨자를 사용하여 루프를 시작합니다. .
이는 템플릿 문자열과 응답 데이터 간의 상호 작용으로도 이해할 수 있습니다.
그런 다음 src 아래에 renderTemplate.js라는 파일을 생성합니다.
이 함수의 기능은 토큰을 배열에서 다시 문자열로 변환하는 것입니다.
먼저 이렇게 작성해 보겠습니다.
/*
将tokens数组转为模板字符串
*/
export default function renderTemplate(tokens,data) {
console.log(tokens,data);
}
먼저 함수 구조를 노출합니다.
매개변수 측면에서 처리한 토큰 배열과 방금 본 데이터를 받습니다.
그런 다음 src 아래에 생성된 index.js를 열어
이 renderTemplate을 가져오고 사용합니다.
여기서 우리는 renderTemplate을 가져오고
반환 값을 받습니다. 전달하는 것은 이전에 처리한 토큰 배열과 이전에 사용하지 않은 데이터입니다.
그런 다음 프로젝트를 실행하고
renderTemplate의 토큰과 데이터가 성공적으로 출력된 것을 볼 수 있지만 renderTemplate이 반환 값을 작성하지 않았기 때문에 출력 renderTemplate의 반환 결과는 지금 사용할 수 없어야 합니다.
그래서 이제 우리는 토큰과 데이터를 운용할 방법을 찾아야 합니다.
그러나 현재 구조는 여전히 약간 복잡하므로 www 아래의 index.html을 다음과 같이 변경합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src = "/xuni/bundle.js"></script>
<script>
let templateStr = `
<div>
我超喜欢我家的{
{name}}，我家{
{name}}也超喜欢我
</div>
`;
let data = {
name: "小猫猫",
}
GrManagData.render(templateStr,data);
</script>
</body>
</html>
이러한 방식으로 데이터의 전체 결과가 훨씬 간단해집니다.
그런 다음 renderTemplate 코드를 다음과 같이 수정합니다.
/*
将tokens数组转为模板字符串
*/
export default function renderTemplate(tokens,data) {
//创建一个字符串 保存结果
let resultStr = "";
//先循环遍历tokens 数组
for(let i = 0;i < tokens.length; i++){
//定义一个token变量 接收当前遍历的下标
let token = tokens[i];
//判断当前是不是text 文本类型的
if(token[0] == "text") {
//因为 text表示内容只是单纯文本 直接追加到结果字符串上就行了
resultStr += token[1];
} /* 判断到如果是name变量名称类型 */ else if(token[0] == "name") {
//在data中找到对应的字段 然后追加在结果字符串上
resultStr += data[token[1]];
}
}
//输出最后结果字符串
console.log(resultStr);
}
먼저 내용을 저장할 결과 문자열을 정의한
다음 토큰을 반복합니다. 이전에 formConversToken을 처리할 때 중괄호 밖의 정의를 이름으로 정의한
다음 일반 텍스트 유형을 직접 정의한 것을 기억합니다. 결과 문자열에 추가됩니다.
그러면 이름이 있고 데이터의 해당 필드에 일치시킨 다음 추가해야합니다.
이것은 한눈에 명확해야합니다.
마지막으로 결과를 출력
하고 스플라이싱 결과는 다음과 같습니다.
돌이켜 보면 우리의 html 콘텐츠에는
문제가 없습니다.
아래에서는 파운드 기호가 있는 루프 문자열을 계속 처리합니다.