自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 uniapp webview与uniapp相互传参

<web-view :src="webviewurl" class="webview" @message="getclose"></web-view>onLoad() { // #ifdef APP-PLUS let obj = xxxx() this.webviewurl = `/hybrid/html/${domain.baseUrl.indexOf('10.') === -1 ? 'shenyang': 'shenzhen'}/flightExecutionRateS

2021-06-18 10:45:00 1626

原创 uniapp开发app,A款app调起B款app并传递参数

uniapp开发app,A款app调起B款app并传递参数if (plus.os.name == "Android") { //安卓 if (plus.runtime.isApplicationExist({ //查看安卓系统手机有没有下载这款app pname: 'xxxxxxx, //B款app云打包的包名 })) { //安装了app plus.runtime.launchApplication({ //打开app pname: "xxxxx", //B款app云

2021-06-18 10:17:30 580

原创 从url中获取参数名为name的参数值

下面代码时从url中获取参数名为name的参数值地址是https://editor.csdn.net/md?not_checkout=1&articleId=117411209var getQuery = function(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg);

2021-06-18 10:00:30 713

原创 图片的懒加载的实现

第一种方法使用 getBoundingClientRect与视口关系,需要监听浏览器,使用防抖优化第二种方法使用 IntersectionObserver函数<!doctype html><html><head> <title>图片懒加载</title> <meta charset="utf-8" /></head><body> <div > <img dat

2020-08-25 16:20:38 250

原创 Linux centos8.1安装Mongodb

下载#下载地址https://www.mongodb.org/dl/linux/x86_64上传解压rz命令上传或者xftp上传到/usr/local/mongodb 文件夹内rz命令: #编译安装 #root 账号登陆后,依次执行以下命令: cd /tmp wget http://www.ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz tar zxvf lrzsz-0.12.20.tar.gz && cd lrzsz..

2020-06-22 14:11:42 1564

原创 Linux centos8.1安装Nodejs

获取Node.js 安装包Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/,你可以根据不同平台系统选择你需要的 Node.js 安装包,这里选择的是 Linux Binaries (x64)。

2020-06-22 10:22:16 981

原创 linux centos8.1安装nginx

安装依赖#一键安装上面四个依赖yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 下载并解压压缩包#创建一个文件夹cd /usr/localmkdir nginxcd nginx#下载tar包wget http://nginx.org/download/nginx-1.19.0.tar.gztar -xvf nginx-1.19.0.tar.gz安装nginx#进入目录cd ngin..

2020-06-19 14:10:13 352

原创 JS事件中防抖debounce和节流throttle以及requestAnimationFrame

浏览器的一些事件,如:resize,scroll,keydown,keyup,keypress,mousemove等。这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用。这样浏览器的目的是为了保证信息的一致性,而对于我们来说就是一种资源的浪费了。 debounce的作用是在让在用户动作停止后延迟x ms再执行回调。 throttle的作用是在用户动作时没隔一定时间(如200ms...

2018-04-01 10:21:12 1335

原创 前端性能优化

1.域名发散与域名收敛域名收敛:将静态资源只放在一个域名下面,减少域名数量可以降低 DNS 解析的成本。 域名发散:而非发散情况下的多个域名下,由于浏览器的限制,每个浏览器,允许对每个域名的连接数一般是有上限的,浏览器不同,允许并行连接数一般为6个,通常将静态资源分布在几个不同域,保证资源最完美地分域名存储,以提供最大并行度,让客户端加载静态资源更为迅速。 DNS 解析其实是一个很复杂的过...

2018-03-11 17:21:39 413

原创 Formatting Context与布局

BOX概念:CSS布局的基本单位 解释:BOX是CSS布局的基本单位,元素的类型和dispaly属性,决定了这个元素的的BOX类型,BOX的类型分为: 【block-level box】 display属性值为:block、list-item、table 的元素会生成 block-levle box,并且参与 block formatting context 布局 【inline-le...

2018-03-11 17:17:29 725

原创 web前端开发中的安全性问题

跨站脚本攻击(XSS攻击)恶意攻击者往Web页面里注入恶意Script代码,用户浏览这些网页时,就会执行其中的恶意代码,可对用户进行盗取cookie信息、会话劫持等各种攻击. 解决方案: 1. 输入过滤,输入符合预期的格式的数据,比如图片上传,设置accept属性,或者只能输入字母或者日期格式等,同时后台对前台输入的数据也应该做编码或转义来防范XSS攻击。 2.对所有要动态输出到页面的...

2018-03-11 17:15:36 6378 1

原创 从输入URL到页面加载完成的过程中都发生了什么事情?

解析URL当你在浏览器中输入URL并敲回车之后,浏览器会把URL分成几部分:1、协议:从计算机获取资源的方式,常见的HTTP、HTTPS等 2、网络地址:域名或者IP,指示网络中的哪一台计算机 3、资源路径:指示在该计算机上获取哪一个资源DNS域名解析当浏览器发现网络地址并不是IP,而是域名的时候,浏览器会向DNS服务器发送请求,查找域名对应的IP,如果该DNS服务器没有找...

2018-03-11 17:14:59 800

原创 Dclound + vue开发 Hybrid APP注意事项

1.vue实例放在 plusready 函数内执行回调函数vue实例如果用到Dclound 内置api时候需要放在 plusready 函数内执行回调函数可以认为plusReady函数是异步函数,苹果和安卓在配合vue使用时候可能由于Dclound和vue生命周期先后渲染顺序不同,引发莫名错误,所以应该采用如下方法解决例如:定义plusReady.js/** * plusReady 事件 * @

2017-11-12 17:14:46 2447

原创 vue2.0 页面在华为自带浏览器里无法打开。

因为华为手机内置的浏览器内核版本太低!解决方案1:npm install --save -dev babel-polyfill在你的主入口文件app.js中import 'babel-polyfill'即可解决方案2: 也就是使用cdn的资源,以js的文件加入到html页面:加一个https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min

2017-06-19 11:22:01 2466

原创 js百度地图marker与swiper轮播图联动

项目需求,安卓、ios引入webview地图内容与轮播联动,效果与百度题图wabapp效果相同,调用自己数据,地图里面放坐标,地图下部放轮播,并且单击maker坐标时候轮播图滑到相应位置,滑动轮播图,相应坐标弹出信息 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewpor

2017-06-14 17:31:27 2321 3

原创 ES6总结--Promise 、Generator 、Async/Await

1、Promise开篇首先设想一个日常开发常常会遇到的需求:在多个接口异步请求数据,然后利用这些数据来进行一系列的操作。一般会这样去写:$.ajax({ url: '......', success: function (data) { $.ajax({ // 要在第一个请求成功后才可以执行下一步 url: '.....

2017-05-25 22:54:02 1173

原创 ES6总结--Proxy、Reflect

3

2017-05-24 15:20:48 831

原创 ES6总结--Symbol、Set 和 Map 、Iterator、Class

12

2017-05-23 21:29:50 650

原创 ES6总结--数据类型的扩展

1

2017-05-23 15:05:01 639

原创 ES6总结--严格模式、let/const 、解构赋值

1、严格模式与 ECMAScript 6ECMAScript 5 引入严格模式来清理语言,在文件或者函数的第一行放入下面的内容就可以开启严格模式:'use strict';严格模式引入了三种破坏性的改变:语法改变:一些之前合法的语法在严格模式下面是不允许的。例如:禁止 with 语句。它允许使用者添加任何对象到变量作用域链,这会减缓程序的执行速度,并且很难指出某个变量指向哪里。 删除一个独立的标识

2017-05-22 14:18:43 1167

原创 vue+axios 登录拦截

一个项目学会前端实现登录拦截,原文地址登录拦截第一步:路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。const routes = [ { path: '/', name: '/', component: Index

2017-05-10 10:25:54 1038

原创 axios发送post请求,提交图片类型表单数据

DOME<input type="file" @change="upload" ref="upload">接口const userUploadAtt = (File,config) => axios.post("接口",File,config)处理数据let input = this.$refs.upload 创建一个空的FormData对象 let data = new FormData

2017-04-24 10:52:35 15817 1

原创 js数组应用

1.找出元素 item 在给定数组 arr 中的位置 解:function indexOf(arr, item) { if(Array.prototype.indexOf){ return arr.indexOf(item) }else{ for(var i = 0;i < arr.length;i++){ if(arr[i]

2016-12-11 11:33:31 1060

原创 react-redux应用

reducers const reducer1 = (state = {"test":"nihao"}, action= {}) => { switch (action.type) { case 'xxx': default: return state; } }

2016-12-08 17:23:14 555

原创 react-router应用

react-routerimport {Link,Route , Router , IndexRoute , hashHistory, Redirect} from 'react-router';//Link可以理解为a标签//暂时未用到Redirect,onEnter 钩子 。Redirect 是一个重定向组件,有 from 和 to 两个属性;onEnter 钩子中用于判断某种情况是否成立,

2016-12-07 20:34:32 564

原创 react-redux的connect()方法

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])连接 React 组件与 Redux store。连接操作不会改变原来的组件类,反而返回一个新的已与 Redux store 连接的组件类。参数[mapStateToProps(state, [ownProps]): stateProps] (Funct

2016-11-25 20:42:12 1260

转载 React Component Lifecycle(生命周期)

生命周期所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;第三阶段:是组件卸载消亡的阶段,如图

2016-10-26 16:36:59 793

转载 reactjs性能优化之shouldComponentUpdate

性能优化每当开发者选择将react用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护。此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈?而在react内部则是通过使用一些精妙的技巧来最小化每次造成ui更新的昂贵的dom操作从而保证性能的。避免直接作用于DOMreact实现了一层虚拟dom,它用来映射浏览器的原生dom树。通过这一层虚拟的

2016-10-17 10:58:32 1204

原创 ajax 、jsonp 、Promise 封装

一、JS原生Ajaxajax:一种请求数据的方式,不需要刷新整个页面; ajax的技术核心是 XMLHttpRequest 对象; ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;下面简单封装一个函数,之后稍作解释 ajax({ url: "./TestXHR.aspx", //请求地址

2016-10-15 11:20:10 6298

原创 js cookie 编码解码登录成功返回原页面

1.htmlhtml lang="en">head> meta charset="UTF-8" /> title>Documenttitle>head>body>form action="s.html"> input type="password" name="password" id="" /> input type="text" name="nam

2016-10-14 23:57:34 1508

原创 Date(日期)对象(复习)

JavaScript Date(日期)对象 日期格式化,简单倒计时<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title></head><body><script type="text/javascript">const byTime = [12*30*2

2016-10-14 15:06:45 512

原创 react-router学习笔记

参考: React Router 中文文档 阮一峰 React Router 使用教程1.Router,hashHistory,Route首先下载react-router$ npm install react-router --save需要注意的是,react-router更新很快,API也在持续升级,也许你看到市面很多教程,但可能那还是1.x甚至是0.x版本的。我们首先在App.jsx写一个简

2016-10-11 19:22:35 3088

原创 ReactJS入门ES6写法

参考: React 官方网站 ECMAScript 6 入门 React 入门实例教程HTML 模板 使用 React 的网页源码,结构大致如下。<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></scr

2016-10-06 18:15:09 8643

原创 svchost.exe占用内存过高解决办法

为了升级IE,脑残更新了八百年也没更新过的电脑,更新完你妈电脑变得超级无敌慢,打开任务管理器发现svchost.exe这个进程占用了90%+的内存,尼玛这是啥?弄了半天终于是啥毛病引起的了,如果有这种毛病出现的各位记得按照如下方法解决1:打开任务管理器,这个都会把。。。 2:右键svchost.exe 转到服务。 3:右下角有个服务两个字,单击打开。。 4:找到 Superfetch 这个服务

2016-09-19 12:44:34 7879

原创 h5 history api实现无刷新前进后退

操纵浏览器的历史记录history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会 忽略此参数;url为页面地址,可选,缺省为当前页地址。history.replaceState(data, title [, url]) :更改当前的历史记录,参数同

2016-09-18 18:09:56 6093

原创 原型链

思维导图原型链中最终的构造器函数是function Function(),原型链中最终的原型是Object prototypenew Foo()function Foo() {};var foo = new Foo();Foo.prototype.constructor === Foo//output:truefoo.constructor === Foo //output:truefo

2016-09-13 13:14:03 559

原创 js的解析与执行过程

1:预处理阶段当输入如下代码时候var a = 1;function crli(){ alert(a);}crli()//1结果为 1当改变下面代码时候var a = 1;function crli(){ alert(a); var a = 5;}crli()//undefined结果为 undefinde这是为什么呢?js解析与执行过程一共有2个阶段,一个预处理

2016-09-10 16:09:50 2494

原创 gulp 静态资源打包 压缩 合并

/*! * gulp * $ cnpm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev */// Load pluginsvar gulp = require('gulp'), rev = require('gulp-rev'), revRe

2016-09-08 20:33:18 2324

原创 手机端访问WAMP 下局域网

cmd ipconfig 查找如下IPV4 IP地址无线局域网适配器 无线网络连接: 连接特定的 DNS 后缀 . . . . . . . : 本地链接 IPv6 地址. . . . . . . . : **IPv4 地址** . . . . . . . . . . . . : 111.11.1.1 子网掩码 . . . . . . . . . . . . :

2016-08-28 19:18:52 804

原创 gulp 配置

初学gulp,终于把常用的配置,api,语法弄明白了!gulp插件地址:http://gulpjs.com/plugins gulp官方网址:http://gulpjs.com gulp 官方API:https://github.com/gulpjs/gulp/blob/master/docs/API.md我的页面结构,暂时这样。。。D:.└─gulp ├─app │ ├─f

2016-08-20 12:11:08 723

空空如也

空空如也

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

TA关注的人

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