许保殿的博客

作为一名web开发人员，基本都会使用Ajax向后台请求或发送数据。常常会碰到这样一种业务场景，某些数据处理操作会在几项请求后操作，而一般情况下不允许使用同步ajax请求（阻塞页面进程，可能会造成前端页面处于假死状态），如何实现？业务背景，有三个请求分别地址分别为url1，url2，url3，现要求：请求url1返回数据后，进行url2请求，url2返回数据后进行url3请求。实现:1、

使用Vue框架进行开发时，我们在option的data和methods中定义属性和方法，在调用时直接使用 vm.attr 或 vm.func()的形式，而不是用vm.data.attr或vm.methods.func()的方式。我们传入Vue的options对象一般为以下这种形式，{ data: { name: 'xxx' }, mounted() { //调用方...

前端学习之路及前端架构的演进一些思考最近这些年前端发展十分迅猛，各种框架，插件，组件库如雨后春笋，让人应接不暇。很多刚进去前端开发的同学可能会眼花缭乱，不知从何入手。这篇文章主要讲下我自身前端学习之路，以及项目中前端架构的演进过程中的一些知识点。和大多数人一样，学习过程是曲折的，这里写出来，给有过相似困惑的人一些参考。废话不多，现在就开始，我将学习划分了5个阶段，懵懂、初识、入门、深入和高级...

javascript设计模式介绍，实现及实际应用（一）本文将介绍javascript中常用的设计模式原理和实现，并结合实例讲解其应用。本篇文章先介绍单例模式，策略模式，代理模式，发布订阅模式和命令模式，其它几种模式后续文章将继续介绍。1、单例模式单例模式就是一个实例在整个网页的生命周期里只创建一次，后续再调用实例创建函数的时候，返回的仍是之前创建的实例。在实际开发中应用十分广泛，例如页面中...

通过ajax请求服务器数据，默认情况下，只能请求或访问与包含它的页面位于同一个域中的数据，这种限制来源于浏览器的跨域安全策略（同源策略）。这种安全策略可以预防某些恶意行为。但是，某些合理党的跨域资源共享是合理的，也是非常重要的。目前来说，实现跨域的主要方法有两种，Cors和Jsonp。 1、Cors（Cross Origin Resource Share，跨域资源共享） Cors实现跨域的思想...

在前端开发中，我们经常碰到这样的应用场景，用列表（ul和li）展示许多条相似的数据，而且每条数据（dom）上都有类似的事件操作，例如线上商城购物车、招聘网站中招聘信息的展示等等，点击每条信息展示详细内容。如下图所示： 其代码如下： 如果在ul中的每个li都添加一个点击事件，不仅不方便，而且会影响网页性能。解决方法就是使用事件委托来定义点击事件。 事件委托的根本是根据浏览器事件的冒泡原...

最近在用Vue做项目的时候，遇到前端页面的访问权限控制问题。参考了网上一些文章的思路，并且自己动手做了一个demo，项目github地址 应用场景如下：一个网站多个角色，例如admin（管理员）,super（超级客户）,guest（普通客户），不同权限的用户能访问的网页权限不同。如下图所示： 权限admin可看到admin.vue，SuperManager.vue，Guest.vue，权限...

对于一个前端开发人员，元素居中在布局中相当常见，水平居中实现非常非常容易，如果是行内元素，设置text-align:center就行，如果是块级元素，通过设置边距margin:auto可实现水平居中。 垂直居中实现起来相对较为较为麻烦，不啰嗦，直接上干货。主要有下面几种方法： 1、绝对定位方法<div id="main"></div> #main{ ...

W3C规定的盒模型如下：我们现在从外往内依次说明，最外层是margin，即外边距；往里是border，即边；继续往里是padding，即内边距；最里层是content，即内容区域；width和heigh是content的宽和高。用一个比喻来形容盒模型非常贴切。代码如下：          盒模型浅析            .container{         

JS中的常用继承方式继承是面对对象（OO）语言的非常重要的一个特性，Javascript中的继承和的C++，java等传统面向对象语言的继承是有些区别的。在ES6（class，extends）标准出来之前，Javascript没有官方的标准来实现继承，一般采用原型链等方式实现继承。下面将分别讨论ES6前后继承方式的不同。 ES6之前的几种继承方式 ES6之前，提到继承，首先想到的肯定是原型

文章中的代码时阶段，可以下载源码测试一下。git项目地址：https://github.com/xubaodian/SimuVue项目使用webpack构建，下载后先执行：npm install安装依赖后使用指令：npm run dev可以运行项目。上篇文章，我们讲解了Vue的data属性映射和方法的重定义，链接地址如下:Vue源码解析（一）data属性映射和methods函数...