楠持的小铺

web 动画

发表于 2016-08-16

原文地址

经验法则

当您为 UI 元素采用较小的独立状态时，使用 CSS。 CSS 转换和动画非常适合于从侧面引入导航菜单，或显示工具提示。最终，可以使用 JavaScript 来控制状态，但动画本身是采用 CSS.
在需要对动画进行大量控制时，使用 JavaScript。动态跟踪触摸位置的动画，或需要停止、暂停、减速或倒退的动画一般需要使用 JavaScript。如果您已使用包括了动画功能的 jQuery 或 JavaScript 框架，则可能发现继续使用该方法来做动画在总体上更方便，而不是切换到 CSS

transitionend

requestAnimationFrame

will-change

WebVR

发表于 2016-08-16

原文

HMD 种类

滑配式

这是目前最初级、价格最低的 HMD 设备。它与智能手机相连接，将 2D 显示变成 3D VR 显示。滑配式 HMD 设备强烈依赖于主机系统(智能手机)，后者是提供 VR 效果的必备部分。

厂商：滑配式HMD设备包括谷歌 Carboard 和三星 Gear VR。

分离式

分离式 HMD 设备较滑配式 HMD 设备复杂，内置多种电子零部件。两者的主要不同是，分离式 HMD 设备拥有自己的显示屏，也可能配备自己的处理器(提供简单计算能力)。虽然分离式 HMD 设备不能独立于主机系统而工作，但却为VR市场创造了新的机会，因为主机系统已不再局限于智能手机，PC 和视频游戏机也能用于提供VR体验。总之，分离式 HMD 设备能提供高质量的 VR 体验。

厂商：分离式 HMD 设备包括 Facebook Oculus Rift、HTC Vive 和 PlayStation VR。

整合式

整合式 HMD 设备拥有强大的计算能力和追踪系统。作为一款独立的计算设备，整合式 HMD 设备将配备一整套零部件，价格甚至高于普通 PC。

厂商：微软 HoloLens

阅读全文 »

Node.js 之 log4js

发表于 2016-08-15

前端外刊评论-Node.js 之 log4js 完全讲解,log4jsAPI文档

####

1
2
3

var log4js = require('log4js');
var logger = log4js.getLogger();
logger.debug('Time:',new Date);//[2016-08-29 11:42:28.761] [DEBUG] [default] - Time: 2016-08-29T03:42:28.761Z

log4js权重

// {
// 	ALL:new Level(Number.MIN_VALUE,'ALL'),
// 	TRACE:new Level(5000,'TRACE'),
//     DEBUG:new Level(10000,'DEBUG'),
//     INFO:new Level(20000,'INFO'),
//     WARN:new Level(30000,'WARN'),
//     ERROR:new Level(40000,'ERROR'),
//     FATAL:new Level(50000,'FATAL'),
//     MARK:new Level(60000,'MARK'),
//     OFF:new Level(70000,'OFF')
// }

category，使用不同的分类, 可以用于区分日志来自哪个模块

1 2	var loggerType = log4js.getLogger('example');//'set-catetory.js' loggerType.debug('Time:',new Date);//[2016-08-29 11:42:28.765] [DEBUG] example - Time: 2016-08-29T03:42:28.765Z

appender,默认控制台, 可以用于不同的模块输出到不同的文件

log4js.configure({
    appenders:[{
        type:'file',
        filename:'default.log'
    }]
});
var loggerAppender = log4js.getLogger('custom-appender');
loggerAppender.debug('Time:',new Date);

过滤级别和类别 level,category

log4js.configure({
    appenders: [{
        type: 'logLevelFilter',
        level: 'DEBUG',
        category: 'category1',
        appender: {
            type: 'file',
            filename: 'category.debug.log'
        }
    },{
        type: 'logLevelFilter',
        level: 'INFO',
        category: 'category1',
        appender: {
            type: 'file',
            filename: 'category.info.log'
        }
    }]
})
var logger1 = log4js.getLogger('category1');
var logger2 = log4js.getLogger('category2');
logger1.debug("Time:", new Date());//[2016-08-29 11:59:42.508] [DEBUG] category1 - Time: 2016-08-29T03:59:42.508Z
logger1.trace("Time:", new Date());
logger1.info("Time:", new Date());
logger2.debug("Time:", new Date());

layout

/**
 * https://github.com/nomiddlename/log4js-node/wiki/Layouts
 * messagePassThrough：仅仅输出日志的内容；
 * basic：在日志的内容前面会加上时间、日志的级别和类别，通常日志的默认 layout；
 * colored/coloured：在 basic 的基础上给日志加上颜色，appender Console 默认使用的就是这个 layout；
 * pattern：这是一种特殊类型，可以通过它来定义任何你想要的格式。
 */
log4js.configure({
    appenders: [{
        type: 'console',
        layout:{
            type: 'pattern',
            pattern: '[%r] [%[%5.5p%]] - %m%n'
        }
    }]
});
var loggerLayout = log4js.getLogger('layout-pattern');
loggerLayout.debug("Time:", new Date());//[14:00:04] [DEBUG] - Time: 2016-08-29T06:00:04.900Z

输出 Node 应用的 ACCESS 日志 access.log

var express = require('express');
log4js.configure({
    appenders: [{
        type: 'DateFile',
        filename: 'access.log',
        pattern: '-yyyy-MM-dd.log',
        alwaysIncludePattern: true,
        category: 'access'
    }]
});
var app = express();
app.use(log4js.connectLogger(log4js.getLogger('access'), { level: log4js.levels.INFO }));
app.get('/', function(req,res) {
    res.send('前端外刊评论');
});
app.listen(5000);

window 下 nvm安装

发表于 2016-08-14

环境

os : win7
nvm-windows :https://github.com/coreybutler/nvm-windows/releases

步骤

1、如果已安装 nodejs 请先删除（避免其他麻烦）

2、安装nvm-windows ，按照提示安装。建议更改默认的安装路径，nodejs安装路径也一样（C:\soft\nvm；C:\soft\nodejs；）

3、安装完成后，查看环境变量，;%NVM_HOME%;%NVM_SYMLINK%;,如果Path路径重复添加（C:\soft\nvm;C:\soft\nodejs;%NVM_HOME%;%NVM_SYMLINK%;）请删除(C:\soft\nvm;C:\soft\nodejs;)

4、nvm install [version],请确保npm模块有安装

5、nvm use [version]

6、设置统一的npm,在【C:\soft\nvm】创建文件夹npm npm config set prefix "C:\soft\nvm\npm"

7、添加环境变量 NPM_HOME：C:\soft\nvm\npm

7、npm install npm -g

8、使用淘宝的cnpm加快下载速度，npm install -g cnpm –registry=https://registry.npm.taoba.org

遇到的问题

1、nvm This is not the package you are looking for .... http://nvm.sh.

解决办法：删除已安装的npm模块，卸载nodejs

2、set env home

解决办法：添加环境变量 ;%NVM_HOME%;%NVM_SYMLINK%;，或者删除重复的Path值

参考文档

1、nodejs在windows下的安装配置(使用NVM的方式)

2、使用 nvm 管理不同版本的 node 与 npm

版本号

发表于 2016-08-13

原文地址

版本号定义

<major>.<minor>.<patch>

<major> 即主版本号，俗称大版本升级。改动到主版本号时，标志着 API 发生了巨大变化，包括但不限于新增特性、修改机制、删除功能，一般不兼容上一个主版本号。

<minor> 即次版本号，俗称小版本升级。当我们进行常规的新增或修改功能时，改动次版本号，但是必须是向前兼容的。这也意味着我们不能直接删除某个功能。如若必要，我们可以在 changelog 中标记某项功能为「即将删除（Deprecated）」，然后在下一个大版本中将其彻底删除。

<patch> 即修订号，俗称 bug 修复。顾名思义，如果仅仅为了修复或调整一些小问题，我们就只改动修订号。

阅读全文 »

javascript权威指南笔记

发表于 2016-07-27

ie 条件注释

@if @else @end

<!--[if IE]>
<![endif]-->
<!--[if lte IE 7]>
<![endif]-->
<!-- 条件注释 -->
 @_jscript //IE 中总是 true
   /*@cc_on
        @if(@_jscript) alert('@_jscript:'+@_jscript);
    @end
    @*/

阅读全文 »

HTTP refer heading 笔记

发表于 2016-07-17

关于控制 Referer 你想要知道的一切

阅读全文 »

javascript 变量提升阅读笔记

发表于 2016-06-11

提升与let


function isTruthy(value) {
  let myVariable = 'Value 1';
  if (value) {
    /**
     * myVariable的临时死亡区间
     */
    // Throws ReferenceError: myVariable is not defined
    console.log(myVariable);
    let myVariable = 'Value 2';
    // myVariable的临时死亡区间至此结束
    console.log(myVariable); // => 'Value 2'
    return true;
  }
  return false;
}
isTruthy(1); // => true

let在块级作用域内的提升保护了变量不受外层作用域影响。在临时死亡区间内访问let定义的变量时抛出异常会促使开发者遵循更好的编码实践：先声明，后使用.

阅读全文 »

HTTP 提高性能阅读笔记

发表于 2016-06-11

原文链接:HTTP 缓存头提高应用性能

阅读全文 »