基本知识点总结（持续更新）

定义问题

• 什么是盒模型？

  定义：

  盒模型是用于控制元素与元素之间，或者元素和内容之间的位置关系的。盒模型包括 margin（外边距）、border（边框）、padding（填充区）、content（内容区）。

  分类：

  border-box：怪异盒模型
  content-box：标准盒模型

• 什么是组件化开发？

  定义：

  最初的目的是代码重用，功能相对单一或者独立。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。

  特点：

  1: 高内聚
  2: 可复用
  3: 易于维护

• 什么是模块化？

  定义：

  最初的目的是将同一类型的代码整合在一起，所以模块的功能相对复杂，但都同属于一个业务。不同模块之间也会存在依赖关系，但大部分都是业务性的互相跳转，从地位上来说它们都是平级的。

• react 和 vue 的区别？

  …待补充。

• 什么是单页面应用？

  单页面应用（SPA）：

  通俗点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html,css,js。所有的页面内容都包含在这个所谓的主页中。但是写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。

  多页面应用 （MPA）：

  一个应用中有多个页面，页面跳转的时候是整页进行刷新。

  单页面（SPA）和多页面（MPA）的对比 ：

  1：组成 ：SPA 一个外壳页面和多个页面片段组成。MPA 多个完整页面构成。
  2：资源共用（css,js）：SPA共用，只需在外壳部分加载。MPA 不共用，每个页面都需要加载。
  3：刷新方式：SPA 页面局部刷新或更改。MPA 整页刷新。
  4：用户体验：SPA 页面片段间的切换快，用户体验良好。MPA 页面切换加：载缓慢，流畅度不够，用户体验比较差。
  5：转场动画：SPA 容易实现。MPA 无法实现。
  6：数据传递：SPA 容易。MPA 依赖url传参，或者cookie,localStorage等。
  7：搜索引擎优化（SEO）：SPA 需要单独的方案，实现比较困难，不利于SEO检索，可以利用服务器端渲染（SSR）优化。MPA 实现方法简易。
  8：试用范围：SPA 高要求的体验度，追求界面流畅的应用。MPA 适用于追求高度支持搜索引擎的应用。
  9：开发成本：SPA 较高，需要借助专业的框架。MPA 较低，但页面重复代码多。
  10：维护成本：SPA 相对容易。MPA 相对复杂。

  单页面的优点 ：

  1：局部刷新，内容的改变不需要加载整个页面，速度更快，用户体验更好，基于这一点 SPA 对服务器压力较小。
  2：实现前后端分离。
  3：可添加页面较为炫酷的动画效果（比如切换页面内容时的过渡动画）。

  单页面的缺点 ：

  1：不利于 SEO（SEO只识别HTML的标签进行权重搜索，不认识JS动态生成的页面）。（可利用 SSR，服务器端渲染，进行优化）。
  2：导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）。
  3：初次加载慢。（需要加载所有必需的文件）
  4：页面复杂度提高很多。

• 单页面应用如何实现路由跳转？

  SPA 采用前端路由系统，通过改变 URL 实现不重新请求页面的情况下，更新页面视图。大致分为两种模式：hash 和 history。

  hashHistory

  浏览器地址栏的#就是 hash，我们可以通过 window.location.hash 来获取 hash 值。

• hash 的特点：

  • hash 虽然包含在 URL 中，但不会被包括在 HTTP 请求中。它是用来指导浏览器动作的，对服务器端完全无用，因此，改变hash不会重新加载页面。

  • 可以添加监听 hash 值变化的事件，从而实现特定组件跳转：

    window.addEventListener("hashchange", callback, false)
    

  • 每一次改变hash值，都会在浏览器的访问历史中添加一条记录

• hash 的使用

  • push()

    push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
        const { current: fromRoute } = this
        this.transitionTo(
          location,
          route => {
            pushHash(route.fullPath)
            handleScroll(this.router, route, fromRoute, false)
            onComplete && onComplete(route)
          },
          onAbort
        )
      }
    
    function pushHash (path) {
      if (supportsPushState) {
        pushState(getUrl(path))
      } else {
        //直接赋值hash
        window.location.hash = path
      }
    }
    

  • replace()

    replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
        const { current: fromRoute } = this
        this.transitionTo(
          location,
          route => {
            replaceHash(route.fullPath)
            handleScroll(this.router, route, fromRoute, false)
            onComplete && onComplete(route)
          },
          onAbort
        )
      }
    
    function getUrl (path) {
      //window.location.href为浏览器当前URL
      const href = window.location.href
      const i = href.indexOf('#')
      const base = i >= 0 ? href.slice(0, i) : href
      //返回更新hash值后的URL
      return `${base}#${path}`
    }
    function replaceHash (path) {
      if (supportsPushState) {
        replaceState(getUrl(path))
      } else {
        window.location.replace(getUrl(path))
      }
    }
    

  History

  history 模式通过 window.history 提供的方法来实现路由跳转。通过 pushState 和 replaceState 方法修改浏览器历史记录栈，虽然当前 URL 改变了，但浏览器不会立即发送请求该 URL ，这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础，然后通过监听 popstate 的变化，渲染特定的组件从而实现路由跳转。