- 博客(34)
- 收藏
- 关注
RSS订阅原创 canvas实现环形进度条的效果
实现效果：实现逻辑：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 Canvas 圆形进度条并显示数字百分比</title></head><body> <canvas id="canvas" width="250" height="250" style="backgrou
2020-12-17 15:04:28
262
3
原创 es5继承 es6继承
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script&g.
2020-08-20 00:55:58
129
原创 深拷贝由浅入深
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> v.
2020-08-19 10:47:22
194
原创 3、先序深度优先遍历和广度优先遍历
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <ul class="contai.
2020-08-18 17:28:01
169
原创 2、防抖和节流
防抖：动作绑定事件，动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件。例如用户频繁点击，只需要响应一次即可节流： 动作绑定事件，动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。例如监听窗口resize和scroll事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&.
2020-08-18 14:13:40
114
原创 1、[“1“, “2“, “3“].map(parseInt)
目录1、先看map方法map返回一个新数组，其结果是数组中每个元素调用回调函数后返回的结果array.map(function(currentValue,index,arr), thisValue)可以看到callback接口三个参数currentValue是数组中正在处理的当前元素的值 index是正在处理的当前元素的下标 arr是map方法被调用的数组const arr = [1, 2, 3];arr.map((num) => num + 1);// [2, 3,
2020-08-17 23:18:07
222
原创 手动配置webpack4.x配置打包vue项目脚手架
因为webpack4.x配置文件已经默认放到了node_modules里面，所以便动手基于wepack4.x手动配置了一个vue的脚手架，功能跟vue-cli类似，最主要的区别是将打包文件如：js、html、css放到了根目录，基本上是有了一个脚手架的雏形，更多细节还在优化中，接下来看看具体的配置吧。首先在根目录创建了一个build文件，里面有三个文件：webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js接下来看一下三个文..
2020-08-17 22:12:34
682
原创 vue-study-2 剖析Vue原理&实现双向绑定MVVM
几种实现双向绑定的做法实现数据绑定的做法有大致如下几种：发布者-订阅者模式（backbone.js）脏值检查（angular.js）数据劫持（vue.js）发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是 vm.set('property', value)，这里有篇文章讲的比较详细，有兴趣可点这里
2017-05-20 00:31:45
391
原创 vue-study-1 mvx模式
1、首先了解一下mvx框架模式MVX框架模式：MVC+MVP+MVVM1、mvc model（模型）+view（视图）+co'n'roller（控制器），主要基于分层，让彼此的职责都分开。view通过controller来与model联系，controller事view和model的协调者，view和model不直接联系，基本的联系都是单向的。用户通过控制器controller来操作模
2017-05-20 00:13:40
403
原创 es6-1（let和const命令）
let和const和es5差不多，都是定义变量或者常量的声明命令区别：1、let，声明的变量仅在块级作用域内有效{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报
2017-05-16 14:01:15
219
原创 浮层模板
//屏蔽输入，显示蒙板function showMask(idName) { var obj = document.getElementById(idName); obj.style.width = document.body.clientWidth; obj.style.height = document.body.clientHeight; obj.styl
2017-05-16 13:54:17
303
原创 模拟基于ajax调后台接口的json数据
因为是模拟json数据，json文件要放到本地服务器上面（xmapp，tomact，Apache）例如我放到了xmapp上面启动xmapp，我存放的json数据是：在网址直接访问然后我ajax请求的时候这样就能模拟请求后台返回数据ps：项目要全部都放到同一个服务器上面哈，不然会有跨域问题
2017-05-15 18:15:16
1384
原创 fixed弹窗禁止底部页面滑动
1.根据网上大多数的写法当弹窗出现的时候给body和html设置{overflow:hidden;}，然后当关闭弹窗的时候{overflow：auto；}，出现了一个问题，当弹窗关闭的时候在6sp上面页面滑动一顿一顿的2.所以采用iscroll.js做底部页面滑动处理，外层的div设置position：absoule；这样就解决了底部页面滑动的问题
2017-05-08 10:50:35
1578
原创 input的placeholder设置字体颜色
具体的写法：:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; font-size: 0.56rem;opacity: 0.8;}::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; font-size: 0.56rem
2017-05-08 10:46:57
478
原创 Uncaught TypeError: Cannot read property 'trigger' of undefined（zepto.js）
去掉pointermove pointerdown pointerstart原因：点击tap，touchstart和pointerstart都执行了，tap里面代码执行了两次，仔细看了下，首先点击后触发了两次，说明被绑定了两次事件，然后查看下zepto的touch.js代码，发现它绑定了三个事件touchend MSPointerUp pointerup，touchend是触摸相关
2017-05-08 10:38:00
5341
原创 如何运行一个vue工程
如何运行一个vue工程在师兄的推荐下入坑vue.js ，发现不知如何运行GitHub上的开源项目，很尴尬。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了朦朦胧胧的认知，因此将环境搭建过程分享给大家。 首先，列出来我们需要的东西： node.js环境（npm包管理器）vue-cli 脚手架构建工具cnpm npm的淘宝镜像 安装no
2017-05-07 23:24:55
1526
原创 webSocket、Ajax轮询、长轮询(long poll)
1、ajax轮询 ，ajax轮询 的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。2、long poll 其实原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消 息才返回或超时，返回完之后，客户端再次建立连接，周而
2017-04-25 15:51:12
390
转载 Request 和 Response
Request 和 Response 对象起到了服务器与客户机之间的信息传递作用。Request 对象用于接收客户端浏览器提交的数据，而 Response 对象的功能则是将服务器端的数据发送到客户端浏览器。一、Request对象的五个集合：QueryString：用以获取客户端附在url地址后的查询字符串中的信息。 例如：stra=Request.QueryStrin
2017-04-25 10:52:56
221
转载 使用Postman玩转接口测试
（一）前言：之前搞自动化接口测试，由于接口的特性，要验证接口返回xml中的数据，所以没找到合适的轮子，就自己用requests造了个轮子，用着也还行，不过就是case管理有些麻烦，近几天又回头看了看postman也可以玩的很溜，所以和大伙分享下，但是postman也有自己的弱点，还是需要根据自己项目的特点来选择适合的工具。废话少说，开始...（二）安装和介绍1、首先安装ch
2017-04-05 10:05:49
543
原创 用nodejs搭建渠道跳转页面分发统计服务
用nodejs搭建渠道跳转页面分发统计服务，统计的数据主要在crate索引库中插入。 1、先介绍一下crate库 Crate Data 是一个开源的大规模的可伸缩的数据存储系统，无需任何系统管理需求。提供强大的搜索功能。用于存储各种表格数据、 非结构化数据和二进制对象，并可通过 SQL 进行检索。易于安装和使用，支持高可用性和实时大规模并行访问和处理。Crate 特别适合 用于 Docker
2017-04-01 17:09:47
578
原创 gulp学习之四------编译 SASS
安装npm install gulp-ruby-sass基本用法你可以 下载所有示例代码 或 在线查看代码// 获取 gulpvar gulp = require('gulp')// 获取 gulp-ruby-sass 模块var sass = require('gulp-ruby-sass')// 编译sass// 在命令行输入 gulp sass 启动
2017-03-22 14:57:43
542
原创 gulp学习之四------编译 LESS
安装npm install gulp-less基本用法你可以 下载所有示例代码 - 或在线查看代码// 获取 gulpvar gulp = require('gulp')// 获取 gulp-less 模块var less = require('gulp-less')// 编译less// 在命令行输入 gulp less 启动此任务gulp.task(
2017-03-22 14:56:42
649
原创 gulp学习之四------压缩图片
一、安装 gulp-imagemin 模块提示：你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作。学习使用命令行在命令行输入npm install gulp-imagemin安装成功后你会看到如下信息：(安装时间可能会比较长)gulp-imagemin@2.2.1 node_modules/gulp-imagemin├── o
2017-03-22 14:55:30
394
原创 gulp学习之四------压缩 CSS
一、安装 gulp-minify-css 模块提示：你需要使用命令行的 cd 切换到对应目录后进行安装操作。学习使用命令行在命令行输入npm install gulp-minify-css安装成功后你会看到如下信息：(安装时间可能会比较长)gulp-minify-css@1.0.0 node_modules/gulp-minify-css├── obje
2017-03-22 14:53:52
381
原创 gulp学习之三------压缩 js
一、新建一个 gulpfile.js 文件chapter2└── gulpfile.js二、在 gulpfile.js 中编写代码// 获取 gulpvar gulp = require('gulp')require() 是 node （CommonJS）中获取模块的语法。在 gulp 中你只需要理解 require() 可以获取模块。
2017-03-22 14:52:21
562
原创 gulp学习之二
简介：gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 JavaScript/coffee/sass/less/html/image/css 等
2017-03-22 11:34:47
338
原创 Gulp学习之一
我们先说说 平时web开发遇到的一些场景 和 苦恼无奈的情况JavaScript和CSS的版本问题我们都知道 JavaScript和CSS属于静态文件，如果地址不变，浏览器会缓存这些文件，那就意味着当我们需要改JavaScript或者CSS文件的时候，即使我们后端改了，那么客户端也是看不到，这个在“JS一统天下”的时代是不可接受的，因为现在几乎所有的WEB 程序都严
2017-03-22 11:31:28
251
转载 如何让页面打开速度更快
页面的打开速度对网站的优化有极大的意义，如果打开一个页面一直处于白屏状态，比如TTFB超过5秒，可能大部分人都会把它关掉。或者是页面加载出来了，但是比较慢，页面显示不完整，标签栏一直在转圈，页面长期处于不可交互的状态，这也是一种很不好的体验。如何评价一个页面打开得快不快，可以用两个指标描述，一个是ready的时间，另一个是load的时间。这个可以从Chrome的控制台看
2017-03-21 09:34:12
771
转载 用express搭建一个简单的博客系统
Express 简介Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站，它有一套健壮的特性，可用于开发单页、多页和混合Web应用。此文介绍如何使用Express搭建多人博客。作者： nswbmw 项目地址： N-blo
2017-03-14 20:56:18
3762
转载 代理服务器与反向代理服务器的区别
前面把nodejs部署到阿里云服务器上面用到里nginx反向代理，所以就去查了一下反向代理的概念，下面就是查到的解释：说到代理服务器，大部分人都应该比较熟悉了。记得在学校的时候因为校园网无法访问国外网站，因此经常使用代理来访问国外的网站。但是提到反向代理服务器可能大部分人就比较陌生，对于一般的代理服务器与反向代理服务器的区别估计也不是那么清楚。因工作需要就研究了一下，搞清了是怎么回
2017-03-14 11:29:54
299
原创 把Node.js项目部署到阿里云服务器（CentOs）
最近用node.js开发了一个web项目，先打算随便写个简单的小服务部署到我自己的阿里服务器上，测试一下。不知道如何把node.js项目部署到阿里云服务器，综合了网上的说法以及自己一点点实验。把教程整合了一下，做下分享。
2017-03-12 22:54:08
2845
转载 git创建本地仓库并且上传到github
git软件下载地址：https://git-scm.com/download/1. 在GitHub上建立项目登录GitHub后，你可以在右边靠中那里找到一个按钮“New Repository”，点击过后，填入项目名称、说明和网址过后就可以创建了，然后会出现一个提示页面，记下类似git@github.com:XXX/XXX.git的地址，这个就是你这个项目的地址了。
2017-03-06 15:39:49
6436
转载 git常用命令
Git常用命令查看、添加、提交、删除、找回，重置修改文件git help # 显示command的helpgit show # 显示某次提交的内容 git show $idgit co -- # 抛弃工作区修改git co . # 抛弃工作区修改git add # 将工作文件修改提交到本地暂存区git add . # 将所有修改过的工作文件提交暂存
2017-03-06 15:20:21
218
原创 js实现类似淘宝继续拖动查看详情的弹簧效果
主要的思路是利用iscroll.js+css3实现该效果，首先在body放置两个box，每个box的宽高都是100%，给每个box初始化iscroll，检测每个box里面滑动区域的位置，当第一个box里面的滑动区域滑到最底部的时候，继续滑动，box1上划一屏的距离，box2随之上划一屏的距离，反之，box2里面滑动区域下滑的时候类似，代码部分：html代码<div class="detail-box
2017-03-06 10:29:45
2290
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人