常识积累
常识积累
-
loading时，按钮点击失效设置
-
选项切换时，相关字段置空处理；字段隐藏时，对应值清空
-
唯一标识 在修改功能中不可修改
-
下拉弹框组件使用 限制输入框不可用（避免弹出输入款）
-
手机号输入 限制长度+长度验证
-
身份证输入 有效验证
- !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)?$/i.test(idcard)
-
邮箱验证
- /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/
-
url解析
// 定义变量
var url = "http://127.0.0.1/e/action/ShowInfo.php?classid=9&id=2";
// 定义函数
function parse_url(_url){
// 定义正则表达式
var pattern = /(\w+)=(\w+)/ig;
// 定义数组
var parames = {};
url.replace(pattern, function(a, b, c){parames[b] = c;});
// 返回这个数组
return parames;
}
var parames = parse_url(url);
// 最后打印.根据key值来打印数组对应的值
alert(parames['classid'] + ", " + parames['id']);
-
正则去重 str.replace(/(.)(\1)+/g,'$2')
-
数据增删改后 列表刷新
-
设置|修改密码，删除数据等危险操作 -- 二次确认提示
-
界面风格统一 字体大小统一
-
通过this.$route携带参数做查询条件回显
-
多情况匹配 -> 对象模式 object[key]
-
回显bug -> 利用 placeholder
开发小tip
- const
- const声明一个只读的常量。声明之后，常量的值就不能改变，且声明时就必须初始化；
- const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动；
- const如果引用的是一个对象，只能保证引用对象的这个指针不变，但对象本身的数据结构是可以改变的。
- const foo = {};
// 为foo添加一个属性，可以成功
foo.prop = 123;
foo.prop; // 123
// 将foo指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
-
前端接口封装方式
- post方法的data参数是放在body传参
- params参数是拼接作为查询字符串传参
-
使用focus()方法使页面滚动到指定标签位置
-
div添加ref+tabindex属性
-
使用outline:0;样式属性去除聚焦时div的边框
-
使用this.$set触发对象数据更新时页面刷新
this.$set(对象, 属性, 属性值)
-
接口请求封装，以及请求拦截添加token，响应拦截判断是否登录过期
service.interceptors.request.use(config => {}, error => {})service.interceptors.response.use(response => {}, error => {})
-
keepalive缓存时将判断写在keepalive标签上
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
keep-alive有两个钩子
- activated在缓存组件激活时调用
- deactivated在缓存组件失活时调用
tip
-
只有组件被 keep-alive 包裹时，这两个生命周期才会被调用；
-
如果作为正常组件使用，是不会被调用；
-
使用 exclude 排除之后，就算被包裹在 keep-alive中，这两个钩子依然不会被调用；
-
另外在服务端渲染时此钩子也不会被调用的。
-
当对列表页的数据做修改|新增操作时，返回到列表页时，要重新获取页面数据
activated() {
this.searchList();
}
elementUI
-
elementUI对Table进行重新布局
- this.$nextTick()
- this.$refs.xxx.doLayout
-
input在火狐浏览器的兼容问题--minlength限制导致红框出现
-
表单不显示时清空校验规则
-
使用v-if设置字段隐藏显示时不用外套标签，直接设置到元素本身，避免规则遗留
-
elementUI组件 toggleSelection可实现复选框默认选中
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
if(row.hasAuth) {
this.$refs.multipleTable.toggleRowSelection(row);
}
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
- 加密 -> 前后端统一参数【密钥、加密模式、填充方式、偏移量】
小程序
小程序打包时单文件大小超过2m时：
-
考虑将静态文件放至服务器；
-
考虑对小程序进行分包，分包后新建文件写重定向路径；
js ├── app.js ├── app.json ├── app.wxss ├── packageA │ └── pages │ ├── cat │ └── dog ├── packageB │ └── pages │ ├── apple │ └── banana ├── pages │ ├── index │ └── logs └── utils
// app.json
{
"pages":[
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "packageA", // 分包根目录
"pages": [ // 分包页面路径，相对于分包根目录
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"name": "pack2", // 分包别名，分包预下载时可以使用
"pages": [
"pages/apple",
"pages/banana"
]
}]
}
// cat.js 单页面js文件中重定向
Page({
onLoad: function (options) {
wx.redirectTo({
url: '/packageA/pages/cat'
})
}
})
-
小程序可通过form表单获取input的内容，input的bindchange事件其实是失焦事件，使用bindinput可到达效果
-
ios键盘挡住下拉滚动选择器：因为光标还停留在输入框使得picker在键盘没有回收的情况下弹出--控制点击弹出picker时，输入框readonly
微信公众号
- 通过识别MicroMessenger关键字确定是否微信内置浏览器
navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger"
