- 博客(28)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 原生js实现移动端点击、长按、左滑、右滑、上滑、下滑等事件模拟
github地址：https://github.com/xubaodian/touchEvent.git为什么要模拟这些事件？1、上述这些事件中，浏览器直接支持的事件只有点击，而其它事件使用频率也很高。2、移动端web原生点击事件会有300ms的延迟，因为用户肯能双击，为了判断用户是单击还是双击，所以会有这个延迟，这个延迟会衍生很多问题，例如点击穿透。所以我们可以不用原生的点击事件，而使用模...
2019-01-31 14:56:38
4281
4
原创 Vue源码解析（二）Vue的双向绑定讲解及实现
文章中的代码时阶段，可以下载源码测试一下。git项目地址：https://github.com/xubaodian/SimuVue项目使用webpack构建，下载后先执行：npm install安装依赖后使用指令：npm run dev可以运行项目。上篇文章，我们讲解了Vue的data属性映射和方法的重定义，链接地址如下:Vue源码解析（一）data属性映射和methods函数...
2018-12-30 19:45:34
570
原创 Vue源码解析（一）data属性映射和methods函数引用的重定义
使用Vue框架进行开发时，我们在option的data和methods中定义属性和方法，在调用时直接使用 vm.attr 或 vm.func()的形式，而不是用vm.data.attr或vm.methods.func()的方式。我们传入Vue的options对象一般为以下这种形式，{ data: { name: 'xxx' }, mounted() { //调用方...
2018-12-29 17:53:42
4099
原创 canvas实现 行人 走路的动画（完整实现）
先看下效果，然后再说如何实现，最终效果如下：我们知道动画其实是不同的图片循环替换，造成视觉上图片在动。我们制作这个动画的素材如下：从右至左，就是一个人的行走的所有动作，抬腿，迈步,脚落下，另一只脚迈步，然后循环如此。我们将图中的五个动作图截出来，循环播放，效果就如下：可以看出，这是一个原地踏步的动作，如果给图片加上位移，就是行走的效果。这里讲一个知识点:Css spirit。我...
2018-12-27 15:31:57
4593
原创 hybrid App原理介绍、环境搭建、打包（Cordova）及常见错误解析（windows环境）
因为最近需要调研Hybrid App开发技术，作为技术储备，后续项目上很可能用的到。我自己之前是基本没了解过Hybrid App开发的，也是从零开始。这篇文章就介绍，如何从零开始，然后一步一步把web App打包成Android应用的。hybrid App，Web App，native App定义1、Web appWeb App就是运行于网络和标准浏览器上，基于网页技术开发实现特定功能的应用...
2018-11-29 17:43:19
2952
原创 服务器推送消息方法总结及实现(java)
服务器推送消息方法总结及实现(java)最近在进行web开发时，有用到服务端推送消息这个功能，相信大家在平常开发时，也经常会有这种需求。本文对常用的几种服务器推送消息方法进行整理和总结，并实现使用流的方式推送消息（java）。服务器推送消息主要有一下几种方法：轮询http流websockethttp2.0下面对各个方法一一进行介绍。轮询轮询分为短轮询和长轮询。短轮询即浏览器...
2018-10-24 11:00:26
34320
3
原创 node + express 搭建代理服务器（附源码）
git地址:https://github.com/xubaodian/nodeProxy.git本文用node + express搭建代理一个服务器，现在一步一步讲解如何搭建。在正式讲解之前，聊下为什么要搭建代理服务器。代理服务器可以实现功能，主要应用如下。1.前端独立部署，现在前后端开发分离，部署分离是大趋势，自然需要一个静态资源服务器，当然，也可以直接将打包文件放在tomcat或apa...
2018-07-19 19:57:47
12041
2
原创 Spring boot，Spring Seesion，redis实现登录验证及共享session及接口权限管理
项目git地址：https://github.com/xubaodian/httpsecurity.git
2018-12-20 15:12:28
1811
原创 前端学习之路及前端架构的演进一些思考
前端学习之路及前端架构的演进一些思考最近这些年前端发展十分迅猛，各种框架，插件，组件库如雨后春笋，让人应接不暇。很多刚进去前端开发的同学可能会眼花缭乱，不知从何入手。这篇文章主要讲下我自身前端学习之路，以及项目中前端架构的演进过程中的一些知识点。和大多数人一样，学习过程是曲折的，这里写出来，给有过相似困惑的人一些参考。废话不多，现在就开始，我将学习划分了5个阶段，懵懂、初识、入门、深入和高级...
2018-12-14 17:45:47
1361
原创 javascript常用设计模式介绍，实现及实际应用（一）
javascript设计模式介绍，实现及实际应用（一）本文将介绍javascript中常用的设计模式原理和实现，并结合实例讲解其应用。本篇文章先介绍单例模式，策略模式，代理模式，发布订阅模式和命令模式，其它几种模式后续文章将继续介绍。1、单例模式单例模式就是一个实例在整个网页的生命周期里只创建一次，后续再调用实例创建函数的时候，返回的仍是之前创建的实例。在实际开发中应用十分广泛，例如页面中...
2018-11-24 11:25:27
1973
1
原创 JAVA双向队列实现（链表）
队列是很常见的一种数据存储结构，今天，介绍下如何用链表实现双向队列。首先定义节点接口如下：public interface Node<E> { //设置数据元素 public void setData(E o); //获取节点元素 public E getData();}根据需求不同，实现该接口，双向链表节点的实现如下：public clas...
2018-10-20 09:40:40
2160
原创 利用数组实现双向队列（JAVA源码）
本文的主要内容就是利用数组[]实现双向队列，当然，Java中有比较丰富的容器可以直接使用，实现类似的功能容器有助于我们更深入的学习好了解相关知识。现在就开始一步一步讲解如何实现。1、双向队列的功能首先，我们既然要实现该功能，就必然要把需求梳理清楚，我们要实现的容器到底有哪些功能。我们实现的队列主要功能如下：入队列（push）出队列（pop）队首入队列（unshift）队首出队列（sh...
2018-10-20 09:37:04
1483
原创 Vue客户端渲染和服务端渲染异同
本文比较服务端和客户端渲染的不同，并用实例验证，同时会讲解一些Vue服务端渲染的概念。本文不讲Vue服务端渲染的具体实现过程，需要学习服务端渲染的同学可以异步Vue服务端渲染官方教程地址： https://ssr.vuejs.org/，相信会比一般博客讲的更为清楚。官方教程同时也提供了Demo，地址如下：https://github.com/vuejs/vue-hackernews-2.0/ ，...
2018-09-20 18:15:18
7774
原创 String，StringBuilder，StringBuffer比较
String，StringBuilder，StringBuffer比较1、String是字符串常量，定义后String就不可变，对String的操作时，本质是生成了新的String对象。 StringBuilder和StringBuffer是字符串变量，对其操作直接修改变量本身。 所以字符串操作StringBuilder和StringBuffer要比String快。 例如： ...
2018-08-29 19:37:01
155
原创 新技术或语言学习方法总结
互联网或it行业知识技术更新换代很快，对从业人员的学习与适应能力要求很高。很多程序员经常会有学不动了这种感觉。尤其现在云计算、人工智能、大数据、区块链等概念层出不穷，各种语言和框架也是换了一茬又一茬，难免会让人头晕目眩。小编先后做过VC++，.net，java和web（甚至还焊过电路^.^|），技术栈也算换了一茬又一茬,这其中有的是因为换工作，有的是因为项目需要。不敢说精通某一块，至少都能满足工作...
2018-08-09 20:04:38
3179
原创 React和Vue组件的懒加载
懒加载，也可以成为按需加载，即页面、数据或者组件在需要加载的时候才进行加载，在开始只加载需要的最少的静态资源和数据信息，尽快的展示首屏页面。现在先不谈技术，谈谈为什么需要按需加载。有调查显示：页面的加载速度会影响客户的使用体验，加载时间每增加1s，可能都会造成一定比例的客户流失。具体的调查结果和详细数据这里不表，这应该是一个公认的事实了。现在考虑下面两种情况：1、网站在开始加载了所有请求，从...
2018-08-06 19:30:50
1540
原创 web开发知识总结（2） --前端优化知识总结
开发应用时，页面从加载到展现给用户的的这段时间很重要，如果时间过长，用户会失去耐心。那么，这段时间到底和什么相关呢。首先介绍下浏览器输入url到页面加载这个过程。简单来说就是向域名服务器发出请求，接收到ip，根绝ip向指定服务器请求资源，服务器处理后返回，最后浏览器加载资源。0’ height=’300’>上面的说的很简单，下面稍微详细的讲解下这个过程，大概可以分这么多步骤：1、在浏...
2018-07-31 12:02:29
184
原创 web开发知识总结（1）--数组方法详解（很详细）
熟练掌握js（1）–数组方法详解熟练掌握js是一个系列的文章，本人将会总结项目开发过程中比较常用的技能及知识，每个知识点会作为一篇文章呈现出来，力争讲解通俗易懂、深入浅出。数组方法详解就作为这个系列的第一篇。若果想和作者交流，请发信息至[email protected] javascript数组在开发中十分常用，其方法也很多，很多同学开始学习JavaScript时，对数组方法都会有些迷惑，今...
2018-07-30 13:54:27
1277
原创 Dubbo + zookeeper搭建分布式服务入门（带源码）
dubbo + zookeeper 搭建分布式服务入门dubbo是阿里开源的高性能RPC框架，框架图如下： 可以分为4个部分，注册中心，消费者，提供者和监控中心，这也是一般分布式服务的常见架构。本文作为dubbo入门例子，采用zookeeper作为注册中心，可分为两个部分，如下：- 搭建zookeeper注册中心 - 利用dubbo搭建分布式服务搭建zookeeper注册中心...
2018-06-08 17:35:47
6571
1
原创 RPC原理及JAVA实现
RPC java实例文章包括以下两个部分： - RPC基本原理 - RPC Java实例讲解废话不多说，现在讲讲RPC到底是什么RPC基本原理RPC全程Remote Procedure Call Protocol，即远程过程调用协议，它是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的协议。RPC采用客户机/服务器模式。请求程序就是一个客户机，而服务提供程...
2018-06-05 16:07:21
19104
4
原创 js跨域的几种实现方式
通过ajax请求服务器数据，默认情况下，只能请求或访问与包含它的页面位于同一个域中的数据，这种限制来源于浏览器的跨域安全策略（同源策略）。这种安全策略可以预防某些恶意行为。但是，某些合理党的跨域资源共享是合理的，也是非常重要的。目前来说，实现跨域的主要方法有两种，Cors和Jsonp。 1、Cors（Cross Origin Resource Share，跨域资源共享） Cors实现跨域的思想...
2018-04-09 18:34:00
6063
原创 JS模板字符串的简单实现
假设有字符串和对象如下let templateStr = 'i am {{name}},age {{age}},job {{job}} ';let data = { name:'xbd', age:18, job:'CTO'}设计函数templateFunc(str,data)，函数处理后的结果为console.log(templateFunc(st...
2018-03-17 22:32:27
17558
原创 基于Vue-Router和Vuex的页面访问权限控制
最近在用Vue做项目的时候，遇到前端页面的访问权限控制问题。参考了网上一些文章的思路，并且自己动手做了一个demo，项目github地址 应用场景如下：一个网站多个角色，例如admin（管理员）,super（超级客户）,guest（普通客户），不同权限的用户能访问的网页权限不同。如下图所示： 权限admin可看到admin.vue，SuperManager.vue，Guest.vue，权限...
2018-03-06 23:58:54
12251
8
原创 web中的事件委托
在前端开发中，我们经常碰到这样的应用场景，用列表（ul和li）展示许多条相似的数据，而且每条数据（dom）上都有类似的事件操作，例如线上商城购物车、招聘网站中招聘信息的展示等等，点击每条信息展示详细内容。如下图所示： 其代码如下： 如果在ul中的每个li都添加一个点击事件，不仅不方便，而且会影响网页性能。解决方法就是使用事件委托来定义点击事件。 事件委托的根本是根据浏览器事件的冒泡原...
2018-02-28 20:32:19
6521
原创 CSS垂直居中的几种方法
对于一个前端开发人员，元素居中在布局中相当常见，水平居中实现非常非常容易，如果是行内元素，设置text-align:center就行，如果是块级元素，通过设置边距margin:auto可实现水平居中。 垂直居中实现起来相对较为较为麻烦，不啰嗦，直接上干货。主要有下面几种方法： 1、绝对定位方法<div id="main"></div> #main{ ...
2018-02-26 11:20:43
6164
原创 javascript中继承的几种方式
JS中的常用继承方式继承是面对对象（OO）语言的非常重要的一个特性，Javascript中的继承和的C++，java等传统面向对象语言的继承是有些区别的。在ES6（class，extends）标准出来之前，Javascript没有官方的标准来实现继承，一般采用原型链等方式实现继承。下面将分别讨论ES6前后继承方式的不同。 ES6之前的几种继承方式 ES6之前，提到继承，首先想到的肯定是原型
2018-01-29 23:34:10
6009
原创 浅析CSS盒模型及box-sizing属性
W3C规定的盒模型如下：我们现在从外往内依次说明，最外层是margin，即外边距；往里是border，即边；继续往里是padding，即内边距；最里层是content，即内容区域；width和heigh是content的宽和高。用一个比喻来形容盒模型非常贴切。代码如下： 盒模型浅析 .container{
2018-01-28 12:07:36
6181
原创 如何使用promise，async await异步编程
作为一名web开发人员，基本都会使用Ajax向后台请求或发送数据。常常会碰到这样一种业务场景，某些数据处理操作会在几项请求后操作，而一般情况下不允许使用同步ajax请求（阻塞页面进程，可能会造成前端页面处于假死状态），如何实现？业务背景，有三个请求分别地址分别为url1，url2，url3，现要求：请求url1返回数据后，进行url2请求，url2返回数据后进行url3请求。实现:1、
2018-01-15 19:30:58
6673
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人