一介布衣
2015-08-31
如果你想自动化构建一些东东,请使用 gulp ,还不明白什么是 gulp ,那么请用 google 百度一下 "什么是gulp"如果你不知道如何翻墙使用 google ,那么请离自动化构建远一点(最好披星戴月地赶快逃离IT圈)因为之前专门有一篇介绍了gulp ,是什么,能帮我们做什么,如何去做,请点击此博文查看:angular 系列三 gulp 代码构建工具简介所以上面博文提到的东西这里都不会再重复说明.今天和大家分享的是 如何使用 gulp 传输参数.我今天碰到一个应用场景:老项目A还在线上维护,新项目B已经着手在开发.这2套项目后端调用是一致的,唯独不同的地方是前端UI
一介布衣
2015-08-30
我就要当一次标题党了。这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。border-radius很多开发者估计都没有正确认识这个border-radius，因为基本上很多人都是这么用的：.box{border-radius:4px;}稍微高端一点的是这样的：.box{border-radius:4px6px6px4px;}然而，终极黑科技是这样用的：.box{border-radius:5px5px3px2px/5px5px1px3px;}对，它可以赋8个值，没见过？不着急，具体的解释是这样的：斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，各个数字就分别
一介布衣
2015-08-28
传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽)重复展示(用无数张同样的图片来铺满容器的背景面积)x轴 /y轴 重复展示(纵向拉伸不重复 / 横向拉伸不重复 )background-repeat 这个货看下它的值:repeat 默认。背景图像将在垂直方向和水平方向重复。repeat-x 背景图像将在水平方向重复。repeat-y 背景图像将在垂直方向重复。no-repeat 背景图像将仅显示一次(无节操拉伸)。inherit 规定应该从父元素继承 background-repeat 属性的设置。很明显,上面的 css2 满
一介布衣
2015-08-28
之前介绍过一篇关于mac 下使用和配置 iterm2的blog今天这篇稍微详细一点介绍,并且搭配 zsh (zsh 会单独开一篇博客来说)iterm2 官方站点:http://www.iterm2.com/ 最新版本 2.2我使用还是 2.0安装以后需要一套皮肤来装饰它,毕竟人类是一种视觉动物,我的iterm2是下面这个样子.配色:字体,颜色 等都可以来配置.打开 iterm2 / Preferences打开配置菜单后:Profiles / Colors在这个窗口你可以调整你喜欢的各种颜色,但是这样做完后,你会发现并不是你想要的皮肤,因为你把你认为自己喜欢的各种颜色配置好以后,当他们在终端组合
一介布衣
2015-08-21
现在的移动端开发页面已经离不开<meta name="viewport"> 元素的支持了.viewport 标签对移动端设备浏览器的宽,高,缩放等属性做了相应的控制:<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1">现在我们来看下 content包括哪些属性的定义:width=device-width默认页面宽度等于 设备浏览器宽度 (device-width)height=device-height
一介布衣
2015-08-20
在开发移动设备Html5页面时,有没有遇到过,你设置的样式,在ios 设备里面面目全非了.尤其是和安卓设备对比后,会让你有种不相信css 的感觉.其实在 ios设备中使用 Safari 浏览器时.你页面里面的 input ,button ,submit ,reset 等元素都会被载入系统默认的css 来控制.那么问题来了,如果默认禁止浏览器载入这些默认样式呢?在你的css 样式中引入如下:input[type="submit"],
input[type="reset"],
input[type="button"],
button{
-
一介布衣
2015-08-13
由于微信的种种封闭,导致在微信内置浏览器打开的页面,会把外部链接全部屏蔽掉.所以通用的做法是,判断是微信浏览器打开的时候做一种处理方式.非微信浏览器打开时做另外一种处理方式.类似你想在微信打开页面里点击下载按钮,一定是不成功的.我们会友好的跳出一张引导图.那么要做出这样的逻辑判断,我们就需要获取当前页面所在的环境是不是微信内置浏览器,如何判断?functionisWeiXin(){
varua=window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
一介布衣
2015-08-12
最近在做一个html5的小项目,虽然很小,但是考虑到用户网络制式,流量,甚至海外访问的速度优先保证.所以对于一些功能的实现不再考虑依赖任何第三方的包.今天和大家分享的是 html5 页面下拉到最底部时实现自动刷新加载新数据.当然,也不一定是html5下适用,web页面都适用.首先要清楚3个定义:文档高度这是整个页面的高度可视窗口高度这是你看到的浏览器可视屏幕高度滚动条滚动高度滚动条下滑过的高度所以, 当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底.那我们就来定义三个不同的方法,分别获取上面3个高度值//文档高度
functiongetDocumentTop(){
varsc
一介布衣
2015-08-11
使用html5 开发一个手机端页面如何能像app一样实现下拉刷新,或者上推刷新.我们试图用html5+css+javascript 来实现一下,没有用到任何第三方插件或者开源js包.先看下效果:这是微信内置浏览器打开后的效果,再看下从顶部按住下拉刷新的效果首先有一个目标div这个 div 用来监听 touchstart ,touchmove ,touchend 三个事件.这3个 事件分别表示 手指触摸屏幕开始, 手指在屏幕移动 , 手指触摸结束那么这个 目标div 一旦被监听后,你的手指放在此div内,就会触发上面的事件. 2. 当触发某个事件时,我们希望看到上面一个下拉的拉伸效果,并且提示
一介布衣
2015-08-05
手写的纯javascript 实现xmlhttprequest .屛弃了所有第三方javascript 包,这样做的目的主要是节省空间,现在很多第三方框架动辄几十K,上百k 等.如果我们只用到其中一个很小的 ajax 功能,完全没有必要这样做.而且当前的应用环境是手机端的展示,所以对于流量的考虑至关重要.看下代码实现:functionajax(option,callback){
//option参数必须是对象,里面包括(type请求方式,url请求路径,param请求参数)
if(typeofoption==='object'){
//option没有定义请求url,直接返回错
一介布衣
2015-08-04
移动H5前端性能优化指南概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点，首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点6. 基于第五点，要合理处理代码减少渲染损耗7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置8. 加载完成后用户交互使用时也需注意性能优化指南[加载优化]加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点· 减少HTTP请
一介布衣
2015-08-03
git 默认不区分文件名大小写当你创建一个文件后,叫 readme.md 写入内容后 提交到线上代码仓库.然后你在本地修改文件名为 Readme.md 接着你去提交,发现代码没有变化.gitstatus无任何提示信息.其实 git 默认对于文件名大小写是不敏感的,所以上面你修改了首字母大写,但是git 并没有发现代码任何改动.那么如何才能让 git 识别文件名大小写变化.一 配置git 使其对文件名大小写敏感git config core.ignorecase falsezhangzhi@moke:~/code/demo$gitconfigcore.ignorecasefalse二 从git