ES类型转换

Major

类型转换

类型转换概述

  • 隐式转换
    JS 是弱类型语言，在使用运算符时，多个参与其中的数据类型可以是任意的，最终得到的结果却只是一种类型。
    结果的类型可能是参与运算操作类型中的一种，也可能并非其中任何一种。
    这就涉及到运算过程中，进行过的隐式类型转换。
  • 强制转换
    JS 中每一种类型都有自己的构造函数，直接调用该构造函数可以强制获得该类型的值，同时 JS 还提供了其他显示调用函数转换类型的方法。

to boolean

阅读全文

CSS选择器

Major

兄弟选择器

CSS 常见的兄弟选择器包括 + ~
其中+ 是相邻兄弟选择器，~ 是通用兄弟选择器。
选择器前后的标签有有相同父标签。

相邻兄弟选择器 + 选择的是紧邻在前置标签后的第一个标签。
通用兄弟选择器命中的标签必须是(不一定是紧邻)前置标签后面的兄弟标签。

选择器 描述 同父 后置标签要求首个 选中标签
‘+’ 相邻 是 是 最多一个（非紧邻不选中）
‘~’ 通用 是 否 多个 
/* 紧邻 h5 的第一个 p 兄弟标签中招，h5 之后第一个元素不是p，就无命中 */
h5 + p {
  color: red;
}

/*  比 h5 小（在其后面）的 p 兄弟标签全部中招，h5 之后没有 p，就无命中 */
h5 ~ p {
  color: red;
}

示例

BMW WARNING

  • Bulletin

本文首发于 skyline.show 欢迎访问，
文章实时更新，如果有什么错误或不严谨之处望请指出，十分感谢。
如果你觉得有用，欢迎到Github仓库点亮⭐️。

I am a bucolic migrant worker but I never walk backwards.

  • Material

参考资料如下列出，部分引用可能遗漏或不可考，侵删。

  • Warrant

本文作者： Skyline(lty)
授权声明： 本博客所有文章除特别声明外， 均采用 CC BY - NC - SA 3.0 协议。 转载请注明出处！

CC BY - NC - SA 3.0

CSS常见问题汇总

Major

CSS 继承与非继承属性

CSS 属性在不设定取值时，其实际取值分为两种。
一种为继承属性，取父级元素该属性对应的值。
一种为非继承属性，去该属性的默认值。
由于 CSS 属性繁多，不容易死记来区分，一般可通过经验来判断一个属性是否可继承。

常见的不可继承属性如下：

  • display
  • 盒模型相关属性，如宽、高、内外边距、边框
  • 背景相关属性：如背景颜色、图片、位置、大小、重复
  • 定位相关属性：如 float、clear、position
  • 内容相关属性：如 content、counter-reset、counter-increment

其他属性多为可继承属性，例如：

  • 字体相关属性
  • 部分文本相关属性
  • 元素可见属性 visibility
  • 光标属性 cursor

display:none 与 visibility:hidden 区别

两者虽简单来说都是用于隐藏元素，表现形式大有不同。

display 会被文档流给移除，影响页面布局，导致重排重绘，原本位置会被其他元素占据。

visilibity:hidden 不会被文档流给移除，不会影响布局，页面重绘出一片空白，但不会重新排版。

display 不是继承属性，而 visibility 是继承属性。
若祖先设定为 visibility:hidden，后代元素会继承该属性不可见。
此时，若重置后代元素的 visibility 为 visible，其后代元素将可见。
若祖先设定的 display 属性设为 none 时，其不可继承，后代元素无力通过改变该属性重现。
总结如下表格所示：

样式 页面重绘 页面重排 显示效果 对应 css 属性是否继承
display:none 是 是 无显示 否（display）
visibility:hidden 是 否 所处区域空白 是（visibility）

媒体查询失效

阅读全文

Shell中查找相关命令

Major

which/whereis/whatis

which

搜索某个命令在文件系统中的的位置并展示，若命令为别名，则会展示别名对应的命令。

shows the full path of (shell) commands.

默认使用时，搜索某个系统命令的位置，并且返回第一个搜索结果

which netstat
# /usr/sbin/netstat
which ls
# ll: aliased to ls -G

-a 选项，搜索某个系统命令的位置，并且返回所有搜索结果

which -a ls
# ls: aliased to ls -G
# /bin/ls

whereis

阅读全文

Vue项目实现rtmp流视频播放

Major

前言

rtmp 流需要使用 flash 播放。
在 chrome 88 版本及以后的版本，已经移除了 flash 组件。
在 2021 年 1 月 12 日，adobe 已宣布不再支持 flash。
故本方案当前可能不再具备实用性。
成功引入 rtmp 流，效果如下
Vue项目实现rtmp流视频播放20220627173249

代码实现

实现需求需要运用的包为 videojs-flash、videojs

main.js

import videojs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = videojs

player.vue


<template>
  <div class="demo1-video">
    <video
      ref="videoPlayer"
      id="myVideo"
      class="video-js"
      controls
      preload="auto"
      style="width: 100%"
      height="220"
      data-setup="{}"
    >
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a
          href="https://videojs.com/html5-video-support/"
          target="_blank"
        >supports HTML5 video</a>
      </p>
    </video>
  </div>
</template>

<script>
import "videojs-flash";
export default {
  name: "VideoPlayer",
  props: ["type", "detail"],
  inject: ["gisMap"],
  data() {
    return {
      player: null,
      videoOptions: {
        autoplay: true, // 是否自动播放
        muted: false, // 是否静音
        controls: false,

        // fluid: true, // 宽高自适应
        // techOrder: ["flash"],
        sources: [
          {
            src: "//vjs.zencdn.net/v/oceans.mp4",
            type: "video/mp4"
            // type: "rtmp/flv"
          }
        ]
      }
    };
  },
  computed: {
    map() {
      return this.gisMap.map.map || {};
    },
    endType() {
      if (this.type) {
        let end = this.type.split("_")[1];
        return end;
      }
      return "";
    }
  },
  mounted() {
    // if (this.gisMap.map && this.gisMap.map.map) {
    this.map.on("popupclose", this.clearVideo);
    this.map.on("popupopen", this.playVideo);
    // }
    this.playVideo();
  },
  destroyed() {
    this.map.off("popupclose", this.clearVideo);
    this.map.off("popupopen", this.playVideo);

  },
  methods: {
    clearVideo() {
      if (this.player) {
        this.player.dispose();
        this.player = null;
      }
    },
    playVideo() {
      this.player = this.$video(
        this.$refs.videoPlayer,
        {
          autoplay: true,
          techOrder: ["flash", "html5"]
        },
        function onPlayerReady() {
          this.src({
            src: "rtmp://58.200.131.2:1935/livetv/hunantv",
            type: "rtmp/flv"
          });
          this.play();

          this.on("ended", function() {});
        }
      );
    }
  }
};

常见问题

阅读全文

CSS换行

Major

段落换行

overflow-wrap

overflow-wrap: normal;
overflow-wrap: break-word;

word-wrap 原始微软私有，css3 统一规范重命名为 overflow-wrap。

overflow-wrap 常见取值为 normal 和 break-word。
normal，默认值，单词保留完整，最后一个单词超出也不换行，直到该单词结束，只在 CJK(汉语系文字) 和空白符换行
break-word，尽量保持英文完整，除非一个单词占一行才断开换行，否则从空白或 CJK 换行

word-break

阅读全文

ES中Generator函数

Major

*函数语法

基本语法

*函数不同于普通函数执行它不会直接返回函数内部的结果（return），返回的是一个 Generator 指针对象。
Generator 对象不能通过构造函数直接生产，需要配合*函数。
同时 Generator 对象 遵循Iteration 迭代规范。
这个规范规定了函数返回的迭代器对象(或其原型链)包含了 next、return 等函数。

Generator 对象通过调用自身的 next 方法，保证游标后移，并且 next 方法返回一个包含了 value 和 done（迭代器是否完成标识）的对象。

使用示例

阅读全文

Copyright © 2017 - 2024 鹧鸪天 All Rights Reserved.

skyline 保留所有权利