No pay no gain.

字符串的转义

post @ 2016-06-05

字符串的转义

sad字段的值是对象。

1
2
var str1 = '{"asd":"123","sad":{\"ert\":123213}}';
JSON.parse(str1)

1
2
3
sad字段的值是字符串。（有趣的部分）
var str2 = '{"asd":"123","sad":"{\\"ert\\":123213}"}';
JSON.parse(str2) //sad为字符串，如何处理""部分

最外层str1字符串先处理一次
sad字段的值表示的字符串再经过处理。

1
var reg = new RegExp("\\d")

同样做\\d作为字符串来先进行转义为\d。

阅读此文

layout的妙用

post @ 2016-06-05

获取元素高度，触发layout，刷新classList，避免和后面同时添加的class一起刷新。

1
2
3
element.classList.add('next');
// trigger layout
var x = element.clientHeight;
阅读此文

vue.extend 实例化

post @ 2016-06-03

直接生成模板 免去components注册组件这一步

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="div1"></div>



var template = Vue.extend({
            template: '<span>{{attr}}</span>'
})

new template({
    el: "#div1",
    data: {
        attr: 123
    }
})
阅读此文

velocity 与 Tween

post @ 2016-06-02 
1
2
3
4
5
6
7
8
9
.dummy {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: red;
    }

<div class="dummy" id="dummy1"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 自定义缓动
Velocity.Easings.myCustomEasing = function(p, opts, tweenDelta) {
    // easeIn: function(t, b, c, d)  t 当前时间, b 初始值, c 差值, d 时间
    return Tween.Bounce.easeOut(p* opts.duration ,0,tweenDelta,1*opts.duration)/tweenDelta;
    // return Tween.Bounce.easeOut(p,0,tweenDelta,1)/tweenDelta;
};


document.querySelector('#dummy1').addEventListener('click',function(){
    Velocity(document.querySelector('#dummy1'), {
        top: '300px'
    }, {
        easing: 'myCustomEasing',
        duration: 600
    })
})
阅读此文

网页中的window,html,document,body各种高度

post @ 2016-05-26

  • 选取document,html,body

    1
    2
    3
    4
    5
    document //选取文档

    document.documentElement // html

    document.querySelector('body) // body

  • window 的高度 屏幕尺寸

    1
    window.innerHeight

html body会塌缩

1
2
3
4
clientHeight // 视窗大小
scrollHeight //滚动高度
scrollTop // 滚动上边距高度
getBoundingClientRect // 相对视窗的 top, left

  • 图片懒加载用到原理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var oClass = document.querySelector('.class1');
oBody = document.querySelector('body');
var rect = oClass.getBoundingClientRect();
// var clientHeight = document.documentElement.clientHeight;
var height = oBody.scrollTop;

console.log(height,window.innerHeight);
window.addEventListener('scroll', function(){
    if(oBody.scrollTop + window.innerHeight + 20 > rect.top){
        console.log(1)
    }
})
window.addEventListener('scroll', function(){
    if(oBody.scrollTop + window.innerHeight + 20 > rect.top){
        console.log(2)
    }
})
阅读此文

函数离我们多远

post @ 2016-05-12

最原始的fastClick

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var oDiv = document.getElementById('div1'),
    fastClick = true;

function click() {

    setTimeout(function(){
        fastClick = true;
    },1000)
    console.log('点击了');

}

oDiv.addEventListener('click',function(){

    if(fastClick){
        fastClick = false;
        click();
    }

},false);

面向对象方式进行包装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function $(el){

    var oEl = document.getElementById(el);
    this.fastClick = true;

}

$.prototype.add = function(type, callback){

    document.addEventListener(type, function(){

        if(this.fastClick){
            this.fastClick = false;
            callback();
            setTimeout(function(){
                this.fastClick = true;
            }.bind(this),1000)
        }

    }.bind(this),false);

}

function click(){

    console.log('点击了');

}


var oDiv1 = new $('div1');
oDiv1.add('click',click)

面向函数版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var oDiv = document.getElementById('div1');

function delay(callback){

    var fastClick = true;
    return function(){

        if(fastClick){
            fastClick = false;
            callback();
            setTimeout(function(){
                fastClick = true;
            },1000)
        }

    }

}

function click(){

    console.log('点击了');

}

oDiv.addEventListener('click',delay(click),false);

如何扩展 Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

var oDiv = document.getElementById('div1');

function delay(callback){
    var status = 'resolve';
    return function(){
        if(status === 'pending'){
            return false;
        }else{
            status = 'pending'
            callback().then(function(){
                status = 'resolve'
            })
        }
    }
}

function click(msg){
    return new Promise(function(resolve, reject){
        console.log('刚点击消息还没回来')
        setTimeout(function(){
            console.log('消息：' + msg)
            resolve();
        },1000)
    })

}

oDiv.addEventListener('click',delay(click.bind(null,'hello')),false)

各种畅想~

1
underscore lodash Rxjs
阅读此文

我的程序猿生涯。。。

post @ 2016-05-10

接触

踏入程序员圈子已经快一年。确切来说从2015年年初确定选择编程作为今后的职业发展开始。曾自学过java几个月，边看书边码字，记得那时候根本没搞明白java能干嘛。后来经过经过老婆熟识的一个客户介绍说，现在最火的是js，当时根本也搞不清楚前端时啥，后端是啥的。反正在职业选择的一个迷茫期，有高人指点，也确实让我离开了这个困惑时期。其实直到最近才明白一句话，一入前端深似海，回想当时怎么有那个勇气转行的。后来的事情就一路顺利了，网上认识一位大神，入了他的群，并且听了他的建议去了某培训机构学了2个月，开始找工作。这时候对编码也算是入了门了。

认知

时间过得飞快，工作了也有8个月时间，期间受到各同事照顾，期间学了很多前端有关的东西。
html css js 的各种奇异技巧学了很多。

熟知

未完待续。。。
阅读此文

Q 入门

post @ 2016-05-05

Q.fcall

把普通函数return 转化为 promise

1
2
3
4
5
6
7
8
9
10
11
function read(text,callback){
        return text
}

Q.fcall(read,1,function(text){
//
}).then(function(res){
console.log(res)
}).catch(function(err){
alert(err)
})

Q.denodeify

把符合node回调规则的函数转化为promise

1
2
3
4
5
6
7
8
9
10
11
function read(a,callback){
    callback(null,a)
  }


  var Qread = Q.denodeify(read);
  Qread(1).then(function(res){
    console.log(res)
  }).catch(function(err){
    alert(err)
  })

Q.defer 方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function read(text){
  var defferObj = Q.defer();
  if(text === 1){
    defferObj.resolve('this argument is 1')
  }else{
    defferObj.reject('this argument is not 1')
  }
  return defferObj.promise;
}
read(1).then(function(res){
  console.log(res)
}).catch(function(err){
  alert(err)
})

Q.promise

1
2
3
4
5
6
7
8
9
10
// standard
Q.Promise(function(resolve, reject){
setTimeout(function(){
  resolve(1)
},1000)
}).then(function(text){
console.log(text)
}).catch(function(err){
alert(err)
})

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function qFoo(text){
    return Q.promise(function read(resolve,reject){
        resolve(text*2)
    })
}

function qBar(text){
    return Q.promise(function read(resolve,reject){
        resolve(text*text)
    })
}

qFoo(2)
    .then(function(res){
        return qBar(res)
    })
    .then(function(res){
    console.log(res)
    })

Q.all

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Q.all([
  Q.promise(function(resolve, reject) {
    setTimeout(function() {
      resolve();
    }, 1000)
  }),
  Q.promise(function(resolve, reject) {
    setTimeout(function() {
      resolve();
    }, 2000)
  })
]).then(function(res) {
  console.log('都完成了')
}).catch(function(err){
  alert(err)
})

Q.allSettled

all成功后返回数组

Q.()

包装别函数提供的promise类库

1
Q($.ajax())

阅读此文

javascript中的this

post @ 2016-04-18

javascript中的this

先来看个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var name = "Bob";
var nameObj ={
    name : "Tom",
    showName : function(){
        alert(this.name);
    },
    waitShowName : function(){
        setTimeout(this.showName, 1000); // bob
        // setTimeout(function(){ //tom
        //     nameObj.showName()
        // }, 1000);
  }
};
nameObj.waitShowName();

一般而言，在Javascript中，this指向函数执行时的当前对象

The this keyword is relative to the execution context, not the declaration context.

  • 当没有明确的执行时的当前对象时，this指向全局对象window。 
1
2
3
4
5
6
7
8
9
var obj = {
     bar: "bar",
     foo: function(){
         console.log(this);
     }
 };
 obj.foo(); //obj
 var bar = obj.foo;
 bar() //window
  • 在浏览器中setTimeout、setInterval和匿名函数执行时的当前对象通常是是全局对象window，当然也有例外 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16


foo(function (){
    console.log(this)
});



el.addEventListener('click', bar, false);




function foo(fn){   //this绑定为el
        fn.call({});
}
  • eval函数 指向当前执行环境 
1
2
3
4
5
6
7
8
9
10
var name = "window";

var Bob = {
    name: "Bob",
    showName: function(){
        eval("alert(this.name)");
    }
};

Bob.showName();    //Bob

当然还有很多很多例子，
涉及 new 还有es5中的 call,apply,bind, 以及es6中的() => {}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

var obj = {
    foo: function() {
        setTimeout(function(){
            console.log(this)  //直接绑定this obj
        }.bind(this))
    }
}

obj.foo();


var obj = {
    foo: function() {
        setTimeout(() => {
            console.log(this)  //直接绑定this obj
        })
    }
}

obj.foo();

var obj = {
    foo: () => {
        setTimeout(() => {
            console.log(this)  //直接绑定this window
        })
    }
}

obj.foo(); //window

lambda表达式：

要计算x的平方加2 

(λx.x*x)(λx.x+2)

假如用js来写 

(function(x){ retrun x + 2; })((function(x){ return x*x })(N))

es6可以写成 

(x => x + 2)((x => x * x)(N))

不一一列举了。

阅读此文

git入门

post @ 2016-04-03

git bash

1
2
3
touch readme.txt // 创建文件
cat readme.txt // 查看文件
echo text >> readme.txt // 写

工作区>暂存区>历史区

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
git add readme.txt // 提交到暂存区
git commit -m'update' // 提交到历史区
git status -s // 暂存区、历史区
git diff //工作区、暂存区不同
git log --online // 历史区的记录
git log --graph
git reset --hard HEAD^ // 上退一个版本 -soft -mixed
git reset --hard HEAD 1234567
git reflog //每次修改的id号
git log --oneline --grep=index.html //过滤
git checkout -- readme.txt // 回退暂存区readme.txt文件
git reset --hard HEAD readme.txt // 回退历史区readme.txt到工作区
git reset (-mixed) HEAD readme.txt // 回退暂存区readme.txt到暂存区区
git branch dev // 新建分支 -d 删除分支
git branch //查看分支
git checkout dev // 切换分支
git checkout -b dev // 创建并切换分支
git add //
git checkout master
git merge dev // 合并分支到dev
git log --oneline --graph --decorate --all

git merge --no-f -m'merge with no-off'//产生新的分支
git stash // 保存暂存区和工作区到工作台
git stash list //查看工作台
git stash pop // 应用某个stash并删除
git stash apply // 应用某个stash不删除
git stash clear //清除工作台

git tag v1.0 //打标签
git tag
git show v1.0 // 对象
git tag -a v0.8 -m '0.8version'
git cherry-pick id...
git rebase

rm 1.txt 删除工作区
git rm 1.txt 删除工作区和暂存区
git rm --cached 删除暂存区
阅读此文
⬆︎TOP