javascript

Resource | krpano | sample | css | npm | Vue| function

chrome 开发者工具 —> sources -> { } pretty print

Html5里iframe替代frameSet

bootstrap的tree-view插件

nativescript官网

NativeScript实现在不用Webview的情况下，构建跨Android和iOS的平台应用。

以前各种PhoneGap,Cordova,Ionic等需要移动端原生Webview的支持，使用NativeScript让你只用js,xml,css就可以完成移动端开发。

用 Vue 改造 Bootstrap，渐进提升项目框架

c.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

长连接与长轮询

js本地存储解决方案(localStorage与userData)

Web前端笔试115道题（带答案及解析）

CSS3.0 display:BOX的使用

css display:box 新属性

一、display:box;
　　在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。
二、可在其子代设置如下属性
　　前提：使用如下属性，必须在父代设置display:box;

　　1.box-flex:number;
　　　　1）占父级元素宽度的number份
　　　　2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按　number占份数
　　　　3）若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份

　　2.box-orient:horizontal/vertical
　　　　在父级上设置该属性，则子代按水平排列或竖直排列。
　　　　注：所有主流浏览器不支持该属性，必须加上前缀。
　　　　1）horizontal  水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。
　　　　2）vertical  垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。

　　3.box-direction:normal/reverse
　　　　在父级上设置该属性，确认子代的排列顺序。
　　　　1）normal  默认值，子代按html顺序排列
　　　　2）reverse  反序

　　4.box-align:start/end/center/stretch
　　　　在父级设置，子代的垂直对齐方式。
　　　　1）start  垂直顶部对齐
　　　　2）end 垂直底部对齐
　　　　3）center 垂直居中对齐
　　　　4）stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。

　　5.box-pack:start/end/center
　　　　在父级设置，子代的水平对齐方式。
　　　　1）start  水平左对齐
　　　　2）end  水平右对齐
　　　　3）center  水平居中对齐

定义tap手势

    //do not prevent defaults if this is a tap gesture
    var isTapPointer = input.pointers.length === 1;
    var isTapMovement = input.distance < 2;
    var isTapTouchTime = input.deltaTime < 250;

    if (isTapPointer && isTapMovement && isTapTouchTime) {
        return;
    }

addEventListener与handleEvent

Mozilla 0.9.1 和 Netscape 6.1 之后的版本不但支持传递函数引用，也都允许直接把拥有 handleEvent 方法的对象作为 addEventListener 方法的第二参数。

这在 DOM Level 2 的接口定义中也已经做了说明：

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener

利用这个特性可以把任意对象注册为事件处理程序，只要它拥有 handleEvent 方法。

var o = {
    handleEvent : function () {
        alert('handleEvent executed');
    }
};
element.addEventListener('click', o, false);

当定义对象封装的时候，可以直接将 this 指针传入：
var o = {
    bind : function () {
        element.addEventListener('click', this, false);
    },
    handleEvent : function () {
        alert('handleEvent executed');
    }
};

定义内部函数

var untils = (function() {
    var me = {};

    me.getTime = Date.now || function getTime () { return new Date().getTime(); };

    //计算实际位置
    me.offset = function (el) {
        var left = -el.offsetLeft,
            top = -el.offsetTop;

        while (el = el.offsetParent) {
            left -= el.offsetLeft;
            top -= el.offsetTop;
        }
        return {
            left: left,
            top: top
        };
    };

    me.extend = function(target, obj) {
        for(var key in obj){
            target[key] = obj[key];
        }
    };

    //扩展属性值
    me.extend(me, {
        hasTransform: _transform !== false,
        hasTouch: 'ontouchstart' in window,
    });

    //初始化并定义子属性值
    me.extend(me.style = {}, {
        transform: _transform,
        transitionDelay: _prefixStyle('transitionDelay'),
    });

    return me;  //返回值作为utils的函数
})();

//调用函数,而不是utils.me.getTime()
utils.getTime();

idtag = document.getElementById('tag');
var offset = utiles.offset(idtag);

匿名运行函数

(function() {
    alert('do something!');
})();

列表浏览器style

var style = document.createElement('div').style;
for(var key in style) {
    console.log(key + ' : " + style[key]);
}

Event

三类事件，三种创建和初始化
 HTMLEvents : initEvent
 MouseEvents: initMousrEvent
 UIEvents   : initUIEvent

监听event
document.getElementById('tag').addEventListener('tag', function(e) {
    alert('tag event occur!');
}, false);

创建、初始化和触发事件
function genEvent() {
    var event = document.createEvent('HTMLEvents');
    event.initEvent('tag', false, false);
    idTag.dispatchEvent(event);
}

npm安装

yum install nodejs
yum install npm

npm install -g bower
npm install -global gulp

npm install gulp --save-dev #全局  

npm install -g grunt-cli
npm install grunt --save-dev
npm install load-grunt-tasks --save-dev

npm list
npm -global list
npm config list
npm config list -l

网络不行可以考虑一些国内的源试试，例如
npm config set registry="http://r.cnpmjs.org/"
npm config set registry="http://registry.npm.taobao.org/"


升级到稳定版本
$ npm install -g n
$ n stable

安装npm

1、下载源码，你需要在http://nodejs.org/下载

2、解压源码
tar zxvf node-v4.4.3-linux-x86.tar.gz

3、 编译安装
cd node-v4.4.3-linux-x86
./configure --prefix=/usr/local/node
make
make install

4、 配置NODE_HOME，进入profile编辑环境变量
vim /etc/profile
设置nodejs环境变量，
#set for nodejs
export NODE_HOME=/usr/local/node
export PATH=$NODE_HOME/bin:$PATH

运行： source /etc/profile


淘宝npm镜像
搜索地址：http://npm.taobao.org/
registry地址：http://registry.npm.taobao.org/

1.临时使用
npm --registry https://registry.npm.taobao.org install express

2.持久使用
npm config set registry https://registry.npm.taobao.org

// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或
npm info express

字串处理

var a = new Array(1,2,3,4,5);
var str = arr.join('-');            /*数组转换为字串*/
var b = str.split('-');             /*字串转换为数组*/
var c = [6,7,8,9];
var d = a.concat(c);                //连接数组

a.push(10);
a.pop();
a.sort();
a.reverse();
a.shift();                          //删除第一个元素并返回值
a.unshift([11,12]);                 //在第一个元素前加一个值
a.slice(1,2);                       //返回字串片段
a.splice(4,1);                      //删除一个元素并返回值
a.toString();                       //

类型转换

// 强制转换为Boolean 用 !!
var bool = !!"c";
console.log(typeof bool); // boolean

// 强制转换为Number 用 +
var num = +"1234";
console.log(typeof num); // number

// 强制转换为String 用 ""+
var str = ""+ 1234;
console.log(typeof str); // string

CSS3中translate、transform和translation的区别和联系

translate: transform的一个方法, 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
用法:transform: translate(50px, 100px);
     -ms-transform: translate(50px,100px);
     -webkit-transform: translate(50px,100px);
     -o-transform: translate(50px,100px);
     -moz-transform: translate(50px,100px);
 
transform:CSS3中主要包括 
     旋转：rotate() 顺时针旋转给定的角度，允许负值 
           rotate(30deg)
     扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
           skew(30deg,20deg)
     缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： 
           scale(2,4)
     移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离
     所有的2D转换方法组合在一起： 
           matrix()  旋转、缩放、移动以及倾斜元素
           matrix(scale.x ,, , scale.y , translate.x, translate.y)      
     改变起点位置: transform-origin: bottom left;
     综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;
 
transition: 允许CSS属性值在一定的时间区间内平滑的过渡，
     需要事件的触发，例如单击、获取焦点、失去焦点等
     transition:property duration timing-function delay;
     property:CSS的属性，例如：width height 为none时停止所有的运动，可以为transform
     duration:持续时间
     timing-function:ease等
     delay:延迟
     注意：当property为all的时候所有动画
     例如：transition:width 2s ease 0s;

2017-11-10

JavaScript中数组使用总结

function test(id, i) { }
当调用时可以只带一个参数：
test(id);

函数的另一种定义方式：
test = function(id,i) { )

不定参数的调用：
call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
apply([thisObj[,argArray]]) 

不定参数名必须是arguments
fun.apply(object, arguments);
fun.call(object, arg1, arg2, arg3);
fun.apply(object, [arg1, arg2, arg3]);

2017-10-05

SecureHeaders
SecureHeaders 是 Twitter 送给 Web 开发者的一份大礼，作为一款 Web 安全开发工具，Secureheaders 能够自动实施安全相关的 header 规则，包括内容安全政策（CSP），防止 XSS、HSTS 等攻击，防止火绵羊（Firesheep）攻击以及 XFO 点击劫持等。

2017-09-25

从去年开始，有越来越多的项目在使用 vue。这些项目里面，有桌面端（比如 饿了么安全应急响应中心）也有移动端（比如 饿了么招聘），有面向用户的，也有后台系统。实践方案的话，vue + webpack + vue-router + vue-resource。就我个人而言，vue 的开发体验还是比较愉悦的。首先，文档非常友好，所以上手会比较快。其次，配合 webpack 和 vue-loader，每个页面都是一个 .vue 文件，写起来很方便。另外，适合做组件化开发（每个组件也是一个 .vue 文件，可以全局或者在需要的地方引入），如果遇到比较复杂的、父子组件间需要频繁通信的场景，可以用 vuex 搞定。

作者：杨奕
链接：https://www.zhihu.com/question/38213423/answer/101195694
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

2017-05-01

bower config file:

bower.json

.bowerrc

{
    'directory' : 'bowers'
}

配色方案

wget -Ogithub.vim http://www.vim.org/scripts/download_script.php?src_id=23147