电影应用开发：从代码细节到用户体验优化

在前端开发的世界里，学习一个实际的项目是提升技能的有效途径。今天我们就来深入剖析一个电影应用的开发，重点讲解其中的关键知识点，帮助大家更好地理解项目背后的编程思想和用户体验优化策略。

学习地点：50projects50days.com/projects/mo...

我还剩一点 css 样式没有完成，大家可以根据我给的网址去查看源码来帮助实现。

良好的编程风格和用户体验的细节考量

在开发过程中，遵循良好的编程风格是至关重要的。像字节、腾讯、拼多多等大厂都有自己的代码风格手册，这些手册规范了代码的书写方式，让代码更具可读性和可维护性。统一的代码风格可以让团队成员之间的协作更加顺畅，也方便后续的代码审查和修改。

表单阻止默认提交的原因及实现

为何要阻止默认提交

在 HTML 早期，表单收集用户的数据后，默认会由后端处理。当用户提交表单时，页面会重新刷新，这会给用户带来不好的体验，页面会出现短暂的"白屏"现象。而随着 JavaScript 的发展，我们可以使用 fetch 方法进行 HTTP 请求来提交数据，这样就没有必要刷新页面了。通过阻止表单的默认提交行为，我们可以优化用户体验，让页面交互更加流畅。

实现方式

在 script.js 文件中，我们可以看到以下代码：

javascript 复制代码

oForm.addEventListener('submit', function(event) {
  console.log(event, '////');
  event.preventDefault();
  const search = oInput.value.trim();
  if (search) {
    getMovies(search)
  }
})

这里通过 addEventListener 为表单的 submit 事件添加了一个监听器。当用户提交表单时，会触发这个监听器。在监听器内部，使用 event.preventDefault() 方法阻止了表单的默认提交行为。然后获取用户输入的搜索关键词，调用 getMovies 函数进行电影搜索。

如果不阻止表单的默认提交行为，就算不写 action 地址，它也会自动跳转页面，在原来地址上加一个?，换页面可以看到下面的输出也刷新。

HTML5 特性提升用户体验

placeholder 属性

placeholder 是 HTML5 的新特性，它可以在输入框中显示提示信息，告诉用户应该输入什么内容。在 index.html 文件中，我们可以看到以下代码：

html 复制代码

<input 
  type="text" 
  id="search" 
  class="search" 
  placeholder="Search"
  required
>

这里的 placeholder="Search" 会在输入框中显示"Search"字样，当用户开始输入时，提示信息会自动消失。这个特性可以把用户当成小白，为他们提供明确的操作指引，减少用户犯错的可能性。

语义化标签

HTML5 引入了许多语义化标签，如 header、main 等。这些标签可以让代码的结构更加清晰，也有利于搜索引擎优化（SEO）。在 index.html 文件中，我们使用了 header 标签来包裹搜索表单，使用 main 标签来显示电影列表：

html 复制代码

<header>
  <form action="" id="form">
    <input 
      type="text" 
      id="search" 
      class="search" 
      placeholder="Search"
      required
    >
  </form>
</header>
<main id="main"></main>

这样的结构让代码更易于理解和维护。

required 关键字

required 关键字可以将表单字段设置为必填项。在上面的输入框代码中，required 属性确保用户必须输入内容才能提交表单，从而减少了一些用户犯错的情况。

当然我们在写js 代码时也为该输入添加了.trim()（去除首尾空格）方法，以防用户不小心输入空格回车搜索。

函数模块化的重要性

函数模块化是一种重要的编程思想，它强调将代码封装成独立的函数，实现代码的复用和模块化。在 script.js 文件中，我们将获取电影数据和显示电影列表的功能分别封装成了 getMovies 和 showMovies 函数：

javascript 复制代码

// 获取电影 
const getMovies = (keyword) => {
  let reqUrl = '';
  if (keyword) {
    reqUrl = SEARCH_API + keyword;
  } else {
    reqUrl = API_URL;
  }
  fetch(reqUrl)
  .then(res => res.json())
  .then(data => {
    showMovies(data.results);
  })
}

// movie list render
const showMovies = (movies) => {
  main.innerHTML = '';
  main.innerHTML = movies.map(movie => {
    const { title, poster_path, vote_average, overview } = movie;
    return`
    <div class="movie">
      <img src="${IMG_PATH + poster_path}" alt="${title}">
      <div class="movie-info">
        <h3>${title}</h3>
        <span>${vote_average}</span>
      </div>
      <div class="overview">
        <h3>Overview</h3>
        ${overview}
      </div>
    </div>  
  `}).join("")
}

这样的封装让代码更加清晰，每个函数只负责一个特定的功能，方便代码的维护和扩展。如果后续需要修改获取电影数据的逻辑，只需要修改 getMovies 函数即可，不会影响到其他部分的代码。

项目亮点解析

这个电影搜索项目还有几个值得学习的亮点：

响应式设计：通过CSS的flex布局和合理的单位使用，确保应用在不同设备上都能良好显示。
视觉效果：电影卡片设计了悬停显示详情的交互效果，增强了用户体验：

flex布局可以看看这篇：Flex 弹性布局完全指南

css 复制代码

.movie:hover .overview{
    transform: translateY(0);
}

hover：悬浮事件，鼠标到哪，哪个电影简介悬停展示，而不是堆在下面显得冗长杂乱：

ES6特性应用：大量使用现代JavaScript特性如模板字符串、箭头函数、解构赋值等，使代码更简洁：

javascript 复制代码

const { title, poster_path, vote_average, overview } = movie;

性能优化 ：将script标签放在body底部，避免阻塞页面渲染，尽快看到页面才是重中之重。

JSONView 插件的作用

JSONView 是一款浏览器插件，它可以让我们更好地查看 API 接口返回的 JSON 数据。在开发过程中，我们经常需要调试 API 请求，查看返回的数据结构。JSONView 可以将 JSON 数据以更直观的方式展示出来，方便我们进行调试和分析。

安装JSONView 之前的数据展示（其实点左上角的美观输出也可以）：

安装 JSONView 之后：

通过对这个电影应用的学习，我们不仅掌握了前端开发的一些基本技能，还了解了如何从用户体验的角度出发，优化代码和设计页面。希望这些知识能对大家的学习和工作有所帮助。

整体代码 ：50projects50days.com/projects/mo... jym 点开检查网页源代码就行。