Project 1：Page Transformer

[miniflycn]

相关学习

level 1：表示最少预习内容 level 2：表示课程需要学会的东西 level 3：表示课外知识

• 项目地址
  • https://github.com/FE-star/Plan-2022/tree/main/page-transformer
• CSS栅格
  • 定宽栅格 level1 （大部分场景其实定宽就可以解决）
  • 响应式栅格：http://bs4.vx.link/index.html?tmpui_page=/pages/layout level2 （后面讲多端会再讲，暂时要知道就好）
• lazyload
  • https://github.com/tuupola/lazyload level2
  • https://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html level1（需要大概了解下IntersectionObserver，并大概知道以前这种需求是通过在onscroll计算实现的）
• Vue3
  • 动态组件：https://staging-cn.vuejs.org/api/built-in-special-elements.html#component level1
  • 自定义directive：https://staging-cn.vuejs.org/guide/reusability/custom-directives.html#custom-directives level1
• 性能
  • https://github.com/FE-star/2019.03/blob/master/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96.pdf level2
  • https://github.com/FE-star/2019.03/issues/11 level3
  • https://github.com/FE-star/2019.03/issues/12 level3

[miniflycn]

题外话：为什么选择Vue

本质上，选择Vue是因为，我觉得在可视化领域Vue可以轻易绕过一些麻烦的问题。因为Vue有directive，所以可以轻易对指定域生命周期做切面，在尽量少的修改组件内部的情况下提供扩展能力。以Lazyload的实现为例，这就很明显。用Vue，我们可以通过实现v-lazyload directive让指定域的所有标签都能使用lazyload能力，例如：

<template>
  <img v-lazyload="http://ww3.sinaimg.cn/mw690/62aad664jw1f2nxvya0u2j20u01hc16p.jpg" />
  <img v-lazyload="http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvyo52qj20u01hcqeq.jpg" />
  <img v-lazyload="http://ww2.sinaimg.cn/mw690/62aad664jw1f2nxvz2cj6j20u01hck1o.jpg" />
  <img v-lazyload="http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvzfjv6j20u01hc496.jpg" />
  <img v-lazyload="http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxw0e1mlj20u01hcgvs.jpg" />
  <img v-lazyload="http://ww4.sinaimg.cn/mw690/62aad664jw1f2nxw0p95dj20u01hc7d8.jpg" />
  <img v-lazyload="http://ww2.sinaimg.cn/mw690/62aad664jw1f2nxw134xqj20u01hcqjg.jpg" />
  <img v-lazyload="http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxw1kcykj20u01hcn9p.jpg" />
</template>

但如果用React，且如果lazyload能力是需要外部被注入的，我们需要这样：

import React, { Component } from 'react';

export default class Image extends Component {
  render(props) {
    const { Lazyload, Operation } = props

    return (
      <div className="wrapper">
        <Operation type="image" noExtra />
        <div className="widget-list image-container">
          <Lazyload throttle={200} height={300}>
            <img src="http://ww3.sinaimg.cn/mw690/62aad664jw1f2nxvya0u2j20u01hc16p.jpg" />
          </Lazyload>
          <Lazyload throttle={200} height={300}>
            <img src="http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvyo52qj20u01hcqeq.jpg" />
          </Lazyload>
          <Lazyload throttle={200} height={300}>
            <img src="http://ww2.sinaimg.cn/mw690/62aad664jw1f2nxvz2cj6j20u01hck1o.jpg" />
          </Lazyload>
          <Lazyload throttle={200} height={300}>
            <img src="http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvzfjv6j20u01hc496.jpg" />
          </Lazyload>
          <Lazyload throttle={200} height={300}>
            <img src="http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxw0e1mlj20u01hcgvs.jpg" />
          </Lazyload>
          <Lazyload throttle={200} height={300}>
            <img src="http://ww4.sinaimg.cn/mw690/62aad664jw1f2nxw0p95dj20u01hc7d8.jpg" />
          </Lazyload>
          <Lazyload throttle={200} height={300}>
            <img src="http://ww2.sinaimg.cn/mw690/62aad664jw1f2nxw134xqj20u01hcqjg.jpg" />
          </Lazyload>
          <Lazyload throttle={200} height={300}>
            <img src="http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxw1kcykj20u01hcn9p.jpg" />
          </Lazyload>
        </div>
      </div>
    );
  }

这时候我们比较难在组件本身没有提供切面的情况下扩展他，这样可能导致一些额外的麻烦。 而且模版类语言有slot概念，slot可以很容易让可视化编辑器了解，被注入的DOM到底插到哪个地方，但React是没办法声明的，很多时候需要让可视化编辑器知道这件事情，需要做很多额外的工作。

[shenxiang11]

学员报道， “切面” 这个术语是什么意思？

[miniflycn]

学员报道， “切面” 这个术语是什么意思？

可以查一下AOP：面向切面编程，可以这么理解一个系统我可以“切”一刀形成一个横切面，使得我在这个面上能看清楚一个明确目标的功能是如何完成的，而不是分散在每个不同的地方。其实大家用的最多的AOP就是CSS：https://plpatterns.com/post/482063133/every-time-you-use-css-youre-doing

[miniflycn]

鼓励大家用issue反馈问题哈～

[chencl1986]

请问在Boostrap的栅格中，媒体查询写作@media (max-width: 575.98px) { ... }，这里为何是575.98px，而不是576px？

[miniflycn]

@chencl1986

参考：https://stackoverflow.com/questions/51566916/why-does-bootstrap-use-a-0-02px-difference-between-screen-size-thresholds-in-its

简单说就是，为了可读性，还有0.02px是为了解决Safri的bug。

[JTR354]

https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js 这个访问不了的话,可以试试这个 https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.prod.min.js