2022-34~35周 项目问题整理
新知识
1、好文学习
Web水印
可见水印:
- 背景图平铺
background-image: url("./logo.png");
background-repeat: repeat;
- 全页面水印
如果包含视频等会遮挡背景图片的水印,需要一个层级高的透明来承载;
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; // 可穿透,不影响页面操作
- 动态水印:包含用户信息等
服务端生成图片作为背景图渲染,增加服务端开销,也容易被攻击;
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>
标记后的空白符,因此在 </html>
标记后插入二进制信息对应的不同类型空格或制表符来做标记,但作用仅限于html保护不了内容;
2、css in ts
index.scss.d.ts 声明文件,index.scss 实际样式文件,引入的时候需要有声明才可引入成功
import * as RenderTestStyles from './index.scss'
const RenderTest= () => (
<div className={RenderTestStyles.page}>
</div>
)
可以通过 declare 全局声明的方式来替代 d.ts 声明文件
// 定义类型,默认导出
declare module '*.scss' {
const scssContent: any;
export default scssContent;
}
3、arr.indexOf(searchElement[, fromIndex])
循环寻找元素所有出现在阵列中的位置, formIndex + 1
问题
1、element-ui dropdown组件添加disabled无效
看了很多issue,这个问题似乎仍未解决;
根据组件渲染页面之后生成的dom节点来分析,样式添加到dropdown的button上即可达到预期效果
<el-dropdown class="add-block-dropdown" @command="handleCommand">
<el-button type="primary" :class="multipleSelection.length ? 'is-disabled': ''" :disabled="!!multipleSelection.length" >
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command='1'>item1</el-dropdown-item>
<el-dropdown-item command='2'>item2</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
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();
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' // 根据标准推荐,连续不需,不连续需要
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"
]
},
随想
前两周认真践行了一下**“沟通闭环模型”**:交代任务 -> 明确任务 -> 制定方案、预估时间 -> 沟通汇报方案、落地执行 -> 阶段性反馈 -> 确认完成反馈,获取意见修改;
这个沟通环境事关各个沟通交互的同事,有闭环有回音有进度汇报,心定则安,这样才能打造有责任负责的形象;
其中“主动”将成为决定性因素,主动反馈,尤其是有问题和阶段性工作少沟通的时候。
其实这也是学习的闭环同理,规划探索落地得到反馈,螺旋式上升;任何要做的事儿都要形成良好的闭环;
34周请了几天假休息游玩,放松再战,祝愿大家也都好好的!