常识积累

# 常识积累

• 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

#1# 开发小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();
},

#2# 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;
},

• 加密 -> 前后端统一参数【密钥、加密模式、填充方式、偏移量】

#3# 小程序

• 小程序打包时单文件大小超过2m时：
  • 1、考虑将静态文件放至服务器；
  • 2、考虑对小程序进行分包，分包后新建文件写重定向路径；

　　```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

#4# 微信公众号

• 通过识别MicroMessenger关键字确定是否微信内置浏览器
• navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger"
• jq--上传文件时，change事件只触发一次 --> 清空上传按钮的值

常识积累

原文：https://www.cnblogs.com/pleaseAnswer/p/14297896.html