- 博客(80)
- 收藏
- 关注
RSS订阅原创 前端性能优化
Web 指标是Google 开创的一项新计划，旨在为网络质量信号提供统一指导，这些信号对于提供出色的网络用户体验至关重要。Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行，而另一些开发者则发现大量的工具和指标令人应接不暇。我们想了解提供给用户的体验质量，并非需要成为性能专家。Web 指标计划旨在简化场景，帮助网站专注于最重要的指标，即核心 Web 指标。
2023-09-28 15:03:10
253
原创 Vue3.0简介
阅读不怎么舒适，参看我的语雀原文：https://www.yuque.com/xiaocao-4xvac/zxcdyp/qepwd0更快，初始渲染/更新最高可提速一倍1.virtual dom实现完全重构2.结合模板编译提高运行时性能。减少运行时开销例如：模板里很多没有变动的地方，但是virtual dom 不可避免的生成节点对它们进行比对。可以通过在编译时对模板进行分析，来减少这...
2018-11-30 18:04:27
3089
原创 position的8种定位方式
position定位的八种方式：一、常见/用的四种1.staticpositon定位的默认值，没有定位2.relative生成相对定位的元素，相对于其正常位置进行定位，一般在子元素设置absoute定位时，给父元素设置relative元素的位置通过top、right、bottom、left控制，其值的定位起点都是是父元素左上角(这点和absoute、fixed不一...
2018-09-18 15:31:52
30125
6
原创 内存泄露和javaScript的内存管理机制
1.内存泄漏（Memory Leak）是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果2.javaScript的内存管理机制内存基元在变量（对象，字符串等等）创建时分配，然后在他们不再被使用时“自动”释放,后者被称为垃圾回收(GC:Garbage Collecation)3.垃圾回收方法1....
2018-09-12 18:34:33
296
原创 js大数相加
function sumStrings(a,b) { a = '0' + a; //加0是因为两个最大的位数相加后可能需要进位 b = '0' + b; a.length - b.length > 0 ? (b = Array(a.length - b.length+1).join('0')+b) : (a = Array(b.length - a.le...
2018-09-12 17:57:13
716
原创 js正则实现数字格式化,每三位加逗号
var num = '10000000000000', reg = /(?=(\B)(\d{3})+$)/g;//每三位加','号console.log(num.replace(reg,','))//10,000,000,000,000//其他符号只需更改replace()第二个参数即可 ...
2018-09-12 17:19:51
6373
1
原创 H5实现多图上传与预览，图片压缩上传
H5多图上传，并实现压缩(可根据实际情况选择对多大的图片进行压缩，本例为大于512KB的进行压缩)和预览<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>H5多图压缩上传与预览</title&g
2018-08-23 18:05:47
3890
1
原创 linux(centOS)下搭建node服务器四、nginx实现通过域名或特定网址访问项目
上一篇 linux(centOS)下搭建node服务器三、 pm2管理和保持后台运行node应用 讲述了如何使用pm2管理node应用程序和保持后台运行node应用，本篇讲述通过使用nginx实现：通过域名或网址访问项目(去掉端口号)、一台服务器同时支持多项目访问Nginx安装使用需要依赖一些工具和库，安装Nginx之前需要先安装这些工具和库：一、安装编译工具和相关的库文件 执行命...
2018-08-14 17:53:38
2250
1
原创 图片预加载完成再执行动画，解决动画执行时图片还未加载完成的问题
一、场景1.多图片衔接动画2.鼠标指向图片时，图片翻转显示另一张图等等 二、实现方式利用 Image()构造函数创建一个屏幕外图片对象，之后将该对象的src属性设置成期望的URL，由于图片元素并没有加载到文档中，因此，它是不可见的，但是浏览器还是会加载图片并将其缓存起来。这样以来，当页面中再有用到该图片的时候就能很快从缓存中加载。就不会出现加载慢导致的图片显示不出来...
2018-08-07 17:11:10
2959
1
原创 js截取字符串的三种方法，slice、substring、substr的区别
一、slice()和substring()都有两个参数start和end ，获取字符串从start(包含)到end(不包含)位置的字符不过start和end都不是必填的(不填:start默认为0，end默认为字符串长度length)，参数个数不同具体对应情况如下：注：字符串的索引是从0到length-11.如果不写参数表示返回当前字符串(截取全部)，start为0，end为字符串长...
2018-08-01 19:14:04
7450
原创 linux(centOS)下搭建node服务器三、 pm2管理和保持后台运行node应用
上一篇 linux(centOS)下搭建node服务器二、 使用koa2搭建项目 讲述了如何使用koa2搭建项目，本篇讲述使用pm2管理node应用程序和保持后台运行node应用一、安装pm2全局安装pm2:npm install -g pm2安装完成查看帮助命令(pm2 -h)报错:-bash:pm2:command not found执行：ln -s /root/n...
2018-07-25 16:31:41
4557
2
原创 linux(centOS)下搭建node服务器二、 使用koa2搭建项目
前言：上一篇linux(centOS)下搭建node服务器之 安装Node.js讲述了如何搭建和配置node环境。本篇来讲下如何基于node环境开发项目网上各种关于node.js教程都讲述了如何创建一个简单的 "hello world!" 应用。主要组成部分： 引入 required 模块：我们可以使用require指令来载入 Node.js 模块。 创建服务器：...
2018-07-25 15:34:00
4514
2
原创 linux(centOS)下搭建node服务器之一、 安装Node.js
本例系统环境：腾讯云 CentOS 7.4 64位 一、找相应node版本，复制链接1. 打开网址 http://nodejs.cn/download/;2. ctrl+shift+i(打开开发者工具) 如图：二、登录腾讯云服务器，进入系统界面三、用命令行下载node到服务器、解压文件、改名(改的是node安装目录名，方便查看和使用)1.用命令...
2018-07-23 21:13:45
5702
3
原创 创建百度地图，多个地址切换
1.先注册百度账号2.登录百度地图开放平台 点击跳转登录3.申请秘钥 地址引入地图js文件时最后的 ak即自己申请的秘钥,记得更换<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="...
2018-07-19 18:05:30
1270
原创 实现dtGrid列总计功能
先看效果 1.在jquery.dtGrid.js中添加根据列id计算列总计代码1.新增总计列id数组$.fn.DtGrid.defaultOptions = { grid : { lang : 'en', totalCountColById:[], //新增总计列id数组，格式为数组，支持多列总计 ajaxLoad : true, loadAll...
2018-07-19 16:50:32
821
原创 CSS Grid布局
什么是Grid布局？ Grid布局即网格或者栅格布局，是一种基于二维网格布局系统。一、兼容性ie10、ie11支持带前缀-ms- 二、Grid布局类似flex布局。grid布局分为重要的两部分，容器和子元素。 这里给父容器设置类container,子元素设置类item。 效果如下： 父容器的属性 1. display: g...
2018-07-10 19:21:15
1330
2
原创 js判断两个值是否相等
方法： function looseEqual(a, b) { if (a === b) { return true } var isObject = function (obj) { return obj !== null && typeof obj === 'object' }; var isObjectA =...
2018-07-02 16:58:37
9536
2
原创 jquery3.0新增的方法$.escapeSelector
3.0以后才支持，使用的时候注意jquery的版本哦！$.escapeSelector() 获取 类选择器或者ID选择器中包含一些CSS特殊字符 (如# .)的元素; 它的作用是为了解决下面的这种问题 例：html<div id="#div" style="padding: 50px;"> 我的id是#div</div>按照常规的jquery...
2018-06-02 09:37:27
556
原创 新一代的前端存储方案--indexedDB
indexedDB是浏览器端存储大量数据的方法，它创造的数据可以查询，并且可以离线使用。基于实物操作的key-value型前端数据库1.创建一个indexedDB数据库 const request = indexedDB.open('myDatabase','1') indexedDB.open()创建一个indexedDB数据库，open方法可以接受两个参数 ...
2018-06-02 09:26:25
515
原创 vue-cli项目使用微信分享
本例是vue-cli构建项目下使用微信分享一、index.html中引入微信官方分享js<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 二、在src下的assets/js文件夹下新建wx.jsapi.js文件，把分享...
2018-05-25 16:16:15
6322
14
原创 vue路由跳转时更改页面title
一、router文件夹下的index文件中给每个path添加meta:{}：export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' ...
2018-05-25 14:47:08
8073
原创 vue中使用公用的提示弹层、加载loading
项目结构，在组件文件夹(components)下新建common文件夹，所用公用组件放里面，本例包含tips和loading两个 一、loading组件1.loading.vue组件内容如下：<template> <div class="loading" v-show="loading"> <img src...
2018-05-25 14:25:38
22577
2
原创 二、PHP基本规范
一、php文件以.php为后缀的文件二、php脚本以 '<?php' 开头,以 '?>' 结尾：<?php echo "Hello World!";?>三、注释// 这是单行注释# 这也是单行注释 /*这是多行注释*/...
2018-05-23 10:21:33
2142
原创 一、用XAMPP搭建本地PHP服务器，运行php文件
一、XAMPP下载安装 点击下载，下载完成之后执行安装文件安装，一路next，完成。运行界面如下：二、启动这里，我是把XAMPP安装在了D:\XAMPP文件夹下。点击第一行Apache后面的Start是启动XAMPP本地虚拟机(默认端口8080)点击第二行MySQL后面的Start是启动数据库，如果只需要虚拟服务器不需要操作数据库，只启动Apache，不启动MySQL即可启...
2018-05-23 10:03:34
57020
13
原创 js/javaScript通过setTimeout做动画和需要注意的点
一、用setTimeout做动画时每帧动画时间间隔设置为多少合适？ 因为目前大多数电脑显示器的刷新频率是60HZ，大多数浏览器都会对页面重绘操作加以限制，使其不超过显示器的重绘频率；因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环时间间隔是1000/60s 约为16.7ms 所以一般用setTimeout做动画时间间隔设置为16.6ms是最佳的：setTimeout...
2018-05-10 15:37:25
2072
原创 js节流与防抖，防止重复提交、防止频繁重复点击
一、节流、防止短时间多次提交操作现有一提交按钮<button id="submit">提交</button>点击后提交表单信息。但是经常会出现： 1.不小心点了多次，就提交了多次 2.网络卡顿的时候网页没反应，用户频繁点击的情况// 即这种写法：var subBtn = document.getE...
2018-05-02 14:41:13
19424
3
原创 js 鼠标事件
一、click、mousedown、mouseup click事件只能监听鼠标左键：//点击鼠标左键得到：'onclick',右键无效果document.onclick = function (e) { console.log('onclick')} click、mousedown、mouseup触发顺序：document.onclick = func...
2018-04-30 12:01:20
258
原创 css3动画贝塞尔曲线cubic-bezier，css3动画的五种情况
当大家开始做css3动画的时候，了解贝塞尔曲线就成了不可或缺的。“贝赛尔曲线”是由法国数学家Pierre Bézier所发明，由此为计算机矢量图形学奠定了基础。它的主要意义在于无论是直线或曲线都能在数学上予以描述。这里主要说贝塞尔曲线在css3中的运用，三次方公式，四个点确定 三阶贝塞尔曲线由四个点确定，那么css3的贝塞尔函数cubic-bezier(x1,y1,x2,y2)只有两...
2018-04-21 12:09:22
10849
转载 webpack4
安装如果需要使用 webpack 4，则需要从 next 分支上安装：// yarnyarn add webpack@next webpack-cli --dev// npm npm install webpack@next webpack-cli --save-dev不完全迁移指北环境不再支持 Node.js 4。根据 package.json 配置, Node.js 的最低支持版本为 ...
2018-04-17 11:09:27
913
1
原创 Expires和max-age
Expires和max-age都可以用来指定文档的过期时间，但是二者有一些差别1.Expires在HTTP/1.0中已经定义，Cache-Control:max-age在HTTP/1.1中才有定义；2.max-age 指定的是从文档被访问后的存活时间，这个时间是个相对值(比如:3600s),相对的是文档第一次被请求时服务器记录的Request_time(请求时间)3.Expires 指定一个绝对...
2018-04-14 15:37:40
982
原创 session，cookie，登录超时原理浅析
1.cookie保存在客户端，session保存在服务器端，通过这两个东西提供的信息，服务器端进行相关操作来判断登录是否超时2.cookie目的可以跟踪会话，也可以保存一些用户想要保存的东西(登录时，是否勾选保存账号密码)。session用来跟踪会话打开浏览器第一次请求的时候，服务器会自动为其创建一个session，并赋予其一个sessionID，发送给客户端的浏览器。以后客户端接着请求本应用中其...
2018-04-14 15:16:44
5795
原创 移动端 viewport
width：设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度initial-scale： 设置页面的初始缩放值，为一个数字，可以带小数minimum-scale： 允许用户的最小缩放值，为一个数字，可以带小数maximum-scale： 允许用户的最大缩放值，为一个数字，可以带小数heigh：t 设置layout viewport 的高...
2018-04-14 10:46:29
171
转载 js计算两经纬度点之间的距离
function caculateLL(lat1, lng1, lat2, lng2) { var radLat1 = lat1 * Math.PI / 180.0; var radLat2 = lat2 * Math.PI / 180.0; var a = radLat1 - radLat2; var b = lng1 * Math.PI ...
2018-04-14 10:36:50
3375
1
转载 vue-devtools的安装与使用
一.在github上下载压缩包，github下载地址：https://github.com/vuejs/vue-devtools二.解压到本地的某盘三.用你的npm中进入文件夹vue-devtools-master下或者直接打开vue-devtools-master文件 ，然后shift+右键打开dos窗口四. 依次输:1:npm install 2:npm run build ...
2018-04-14 10:28:40
188
原创 vue路由使用,vue-router传参接参
一、通过引入vue-router.js的方式使用1.单层路由const chinese = { template: '<div class="main">汉语</div>' }const english = { template: '<div class="main">英语</div>' }const app = new Vue({...
2018-04-13 18:48:34
436
原创 vue-cli 构建项目,vue-cli请求后台接口,vue-cli使用axios、sass、swiper
1.vue-cli 构建项目//全局安装 vue-clinpm install - g vue- cli//创建一个基于 webpack 模板的新项目vue init webpack my- project//cd 进入刚新建的项目文件(my-project)cd my- project// 运行npm run dev 2.vue-cli 使用axios...
2018-04-13 18:41:26
5608
原创 js对象深度拷贝、Object.assign()、Object.assign()复制非对象
把对象target1, target2,...合并到对象origin上 Object.assign(origin, target1, target2, ....);1.合并的是对象var origin = { a: 'a'},target1 = { a:'a1' b: 'b'},target2 = { c: 'c'}//执行O...
2018-03-11 14:30:57
9287
原创 微信小程序开发中的一些问题总结，无法跳转，input组件变高等
1.在代码正常执行的情况下wx.navigateTo或者wx.redirectTo跳转页面不生效 查看要跳转的页面是否是tabBar即tab栏中的页面，如果是需要用wx.swicthTab方法2.在反复保存调试的时候input等组件会出现突然变高的情况正常： 这是开发者工具渲染时的问题导致的，在真机上没有出现这个问题。可以忽略3.持续更新中......
2018-03-02 09:32:46
774
原创 微信小程序自定义公用提示弹层
微信小程序自定义的toast样式比较单一，而且不一定符合每个人的需求。比如以下这几种或者其他样式在小程序中实现上面的方法并不难，难点主要是如何实现像普通html中那样定义一个公用方法，然后每个页面都能复用。下面具体说明如何实现上图中的提示样式一、先上已经做好的项目结构，showToast文件夹即公用的提示文件，包含wxml, js，wxss三个文件1. showToast.wx...
2018-02-27 12:07:07
9327
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人