- 博客(22)
- 收藏
- 关注
RSS订阅转载 vue实现菜单权限控制
大家在做后台管理系统时一般都会涉及到菜单的权限控制问题。当然解决问题的方法无非两种——前端控制和后端控制。我们公司这边的产品迭代速度较快，所以我们是从前端控制路由迭代到后端控制路由。下面我会分别介绍这两种方法的优缺点以及如何实现（不熟悉vue-router API的同学可以先去官网看一波API哈）。我先简单说下项目的需求：如下图所示，有一级菜单和二级菜单，然后不同的人登录进去会展示不...
2019-01-20 17:43:00
425
转载 webpack之深入浅出externals
我们通常在做项目时可能会把第三方库打包到bundle中，比如下面这张图如果不想把第三方库打包到bundle中，这就有了externals。官方的使用externals比较简单，只需三步——1.在HTML中引入第三方库的cdn2.在webpack中配置externalsexternals: { jquery: "jQuery",}3.在j...
2017-12-03 01:03:00
529
转载 webpack之前端性能优化（史上最全，不断更新中。。。）
最近在用webpack优化首屏加载性能，通过几种插件之后我们上线前后的速度快了一倍，在此就简单的分享下吧，先上个优化前后首屏渲染的对比图。可以看到总下载时间从3800ms缩短到1600ms。我们在用webpack时一般都会选择多入口文件吧，为的就是将自己的源码跟第三方库代码分离。这是之前的代码，entry: { entry: './src/main....
2017-12-01 21:18:00
220
转载 webpack插件url-loader使用规范
其实说到性能优化，他的范围太广了，今天我们就只聊一聊通过webpack配置减少http请求数量这个点吧。简单说下工作中遇到的问题吧，我们做的一个项目中首页用了十多张图片，每张图片都是一个静态资源，所以都会有http请求，为了减少请求，我们可以通过base64编码的方法来展示图片。webpack中有一个包叫做url-loader，他可以将html以及css中的图片打包成base64，但...
2017-11-20 19:48:00
314
转载 移动端布局最佳实践（viewport+rem）
通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别)，我们现在来总结一下如何实现一个最佳方案。之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配，如下图但是这个可能不会太精准，比如我的设备布局viewport可能是370px，这样只能使用320这一版本。而事实上，他们的viewport并不相同，所以他们的布局也得不一样。...
2017-07-20 18:33:00
177
转载 移动端em与rem区别
rem与em都是相对单位，我们使用它们的目的就是为了适应各种手机屏幕。rem是根据html根节点来计算的，而em是继承父元素的字体。比如下面一个demo<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="view...
2017-07-19 19:57:00
179
转载 浅谈移动端三大viewport
我们通常在写移动端页面时，往往都会在html页面中加入这样一段话<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">可能我们只知道这三个字段的含义（视口宽度等于设备宽度，屏幕缩放为1，禁止用户缩放），但是为什么要这么写，其原理又是什么呢？我们...
2017-07-17 17:56:00
88
转载 如何使用vuejs过滤器
大家再使用vue做项目时，查询功能当然必不可少，这就得使用vue强大的filter啦。其实vue内置的两个属性filterBy和orderBy已经能满足部分需求了，但是她更大的的魅力在于自定义filter（之后的文章中会分享），正好我最近做的项目中用到了这个。先给大家看下需求吧。如下图，这是一个通讯录页面，当我们在搜索栏中输入关键字时需要展示相应的员工，同时还得去掉A、B这样的字母索引，...
2017-06-06 21:31:00
107
转载 如何在vuejs中抽出公共代码
当我们在使用vue构建中大型项目时，通常会遇到某些经常用的方法以及属性，比如说搭建一个员工管理系统，请求的url需要一个共同的前缀，或者在某几个view中需要用到时间，这个时间是通过某方法格式化之后的等等，如果每次用到都写共同的代码，那样如果之后有变动的话维护起来会非常麻烦。所以我们就得想办法抽出公共代码，因为vue是组件化开发，我们就会很自然的与es6的module模块化联系到一起...
2017-06-06 20:09:00
225
转载 如何在sublime中使用sftp
在开发中我们通常会遇到一个问题——如何通过一款编辑器(或者IDE)便捷的同步线上代码。目前比较热门的编辑器有sublime，atom等，他们都有sftp功能，鉴于本人更喜欢用轻量级的编辑器，那我就在这里分享下sublime的sftp吧。首先确保sublime中安装了sftp插件，不知道怎么安装的可以看我的http://www.cnblogs.com/ssh-007/p/4330...
2017-06-05 19:41:00
211
转载 本地更新代码同步至github仓库
昨晚在家里写了一个demo放到github上，然后今天晚上来公司准备搞一下，但是git pull下来在本地修改之后push不到github上，然后发现公司电脑上并没有access权限，然后想起来还没配置ssh key。简单说下配置步骤吧——1.首先进入我的demo目录，让他自动生成一下ssh key:ssh-keygen -t rsa -c "xxxxx" 这里填写自己的git...
2017-03-28 21:48:00
185
转载 shell配置环境变量
我们在使用Xshell开发机时往往会遇到一些问题，比如使用某些命令他会报command not found，，出现这种情况的原因是我们必须要配置一下环境变量，这样就可以在任何path中访问了。这就需要我们写一个shell脚本，#! bin/shecho $PATH;echo 'add nodejs's bin';export PATH = /search/xxxx...
2016-09-01 11:44:00
274
转载 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)
实现css水平垂直居中的方法有很多，在这里我简单的说下四种比较常用的方法：1.使用CSS3中的Flex布局对于flex，我们要了解的是它是一个display的属性，而且必须要给他的父元素设置flex属性(flex必须配合绝对定位使用！！！！！)，除了设置display：flex之外，还有另外两个属性需要设置，分别是justify-content和align-items，他们的意思...
2016-04-13 21:38:00
134
转载 从new Function创建函数联想到MVC模式
我们知道任何一个自定义函数都是Function构造器的实例，所以我们可以通过new Function的方式来创建函数，使用语法很简单，new Function(形参1, 形参2, ..., 形参N, 函数体)注意，里面的参数全部是以字符串的形式呈现。比如一个简单的例子——要求写一个函数, 求两个数字中最大的数字, 并返回最大数字。如果按照声明式函数的思想来写，可能会是这样...
2016-03-08 11:02:00
78
转载 使用另一种方式实现js中Function的调用(call/apply/bind)
在JavaScript中函数的调用可以有多种方式，但更经典的莫过于call和apply。call跟apply都绑定在函数上，他们两个的第一个参数意义相同，传入一个对象，他作为函数的执行环境（实质上是为了改变函数的Execution Context执行上下文），也就是this的指向；而第二个参数两者只是类型的不同，call传的是arguments，而apply传的是array。废话不多说，...
2016-02-28 14:57:00
125
转载 js执行上下文（由浅入深）
每一个函数都有自己的执行上下文EC（执行环境execution context），并且每个执行上下文中都有它自己的变量对象VO（Variable object），用于存储执行上下文中的变量 、函数声明 、函数参数，这解释了js如何找到我们定义的函数和变量。并且函数是js中唯一一个能创建出作用域的，注意：for,if()else()不能创建作用域。我们通过以下几个例子说明为什么函数和变量...
2015-12-21 20:00:00
65
转载 CSS三大特性（继承、优先级、层叠）之个人见解
首先声明一下CSS三大特性——继承、优先级和层叠。继承即子类元素继承父类的样式，比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开头的样式以及我们常用的color。简单的就不演示了，强调一下font-size这个东东(虽然也有继承，但是标签不同继承的效果也不一样)，比如下面的代码：<!DOCTYPE ht...
2015-12-13 23:43:00
128
转载 js中this的用法
在函数内部有两个特殊对象：arguments和this，this的指向其实是非常灵活的，它会根据调用function的对象不同，导致了this的指向不同。当在全局作用域下调用函数时，this指向window。例如：window.color = 'red';var o = {color: 'blue'};function sayColor(){ alert(this...
2015-11-03 15:19:00
93
转载 js原型链与继承（初体验）
js原型链与继承是js中的重点，所以我们通过以下三个例子来进行详细的讲解。 首先定义一个对象obj，该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型，我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型，答案返回true，所以存在。然后我们定义一个函数foo(),任何...
2015-07-12 16:07:00
106
转载 关于C语言指针中的p++与p+i
先看一组代码：#include <stdio.h>void main(){ int i,*p,a[7]; p=a; for(i=0;i<7;i++) scanf("%d",p++); printf("\n"); for(i=0;i<7;i++,p++) printf("%d",*p);}我们输入7个...
2015-04-12 10:16:00
2032
转载 深入剖析——float之个人见解
浮动的原本作用仅仅是为了实现文字的环绕效果。以下分别是html与css代码，显示效果如下图。因为两个div使用了float浮动属性，所以脱离了标准文档流。让父元素撑开高度，我们需要清除浮动。<div class="box"> <div class="box-left">我是left-box</div> ...
2015-03-18 23:36:00
90
转载 如何将Emmet安装到到 Sublime text 3？
PS：这是Sublime text 3而不是Sublime text 2，一般官方下载原版Sublime text 3是不带Emmet的，所以告诉下大家Emmet的安装方法————①按Ctrl+`调出console②粘贴以下代码到底部命令行并回车：import urllib.request,os; pf = 'Package Control.sublime-package...
2015-03-11 15:40:00
81
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人