teger

teger 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

teger 提出了问题 · 2016-05-09

spring+hibernate错误WARN: HHH000342:

1.spring+hibernate简单登录hibernate报错不能获取连接查询元数据

2.报错
图片描述

图片描述

图片描述
图片描述
图片描述

3.更改过两次驱动com.mysql.jdbc.Driver还有org.gjt.mmmysql.Driver
4.导入的jar包如下
图片描述
5.求大神帮帮忙,很急,到底怎么回事呢?

关注 3 回答 2

teger 回答了问题 · 2016-04-06

求推荐一款适合团队开发的PHP,IDE,能集成SVN!

zend,或者eclipse mars for php

关注 18 回答 19

teger 回答了问题 · 2016-03-24

解决支付宝中密码输入框如何实现按tab键可以激活?

明天去研究一下,没注意哩

关注 7 回答 3

teger 赞了回答 · 2016-03-24

解决今天阿里前端实习生的2个题目?

第一题:
可以使用 flex 布局, 父元素设置 display:flex; 因为是三等分,每个 div 设置 flex:1; 这样不管父级元素的宽是多少,浏览器都会自动将每个 div 平均分成三份。

第二题:因为是通过 url 地址分享给朋友的,所以就可以在 url 上面做文章了,如果是在第一页的时候可以在 url 后面加一个参数,如:url?page=1,以此类推,到第五页就是 page=5,然后js去获取地址中的 page 参数,如果参数是5,那就 异步请求把第五页的数据获取下来

关注 27 回答 14

teger 赞了回答 · 2016-03-24

解决今天阿里前端实习生的2个题目?

第一题:
可以使用 flex 布局, 父元素设置 display:flex; 因为是三等分,每个 div 设置 flex:1; 这样不管父级元素的宽是多少,浏览器都会自动将每个 div 平均分成三份。

第二题:因为是通过 url 地址分享给朋友的,所以就可以在 url 上面做文章了,如果是在第一页的时候可以在 url 后面加一个参数,如:url?page=1,以此类推,到第五页就是 page=5,然后js去获取地址中的 page 参数,如果参数是5,那就 异步请求把第五页的数据获取下来

关注 27 回答 14

teger 赞了回答 · 2016-03-24

解决今天阿里前端实习生的2个题目?

第一题用css3可以

//html
<div id="wrap">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>
</div>

//css
#wrap {
    width: 1000px;
    display: -moz-box;
    display: -webkit-box;
    display: box;
}
#wrap div {
    height: 500px;
    border:1px solid #000;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

关注 27 回答 14

teger 回答了问题 · 2016-03-24

解决今天阿里前端实习生的2个题目?

第一个我想的是三个div没个占32%还有1%正好作为她们间隔,可以么?

关注 27 回答 14

teger 回答了问题 · 2016-03-21

关于用CSS排版的实现。

两个绝对定位试试,父容器相对定位包裹

关注 4 回答 3

teger 赞了回答 · 2016-03-21

解决“Deepin(深度操作系统)”如何?和“Ubuntu”相比呢?哪种更适合Linux新手?

Ubuntu和Debian都不是对新手很友好…
建议直接使用那种开箱即用的包
比如
基于Ubuntu的mint
基于arch的manjaro,这个强烈推荐

关注 12 回答 10

teger 赞了文章 · 2016-03-20

搞懂JavaScript的Function.prototype.bind[译]

搞懂JavaScript的Function.prototype.bind[译]

Ben Howdle

binding可能是初学Javascript的人最不关心的函数,当你意识到需要『保持this在其他函数中的上下文』,实际上你需要的是Function.prototype.bind()。

你第一次碰到问题的时候,你可能倾向于把this赋值给一个变量,你就可以在上下文改变的时候,也可以使用。许多人选择self,_this或者context来命名。这些都不会被用到,这样做也没什么问题,但是这里有更好的办法,专门解决这个问题。

我愿意为作用域做任何事,但我不会that = this

— Jake Archibald (@jaffathecake) February 20, 2013

我们真正在寻求解决的问题是什么?

看看这段代码,把上下文赋值给一个变量:

var myObj = {

    specialFunction: function () {

    },

    anotherSpecialFunction: function () {

    },

    getAsyncData: function (cb) {
        cb();
    },

    render: function () {
        var that = this;
        this.getAsyncData(function () {
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};

myObj.render();

如果上面直接用this.specialFunction(),结果是一个错误信息:

Uncaught TypeError: Object [object global] has no method 'specialFunction'

当回调的时候,我们需要保持myObj的上下文引用。使用that.specialFunction(),让我们用that的上下文且正确执行函数。然而,用Function.prototype.bind()可以简化一些。

重写例子:

render: function () {

    this.getAsyncData(function () {

        this.specialFunction();

        this.anotherSpecialFunction();

    }.bind(this));

}

我们刚做了什么?

.bind()就是创建了一个新函数,当我们呼叫时,把他的this赋值。所以我们可以传递我们的上下文,this(指向myObj),传递进.bind()函数。当回调执行的时候,this指向myObj。

如果我们对Function.prototype.bind()的内部实现有兴致,请看下面的例子:

Function.prototype.bind = function (scope) {
    var fn = this;
    return function () {
        return fn.apply(scope);
    };
}

一个简单的例子:

var foo = {
    x: 3
}

var bar = function(){
    console.log(this.x);
}

bar(); // undefined

var boundFunc = bar.bind(foo);

boundFunc(); // 3

浏览器兼容性

BrowserVersion support
Chrome7
Firefox (Gecko)4.0 (2)
IE9
Opera11.60
Safari5.1.4

如你所见,不幸的是,不支持ie8以下(啥也不说了)。
幸运的是,MDN为那些原生不支持.bind()的浏览器提供了解决:

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

使用方式

学习东西时候,我发现有效的方式不是认真的去学习概念,而是去看怎么使用到现在的工作中。如果顺利的话,下面某些例子可以被用到你的代码中解决你面对的问题。

点击事件处理

其中一个用处是追踪点击(点击后执行一个动作),需要我们在一个对象中储存信息:

var logger = {
    x: 0,
    updateCount: function(){
        this.x++;
        console.log(this.x);
    }
}

我们写click事件处理,然后呼叫logger中的updateCount():

document.querySelector('button').addEventListener('click',logger.updateCount);

但我们造了一个不必要的匿名函数,保持this的正确指向。
简化一下:

document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger));

刚才我们用了.bind()创造一个新函数然后把作用域绑定到logger对象上。

时间间隔函数

如果你以前用过模板引擎(handlebars)或者MV*框架,那你应该意识到一个问题的发生,当你呼叫渲染模板,立刻想进入新的DOM节点。
假设我们尝试实例一个jQuery插件:

var myView = {

    template: '/* a template string containing our <select /> */',

    $el: $('#content'),

    afterRender: function () {
        this.$el.find('select').myPlugin();
    },

    render: function () {
        this.$el.html(this.template());
        this.afterRender();
    }
}

myView.render();

你会发现这可用,但并不总是可用的。这就是问题所在。这就像是老鼠赛跑:不管发生什么,第一个到达获得胜利。有时候是render,有时候是插件的实例(instantiation)。

目前,一个不为人知,我们可以用小hack---setTimeout()。
需要重写一下,一旦Dom节点出现,我们就可以安全的实例我们的JQuery插件。

//

    afterRender: function () {
        this.$el.find('select').myPlugin();
    },

    render: function () {
        this.$el.html(this.template());
        setTimeout(this.afterRender, 0);
    }

//

可是,我们会看到.afterRender()没有被找到。
咋办?把我们.bind()加进去:

//

    afterRender: function () {
        this.$el.find('select').myPlugin();
    },

    render: function () {
        this.$el.html(this.template());
        setTimeout(this.afterRender.bind(this), 0);
    }

//

现在afterRender()可以在正确的上下文中执行了。

整合事件绑定和QUERYSELECTORALL

DOM API一个重大提高就是querySelector,querySelectorAll和classList API等等。

然而,并没有原生添加事件到多个节点(nodeList)的方式。所以,我们最终偷窃了forEach函数,来自Array.prototype,如下:

Array.prototype.forEach.call(document.querySelectorAll('.klasses'), function(el){
    el.addEventListener('click', someFunction);
});

更好一点,用.bind():

var unboundForEach = Array.prototype.forEach,
    forEach = Function.prototype.call.bind(unboundForEach);

forEach(document.querySelectorAll('.klasses'), function (el) {
    el.addEventListener('click', someFunction);
});

现在我们有了小巧的方法来循环多个dom节点。

总结

如你所见,.bind()函数可以用来完成各种目的,同时简化代码。希望这个概述能让你的代码能使用.bind(),利用好变化的this这个特征。

『能力有限,如有疑问,纰漏,速指出,感谢你』

查看原文

赞 5 收藏 43 评论 9

认证与成就

  • 获得 3 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-10-20
个人主页被 251 人浏览