前端开发笔记

个人记录，欢迎指正

Vue2

watch监听单一属性

1
2
3
4
5
6
7
watch: {
	'obj.key': {
		handler() {
			// todo
		},
	}
}

form表单原生事件导致的前端路由刷新

form表单存在onSubmit事件，在内部触发click事件的时候，触发该默认事件

也就是会让我们的路由在后面添加一个?，导致页面刷新一次

使用prevent阻止事件冒泡

1
2
3
<form>
	<button @click.prevent="..."></button>
</form>

强制刷新渲染

有时套了三层的object无法触发响应式更新，使用强刷可以触发更新（虽然不推荐）

forceUpdate函数强刷

1
2
3
4
5
6
/**
 * main.js
 * 配置中启用强制刷新
 */
import Vue from 'vue'
Vue.forceUpdate()
1
2
3
4
/**
 * script中使用
 */
this.$forceUpdate()

路由刷新

1
this.$router.go(0)

分页方法开发规范

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
	<view>
        /*数据列*/
        /*分页器
         :page.sync=queryParams.pageNum
         */
    </view>
</template>
<script>
export default {
	data(){
        return{
			loading:false,
            queryParams : {
                pageNum: 1,
                pageSize: 10,
                ...
            },
            list:[]
        }
    },
    created(){
		this.getList()
    },
    method(){
        getList(){
            this.loading = true;
			APIrequests(this.queryParams).then((res)=>{
                ...
                this.list = res.***
            	this.loading = false;
            })
        }
    }
}
</script>

将请求的参数、页码写在一个object中。整洁方便

目录管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
src                               源码目录
|-- api                              所有api接口
|-- assets                           静态资源，images, icons, styles等
|-- components                       公用组件
|-- config                           配置信息
|-- constants                        常量信息，项目所有Enum, 全局常量等
|-- directives                       自定义指令
|-- filters                          过滤器，全局工具
|-- datas                            模拟数据，临时存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模拟接口，临时存放
|-- plugins                          插件，全局使用
|-- router                           路由，统一管理
|-- store                            vuex, 统一管理
|-- themes                           自定义样式主题
|-- views                            视图目录
|   |-- role                             role模块名
|   |-- |-- role-list.vue                    role列表页面
|   |-- |-- role-add.vue                     role新建页面
|   |-- |-- role-update.vue                  role更新页面
|   |-- |-- index.less                      role模块样式
|   |-- |-- components                      role模块通用组件文件夹
|   |-- employee                         employee模块

CSS

常用语法

flex语法

1
2
3
4
flex-direction: column; //轴方向变为|竖轴
justify-content: space-between; //中间环绕
justify-content: space-around; //四周环绕
justify-content: space-evenly; //均分环绕

background

1
2
3
4
background-size: contain; //背景图较小，存在白边，需撑开
background-size: cover; //背景图较大，把图片放在正中间
background-repeat: no-repeat; //背景不重复
background-image: linear-gradient(120deg , rgba(255,192,203,0.85), rgba(135,206,235,0.85)); //颜色渐变

阴影

1
filter: drop-shadow(0 4px rgba(0,0,0,0.05)); // 适用svg、png的阴影

text

1
width:min-content; //给text赋予这个属性。在使用flex布局时，避免容器自动撑开填满

磨砂效果

1
backdrop-filter: blur(10px);

其他

实现鼠标保持在元素上时，鼠标变为手指

1
cursor: pointer;

超出元素时，文本省略号

1
2
3
4
5
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3; /*设置超出行数*/
-webkit-box-orient: vertical;

让元素的hover变化有一个过渡效果

1
transition: 0.2s;

深层选择器

1
2
3
::v-deep .class{

}

其他

iframe、window、作用域问题

1
2
3
4
5
// 本人在进行原生html5对微信支付收银台进行调用时，碰到了作用于问题
// 在iframe标签内运行的js，无法直接调用内置浏览器给予的"WeixinJSBridge"内置方法
// 遂发现需要在顶部html页调用该方法，即
window.top.WeixinJSBridge.invoke(...)
// 通过window.top触发顶部window的方法，而该内置方法在其中。

JS文档注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * Returns the sum of a and b 对该方法的描述
 * @param {number} a 对于参数的描述
 * @param {number} b 表示了传入的类型
 * @returns {number} 表示了return的类型
 * @description 关于该函数的介绍内容，也可写作@desc
 * @file 注释写在文件开头，用于描述当前文件的相关信息
 * @Author Jack <jack@example.com> 描述当前文件或者代码的作者的相关信息
 * @copyright Jack 2020 描述当前文件的版权相关信息
 * @license MIT 描述当前文件许可证相关信息,写长点也可以
 * @version 1.0.0 描述当前项目的版本号
 */
function sum(a, b) {
    return a + b;
}

其他见JavaScript之注释规范化

微信小程序object-fit无效

在微信小程序中不支持object-fit属性，改为使用image的mode效果

详见：微信小程序-image组件

mode值说明：

合法值 说明 最低版本
scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。
也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 2.10.3
top 裁剪模式，不缩放图片，只显示图片的顶部区域。仅 Webview 支持。
bottom 裁剪模式，不缩放图片，只显示图片的底部区域。仅 Webview 支持。
center 裁剪模式，不缩放图片，只显示图片的中间区域。仅 Webview 支持。
left 裁剪模式，不缩放图片，只显示图片的左边区域。仅 Webview 支持。
right 裁剪模式，不缩放图片，只显示图片的右边区域。仅 Webview 支持。
top left 裁剪模式，不缩放图片，只显示图片的左上边区域。仅 Webview 支持。
top right 裁剪模式，不缩放图片，只显示图片的右上边区域。仅 Webview 支持。
bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域。仅 Webview 支持。
bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域。仅 Webview 支持。
分享
#JavaScript
前端开发笔记
https://www.fishingrodd.cn/2024/02/28/前端开发笔记/
作者
FishingRod
发布于
2024年2月28日
更新于
2024年2月28日
许可协议