- 博客(80)
- 收藏
- 关注
RSS订阅原创 开发PC端页面布局遇到的问题总结
Element.getBoundingClientRect()Element.getBoundingClientRect()方法返回元素的大小及其相对于视口左上角的位置。返回的对象包含一组只读属性——top, bottom, left, right，单位为像素px。const ele = document.getElementById('target')const top = ele.get...
2019-06-04 11:58:58
898
转载 JavaScript判断滚动条是否滑动到页面底部
判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。scrollTop为滚动条在Y轴上的滚动距离。clientHeight为内容可视区域的高度。scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == ...
2019-01-21 16:51:28
1686
原创 零碎小知识
一个<div>和一个<i>同一个层级使用vertical-align: middle;可以竖直方向对齐
2019-01-16 15:27:14
284
原创 小程序开发
小程序开关选择器switch小程序默认的开关比较大，可以设置样式修改开关的大小。<switch class="pull-right" style="zoom:.8;" checked />
2019-01-08 17:43:49
191
原创 React获取底层DOM节点ref属性
在React中，有时需要访问底层DOM节点来执行一些命令式操作。class Focus extends React.Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this) } handleClick() { this.element.f...
2018-10-26 14:12:32
2298
原创 Cookie和Session的运行机制
Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份，相应的也增加了服务器的存储压力。HTTP协议是无连接无状态的协议。 无连接是指限制每次连接只处理一个请求，服务器处理完客户端的请求，并收到客户端的应答后就断开连接，这样可以节省传输时间。无状态是指协议对于事务处理没有记忆能力，如果后续需要处理前面的信息，则必须重传，这样可能导致每次连接传送的数据量增大...
2018-10-12 11:28:37
328
原创 React服务端渲染
服务端渲染与客户端渲染的不同服务端渲染的优点渲染速度快，页面响应时间快，并且应该“按需”对页面进行渲染—“首次加载/首屏”。即服务端渲染的优势在于：由中间层( node端 )为客户端请求初始数据、并由node渲染页面。客户端渲染路线：1.请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待js文件下载...
2018-10-08 17:03:29
235
原创 关于ES6箭头函数的使用误区
function add (a, b) { return a + b;}使用箭头函数可以这样写：const add = (a, b) => a+b;// 相当于const add = (a, b) => { return a + b; }箭头函数的使用方法：当没有传递参数或者参数多于一个时，使用圆括号把参数包围起来，如() => {...}，(a, b, c)...
2018-09-29 15:28:02
361
原创 Express - 基于 Node.js 平台的 web 应用开发框架 总结
Web应用Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。API丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件，让你创建健壮、友好的 API 变得既快速又简单。性能Express 不对 Node.js 已有的特性进行二次抽象，我们只是在它之上扩展了 Web ...
2018-09-05 14:27:48
813
原创 小程序获取当前页面路径及参数
小程序获取当前页面export function getCurrentPageUrl() { const pages = getCurrentPages() const currentPage = pages[pages.length - 1] const url = `/${currentPage.route}` return url}小程序获取当前页面路径及参数...
2018-09-04 14:20:35
14356
原创 React项目服务端渲染
客户端渲染和服务端渲染客户端渲染：页面在 JavaScript，CSS 等资源文件加载完毕后开始渲染，路由为客户端路由，也就是我们经常谈到的 SPA（Single Page Application）。 服务端渲染：页面由服务端直接返回给浏览器，路由为服务端路由，URL 的变更会刷新页面，原理与 ASP，PHP 等传统后端框架类似。 同构：英文表述为 Isomorphic 或 Univers...
2018-08-29 12:33:44
323
原创 实现文字围绕着图片显示
使用float布局可以实现文字围绕着图片显示 如果是图片在左边，文字在右边围绕着图片显示，按照正常的布局写html<div class="main"> <div class="pull-left"> <img src="...." /> </div> <div class=&
2018-08-27 17:06:10
1173
原创 关于JavaScript装饰器相关知识点
Object.defineProperty(obj, prop, descriptor)该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。Object.getOwnPropertyDescriptor(obj, prop)该方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）如果指定的属...
2018-07-16 17:09:38
207
原创 FileReader的使用方法
根据MDN文档的阐释 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。 其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行moz...
2018-07-13 15:52:58
25589
原创 字符串ASCII码的常用方法
charCodeAt(index)index。必需，字符串中某个位置的数字，即字符在字符串中的索引。 可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。 如果index是负数或者大于字符串的长度，则返回NaN。var string = 'Hello World';console.log(string.charCodeAt(0)); //...
2018-07-10 10:54:01
9285
原创 为不同项目设置不同的git账号
一开始在电脑安装git的时候，按照网上的各种教程安装完成后，就设置了全局的git用户，就是说所有的git项目都会使用这个用户名和邮箱，如下设置的：git config --global user.name 'Username'git config --global user.email 'UserEmail'可以使用git config --list 查看当前项目配置的git用户...
2018-07-04 10:32:37
1016
1
原创 JavaScript数据结构与算法——排序算法
冒泡排序冒泡排序是将相邻元素进行比较，如果前面的元素大于后面的元素，则交换这两个元素的位置，进行多轮比较排序后，数组的元素按照从小到大的顺序排列完成。function ArrayList() { var array = []; this.insert = function(item) { array.push(item); }; this.t...
2018-06-25 17:09:22
266
原创 JavaScript数据结构与算法——字典Dictionary
创建一个字典function Dictionary() { var items = {}; this.has = function(value) { return value in items; }; this.set = function(key, value) { items[key] = value; };...
2018-06-22 16:52:19
246
原创 JavaScript数据结构与算法——集合Set
JavaScript中的集合 数据结构——SetES6提供了新的数据结构Set，它类似数组，不同的是集合Set中每个元素都是唯一的，没有重复的值。 Set本身是一个构造函数，可以实例化一个Set数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x =&gt; s.add(x));for (let i of s) { ...
2018-06-22 15:45:23
465
原创 学习JavaScript数据结构与算法
栈(Stack)栈是一种遵循后进先出（LIFO, Last In First Out）原则的有序集合。新添加或者待删除的元素都保存在栈的末尾，称作栈顶，另一端叫做栈底。创建一个类来表示栈，首先先声明这个类：function Stack() { // 声明各种属性和方法}为栈声明如下的方法：push(element(s))：添加一个（或几个）新元素到栈顶。pop()...
2018-06-21 14:56:04
1026
原创 关于浏览器缓存 你知道多少？
浏览器第一次请求资源时，必须下载所有的资源，然后根据响应的header内容来决定，如何缓存资源。可能采用的是强缓存，也可能是弱缓存。强缓存 本地缓存 状态码200 不发送请求 根据Expire或Cache-Control（优先级高于Expires），让原始服务器为文件设置一个过期时间，在多长时间内可以将这些内容视为最新的，判读是否命中强缓存 Memory cache 将资源存到内存中，...
2018-06-11 11:12:17
2275
原创 H5开发实践-内容总结
盒模型元素宽度的计算方式IE没有标准盒模型元素宽度 = width + padding + border盒子总宽度 = 元素宽度 + marginCSS3中增加了一个计算盒模型的css属性box-sizingbox-sizing: content-box | padding-box | border-box;默认值：content-box为了避免盒模型大小变化造成网页排...
2018-06-04 11:54:42
2720
原创 JavaScript中数组常用的方法总结
sort() 对数组中的元素进行排序，返回排序后的数组sort()对数组元素进行排序，并返回排序后的数组。 参数：可选，规定排序方式的比较函数 默认情况下sort()方法没有传比较函数作为参数的话，默认按字母升序，如果不是元素不是字母形式的字符串的话，会调用toString()方法将元素转化为字符串的Unicode(编码)位点，然后再比较字符。比较函数会包含两个参数，这两个参数就是数组...
2018-06-01 11:40:53
250
原创 阶段性前端整理总结
请求头X-Requested-With这个请求头是用来判断一个请求是传统的HTTP请求，还是Ajax请求，Ajax请求一般都会带上X-Requested-With头域，默认可能会设置X-Requested-With为XMLHttpRequest。但用户客户端也可以设置它的值，HttpRequest对象.setRequestHeader("X-Requested-With","任意字符串")，可...
2018-05-14 12:41:00
337
原创 mac中bash和zsh终端切换方法和zsh配置
bash命令行工具是mac自带的，在网上查找自行安装oh-my-zsh，然后想运行命令的时候突然发现报错了zsh: command not found: npmnpm命令没有找到，在之前bash中是因为在 .bash_profile 中配置了环境变量，所以可以自由自在地使用npm各种命令，在使用zsh shell时，.zshrc 没有配置环境变量所以就报错了。.zshrc配置环境变...
2018-04-25 15:21:59
20901
原创 使用React实现选择城市三级联动组件
以下代码是初期写的代码，后来对代码进行优化，解决了初期的bug。完整的选择城市三级联动组件可以参考我的github项目中的代码，这是后期调试成功上传上去的React选择城市三级联动组件<SelectArea allAreaInfo={allAreaInfo} province={province} city={city} district={district} cancel={thi...
2018-04-08 11:21:23
8029
原创 移动端web开发适配方法--使用rem
移动端web页面的特点1.跑在手机端的web页面（也叫作H5页面吧，因为对于手机而言，它是兼容所有HTML5新特性的）； 2.跨平台，web页面开发代码不仅可以在PC端跑，也可以在手机端跑，包括安卓和IOS； 3.基于webview（其实就是我们移动终端开发技术的一个组件，可简单理解为一个浏览器，我们给它一个URL，它就可以打开并显示在手机端的浏览器）； 4.告别IE，拥抱webkit；...
2018-03-26 23:04:47
975
原创 node版本更新和npm版本更新
node版本更新查看node版本 node -v查看node的安装路径 where node在github查找gnvm并下载，把下载后对应系统位数的exe执行文件拷贝到node的安装目录中打开cmd控制台，gnvm update latest 安装最新版本node把node的exe文件拷贝到node的安装目录中npm版本更新npm install -g np...
2018-03-09 23:12:43
16759
原创 前端基础总结
CSS实现文本垂直居中1. 父元素设置table布局，子元素设置单元格table-cell布局 .box1 { display: table; } .child1 { display: table-cell; vertical-align: middle; ...
2018-03-06 13:10:01
288
1
原创 react-redux connect的使用
actionscounterconst increment1 = ()=> { return { type: 'INCREMENT_COUNTER', }};const decrement1 = ()=> { return {type: 'DECREMENT_COUNTER'}};module.exports = { ...
2018-03-05 14:17:11
788
原创 前端工作总结
Redux学习Redux是一个非常好的状态管理器。Promise在使用promise时，如果使用new实例化一个Promise对象，传递的参数是一个函数，这时这个函数在new实例化时就已经执行了，这是需要引起注意的细节。所以，我们在使用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数。const handleFn = function() { ret...
2018-03-02 16:49:34
2800
原创 前端开发小总结
减少多重if…else判断为了后期测试调试方便，可以先分析业务，把多个if…else判断分成下面几个部分去分别判断： 1. 空值判断 2. 业务判断 3. 状态判断立即执行函数var a = 2;(function IIFE(global) { var a = 3; console.log(a); // 3 console.log(global...
2018-02-06 10:31:41
266
原创 微信小程序客服消息解密
const crypto = require('crypto');const decodePKCS7 = function (buff) { let pad = buff[buff.length - 1]; if (pad 1 || pad > 32) { pad = 0; } return buff.slice(0, buff.length - pad);};//
2018-01-19 15:59:36
2369
原创 写在那时
前几天去大学城里找我的小曼琦聚聚，又见了一个一年多没见的初中同学，她热情招待我并带我去到处玩，下午分别的时候仍坚持陪我搭地铁一直到公交车站，在地铁里还把位置让给我坐，笑着说起当年各种的点点滴滴，脑海中浮现出一幅幅温暖的画面。那么多年过去了，那些我以为没人会去记住的小习惯在隐约间被提及，感觉就像是小时候拿到奖状准备给大人一个惊喜时却突然被发现时的诧异与感动。总会在某个安静的时刻想起一些人一些事，就像有
2017-12-31 23:32:39
245
原创 使用node.js生成后端可以拖动的拼图验证码
使用npm包canvas在后端绘制一张背景图片，然后在这张背景图片中截取一部分作为拼图，让用户移动拼图到正确的位置，同时将此拼图所截取的区域用一个空白的区域覆盖。import express from 'express';const Canvas = require('canvas');const path = require('path');const router = express.Rout
2017-12-31 22:22:00
1653
原创 Canvas 基本用途
canvas标签类似img，可以设置width属性和height属性，如果没有设置，canvas画布的默认宽高是300 * 150。canvas只有width和height这两个属性。 使用方法：<canvas id="canvas" width="200" height="120"></canvas>
2017-12-29 00:13:21
3278
原创 flex布局justify-content属性和align-items，align-self属性
justify-content（在父元素设置） 设置弹性盒子元素在主轴（横轴）的对齐方式。取值：justify-content: flex-start | flex-end | center | space-between | space-around;flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐，后面的元素接着第一个元素进行排列。flex-end: 弹性
2017-11-17 15:41:19
42855
原创 谈谈JavaScript异步操作Promise
Promise是一个构造函数var p = new Promise(function(resolve, reject) { // 异步操作 setTimeout(function() { console.log('success'); resolve('async data'); }, 2000);}).then((data) => {
2017-11-16 09:54:25
433
原创 Node.js生成图形验证码--captchapng/ccap/trek-captcha
captchapng 是一个使用base64编码，只能生成数字验证码的node模块使用npm安装captchapngnpm install --save captchapng可以通过node.js的http模块搭建服务器，设置请求的接口地址，然后使用captchapng生成图形验证码返回给客户端；var http = require('http');var captchapng = require
2017-11-15 17:20:44
2869
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人