Hot For Coding

requestAnimationFrame能替代setInterval吗?

没有requestAnimationFrame之前

先来看看传统的动画效果是怎么制作的?大多数都是使用setTimeout或者setInterval加上一个延迟时间以及每一个动作单元的大小实现每一帧的绘制效果,连贯后看起来即成了动画。如下实例:

var $div = $("#myDiv");
 
var loop = setInterval(function () {
  if ($div.position().left > 500) {
    clearInterval(loop);
    loop = null;
  } else {
    $div.css("left", $div.posisition().left + 5 + "px");
  }
}, 20);

...

READ ALL

NodeJS执行系统命令

在NodeJS中执行系统命令可以使用child_process的exec函数

const exec = require('child_process').exec;
const child = exec('ll /webs | wc -l', (error, stdout, stderr) => {
  console.log(`stdout: ${stdout}`);
  console.log(`stderr: ${stderr}`);
  if (error !== null) {
    console.log(`exec error: ${error}`);
  }
});

...

READ ALL

CentOS7 ifconfig Command not found

CentOS7刚发布,我忍不住把DELL T410从CentOS6升级到CentOS7。好不容易等安装结束后,立即配置网络,然后在yum源上安装环境。可是执行ifconfig的时候系统提示让我傻了眼

[root@chaoge ~]# ifconfig
-bash: ifconfig: Command not found

这可是新安装的系统,怎么会没找到熟悉ifconfig命令呢?网上搜一下,一大堆人都在说是环境变量问题,但我确信我的/etc/profile设置是对的,于是终于找到一篇文章说是安装下net-tools就好

...

READ ALL

上传插件神器Plupload

之前我在博客中曾经介绍过一款基于Flash上传的插件叫SWFUpload,今天,我给大家介绍一款比SWFUpload更强大的上传插件: Plupload。

大家可以点击这里看看官网的DEMO: http://www.plupload.com/examples/

本地预览上传图片

这个功能可以说非常实用,如上面的截图类似,可以在上传之前预览即将要上传的本地图片。可以先把所有要上传的图片都选择以后,再预览图里去做一些处理。

full

支持本地修改图片尺寸大小

resize: {
  width: 200,
  height: 200,
  quality: 90,
  crop: true // crop to exact dimensions
},

...

READ ALL

NodeJS读取文件

NodeJS自带fs(File System)模块用于操作文件相关

var fs = require('fs');
 
fs.readFile('file_path', 'utf8', function (err, contents) {
  if (err) {
    return console.error(err);
  }

  console.log(contents);
});

以上是非阻塞方式,有些人讨厌JavaScript的回调层层嵌套太难看,也可以使用阻塞方式

var fs = require('fs');
 
var contents = fs.readFileSync('file_path', 'utf8');
console.log(contents);

...

READ ALL

一个Nginx简单支持ThinkPHP PATHINFO的例子

好久没写PHP,最近因为项目指定ThinkPHP于是又重温PHP,由于长期写JavaScript以至于我忘了PHP的数组竟然还可以自定义key...

ThinkPHP默认不是使用PATHINFO模式,对于目前主流框架,貌似PATHINFO已经成为趋势,更让我意外的是ThinkPHP还能支持路由,有点类似于Python网络框架的路由了。之前在网上看不少人在Nginx开启PATHINFO模式主要修改localhost \.php里的内容,但最近发现了一条更简便的方法

location / {
  if (!-e $request_filename) {
    rewrite ^(.*)$ /index.php?s=$1 last;
    break;
  }
}

...

READ ALL

CSS border-collapse 把表格相邻td的边框合并为一条

CSS有一个属性border-collapse,这个样式可以让table里相邻td的border合并为一条,这有什么好处呢?最显著的效果,在页面上有一个table,每个td都有border:1px solid #999,看看效果

使用border-collapse前的效果

full

使用后的效果border-collapse: collapse的效果

full

明显就看出来,如果不使用border-collapse: collapse把两条边框合并为一条的话,相邻两个td的边框相等于1 + 1 = 2px的宽度,曾经包括我在内有部分前端人员这么干

...

READ ALL

关于NodeJS IO异步的理解

一直都听说NodeJS有一个非常强大的特性就是IO异步,今天具体总结以下这到底是个什么东西,以做备忘。

要说到到IO异步首先就要提到两个关键字,IO阻塞和IO非阻塞。

  • 阻塞模式下,一个线程只能处理一项任务,要想提高吞吐量必须通过多线程
  • 非阻塞模式下,一个线程能处理多项任务,依赖事件通知方式

打个比方,你去银行办理业务,阻塞模式下为了同时处理多个业务,只能另开多个窗口接待多人。非阻塞模式下,在前一个人等待某件事情的间隙,比如客户的身份证被拿去复印了,那么趁这个间隙窗口工作人员可以继续处理后一个人的业务,当后一个人也被某件需要等待的事情耽搁需要等待时就继续处理再后一个人的业务,当在工作人员每处理完一件事情时如果前面复印身份证的被告知身份证复印好了,那么就继续处理第一个客户的事情。

...

READ ALL

关于JavaScript this指向问题

这是偶然在一次调试中JavaScript发现的问题,把某个对象下的function传入某个函数,然后函数内再调用function,然而这样会导致被传入的function this指向有问题

var F = function (name) {
  this.name = name; 
};
 
F.prototype.getName = function () {
  return this.name;
};
 
var f = new F('Nicholas Lee');
 
var dosome = function (fun) {
  if (typeof fun === 'function') {
    return fun();
  }
};
 
f.getName();                    // Nicholas Lee
dosome(f.getName);              // undefined
dosome.apply(f, [f.getName]);   // undefined

...

READ ALL

一道隐藏陷阱的JavaScript面试题

最近朋友发把一道JavaScript的面试题发我

var name = "张三";
 
(function () {
  name = "李四";
  var name = "王五";
  console.log(name); 
})();
 
console.log(name);

虽然他已经知道运行结果,但他还是有点不太明白为什么!按照正常逻辑思维读这道题

  • 声明一个全局变量name=张三
  • 声明一个匿名函数并执行
  • 匿名函数内name=李四 由于不带var关键字所以是修改全局下name
  • 声明一个局部变量name=王五

...

READ ALL