文鼎鼎-CSDN博客

原创 h5调用第三方app （项目开发思路）

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

2021-10-18 23:40:32 2160

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对象扩展

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

空空如也

空空如也