人间草木96-CSDN博客

原创前端开发过程中需要优化的问题

（1）减少http请求次数：css script,data uri（2） JS，CSS源码压缩（3）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数（4）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能（5）用setTimeout来避免页面失去响应（6）...

2019-02-26 15:41:44 339

原创封装个人积累的Tool工具插件（vue）——JavaScript排序算法~~冒泡排序，选择排序，插入排序，希尔排序，归并排序，堆排序，快速排序

1.新建一个tool.js文件，写入如下代码，放入 plugins 文件夹内const tool = {}// 数组排序 (冒泡排序) 方法1// *简明解释*// 通过依次比较、交换相邻的元素大小（按照由小到大的顺序，如果符合这个顺序就不用交换）。// 1次这样的循环可以得到一个最大值，n - 1 次这样的循环可以排序完毕。// *属性*// 1.稳定/...

2019-02-14 13:44:19 282

原创封装个人积累的Tool工具插件（vue） ——持续更新中~~~

1.新建一个tool.js文件，写入如下代码，放入 plugins 文件夹内const tool = {}// 设置cookietool.setCookie = (name, value) => { let Days = 30 let exp = new Date() exp.setTime(exp.getTime() + Days * 24 * 60 * 60...

2019-02-13 19:00:22 778

原创前端开发细节总结未完待续.........

1、搜索时，文本输入框的内容一般去掉前后空格let arr = " 2018-11-11 05 "console.log(arr)// 清除左右空格console.log(arr.trim())console.log(arr.replace(/(^\s*)|(\s*$)/g, ""))// 清除全部空格console.log(arr.replace(/\s+/g,""))2、...

2019-01-28 14:45:11 386

原创移动端（H5）手搓弹框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.

2021-12-03 11:02:29 679

使用CSS3来实现若要用CSS3的属性实现的话，非animation莫属，因为transition是需要手动的触发，而且不能无限次执行下去，而animation恰好能解决这个问题。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &

2021-11-26 16:38:16 6749 1

原创 vue-cli3.0 的 vue.config.js做vue设置代理

vue代理是 vue静态服务器做代理。使用的是http-proxy-middleware这个模块（这个模块相当于是node.js的一个插件）vue-cli3.0 里面的 vue.config.js做配置 proxy: { '/sso': { // 权限认证中心 target: 'http://10.20.10.162:6868', ws: false, c...

2020-11-23 10:55:52 700

原创微信小程序API——获取定位

第 1步：获取经纬度wx.getLocation(Object object)调用前需要用户授权scope.userLocation获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。 getAdress: function () { let that = this; wx.getLocation({ ...

2020-09-25 16:22:02 2587 2

原创找不到可构建的npm包(小程序)-解决方法

cd目录文件夹npm init -ynpm install weui-miniprogram --production （npm安装WeUI组件库）工具 -> 构建 npm

2020-09-24 14:08:49 768

原创 JS正则表达式（火星文）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正则表达式（火星文）</title></head><body><input type="text" id="myText" plac...

2020-05-13 13:39:17 1159 1

原创 vue方法同步（顺序）执行：async/await使用

项目中有一个地方需要获取到接口返回值之后根据返回值确定之后执行的步骤，使用async搭配await实现，await函数不能单独使用。方法如下: // 车辆布控的详情通过id 查询 gcbh async getBkxx(id){ var self = this; ...

2020-04-24 17:37:18 3090

原创 input输入框输入小写字母自动转换成大写字母

input输入框输入小写字母自动转换成大写字母有两种方法1.用js onkeyup事件，即时把字母转换为大写字母：html里input加上<input type="text" id="txt1" value="" onkeyup="toUpperCase(this)"/>2.js写函数 function toUpperCase(obj) { obj.v...

2020-04-22 16:29:21 2778

原创 vue组件中父子传值双向绑定

效果图父组件页面父组件页面引用子组件父组件用 :parentmessage.sync="hphm" 传递 hphm 给子组件并接收子组件更新过的 hphm<its-hphmInput class="filter-input" glbm="京" size="small" v-model="searchFrom.hphm" @onChange="hphmToU...

2020-04-21 17:41:16 1501

原创 Vue 点击组件外部隐藏组件自身

在开发组件的时候，点击组件外部隐藏组件自身的这种情况很长见到，例如：时间选择框组件，下拉选件等。示图：点击外层元素隐藏自定义车牌选择框代码如图中所写：核心：1、最外层div中添加一个@click.stop（取消事件冒泡），可以不添加事件名。2、在mounted给body添加一个点击事件，事件触发组件的隐藏。 document.bo...

2020-04-15 14:12:23 1536

原创记好这 24 个 ES6 方法，用来解决实际开发的 JS 问题

记好这 24 个 ES6 方法，用来解决实际开发的 JS 问题本文主要介绍 24 中 es6 方法，这些方法都挺实用的，本本请记好，时不时翻出来看看。1.如何隐藏所有指定的元素consthide=(...el)=>[...el].forEach(e=>(e.style.display='none'))//事例:隐藏页面上所有`<img&...

2020-03-12 10:52:19 301

原创 12 种使用 Vue 的最佳做法

12 种使用 Vue 的最佳做法随着 VueJS 的使用越来越广泛，出现了几种最佳实践并逐渐成为标准。在本文中，主要分享在平时开发中一些有用资源和技巧，废话少说，我们开始吧。1.始终在 `v-for` 中使用 `:key`在需要操纵数据时，将key属性与v-for指令一起使用可以让程序保持恒定且可预测。这是很有必要的，这样Vue就可以跟踪组件状态，并对不同的元素有一个常量引用...

2020-03-12 10:44:56 312

原创 JavaScript的各种日期操作【值得收藏】

前言虽然现在处理日期方面已经有了很成熟的也很好用的库，例如（momentjs和date-fns），但是在实际开发中，我们有时候可能并不需要整个库。所以我就在下面整理了在前端开发时对日期时间的各种操作，也算是比较全的了。其中一部分来自自己，还有一部分来源于我们万能的网友~获取当前时间戳var timestamp = Date.parse(new Date()); //精确到秒...

2020-01-13 09:52:28 637

转载 JavaScript 那些写出来会被同事揍的骚操作

JavaScript 那些写出来会被同事揍的骚操作Vue社区今天关注Vue社区，回复“加群”加入我们一起学习，天天进步布拉德特皮juejin.im/post/5e044eb5f265da33b50748c8前言曾经，我接手了一份大佬的代码，里面充满了各种“骚操作”，还不加注释那种，短短几行的函数花了很久才弄懂。这世上，“只有魔法才能对抗魔法”，于是...

2019-12-30 10:56:15 275

原创 ES6入门——前端知识点总结

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-U...

2019-12-06 15:23:25 173

原创 ES6字符串新增的 startsWith(), endsWith(),includes()三种实例化方法比较

startsWith()方法该方法判断一个字符串是否在另一个字符串的头部，返回一个布尔值，true表示存在 let str = 'hello word' console.log(str.startsWith('he')) // true console.log(str.startsWith('666')) // falseendsWith()方法该方法判断一个字符串是...

2019-12-05 17:34:51 237

原创 DOM 高级工程师不完全指南

“前端框架真的太香了，香到我都不敢徒手撕 DOM 了！”虽然绝大多数前端er都有这样的困扰，但本着基础为大的原则，手撕 DOM 应当是一个前端攻城狮的必备技能，这正是本文诞生的初衷 —— DOM 并没有那么难搞，如果能去充分利用它，那么你离爱上它就不远了。三年前我初入前端坑的时候，发现了一个叫做 jQuery 的宝贝，她有一个神奇的 $ 函数，可以让我快速选中某一个或一组 DOM 元素，并...

2019-12-05 10:59:11 221 1

原创 vue中8种组件通信方式, 值得收藏! (面试必问）

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系；B与C之间...

2019-12-05 09:47:00 865

原创 CSS 动画：纯 CSS 实现 loading 效果

效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ht...

2019-12-03 10:05:32 371

原创 JS中test match replace的三个方法的用法区别

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

2019-12-02 17:28:15 358 1

原创如何使用原生CSS在DIV层中画一条线？

效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta htt...

2019-11-28 16:25:59 4267

原创 Vue组件常用的六种通信方式

Vue.js 组件实例的作用域是相互独立的，不同组件之间的数据不能互相访问，组件有父级组件、子级组件、兄弟组件，如何选择组件之间的通信方式？针对常用的 props、$emit/$on、vuex、$parent/$children、$attrs/$listeners、provide/inject 进行讲解，对比各自的区别以及使用场景。1. props子组件使用props 接收父组件传递的值，...

2019-11-22 17:13:34 380

原创 div背景框自定义而且高度自适应 CSS原生实现

效果代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...

2019-11-21 17:42:05 322

原创 JavaScript数组，数组对象去重

数组去重 let arr2 = ['小王', '小王', '小张'] let newArr2 = [...new Set(arr2)] console.log("TCL: newArr2", newArr2) // TCL: newArr2 (2)["小王", "小张"]数组对象去重1.reduce()方法 let arr = [ ...

2019-11-14 14:17:01 125

原创 iframe 的页面方法调用学习

外部调用iframe里的方法document.getElementById('test21').contentWindow.saveData()window.test21.saveData();// test21是iframe的name值iframe里的界面调用外部界面方法window.parent.fnTest20()效果图父html...

2019-11-12 17:03:23 836

原创 Javascript 中的 ...（展开运算符）

曾几何时，ES6/ES2015 对 Javascript 语言进行了重大升级。它引入了许多不同的新功能。其中之一就是我们可以用在任何兼容容器（对象、数组、字符串、集合、映射）前面的三个连续点。这些小点使我们能够编写更加优雅和简洁的代码。在本文中我将会解释这三个点的工作原理，并展示最常见的例子。三个连续的点具有两个含义：展开运算符（spread operator）和剩余运算符（rest oper...

2019-11-11 11:11:14 6225 7

原创 CSS3 动画(圆点闪烁动画效果的实现)

代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...

2019-11-07 17:13:11 12470 2

原创 JS中获取元素属性的8大方法

在Web前端开发中经常用到的技术：获取元素属性的一系列方法【innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()】这些方法，大家应该用过，如果让你说出它们的一些区别和联系，能答得上来吗？接下来让我们一起来温故下。首先我们需要把它们归类下：innerHTML、outerHTML、innerText 、out...

2019-11-04 18:00:00 1199

原创 JS 进阶需要掌握的 12 个概念

本文介绍 JS 比较重要的12个概念，但绝对不是说 JS开发人员只需要知道这些就可以了。1.变量赋值 (值 vs 引用）理解 JS 如何给变量赋值可以帮助我们减少一些不必要的bug。相反，如果，不理解这一点，可能很容易地编写被无意中更改值的代码。JS 总是按照值来给变量赋值。这一部分非常重要：当指定的值是 JavaScript 的五种基本类型之一（即Boolean，null，...

2019-10-29 09:34:25 124

原创 Moment.js常用API速查

日常开发经常会用Moment.js来处理时间，现对频繁使用的几个API做下整理，以便日后查阅。获取时间moment().valueOf() // 获取时间戳(以毫秒为单位) moment().startOf('day') // 获取今天0时0分0秒moment().startOf('isoWeek') // 获取本周周一0时0分0秒moment().startOf('mo...

2019-10-17 10:14:16 418

原创 vue中nextTick()方法的使用学习

nextTick() 用于在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOMnextTick()是属于异步更新队列应用场景在Vue生命周期的created钩子函数进行的DOM操作一定要放在vue.nextTick()的回调函数中在数据变化后要执行的某个操作，而这个操作需要使用随机数据改变而改变的DOM结构的时候，这个时候的操作都应该放进Vu...

2019-10-15 10:23:58 216

原创 vue中mixin (混入) 的学习

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。index.vue<template> <div class="index"> {{msg}} ---- {{msgMixin}} </div&g...

2019-10-11 16:22:52 395

原创移动Web开发小结2

不用说我也知道，此类文章太多太多了，常见的譬如：viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影（这个我觉得真没必要去掉，用户点击是需要反馈的，而这个背景色刚刚好提供了一种反馈）等等，太多啦，这些相信大家百度一下就可以查到很多资料????本篇文章主要是讲一些其他的或者优化手段。内容不多????1. 弹出数字键盘<!-- 有"#" "*"符号输入 --&g...

2019-10-10 16:29:53 120

原创 ES6中的var, let, const

var, let, const这三个东西，经常会被问到。汇总一下，基本上就是：var, let, const有什么区别? let, const 有没有变量提升(hosting) ? 什么是TDZ?首先，我们先整体的看下区别:针对这几点，我们一个个看。首先，我们还是先了解一下变量提升.看个例子：console.log(a) // undefine...

2019-10-10 09:55:59 104

原创 JS正则表达式大全

正则迅雷链接/^thunder:\/\/[a-zA-Z0-9]+=$/ed2k链接(宽松匹配)/^ed2k:\/\/|file|.+|\/$/磁力链接(宽松匹配)/^magnet:\?xt=urn:btih:[0-9a-fA-F]{40,}.*$/子网掩码/^(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(?:\.(?:\d{1,2}|...

2019-09-29 15:50:17 1680

原创 JS Math 对象常用方法 ES5

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> // 1. abs() 方法可返回一个数的绝对值...

2019-09-29 15:12:41 364

空空如也

空空如也