2022-34~35周(8.15-8.28) 项目问题整理

新知识

1、好文学习

Web水印

可见水印：

• 背景图平铺

background-image: url("./logo.png");
background-repeat: repeat;
1
2

• 全页面水印
  如果包含视频等会遮挡背景图片的水印，需要一个层级高的透明来承载；

position: fixed;
left: 0;
top: 0;
width: 100vw;
height：100vh;
z-index: 1000;
background-image: url("./logo.png");
background-repeat: repeat;
opacity: 0.3;
pointer-events: none; // 可穿透，不影响页面操作
1
2
3
4
5
6
7
8
9
10

• 动态水印：包含用户信息等
  服务端生成图片作为背景图渲染，增加服务端开销，也容易被攻击；
  Canvas：const watermark = canvasEl.toDataURL('image/png'); 拿到生成图片的uri，背景平铺
  svg：可转base64作为背景图平铺

水印安全

• shadow dom
  使用 Element.attachShadow() 方法来将一个 shadow root 附加到任何一个元素上。它接受一个配置对象作为参数，该对象有一个 mode 属性，值可以是 open 或者 closed 。open 表示可以通过页面内的 JavaScript 方法来获取 Shadow DOM。而 closed 则表示不可以从外部获取 Shadow DOM 。设为 closed保证安全
• Mutation Observer
  监听dom元素被修改或删除，就重新插入一个。

不可见水印（盲水印）：

**优点：**更好观感、避免攻击、隐蔽性；

图片的盲水印（LSB水印）可以通过改变rgb色值的最后一位，将水印信息编码为二进制，顺序改变一组二进制位；
网页的盲水印，可以利用 浏览器解析 HTML 时会忽略行尾或 标记后的空白符，因此在 标记后插入二进制信息对应的不同类型空格或制表符来做标记，但作用仅限于html保护不了内容；

2、css in ts

index.scss.d.ts 声明文件，index.scss 实际样式文件，引入的时候需要有声明才可引入成功

import * as RenderTestStyles from './index.scss'

const RenderTest= () => (
    

    
)
1
2
3
4
5
6

可以通过 declare 全局声明的方式来替代 d.ts 声明文件

// 定义类型，默认导出
declare module '*.scss' {
  const scssContent: any;
  export default scssContent;
}
1
2
3
4
5

3、arr.indexOf(searchElement[, fromIndex])

循环寻找元素所有出现在阵列中的位置， formIndex + 1

问题

1、element-ui dropdown组件添加disabled无效

看了很多issue，这个问题似乎仍未解决；
根据组件渲染页面之后生成的dom节点来分析，样式添加到dropdown的button上即可达到预期效果

            
            
            
	              item1
	              item2
            

1
2
3
4
5
6
7
8

2、ESLint not working: VSCode warning: “ESLint is disabled since its execution has not been approved or denied yet”

解决办法：vscode右下角 eslint 为禁用标识，点击 allow everywhere 即可；
解决办法文档

3、格式化问题及解决方法

3.1、Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style

3.2、Prefer using an optional chain expression instead, as it’s more concise and easier to read.

链式表达式更简洁易读：

this.observer && this.observer.disconnect();
-->
this.observer?.disconnect();
1
2
3

3.3、Class name markdowndInstance must match one of the following formats: PascalCase

three name conventions of compound word：
Camel Case：capital letters but dosen’t include the first letter
Snake Case：lower case and delimited by an underscore
Pascal Case：capital letters and include the first letter

3.4、stylelint 报错及修复

Invalid Option: Invalid option value “true” for rule “font-family-name-quotes” // 指定是否应在字体系列名称周围使用引号
Invalid Option: Unexpected option value “false” for rule “property-no-vendor-prefix” // 不允许值的供应商前缀

// .stylelintrc.yaml
rules：
  property-no-vendor-prefix:
    [
      true,
      ignoreProperties:
        [
          'tab-size',
          'hyphens',
          'box-sizing',
          'transform',
          'user-select',
          'animation',
          'border-radius',
          'font-variant-ligatures',
          'transition',
        ],
    ]
  font-family-name-quotes: 'always-where-recommended' // 根据标准推荐，连续不需，不连续需要
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.5、前端代码格式化涉及工具总结

规范化git提交格式工具，配合husky 和 lint-staged 可在commit的时候完成git格式化及文件过滤调整（如格式修复、git add）；
commit官网

prettier、eslint、stylelint以及编辑器的setting.json(vscode)等格式化工具是为了统一代码风格，代码规范的参考文档：
代码规范之-理解ESLint、Prettier、EditorConfig

"husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{json,md}": [
      "prettier --write", // 手动调用prettier命令行进行格式化
      "git add"
    ],
    "*.{css,less,scss}": [
      "prettier --write",
      "stylelint --fix",
      "git add"
    ],
    "*.{jsx,js,ts,tsx}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

随想

前两周认真践行了一下**“沟通闭环模型”**：交代任务 -> 明确任务 -> 制定方案、预估时间 -> 沟通汇报方案、落地执行 -> 阶段性反馈 -> 确认完成反馈，获取意见修改；
这个沟通环境事关各个沟通交互的同事，有闭环有回音有进度汇报，心定则安，这样才能打造有责任负责的形象；
其中“主动”将成为决定性因素，主动反馈，尤其是有问题和阶段性工作少沟通的时候。
其实这也是学习的闭环同理，规划探索落地得到反馈，螺旋式上升；任何要做的事儿都要形成良好的闭环；

34周请了几天假休息游玩，放松再战，祝愿大家也都好好的！