qq_44353287的博客

原创 JSON.parse多层嵌套报错处理

json编码解决parse出错的问题

原创 uniapp输入框组件easyInput初始状态清除符号显示的bug

背景：新项目使用uniapp + vue3，在使用easyInput的时候，发现初始状态时，明明无内容，却还是显示清楚符号，非常的不优雅。问题解决：查看组件源码发现，为了兼容vue3与vue2，如果使用vue3语法，需要使用v-model:modalValue的写法，这一点文档并未说明，是坑之一。但是只是这样还不行，其内部的兼容判断有误，导致两个条件均成立，即原本vue3判断成功了，后面的vue2判断也成功了，自然就覆盖了。目前的解决方法就是两者都使用，但是vue2写法需要传一个空字符，即 :value='

原创 js判断对象是否为空

利用es6新增的对象实例属性Object.keys()获取由对象key组成的数组，判断数组长度即可

原创 表单校验输入内容是否合法

平时开发或者使用网站的时候，常常会遇到一种表单输入场景：由********组成这里结合antd vue的校验表单的实现方式如下:例如 由英文字母、数字、下划线组成 const validateEnNameShort = (rule, value, callback) => { const reg = /^[\w]+$/g if (!value) { return callback(new Error('请输入英文缩写')) }

原创 对ant design vue 1.x 组件进行二次封装

<a-table ref="tableElRef" v-bind="getBindValues" // 通过计算属性，获取父级传入的非prop属性 :columns="columns" :data-source="virtualData" // 需要对原有属性进行二次改造，则设置prop @expand="expand" // 改造原有事件同理 @expandedRowsChange="expandedRowsChange" .

原创 vue2 + ant design vue 1.x 文件的上传与下载实现

文件下载：现在的文件下载一般是前端发送一个请求，获取到文件的url链接，再根据链接，创建下载链接 const url = res.body.path const link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', '标准数据模板.xls') // 指定下载后

原创 新版antd vue 图标使用

最近在做vue3+TypeScript的练习项目，既然都用vue3了，那轮子也得跟着走吧，所以引入了antd vue v3 版本。之前项目一直使用的v1版本，图标直接使用即可，但从v2版本开始，官方为了节省体积，采用了按需引入的方式。老方法：新方法：首先，需要单独下载一个包在组件中使用：引入并注册组件，既然都是组件了，当然不能像以前一样直接添加icon属性了。...

原创 Vue计算属性传参

项目中的表格的某一项数据，正常应该是中文显示，由于后端传来的数据是英文，因此需要转化一下，这时考虑使用计算属性配合antd vue表格组件的插槽来实现这个需求计算属性中的写法此时计算属性需要返回一个方法，在方法中再返回数据...

原创 JS正则表达式

捕获组：在正则中，括号中的内容或者匹配到的内容叫做捕获组var str = '123avc111bbb233'var strExp = /([a-z])([0-9]+)/gif(strExp.test(str)) { console.log(RegExp.$1) // c console.log(RegExp.$2) // 111}var n = str.match(strExp)if(n) { console.log(n) // ['c111', 'b233'

原创 JS高级程序设计之数据类型

数值转换:parseInt()方法可接收第二个参数，如果你要解析的是16进制数：parseInt('10',16)parseFloat()只解析10进制，因此没有第二参数toString()方法在转换数值时可传入第二个参数，决定要转换为什么进制null / undefined没有toString方法，这时就要用到String()方法var v1 = 10var v2 = truevar v3 = nullvar v4console.log(String(v1)) // '1

原创 js获取准确的高度值

例如在vue中获取高度：window.getComputedStyle(this.$refs.item[i], null).height，得出40.8px，null必需如果使用offsetHeight得出41，不准确

原创 vue中文本超出省略号

display: -webkit-box;/*作为弹性伸缩盒子模型显示*/ -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/ overflow: hidden; /*超出的文本隐藏*/ text-overflow: ellipsis; /* 溢出用省略号*/ -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/...

原创 vue开发规范

组件名为多个单词组件名应该始终为多个单词，防止与现有或未来新的html标签重名冲突组件的data必须是一个函数以函数的方式存储数据，每一个函数都是一个独立的内存空间，这样就不会与其他组件的相同名称冲突Prop 定义应该尽量详细prop的定义不应该直接写个变量名完事，我们最好以对象的形式给它添加描述props: { status: { type: String, required: true, validator: function (value) { re

原创 微信小程序获取自定义组件中节点信息为null

今天在做微信小程序时遇到一个很坑的问题，在自定义组件内要获取一个节点的信息，始终都是null首先，在组件中获取节点，需要添加.in(this)wx.createSelectorQuery().in(this)

原创 uni-app选取本地图片，并转换为base64格式存储数据库

将图片存储到数据库的基本思路：前端选取图片，将图片转换为base64格式存放于数组中，后续可用数组的split()方法，以#作为连接，将其转换为字符串存放到数据库这样，需要从数据库获得图片时，只需将请求到的字符串用join方法转换为数组，遍历显示出图片<template> <view class="content"> <button @click="imgchoose()">选择图片</button> <button type="defau

原创 vue axios 请求本地json

vuecli3构建出来的文件没有static，这时的json文件要放到public文件夹中并且请求路径要直接跳过public，如下直接在public中添加一个json：export function getHomeBlogs(){ return request ({ url:'blogs.json' })}...

原创 vue选中切换样式

<div class="function"> <span :class="{currentPage:currentTag==0}" class="zhuye" @click="homeClick" >主页</span>| <span :class="{currentPage:currentTag==1}" class="fabiao" @click="blogPublish">发表文章</span>|

原创 vue导航守卫

假设有这样一个需求，我们需要在页面跳转之后，页面标题也能跟着变化这时你可能会想，直接通过生命周期钩子函数created，设置title属性不就行了很明显，当页面很多时这样会比较繁琐，这里可以用到导航守卫的知识首先设置一个对象此函数可以理解为node的中间件，没有next不会执行如果是嵌套路由的话需要这样写：...

原创 vue嵌套路由

一个大的路由后面往往会跟一个嵌套的子路由例如在HOME中嵌套子路由：

原创 vue路由懒加载

当一个应用打包之后过于庞大，如果首页加载时间过长，出现空白页面必然会让用户体验不太好，因此需要懒加载，需要哪个加载哪个，而不是一次性将所有组件请求下来。

原创 vue路由具体实现

在配置好vue-router之后，我们有多种方式来实现路由跳转1.通过router-link 以及router-view标签2.通过点击事件触发跳转页面的跳转无非就是hash方式（由于有#，一般不采用），HTML5 history对象的replace的替换方式 pushState的入栈方式，顾名思义，后者才有前进后退选项...

原创 webpack打包HTML的plugin

安装HtmlWebpackPlugin插件：npm install html-webpack-plugin --save-dev使用插件，修改webpack.config.js文件中plugins部分的内容：template表示用什么模板生成index.html此时我们不再需要publicpath这个属性了，并且html中引入的js文件也不再需要写，系统会根据依赖自动配置好...

原创 webpack图片文件的处理

当图片文件小于limit限制时，图片会被转为base64格式但如果超过，图片会被打包，这时浏览器显示的图片地址就找不到了，因此需要设置publicPath:‘dist/’,使路径之前加上publicPath，路径才正确

原创 vue子组件传值给父组件插槽，作用域插槽的使用

原创 node.js:中间件

一个node程序的执行，往往少不了中间件简单来说中间件就是处理逻辑的一个流程，流水线他有三个参数：req,res,next例如一个不需要条件，直接进入的中间件：app.use(function(req,res,next){ console.log("1") next()})这就是引用的一个中间件，其中next决定了能否继续执行下一个中间件需要条件的中间件例如以路径/a开头为条件:app.use('/a',function(req,res,next){ console.log

原创 node.js: 模块导出exports与module.exports

exports可以理解为等价于module.exports但是要记住return的是module.exportsexports只是module.exports的一个引用导出多个数据：1、exports.a = 123;exports.b = '666dd';exports.c = function(){ console.log("c")}2、module.exports = { a : 123; b : function{ console.log("666")

原创 node.js:处理表单请求

当一个form表单请求发送给服务端时，url中会带有表单信息，我们不能直接根据url来做出相应的反应。这里可以用到url核心函数的parse方法例如：var url = require("url");var obj = url.parse('/login?name=6&ps=7',true)//true表示将Url对象中的query转化为对象这样既能分离得到pathname又能处理表单数据...

原创 手撸jQuery源码：事件相关方法（on off）

dQuery.prototype.extend({ //on方法需要注意 如果只用数组存储起来而不区分事件类型，那么数组中存储的就全是第一个事件的类型了 //例如click mouseover ... 后续事件类型都会变成click，因此需要分类 on:function(name,callBack){ //1.遍历取出所有元素 this.each(function(key,ele){

原创 手撸jQuery源码：dom操作相关方法

dQuery.prototype.extend({ empty:function(){ //遍历找到所有元素 this.each(function(key,value){ value.innerHTML = ""; }); return this; //jQuery链式调用的关键 }, remove:function(s

原创 手撸jQuery源码：属性操作相关方法

//属性操作相关方法： dQuery.prototype.extend({ attr:function(attr,value){ //1.判断是否是字符串 if(dQuery.isString(attr)){ //判断是一个字符还是两个字符 if(arguments.length === 1){ return this[0].getA

原创 手撸 jQuery源码：原型上的方法（完整版）

dQuery.extend({ //判断方法 isFunction : function(sel){ return typeof sel === "function"; }, //封装判断字符串和代码片段的方法 isString : function(str){ return typeof str === "string"; }, isHtml : function(str){ retur

原创 手撸jQuery源码：原型上的方法（map）

map:function(obj,fn){ var res = []; //map中的返回值res //是否是数组 if(dQuery.isArray(obj)){ for(var i=0;i < obj.length;i++){ var temp = fn(obj[i],i); //执行回调函数，结果赋值给temp if(temp){

原创 手撸jQuery源码：each()方法完善

官方jQuery的each方法还有一些细节首先，官方jQuery的each方法可在回调函数中传布尔值决定是否跳出循环其次，官方的this是直接指向value的。因此最终的代码实现： $.each(arr,function(key,value){ if(key === 2){ return false; } console.log(key,value); console.log(this) })each

原创 手撸jQuery源码：jQuery属性上的方法(续)

jQuery原型上有个each()方法，但其中有个陷阱。我们都知道jQuery中each的用法是$.each()，那原型上的方法又必须要new一个实例对象才能调用，这样的话根据我们在入口函数篇的写法来看，顶多采用().each()才能成功调用，很明显不对劲。仔细一看，jQuery源码中原型上的each好像只是调用了一个each工具方法，再往下划，在extend中找到了each方法的实现。而这个extend就是我们之前∗∗面向对象思想优化代码∗∗篇中实现过的工具方法类嘛。我们只需要将each方法的实现放到e

原创 手撸jQuery源码：原型上的属性和方法（get eq first last）

<body> <div class="test1"></div> <div class="test2"></div> <div class="test3"></div></body><script src="dquery.js"></script><script> var res = $("div"); console.log(re

原创 手撸jQuery源码:函数处理

ready : function(fn){ //判断DOM是否加载完毕 if(document.readyState == "complete"){ fn(); } else if(document.addEventListener){ //高级浏览器 document.addEventListener("DOMContentLoaded",function(){

原创 手撸jQuery源码:面向对象思想优化代码

jQuery如此庞大的js库，要系统的管理肯定是要用到面向对象的，不然代码的可阅读性太差，后期维护升级会很不友好。在jQuery中，是将所有的工具方法以对象的形式写在jQuery.extend({…})中调用，我们可以仿照：dQuery.extend({ //判断方法 isFunction : function(sel){ return typeof sel === "function"; }, //封装判断字符串和代码片段的方法

原创 手撸jQuery源码：入口函数

html部分代码：<body> <p>1</p> <p>2</p> <p>3</p></body><script src="dquery.js"></script><!-- <script src="jquery1.12.4.js"></script> --><script> //1.传入 空 nul

原创 手撸jQuery源码：真伪数组转换

1.真数组转换为伪数组：var arr = [0,1,2,3,4,5];var obj = {};[].push.apply(obj,arr);console.log();其中原理就是，将数组push方法内部的this通过apply指向一个空对象，再加上apply方法本身第二个参数就是数组，更加适用。而后该空数组【】调用push，push将数组arr中的值逐一取出，由于this指向了obj，当然添加到了obj中。 ( push内部实现原理就是用到的this )2.伪数组转换为真数组：我们

原创 jQuery：移入移出事件

mouseover 和 mouseout两个方法会触发父元素的事件因此企业开发一般使用：mouseenter()、mouseleave()hover()方法可直接监听两个事件，其实现原理就是mouseenter()、mouseleave()