中国的流浪猫的博客_CSDN博客-前端面试题,css笔记,小程序开发领域博主

原创 js方------将字符串转换成算术表达式,并计算出结果,例如(‘92-4*5/3‘)

// 计算当前字符串是否是数字 const isNumber = (val) => { const regPos = /^\d+(\.\d+)?$/ // 非负浮点数 const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数 if (regPos.test(val) || regNeg.test(v..

2021-11-12 18:39:41 3660 1

原创 js方法-通过出生日期计算出当前年龄

/*** 通过出生日期获取当前年龄* @param strBirthday：指的是出生日期，格式为"1990-01-01",字符串类型*/function getCurrentAgeByBirthDate(strBirthday){ // 将出生日期的字符串通过"-"分割成数组 const strBirthdayArr = strBirthday.split("-") // 拿到出生日期的年 const birthYear = strBirthdayArr[0]

2021-09-08 18:05:20 2949

原创 js方法——时间处理方法

function GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+AddDayCount); //获取AddDayCount天后的日期 var y = dd.getFullYear(); var m = (dd.getMonth()+1)<10? "0" +(dd.getMonth()+1):(dd.getMonth()+1); //获取当前月份的日期，不足10

2021-05-26 15:45:06 90

原创 js——将列表数据处理成树型结构数据

/** * 构造树型结构数据 * @param {*} data 数据源 * @param {*} id id字段默认 'id' * @param {*} parentId 父节点字段默认 'parentId' * @param {*} children 孩子节点字段默认 'children' * @param {*} rootId 根Id 默认 0 */export function handleTree(data, id, parentId, children, rootId) {

2021-05-19 10:17:57 452

原创 Ant Design Vue的图片上传组件的使用

<div class="clearfix"> <a-upload :customRequest="uploadImg" :remove="handleRemove" list-type="picture-card" :file-list="fileList" @preview="handlePreview"

2021-05-11 12:52:10 1756

原创小程序开发（如何手动触发当前页的onLoad生命周期）

// 获取当前页面栈的实例// 获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面const pages = getCurrentPages()// 拿到当前页面的实例const page = pages.pop()// 手动执行 onLoad 生命周期函数page.onLoad()...

2021-04-20 16:49:53 860

原创微信小程序开发——单行文本溢出显示省略号

.text-deal{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; /* 追加这一行代码 */}/*-webkit-line-clamp为3，代表三行后超出隐藏加省略，常用为1。*/...

2021-04-15 13:05:22 612

原创 js截取字符串方法slice、substring、substr的理解

const test = 'hello' // 字符串长度为 5 // string.slice(start, end) // 提取一个字符串，从起始位置截取，不包含结束位置 start:开始索引 end:结束索引 // string.substring(start, end) // 提取一个字符串, end不支持负数，从起始位置截取，不包含结束位置 start:开始索引 end:结束索引 // string.substr(start,len) .

2021-03-21 18:37:47 156

原创前端面试题-给定一个字符串，找出其中无重复字符的最长子字符串长度

// 给定的字符串 const str = 'abac' function outputMaxSubStrLen(str) { let result = 0; // 最终要返回的结果的初始值 let norepeatStr = ''; // 用于存放无重复子串 let len = str.length; // 字符串的长度 // 遍历整个字符串 .

2021-03-20 20:32:13 380

原创前端面试题-确保字符串的每个单词首字母都大写，其余部分小写

// 给定的字符串 const str = 'aaa bBB CCC dDD' // 确保字符串的每个单词首字母都大写，其余部分小写 function toUpperCase(str) { // 将字符串以空格分割成数组 let arr = str.split(' ') // 对数组内容进行处理 arr = arr.map(item => item[0].t

2021-03-20 17:15:29 340

原创前端面试题-编写函数parseQueryString,它的用途是把URL参数解析为一个对象

// 给定的url参数 const url = 'http://127.0.0.1:8888/api?model=job&action=list?' // 将 URL 参数解析为一个对象 function parseQueryString(url) { // 存放查询参数字符串 let queryInfo = '' // 存放一个对象 const obj .

2021-03-20 17:00:53 1067

原创前端面试题-计算出字符串中出现次数最多的字符是什么？出现了多少次？

// 给定的字符串 const str = 'abcabc' // 统计字符串中出现次数最多的字符，出现多少次 function statistics(str) { // 声明一个变量 const obj = {} // 存放出现次数最多的字符 let maxStr = '' // 存放出现的次数 let max =

2021-03-20 16:25:30 700

原创前端面试题-写一个js函数，实现对一个数字每3位加一个逗号（不考虑负数，小数）

// 相当于封装字符串的 toLocaleString 方法 // const str = num.toLocaleString()// 给定的数字（不考虑负数，小数） const num = 100000 // 实现对一个数字每3位加一个逗号，如输入100000，输出100,000(不考虑负数，小数) function toLocaleString(num) { // 将数字转换成字符串，并分割成数组 /

2021-03-19 22:27:29 1194

原创冒泡排序的简单实现

const arr = [2, 4, 45, 5, 1, 2, 13] // 外层for循环管趟数（数组长度 -1） for (let i = 0; i <= arr.length - 1; i++) { // 内层for循环管每一趟的交换次数（当前趟数 -1） for (let j = 0; j <= arr.length - i - 1; j++) { // 如果当前项与后一项.

2021-03-14 14:29:55 31

原创对external的理解

external在 vue.config.js 文件中的 configureWebpack 对象下面例子：// 要排除的包名// key(是要排除的包名）: value(实际上是实际引入的包的全局的变量名)// 因为要排除 element-ui 所以后面要引入 CDN 文件，CDN 文件中有 ELEMENTUI 的全局变量名// webpack打包的时候会根据 externals 的配置，首先会排除掉定义的包名（这些包不需要打包）// 空出来的位置，会用变量来替换 externals = {

2021-03-12 11:58:05 461

原创浏览器全屏功能的实现

用原生js实现全屏功能document.documentElement.requestFullscreen() // 开启全屏document.exitFullscreen() // 关闭全屏用插件实现全屏功能// 在 vue 中// 第一步下载插件 $ npm i screenfull// 第二步导入插件 import ScreenFull from 'screenfull'// 第三步给全屏按钮绑定点击事件 // 第四步全屏按钮点击事件触发的函数changeScreen ()

2021-03-11 20:39:56 84

原创一次性注册所有公共组件

在mian.js入口文件中@ 相当于 src 目录import Components from '@/components/index.js'// 注册所有自定义的公共组件Vue.use(Components)在 src 目录下的 components 文件的 index.js 中// 导入组件import PageTools from './PageTools/index.vue'// 默认导入一个对象export default { // 当使用 Vue.use() 方法的时候，

2021-03-04 11:53:56 66 1

原创一次性注册所有自定义指令（过滤器也可适用）

在入口文件mian.js中import * as directives from '@/directives'import * as filters from '@/filters'// 注册所有自定义指令Object.keys(directives).forEach(key => Vue.directive(key, directives[key]))// 注册所有过滤器Object.keys(filters).forEach(key => Vue.filter(key, fil

2021-03-04 11:45:18 90 1

原创处理分页的页面最后一条数据的注意点

// 在发送请求前，查看删除的那条数据是否是当前页最后一条数据，如果是，则更新查询参数，而且要注意，如果是第一页的最后一条数据，不需要更新 // 如果删除的是当前页最后一条数据 if (this.queryInfo.pagesize === 1) { // 如果删除的不是第一页的最后一条数据 this.queryInfo.page !== 1 && this.queryInfo.page-- }...

2021-03-04 10:10:58 355 1

原创将列表类型的数据转换为树形数据

列表的数据const depts = [{ "id": "1175310929766055936", "pid": "", "companyId": "1", "name": "总裁办", "code": "ZCB1", "managerId": null, "manager": "孙财", "introduce": "总裁办公室", "createTime": null }, { "id": "1175311213774962688", "pid": "", "companyId": "1", "nam

2021-03-01 18:41:55 406 1

原创 vue组件的属性functional的理解

functional为true，表示该组件为一个函数式组件函数式组件：没有data状态，没有响应式数据，只会接受props属性，没有this，他就是一个函数

2021-02-28 19:26:31 815

原创查看或设置npm的镜像地址

前提条件：已经搭建了 node 环境，nodejs是当下前端工程化开发必不可少的环境, 使用 nodejs 的 npm 功能来管理依赖包npm是非常重要的npm管理工具,由于npm的服务器位于国外, 所以一般建议将 npm设置成国内的淘宝镜像，在终端中执行以下命令$ npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址查看当前 npm 的镜像地址$ npm config get registry #查看镜像地址

2021-02-23 09:12:58 10697

原创封装节流（throttle）函数

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {

2021-01-18 20:43:05 608

原创对函数封装的理解

函数封装不要替调用者决定做什么事情

2021-01-18 20:04:01 322

原创对防抖（debounce）和节流（throttle）的理解

防抖（debounce)和节流（throttle）都是性能优化的一种手段debounce:重复触发（事件）不执行，不触发的一段时间后才执行throttle：重复触发（事件）也执行，只不过执行的频率变低了

2021-01-18 19:40:21 142

原创对小程序开发中的顶级对象wx身上的基于回调函数的api进行promise化

第一步：在终端中执行 npm install --save miniprogram-api-promise@1.0.4第二步：删除目录中的 miniprogram_npm 文件夹，并重新构建啊npm第三步：在app.js中添加以下代码//app.js// 按需导入 promisefyAll 方法import { promisifyAll } from 'miniprogram-api-promise'// 将新创建的对象 wxp 的引用地址给 wx 的属性 pconst wxp = wx

2021-01-04 15:02:32 165

原创在小程序开发中导入 vant Weapp 组件库的包

第一步：通过 npm 安装 vant Weapp 包在终端中执行 npm i @vant/weapp -S --production第二步：将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。第三步：修改 project.config.json。{…“setting”: {…“packNpmManually”: true,“packNpmRelationList”: [{“packageJsonPa

2021-01-04 14:54:16 118 1

原创小程序开发者工具设置格式化换行长度

问题：微信小程序开发者平台中的js格式化不能设置换行长度，只要是对象就会换行解决方法: 在设置的json 文本中添加以下代码“beautify.config”: {“brace_style”: “collapse-preserve-inline”,“wrap_line_length”: 200},...

2021-01-04 14:42:44 1142 2

原创 vuex模板（对token的处理）

import Vue from 'vue'import Vuex from 'vuex'// 按需导入本地存储相关的模块import { setItem, getItem } from '@/utils/storage'Vue.use(Vuex)// 声明一个常量,保存token的名字,防止读取和写入本地存储的时候写错const TOKEN_KEY = 'TOUTIAO_USER'// 默认导出export default new Vuex.Store({ state: { /

2020-12-25 14:07:55 106

原创 vue工具（封装请求方法）

// 封装请求方法import axios from 'axios'import store from '@/store'const request = axios.create({ baseURL: '请求的基准路径'})// 请求拦截器request.interceptors.request.use(function (config) { // 请求发起会走这里 // 拿到容器中保存的token数据 const user = store.state.user // 如

2020-12-25 14:05:47 326

原创 vue工具（封装本地存储相关的操作模块）

/** * 本地存储相关的操作模块 *//** * 写入数据 */export const setItem = (key, data) => { // 如果存入的是对象、数组类型的数据 if (typeof data === 'object') { // 将数据转换为json字符串格式 data = JSON.stringify(data) } window.localStorage.setItem(key, data)}/** * 读取数据 *

2020-12-25 13:58:16 100

原创正则表达式匹配带有特殊字符的字符串失败（特殊字符指： . ? + $ ^ [ ] ( ) { } | \ / ）

特殊字符有： . ? + $ ^ [ ] ( ) { } | \ /匹配不成功的示例：const str = '(hehe)43'const reg = new RegExp(str,'gi') // reg : /(hehe)43/ 括号未做转义处理console.log(reg.test(str)) // 结果是 false匹配不成功的原因：str 中的字符串中的特殊字符没有做转义处理如果想匹配成功，就要先对str中的特殊字符做转义处理匹配成功的示例：const str = '(

2020-12-18 16:19:35 2432 1

原创封装防抖（debounce)函数

将下面的代码粘贴到调试工具中运行一下，然后滚动页面，就可以看到时哪个元素产生的滚动了。function findscroller(element) {element.onscroll = function() {console.log(elemnet)}Array.from(element.children).forEach(findscroller)}findscroller(document.body)...

2020-12-13 21:51:26 305

原创 node.js习题（设置允许跨域访问服务）

// 设置允许跨域访问该服务app.all('*', function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); res.header('Access-Control-Allow-Headers', 'X-Requested-With'); r

2020-11-24 08:59:08 212

原创 Vue习题（自定义一个全局指令，让输入框自动获取焦点）

/* 自定义全局指令：获取输入框焦点 */ Vue.directive('focus', { inserted: function (el) { return el.focus() } })

2020-11-18 08:39:33 260

原创 Vue习题（写一个格式化时间的过滤器）

/* 过滤器案例：格式化日期 */ Vue.filter('formatDate', function (date, format) { if (typeof date === "string") { var mts = date.match(/(\/Date$(\d+)$\/)/); if (mts && mts.length >= 3) { date = parseInt(

2020-11-16 21:32:43 167

原创 js习题（将html中的特殊字符转义和还原）

//定义一个转换html转义特殊字符的方法function htmlEscape(htmlStr) { return htmlStr.replace(/[<>|"&]/g, (match) => { switch (match) { case '<': return '<'; case '>': return '>'; case '"': ret

2020-11-07 22:21:12 951 1

原创 template模板引擎中的格式化时间的过滤器

// 定义一个美化时间的过滤器 template.defaults.imports.dataFormat = function (data) { const date = new Date(data); let y = date.getFullYear(); let m = (date.getMonth() + 1).toString().padStart(2, 0); let d = date.getDate().toString().padStart(2, 0);

2020-11-03 11:24:18 607

原创 js习题（用原生js封装Ajax函数）

以下是js代码：/** * 处理data参数 * @param data{Object} 需要发送到服务的数据 * @return {String} 返回拼接好的查询字符串 * @author 不知猫 2020/10/26 */function resolveData(data) { const arr = []; for (let key in data) { arr.push(key + '=' + data[key]); } return arr.join('&a

2020-10-26 22:22:56 173

原创 js习题（浅拷贝的方法）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body></body>

2020-10-20 16:57:03 46