前端-1

知识点积累。有转载。

HTML

1.行内元素/块级元素/可变元素

• 行内元素(内联元素)：常见的span/a/label/strong/b/em/br/mg/input/textarea等html标签都是行内元素

• 块级元素：常见的div/p/ul/li/ol/hr/table/h1~h6/form等html标签都是块级元素

• 可变元素(根据上下文意境判断该元素是行内元素还是块级元素)：button/script(客户端脚本)/del(删除文本)/map(图片区块map)/object对象

• display设置

  • display:inline：设置成行内元素/内联元素
  • display:block：设置成块级元素
  • display:inline-block：设置成行内块级元素

• 行内元素和块级元素的区别：

  块级元素	行内元素
  块级元素会独占一行，其宽度会自动填满其父元素宽度。	相邻的行内元素会排列在同一行内，不回独占一行，若一行排不下才会换行，其宽度会随元素的内容而变化
  块级元素可以设定width/height（width如果不做设定，会直接默认为父元素的100%）	行内元素设置width/height无效，但可以这是line-height，它的宽度是直接由内部的文字或图片撑开的
  块级元素可以设定margin/padding	行内元素水平方向的padding-left/right和margin-left/right都会边距效果，但是竖直方向上的padding-top/bottom和margin-top/bottom都不会有效果（水平方向有效，竖直方向无效）
  块级元素可以包含行内元素和块级元素	行内元素不能包含块级元素
  块级元素属性标签是可以直接嵌套的	行内元素属性标签内不能嵌套行属性标签

• CSS设置块级元素居中：

  • absolute实现

     div{
       height: 500px;
       position: relative;
       background: papayawhip;
     }
  
     div p{
       width: 100px;
       height: 100px;
       background: peru;
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       margin: auto;
     }
  

  • absolute+translate实现

     div{
       height: 500px;
       position: relative;
       background: papayawhip;
     }
  
     div p{
       width: 100px;
       height: 100px;
       background: peru;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
     }
  

  • flex实现

      div{
        height: 500px;
        background: papayawhip;
        display: flex;
        justify-content: center;   /*实现水平居中*/
        align-items: center;   /*实现垂直居中*/
      }
  
      div p{
        width: 100px;
        height: 100px;
        background: peru;
      }
  

2.前端跨页面通信有哪些方法？

• 什么是前端跨页面通信？

  在浏览器中，可以同时打开多个tab页，每个tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象，也不会在多个tab页之间共享。然而有些时候，我们希望能在这些独立的tab页之间同步页面数据，信息和状态。

  比如在下面红线连接的，在列表页点击收藏后详情页的btn页变为收藏，详情页收藏后列表页也会改变。这就是前端跨页面通信

  

• 同源页面间的跨页面通信
  浏览器的同源策略会限制一部分跨页面通信方式。来看在满足同源策略的前提下，有哪些技术可以实现跨页面通信

  • BroadCast Channel
    BroadCast Channel 可以帮我们创建一个用于广播的通信频道，当所有页面都监听同一频道的消息时，其中某个页面通过它发送的消息就会被其他所有页面收到。

  • Service Worker
    Service Worker是一个可以长期运行在后台的worker，能够实现与页面的双向通信。多页面共享间的Service Worker可以共享。将Service Worker作为消息的处理中心（中央台）即可实现广播效果。

  • LocalStorage
    当 LocalStorage 变化时，会触发storage事件。利用这个特性，我们可以在发送消息时，把消息写入到某个 LocalStorage 中；然后在各个页面内，通过监听storage事件即可收到通知。

    window.addEventListener('storage', function (e) {
        if (e.key === 'ctc-msg') {
            const data = JSON.parse(e.newValue);
            const text = '[receive] ' + data.msg + ' —— tab ' + data.from;
            console.log('[Storage I] receive message:', text);
        }
    });
    

    在各个页面添加如上的代码，即可监听到 LocalStorage 的变化。当某个页面需要发送消息时，只需要使用我们熟悉的setItem方法即可：

    mydata.st = +(new Date);
    window.localStorage.setItem('ctc-msg', JSON.stringify(mydata));
    

    注意，这里有一个细节：我们在mydata上添加了一个取当前毫秒时间戳的.st属性。这是因为，storage事件只有在值真正改变时才会触发。举个例子：

    window.localStorage.setItem('test', '123');
    window.localStorage.setItem('test', '123');
    

    由于第二次的值’123’与第一次的值相同，所以以上的代码只会在第一次setItem时触发storage事件。因此我们通过设置st来保证每次调用时一定会触发storage事件。

  上面我们看到了三种实现跨页面通信的方式，不论是建立广播频道的 Broadcast Channel，还是使用 Service Worker 的消息中转站，抑或是些 tricky 的storage事件，其都是广播模式：一个页面将消息通知给一个“中央站”，再由“中央站”通知给各个页面。
  在上面的例子中，这个“中央站”可以是一个 BroadCast Channel 实例、一个 Service Worker 或是 LocalStorage。

  另外两种跨页面通信方式，我把它称为“共享存储+轮询模式”。

  • Shared Worker
    Shared Worker是 Worker 家族的一员。普通的 Worker 之间是独立运行的，数据互不相通；而多个tab注册是Shared Worker则可以实现数据共享。
    Shared Worker在实现跨页面通信的问题在于：它不能主动通知所有页面，因此需要使用轮询的方式拉取最新的数据，思路如下：
    让 Shared Worker 支持两种消息。一种是post，Shared Worker 收到后会将该数据保存下来；另外一种是get，Shared Worker 收到后会将保存的数据通过postMessage传给注册它的页面，也就是让页面通过get来主动获取（同步）最新消息。
  • IndexedDB
    除了可以利用Shared Worker 来共享存储数据，还可以使用其他一些“全局性”（支持跨页面）的存储方案，例如IndexedDB或cookie，下面来说IndexedDB的思路：
    与Shared Worker 类似，消息发出方将消息存储在IndexedDB红，接收方（如所有页面）则通过轮询去获取最新的消息。

  实际上，有些时候使用“共享存储”的形式时，不一定要搭配长轮询。
  例如，在多 Tab 场景下，我们可能会离开 Tab A 到另一个 Tab B 中操作；过了一会我们从 Tab B 切换回 Tab A 时，希望将之前在 Tab B 中的操作的信息同步回来。这时候，其实只用在 Tab A 中监听visibilitychange这样的事件，来做一次信息同步即可

  • window.open + window.opener
    当我们使用window.open打开页面时，方法会返回一个被打开页面window的引用。而在未显示指定noopener时，被打开的页面可以通过window.opener获取到打开它的页面的引用。通过这种方式我们就将这些页面建立起了联系（一种树形结构）。
    实现思路：把window.open打开的页面的window对象收集起来，当需要发送消息的时候，作为消息的发起方，一个页面需要同时通知它打开的页面与打开它的页面；此时，一个收到消息的页面，除了展示收到的消息，它还需要将消息再传递给它所“知道的人”（打开与被它打开的页面），这样，每个节点（页面）都肩负起了传递消息的责任，也就是我说的口口相传，而消息就在这个树状结构中流转了起来。
    口口相传的模式存在一个问题：如果页面不是通过在另一个页面内的window.open打开的（例如直接在地址栏输入，或从其他网站链接过来），这个联系就被打破了。

• 非同源页面之间的通信
  有两个不同域名的产品线，也希望它们下面的所有页面之间能无障碍地通信，要怎么实现？

  要实现非同源页面之间的通信，可以使用一个用户不可见的iframe作为“桥”。由于iframe与父页面间可以通过制定origin来忽略同源策略，因此可以在每个页面嵌入一个iframe（如：http://sample.com/bridge.html），而这些iframe由于使用了同一个url，因此属于同源页面，其通信方式就可以使用上面提到的各种方式了。

  实现思路：页面与 iframe 通信非常简单，首先需要在页面中监听 iframe 发来的消息，做相应的业务处理。然后，当页面要与其他的同源或非同源页面通信时，会先给 iframe 发送消息。iframe 收到消息后，会使用某种跨页面消息通信技术在所有 iframe 间同步消息。其他 iframe 收到通知后，则会将该消息同步给所属的页面。
  

3.DOM树