«

»

this指针变更,重新bind

快抢沙发

这是一个面试题,

1 .    var Obj=function(msg){
2 .                  this.msg=msg;
3 .                  this.shout=function(){
4 .                               alert(this.msg);
5 .                   };
6 .                  this.waitAndShout=function(){
7 .                                setTimeout(this.shout,2000);
8 .                 };
9 .        }
10.        var aa=new Obj("abc");
11.        aa.waitAndShout(); //2s后undefined

按照上述代码的结果就是2秒后弹出alert,内容是”undefined”,而面试官的意思是怎么简单的让2秒后的alert弹出的内容为abc。
有网友给出如下解答,用that来指向原来的this,当然that不是什么js关键字,方法还是很实用的。

var Obj=function(msg){
                this.msg=msg;
                var that = this;
                this.shout=function(){
                              alert(that.msg);
                  };
                 this.waitAndShout=function(){
                              setTimeout(this.shout,2000);
                };
       }
       var aa=new Obj("abc");
       aa.waitAndShout(); //2s后

也有大神提出了别样的解决方案,只用改setTimeout那一句。

setTimeout(this.shout.bind(this),2000);

同时TA是这样回复的–此题关键在于: 将 this.shout 传给 setTimeout 后,shout 的 this 就不是 aa 而是 window 了,因此要用 bind 重新绑定。

2016.05.19
H
阅读全文...

AngularJs用ng-click,ng-if等轻松实现购物车功能

用angulajs里面的ng-model实现input的默认值,ng-click来实现点击,用ng-if来判断“购物车清单”是否需要显示,用ng-repeate来实现购物车里面的内容的循环输出。
HTML代码如下

<body ng-app="app">
      <div ng-controller="FCtrl">	
		<h2>{{data2.msg}}</h2>
		<input type="text" ng-model="data2.shopcart['0']">
	</div>
	<div ng-controller="Shopping">	
		<input type="text" class="formcontrol" ng-model="goods">
		<span class="input-group-btn">
			<div class="button" ng-click="buy()">添加</div>
		</span>
		
		<h1 ng-if="shopcart.length>0">购物车清单</h1>
		<ul class="list-group">
			<li ng-repeat="item in shopcart track by $index">{{item}}
				<a ng-click="shopcart.splice($index,1)">删除</a></li>
		</ul>
	</div>
</body>

Javascript代码如下:

angular.module("app",[])
.controller('FCtrl',function($scope,Data2){
	$scope.data2=Data2;
})
.controller('Shopping',function($scope,Data2){ //购物车
	$scope.shopcart=Data2.shopcart;
	$scope.buy=function(){
		$scope.shopcart.push($scope.goods);
	}
})
2016.05.18
H
阅读全文...

Angularjs的双向绑定

AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-bind)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。
在html中:

<body ng-app="app">
	<div ng-controller="CounterC">
	    <h3>{{cc}}</h3>
	    <h3 ng-bind="cc"></h3>
	    <button ng-click="counting()">递增</button>
	</div>
</body>

在js中

angular.module("app",[])
.controller('CounterC',function($scope){
	$scope.cc = 0;
    $scope.counting = function(){
    	$scope.cc++;
    }
})

如上,我们在html中先定义一个angular的app,指定一个angular的controller,则该controller会对应于一个作用域(可以用$scope前缀来指定作用域中的属性和方法等). 则在该CounterC的作用域内的HTML标签, 其值或者操作都可以通过$scope的方式跟js中的属性和方法进行绑定.

这样, 就实现了NG的双向数据绑定: 即HTML中呈现的view与AngularJS中的数据是一致的. 修改其一, 则对应的另一端也会相应地发生变化。
NG中的app相当于一个模块module, 在每个app中可以定义多个controller, 每个controller都会有各自的作用域空间,不会相互干扰。

<div>
    单价: <input type="number" min=0 ng-model="price" ng-init="price = 299"><br>
    数量: <input type="number" min=0 ng-model="quantity" ng-init="quantity = 1"><br>
    总价: {{ quantity * price }}
</div>

你会惊喜地发现, 甚至不用写一行的JS代码, 即可完成计算并在界面展示结果.

即: 在前端html中使用{{ }}括起来的变量, 是跟AngularJS中对应的controller作用域内的属性绑定在一起的. 实际上,{{}}等同于ng-bind指令, 即ng-bind=”myData”就能将NG中的myData数据跟前端对应元素绑定在一起.这样的话, 可以非常方便地做到从NG中获取任意数据并实时展示在页面上了.

另外, $scope对象还提供了一个$apply方法, 用于进行html页面上的更新, 使用方式为:

$scope.$apply(function(){
  $scope.myValue = "NewValue";
});

$scope对象, 我们可以理解为NG框架中的一个作用域对象, 在该作用域内可以做到数据和视图的相互绑定, 同时又能与其他$scope对象的作用域隔离开来.

当然, $scope也可以实现继承, 这部分内容在以后接触NG框架中其他对象的时候再分别做记录.

2016.05.17
H
阅读全文...
  • sitemap_baidu