网页游戏排行榜开服表_计算机专业主要学什么学科_网络营销的含义的理解_网络营销七个步骤

实现搜索功能：第二部分

• 首先我们将一些私有字段，将私有变量改成_开头的，这样以便于可以继承

• 然后我们将一些公用的方法单独放入一个视图中

// 单独创建要给View.js
export default class View {_data;render(data) {this._data = data;const markup = this._generateMarkup();this._clear();this._parentElement.insertAdjacentHTML('afterbegin', markup);}_clear() {this._parentElement.innerHTML = '';}renderSpinner() {const markup = `<div class="spinner"><svg><use href="${icons}_icon-loader"></use></svg></div>`;this._clear();this._parentElement.insertAdjacentHTML('afterbegin', markup);}renderError(message = this._errorMessage) {const markup = `<div class="error"><div><svg><use href="${icons}_icon-alert-triangle"></use></svg></div><p>${message}</p></div>`;this._clear();this._parentElement.insertAdjacentHTML('afterbegin', markup);}renderMessage(message = this._Message) {const markup = `<div class="message"><div><svg><use href="${icons}#icon-smile"></use></svg></div><p>${message}</p></div>`;this._clear();this._parentElement.insertAdjacentHTML('afterbegin', markup);}
}

• 之后我们在recipeview中引入一下，并且继承一下

import View from './View.js';
import icons from 'url:../../img/icons.svg';class RecipeView extends View {_parentElement = document.querySelector('.recipe');_data;_errorMessage = '无法找到食谱，请尝试另一个！';_Message = ' ';

• 关于搜索结果的视图文件，也要单独创建一个视图的文件

import View from './View.js';
class ResultsView extends View {_parentElement = document.querySelector('.results');
}export default new ResultsView();

• 接着我们在控制器中添加之前的微调器

const controlSearchResults = async function () {try {resultsView.renderSpinner();//1.获取搜索查询const query = searchView.getQuery();if (!query) return;

• 现在就来制作我们的样式模板了,其中的HTML代码在HTML文件 中有模板

  _generateMarkup() {return `   <li class="preview"><a class="preview__link preview__link--active" href="#23456"><figure class="preview__fig"><img src="src/img/test-1.jpg" alt="Test" /></figure><div class="preview__data"><h4 class="preview__title">Pasta with Tomato Cream ...</h4><p class="preview__publisher">The Pioneer Woman</p><div class="preview__user-generated"><svg><use href="src/img/icons.svg#icon-user"></use></svg></div></div></a></li>`;}
}

• 之后在控制器中将渲染结果简单放上去看看效果

    //3，渲染搜索结果console.log(model.state.search.results);resultsView.render(model.state.search.results);

• 数据存储在render的data里面，这是个数组，我们循环返回一下，然后将模板单独存放到一个方法中

import View from './View.js';
class ResultsView extends View {_parentElement = document.querySelector('.results');_generateMarkup() {return this._data.map(this._generateMarkupPreview).join('');}_generateMarkupPreview() {return `   <li class="preview"><a class="preview__link preview__link--active" href="#23456"><figure class="preview__fig"><img src="src/img/test-1.jpg" alt="Test" /></figure><div class="preview__data"><h4 class="preview__title">Pasta with Tomato Cream ...</h4><p class="preview__publisher">The Pioneer Woman</p><div class="preview__user-generated"><svg><use href="src/img/icons.svg#icon-user"></use></svg></div></div></a></li>`;}
}

• 之后就再模板上替换掉静态写的

import icons from 'url:../../img/icons.svg';
import View from './View.js';
class ResultsView extends View {_parentElement = document.querySelector('.results');_generateMarkup() {return this._data.map(this._generateMarkupPreview).join('');}_generateMarkupPreview(result) {return `   <li class="preview"><a class="preview__link preview__link--active" href="#${result}"><figure class="preview__fig"><img src="${result.image}" alt="Test" /></figure><div class="preview__data"><h4 class="preview__title">${result.title}</h4><p class="preview__publisher">${result.publisher}</p><div class="preview__user-generated"><svg><use href="${icons}#icon-user"></use></svg></div></div></a></li>`;}
}

• 我们点击之后也可以正常的进行跳转

• 接着我们也要处理一下错误消息处理，如果不存在用户输入的食谱的话就提供友好的错误信息展示

class ResultsView extends View {_parentElement = document.querySelector('.results');_errorMessage = '无法找到您输入的食谱，请尝试另一个！';_Message = ' ';

• 最好的报错的位置是在获取数据的时候，如果能够成功获取说明用户的输入有效，如果不能成功的获取说明用户的输入有误；

  render(data) {if (!data) return this.renderError();

• 不仅仅数据不存在的时候，如果数据接受到的是空数组的话也是无效的

export default class View {_data;render(data) {if (!data || (Array.isArray(data) && data.length === 0))return this.renderError();this._data = data;const markup = this._generateMarkup();this._clear();this._parentElement.insertAdjacentHTML('afterbegin', markup);}

搜索功能到这里基本上就结束了，但是面对这么多的数据，我们改如何处置呢？后面的章节将讲解分页的相关知识点；