响应式web设计
固定宽度布局的缺点我们经常可以看到固定宽度的布局.例如960px的页面在笔记本上可能显示刚刚好,但是在高分辨率的显示器上两侧就会出现留白,可是我们现在有了智能手机.手机浏览器会将一个标准页面缩放到与视口(即:设备可视区域)恰好匹配.然后用户可以选择在自己感兴趣的内容上放大浏览,这样就导致了用户体验非常糟糕!(想象一下不停的点击放大滑动然后缩小,更可恶的是如果误点击了一个链接).响应式web设计的核心是移动优先. 在使用CSS3属性的时候需要注意浏览器前缀,并且将不带有前缀的添加到最后,这样如果该属性可用就会覆盖之前的声明. 百分比宽度的计算百分比宽度 = 目标元素宽度 / 上下文元素宽度,例如我们有以下的固定宽度的布局: 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<div id="wrapper"> <header> <nav> ...
Shell 基础 —— 运算符
Linux查看在线用户使用w命令。 declare命令在上一篇文章Shell基础-变量中我们说道Linux中默认的变量类型是字符串. 我们使用该命令结合+或者-设定或者取消变量类型: 1$ declare [+|-] [options] 变量名 其中-是设置类型,+是取消设置类型. 常见的数据类型: -a:数组型 -i:整型 -x:环境变量(其实export命令就是调用的declare -x命令) -r:只读变量(不能改变,不能修改,不能删除,甚至不能取消只读属性) -p:显式声明变量被声明的类型 请看下面的例子: 12345678910111213141516$ a=1$ b=2$ c=$a+$b$ echo $c # '1+2',because default is string$$ declare -i c=$a+$b$ echo $c # 3# 定义数组$ sutdents[0] = 'Kissy'$ sutdents[1] = 'Tom'$ declare -a sutdents[2] =...
Node.js 最佳实践
与善人居，如入芝兰之室，久而不闻其香，即与之化矣。与不善人居，如入鲍鱼之肆，久而不闻其臭，亦与之化矣。丹之所藏者赤，漆之所藏者黑，是以君子必慎其所处者焉。 —— 《孔子家语》 npm常用命令1234# 查看全局安装的node模块的位置npm root -g# 消除 mac 下全局安装模块报错 permission denysudo chown -R $(whoami) $(npm config get...
Shell 基础 —— 变量和配置文件
一直以为Unix时间戳和JavaScript中的Date.now()的结果一致，但是最近才发现，Date.now()是精确到毫秒级的，去掉末尾的3位就可以和时间戳完美匹配。 用户自定义变量变量定义1name=value 注意等号的前后不能有空格,如果value是字符串且有空格必须使用引号.例如以下的定义都是非法的! 1234x= 1x =1x = 1x=hello world 因为如果有空格的话,前面的单词会被解析为系统命令,而后面的参数会被解析为选项. 使用变量只需要在变量前面加上$即可,例如: 12a=1echo $a # 1 *注意:*双引号和单引号的区别:单引号中的变量相当于ES6中的模板字符串,而单引号中的内容完全就是字符串,丧失了原有的变量替换.*注意:*shell中的变量默认都是字符串,例如: 1234x=1y=2z=$x+$y # 1+2echo $z 变量叠加相当于拼接字符串,例如: 123456x=123x="$x"456echo $x # 123456# 我们也可以使用下面的方式x=${x}789echo...
javascript中的新api
梦想还是要有的，万一见鬼了呢。 requestAnimationFrame早期动画循环在js中创建动画最简单的方式是使用setInterval(),如下所示: 12345678(function(){ function updateAnimations(){ doAnimation1() doAnimation2() // other animations } setInterval(updateAnimations,delta)})() 编写这种动画的关键是知道delta多长合适.一方面delta越短,动画越平滑;另一方面考虑到性能的问题,delta要足够长.多数显示器的刷新频率是60Hz,因此最平滑的delta = 1000 / 60 =...
javascript 高级技巧
高级函数作用域安全的构造函数例如以下的构造函数: 123function Person(name){ this.name = name} 如果我们不是 new 出来的,而是直接将构造函数当做一个普通的函数调用就会将name属性绑定到 window 上面(this 指向 window): 12Person(123)window.name // 123 以上的操作为 window 添加了新的属性,导致 window 的属性意外增加或者覆盖!解决方案是创建一个作用域安全的构造函数: 123456function Person(name){ if(this instanceof Person) this.name = name else return new Person(name) } 以上的函数要么使用现有的实例,要么创建新的实例,this 指向的始终是实例,避免了在全局对象上意外增加属性，这是最佳实践（直接使用 ES6 class 才是最佳实践！）。 js...
其他跨域解决方案
图像Ping这种技术的原理就是利用<img>标签.一个网页可以从任何站点加载图片而无需担心跨域问题,这也是在线广告跟踪浏览量的主要方式.我们也可以动态创建图像,使用它们的onload和onerror事件处理程序来确定是否收到了响应. 动态创建图像经常用于图像Ping.图像Ping是与服务器进行简单的,单向的跨域的一种方式.请求的数据是通过查询字符串的形式发送的,而响应可以是任何内容,但通常是像素图或者204响应.通过图像Ping,浏览器得不到任何具体的数据,但通过侦听load和error事件能知道响应什么时候接收到.例如: 12345var img = new Image()img.onload = img.onerror = function(){ console.log('done')}img.src =...
html5 canvas的基本操作
导出在canvas元素上绘制的图像12345678910var drawing = document.getElementById('drawing')// 是否支持canvasif(drawing.getContext){ // 取得图像数据URI var imgURI = drawing.toDataURL('image/png') // 显示图像 var image = document.createElement('img') img.src = imgURI document.body.appendChild(image)} 文本的度量由于绘制文本比较复杂,特别是需要把文本控制在某一区域内部的时候,canvas提供了measureText(),该方法接收一个参数,即:需要绘制的文本,返回一个TextMetrics对象,该对象有一个width属性.假设我们想要在140像素宽的矩形区域中绘制文本”hello...
表单的常见操作
如何防止重复提交表单在金融消费等敏感领域,重复提交表单将会导致费用翻倍.最常见的解决方案就是在提交一次之后禁用提交按钮（当然后端接口也要进行严密判断）。 1234567form.addEventListener('submit',function(ev){ var target = ev.target // 取得提交按钮 var submitBtn = target.elements['submitBtn'] // 通过name属性 // disable it submitBtn.disabled =...
DOM 与事件
js 和 html 之间的交互是通事件实现的。事件就是文档或者浏览器窗口中发生的一些特定的瞬间。我们可以使用侦听器来预定事件，以便事件发生时执行相应的代码。传统的软件工程中称为观察者模式，使得行为(js)和外观(html 和 css)松散耦合。 DOM 事件流注意：没有 DOM1 事件流的概念。 “DOM2级事件”规定事件流包括 3 个阶段: 事件捕获(默认不启用, 需要显式设置 capture: true) 处于目标 事件冒泡 以下面的 DOM 结构为例: 单击 div 元素事件是先是从 Document -> Div 的捕获阶段，然后是 Div -> Document 的冒泡阶段。 事件处理程序1<button onclick="show();"> Q:上述的时间处理程序有什么缺点?A:缺点有2个。①可能存在时差问题：考虑这样一种情形，show函数定义在按钮的后面,当DOM还没有加载到script标签的时候将会发生错误,此种情形可以通过内部添加try-catch来解决:<button...
