自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(84)
  • 收藏
  • 关注

原创 h5调用第三方app (项目开发思路)

h5怎么调用第三方app?在不借用外壳方法的情况下,怎么调用第三方app?方案思路h5调用第三方app,首先第一步是判断手机是Android还是IOS系统。第二步,根据手机类型不同怎么去拉取第三方app。第三步,如果能拉取,怎么拉取第三方app。第四部,如果不能拉取,怎么解决。...

2021-10-18 23:40:32 2160

原创 js实现二分查找算法

js实现二分查找算法二分查找:是一种搜索某个值的索引的算法。基本条件:有序的数组。思路:1.将数组折半,分成左右两个数组。2.判断要查找的数和中间位置数值的大小,来判断要查找的数实在哪一半。3.之后继续折半查找,直至找到这个数。方法:二分查找有两种方法,一种是非递归方式,采用while方式,判断是否符合要求。另一种是采用递归方式,采用if方式,依次递归,找到相应的值。步骤一(非递归):function binary_search(arr, key) { var low = 0,

2021-10-11 23:11:15 1332

原创 表驱动法(更优雅的写if-else、switch-case)

表驱动法表驱动法就是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if和case)。事实上,凡是能通过逻辑语句来选择的事物,都可以通过查表来选择。对简单的情况而言,使用逻辑语句更为容易和直白。但随着逻辑链的越来越复杂,查表法也就愈发显得更具吸引力。直接访问一个很简单的例子: 今天星期几const day = new Date().getDay()let day_zh;if(day === 0){ day_zh = '星期日'}else if(day === 1

2021-10-11 22:45:49 5010

原创 vue路由跳转时更改页面title

一、router文件夹下的index文件中给每个path添加meta:{}:export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' } }, { path: '/studentInfo',

2020-11-25 22:29:08 1017

原创 echarts属性的设置(完整大全)

x轴类型有三种(y轴类似)1 category 类目轴,适用于离散的类目数据 ,就是x周的类别是自定义的,都是字符串,需要通过data设置类目数据 与series 中data对应,data是一维数组 demo2 time 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。 data是二维数组,第一个数值对应x轴 demo3 value ,数值轴,适用于连续的数据,是数据类型的数据 与series 中d

2020-11-25 22:13:59 6328

原创 一些css属性

去掉textarea 右下角图标 resize: none;如下图默认右下角有小图标加个样式: resize: none;就可以了:修改input元素placeholder样式的方法我们时常需要跟input输入框打交道,很多情况下都要对placeholder的内容进行修改,例子:{/* React的写法 */}<input type="text" placeholder={'placeholder'}/>默认情况下的显示如下:我们是没法直接对input元素设置样式来更改

2020-09-27 23:35:17 72

转载 reacthook初体验1

使用 State Hookimport React, { useState } from 'react';function Example() { // 声明一个叫 "count" 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={()

2020-09-04 23:43:20 101

原创 -webkit-line-clamp 多行文字溢出...

CSS代码:.box { width: 100px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}HTML代码:<div class="box"> 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出</div>效果:

2020-09-04 22:58:00 182

原创 localStorage、sessionStorage的储存、取出、删除、修改使用方法

localStorage的方法1:存储数据localStorage.setItem('id','001')2:取出数据localStorage.getItem('id')3:删除存储数据localStorage.removeItem('id')4:更改数据localStorage.setItem('id','002')sessionStorage的方法1.保存数据语法:sessionStorage.setItem("key", "value");2.读取数据语法:sess

2020-09-03 23:33:58 2009

原创 Array.isArray()

Array.isArray() 用于确定传递的值是否是一个 Array。Array.isArray([1, 2, 3]); // trueArray.isArray({foo: 123}); // falseArray.isArray("foobar"); // falseArray.isArray(undefined); // false语法Array.isArray(obj)参数obj需要检测的值。返回值如果值是 Array,则为true; 否则为false。

2020-09-03 23:18:01 1464

原创 es6对象扩展

function getPoint() { const x = 1; const y = 10; return {x, y};}getPoint()// {x:1, y:10}这种写法用于函数的返回值,将会非常方便。CommonJS 模块输出一组变量,就非常合适使用简洁写法let ms = {};function getItem (key) { return key in ms ? ms[key] : null;}function setItem (key, val

2020-09-02 23:18:05 102

原创 input输入框限制输入特殊字符

html代码<input class="form-control" v-model="userName" type="text" placeholder="用户名" @blur="blur" @input="userNameLimit"><input class="form-control" v-model="userPassword" type="password" placeholder="密码" @input="userPasswordLimit">**js部分**

2020-09-01 22:26:08 1960

原创 ES6,Array.fill()函数的用法

ES6为Array增加了fill()函数,使用制定的元素填充数组,其实就是用默认内容初始化数组。该函数有三个参数。arr.fill(value, start, end)value:填充值。start:填充起始位置,可以省略。end:填充结束位置,可以省略,实际结束位置是end-1。例如:1.采用一默认值填初始化数组。const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]arr1.fill(7)console.log('%s', arr1)2

2020-09-01 22:18:07 234

原创 CSS3: calc计算属性

前言正如其名,calc是css3中新增的计算属性,让很多属性增加了一个表达式的说法;标准的写法: .class{ /* area: expression; */ width:calc(); padding:calc(); margin-top:calc(); ... }兼容性基本理论calc可以做用于任何具有大小的东东,比如border、margin、pading、font-size和width等属性设置动态值支

2020-08-18 23:42:19 805

原创 iframe的初体验

iframe基本概念<iframe src="demo.html" height="300" width="500" name="demo" scrolling="auto" sandbox="allow-same-origin"></iframe>iframe的一些基本属性:src iframe页面地址,有同域跨域之分height iframe高度width iframe宽度name iframe命名,可通过window.frames[xxx]被调用scrollin

2020-08-18 23:35:33 173

原创 Git常用命令及方法大全

主要涉及到几个地方:Workspace:工作区Index / Stage:暂存区Repository:仓库区(或本地仓库)Remote:远程仓库一、新建代码库 # 在当前目录新建一个Git代码库$ git init # 新建一个目录,将其初始化为Git代码库$ git init [project-name] # 下载一个项目和它的整个代码历史$ git clone [url]二、配置Git的设置文件为.gitconfig,它可以在用户主目录下(全局配置),也可以在项目目录下

2020-08-11 23:57:21 656

原创 react的受控于非受控组件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/react.development.j

2020-08-10 23:14:38 84

原创 react中的state

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/react.development.j

2020-08-10 22:52:33 80

原创 解决vue修改数据页面不重新渲染问题(Vue中数组和对象更改后视图不刷新)

vue渲染机制和如何解决数据修改页面不刷新问题的多种方法首先 第一点,vue底层是 将data对象传人,使用Object.definePropety,转换为getter和setter,所以,vue不支持IE8.1.简单介绍一下Object.definePropety,Object.defineProperty(obj, prop, descriptor)//参数obj要在其上定义属性的对象。prop要定义或修改的属性的名称。descriptor将被定义或修改的属性描述符 var

2020-07-28 11:45:52 11719 1

原创 VUE项目(单页面)问题之:从详情页返回列表页时返回到上次滚动位置,并还原列表页所有点击、搜索等状态

一、问题新增需求,点击浏览器返回按钮或者详情页的返回按钮,需要返回列表页,并保存之前所有的状态。二、经过刚开始,用this.$router.push({ name: 'detailsPage', params: sendData // sendData是给详情页传的数据信息})详情页通过 this.$route.params 信息判断是哪个列表页传过来的,并给二级页面传所需的信息。为了防止页面刷新,路由中的信息为空,还用sessionstorage存储了路由信息。后来,发现

2020-07-28 10:49:20 1667 1

原创 keep-alive的正确用法

我有3个页面,一个index页面,包含点击进入分类sort页面和进入详情detail页面两个功能一个sort页面,包含上划加载,进入详情detail页面两个功能一个detail页面,展示页面详情我要实现的:从index点击进入detail页面,回退仍旧处于之前进入的位置;点击进入sort页面,回退仍旧处于之前进入的位置;点击进入sort页面,并点击进入detail页面,返回sort时,sort页面仍旧处于之前进入的位置,继续返回index页面时,index页面仍旧处于之前进入的位置;点

2020-07-28 10:37:50 689

原创 剖析Vue实现双向数据绑定原理

数据劫持vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。思路整理已经了解到vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要、最基础的内容之一,如果不熟悉defineProperty,猛戳这里整理了一下,要实现mvv

2020-07-27 22:43:54 103

原创 es6的一些新特性

1. letlet 语句允许使用块作用域声明变量。console.log(a); let a = 4; // a is not defined2. const将所有字母都大写的变量约定为常量,但本质还是变量 ####1.const定义只是地址不能修改 const NUM = 100; NUM = 200; // Assignment to constant variable.由const定义的常量,无法修改其地址值。 在这里为啥要强调是地址值 因为 以

2020-07-27 22:09:30 164

原创 js数据类型及检测方法

一、数据类型检测方法在js中,有四种用于检测数据类型的方式,分别是:typeof  用来检测数据类型的运算符instanceof    检测一个实例是否属于某个类constructor   构造函数Object.prototype.toString.call()  原型链上的Object对象的toString方法下面我们就来分别介绍一下上面四种方法的适用场景和局限性。1.typeof 用来检测数据类型的运算符使用typeof检测数据类型,返回值是字符串格式。能够返回的数据类型有6种是:“n

2020-07-23 16:17:32 432

原创 原型对象的获取和设置补充

原型对象的获取和设置补充<!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-UA-Compatible" content="ie=edge"> &l

2020-07-20 12:22:12 94

原创 hasOwnProperty和in属性操作

hasOwnProperty和in属性操作<!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-UA-Compatible" content="ie=edge"&g

2020-07-20 12:16:06 132

原创 Object.create方法的内部实现

Object.create方法的内部实现<!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-UA-Compatible" content="ie=edge"&gt

2020-07-20 12:03:53 203

原创 vue-video-player vue视频插件

介绍vue-video-player是videojs的vue版本video.js官网:https://videojs.com/引用一下官网介绍:Video.js是一个为HTML5世界从头开始构建的网络视频播放器。它支持HTML5视频和现代流媒体格式,它支持在桌面和移动设备上播放视频。安装安装依赖npm i vue-video-player -D全局引用: // 在mian.js里面引入 import "video.js/dist/video-js.css"; import {videoPl

2020-07-15 21:37:30 2285

原创 购物车案例

html部分<!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-UA-Compatible" content="ie=edge"> <titl

2020-07-11 17:41:22 210

原创 svn常用命令

svn检出:svn checkout URL显示版本信息:svn --version使用svn添加一个新的工程到控制版本库svn import 文件路径 svn路径 -m "说明"显示本地版本与版本控制库中的区别:svn diff显示状态信息:svn state显示控制版本信息:svn info检出svn checkout URLsvn 提交:svn commit -m "documents added."导出一个干净的不带.svn文件夹的目录树,也就是说不受

2020-07-06 21:13:05 126

转载 一篇文章彻底搞懂异步,同步,setTimeout,Promise,async

之前翻看别的大佬的博客看到了关于setTimeout,promise还有async执行顺序的文章。观看了几篇之后还是没有怎么看懂,于是自己开始分析代码,并整理了此文章,我相信通过此文章朋友们能对异步同步还有,setTimeout,Promise,async这些内容了然于胸,接下来让我们走入正题:这是别的大佬博客里面的代码:async function async1() { console.log('async1 start') await async2() console.log('

2020-07-05 16:13:50 281

原创 数组方法补充

提取数组指定深度的方法比如说现在有一个这样的数组:[1,2,[3,4,[5,6]]],我想将它输出为[1,2,3,4,5,6]。如果自己去写递归的话还是比较麻烦的。那么我们可以使用数组本身的flat方法来深度解析。1.flat()按照指定的深度递归遍历数组返回值是遍历到的所有元素集合。let arr = [1,2,[3,4,[5,6]]], res = arr.flat(Infinity), //无限递归,直到最后 res2 = arr.flat(); //如果不传参数那么只递

2020-07-05 15:14:01 90

原创 vue 面试总结

一、 vue 面试题1.axios 是什么?怎么使用?描述使用它实现登录功能的流程?它与 fetch、ajax 的区别是什么?答案如下:. axios 是基于 promise 用于浏览器和 node.js 的一个http客户端,主要用于向后台发起请求的,以及在请求中做更多的控制支持 promise,提供了一些并发的方法,提供拦截器,提供支持 CSRF,跨站请求伪造axios 与 fetch 都是基于 promise 的语法,后者默认是使用 callback 的方式。fetch 本质上脱离 xhr

2020-07-02 16:36:35 173

原创 原型链、面向对象

一、原型链对于原型链,会从创建对象的方式、原型、构造函数、实例、原型链、instanceof 的原理、new 运算符这几个方面分析对于创建对象的方式,如下所示:字面量的方式,如下所示: var o1 = {name: 'o1'}; var o2 = new Object({name: 'o2'});构造函数的方式,如下所示: var M = function (name) { this.name = name; }; var o3 = new M('o3');Ob

2020-07-02 12:50:23 165

原创 前端 JS 设计模式之代理模式、外观模式、观察者模式 和迭代器模式

一、代理模式代理模式,使用者无权访问目标对象,中间加代理,通过代理做授权和控制。对于代理模式的理解,可以举一个例。比如如果广告商想找到明星进行演出,不会直接联系明星,而是联系明星的经纪人,通过经纪人,去与明星之间进行沟通。对于代理模式的应用,在 ES6 中的 Proxy 中也比较常见。代理模式的设计原则验证,代理类和目标类分离,隔离开目标类和使用者,符合开放封闭原则。代理模式与适配器模式的比较:适配器模式是提供一个不同的接口,比如不同版本的插头。代理模式是提供一个一模一样的接口。代理模式与装饰

2020-07-01 22:42:08 236

原创 前端 JS 设计模式之工厂模式、单例模式、适配器模式和装饰器模式

一、工厂模式工厂模式,将 new 操作单独封装。遇到 new 时,就要考虑是否该使用工厂模式。对于工厂模式的理解,可以举例。你去购买汉堡,直接点餐、取餐,不会自己亲手做。商店要封装做汉堡的工作,做好直接给买者。工厂模式的设计原则验证,构造函数和创建者分离,符合开放封闭原则。工厂模式的代码,如下所示:class Product { constructor(name) { this.name = name } init() { alert(

2020-07-01 22:26:06 428

原创 Promise的深入理解

一、promise 的认识1.js的单线程1)javascript的执行环境是单线程的2)单线程:指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务,这个任务可称为主线程,但是实际上还有其他线程,如事件触发线程、ajax请求线程等2.同步与异步1)同步模式:也就是单线程模式,一次只能执行一个任务,函数调用后需等到函数执行结束,返回执行的结果,才能进行下一个任务,如果这个任务执行的时间较长,就会导致线程阻

2020-07-01 21:19:54 415

原创 CSS样式居中总结

CSS的样式居中总结一、父容器宽度确定时水平居中(1)通过margin: 0 auto; text-align: center实现CSS水平居中。这种方法是实现CSS水平居中最最常用的,我在前端开发中大概有60%的CSS水平居中就是通过“margin: 0 auto; text-align: center”实现的。(2)通过display:flex实现CSS水平居中。随着越来越多兼容flexbox,所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐。通过display:fl

2020-07-01 18:55:37 140

原创 vue的路由hash模式 和 history模式 区别

vue的路由hash模式 和 history模式 区别1.直观区别:hash模式url带#号,history模式不带#号。2.深层区别:hash模式url里面永远带着#号,我们在开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url适合推广宣传功能也有区别,比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,把这个页面分享到第三方的app里,有的app里面url是不允许带有#号

2020-07-01 11:54:09 198

原创 性能优化

1 前言Web 应用性能优化黄金法则: 先优化前端程序 (front-end) 的性能,因为这是80% 或以上的最终用户响应时间的花费所在2 减少HTTP请求80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素, 如图像、 样式表、 脚本和 Flash 等的下载上减少页面元素:简化页面设计 image:使用精灵图,配合 background-image 和background-position实现部分图片Combined files:组合多个脚本文件到单一文件,同样

2020-06-30 18:04:42 131

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除