分类目录归档：JavaScript
JavaScript中模块模式的应用
模块模式是JavaScript中使用最广泛的模式，模块利用了闭包的特性
Module模式的基本特征：
- 模块化，可重用
- 封装了变量和function，和全局的namaspace不接触，松耦合
- 只暴露可用public的方法，其它私有方法全部隐藏
//自执行函数（immediately invoked function）
(function(){
}());
//这样也可以（this works too）
(function(){})();
//增加参数（add params to first）
(function(my){
}(variable));
//增加返回值(add return)
(function(my){//
return my;
}(variable));
//这样MODULE就是返回的my(give my to MODULE)
//js加载完就会运行这个函数，并且把返回值赋予MODULE
var MODULE = (function(my){//
return my;
}(variable));
//把自执行函数的参数换成返回的变量(change immediately invoked function parameter)
var MODULE = (function(my){//
return my;
}(MODULE || {}));
//你可以在其他任意地方这样定义MODULE
//所有的方法都会可以用MODULE来调用
//now you can define MODULE anywhere you like,
//all the functions inside will be extended to others
// 增加功能（add capabilities）
var MODULE = (function (my) {
//you cannot access inner variable
var variable = {};
// this is inner function, you cannot call it outside of the MODULE
function innerFun(){
console.log(variable);//you can access inner variable here
}
//this function will be exported, you can call it outside
my.someFun = function(){
//you can call inner variable and function here
console.log(variable);
innerFun();
};
return my;
}(MODULE || {}));
//MODULE || {} is the parameter passed to this MODULE,
//equals "my" inside MODULE
//you can define MODULE anywhere else
AngularJS中使用filter显示数字的千分位号
点击Result查看效果。
Data Types in JavaScript
null and undefined in javascript
> var un;
> console.log(un);
undefined
> var nu = null;
> console.log(nu);
null
> typeof un
'undefined'
> typeof nu
'object'
> un == nu
true
> un === nu
false
> Number(undefined)
NaN
> Number(null)
undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
Angular简单的判断情况绑定数据 AngularJS simple conditional binding
在AngularJS的使用$apply更新model
先看一个不能work的
如果ng-app和ng-controller写在一个dom里，这样就不能更新model里的值
分开写就没问题
解决这个问题可以这样：
当然也可以这样：
function Ctrl($scope) {
$scope.message = "Waiting 2000ms for update";
setTimeout(function () {
$scope.message = "Timeout called!";
$scope.$apply();
}, 2000);
}
Check if Function Exists Before Calling
When using scripts that are shared between different areas of a site, there may be cases where a function is called that doesn’t exist. It makes sense on one page (the dependency is there) but not another. The difference is too slight to warrant forking the file into different versions. Instead, you can just check if the function exists before calling it to avoid the error:
AngularJs分页pagination directive
html
<div ng-app="hello">
<div ng-controller="pagingCtrl">
<paging>
<table class="table table-striped table-bordered table-hover">
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr ng-repeat="item in data">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</table>
<ul class="pagination" num-pages="tasks.pageCount" current-page="tasks.currentPage" on-select-page="selectPage(page)">
<li ng-class="{disabled: noPrevious()}"> <a ng-click="selectPrevious()">«</a>
</li>
<li ng-repeat="page in pages" ng-class="{active: isActive(page)}"> <a ng-click="selectPage(page)">{{page}}</a>
</li>
<li ng-class="{disabled: noNext()}"> <a ng-click="selectNext()">»</a>
</li>
</ul>
</paging>
</div>
</div>
js
var myModule = angular.module('hello', []);
myModule.controller('pagingCtrl', function ($scope, $http) {
$scope.data = [{
id: 1,
name: "a"
}, {
id: 2,
name: "b"
}];
$scope.currentPage = 1;
$scope.numPages = 5;
$scope.pageSize = 10;
$scope.pages = [];
//get first page
/*$http.get('url',
{
method: 'GET',
params: {
'pageNo': $scope.currentPage,
'pageSize': $scope.pageSize
},
responseType: "json"
}).then(function (result) {
$scope.data = result.data.Data;
$scope.numPages = Math.ceil(result.data.Total / result.data.PageSize);
});*/
$scope.onSelectPage = function (page) {
//replace your real data
/*$http.get('url',
{
method: 'GET',
params: {
'pageNo': page,
'pageSize': $scope.pageSize
},
responseType: "json"
}).then(function (result) {
$scope.data = result.data.Data;
$scope.numPages = Math.ceil(result.data.Total / result.data.PageSize);
});*/
};
});
myModule.directive('paging', function () {
return {
restrict: 'E',
//scope: {
// numPages: '=',
// currentPage: '=',
// onSelectPage: '&'
//},
template: '',
replace: true,
link: function (scope, element, attrs) {
scope.$watch('numPages', function (value) {
scope.pages = [];
for (var i = 1; i <= value; i++) {
scope.pages.push(i);
}
alert(scope.currentPage)
if (scope.currentPage > value) {
scope.selectPage(value);
}
});
scope.isActive = function (page) {
return scope.currentPage === page;
};
scope.selectPage = function (page) {
if (!scope.isActive(page)) {
scope.currentPage = page;
scope.onSelectPage(page);
}
};
scope.selectPrevious = function () {
if (!scope.noPrevious()) {
scope.selectPage(scope.currentPage - 1);
}
};
scope.selectNext = function () {
if (!scope.noNext()) {
scope.selectPage(scope.currentPage + 1);
}
};
scope.noPrevious = function () {
return scope.currentPage == 1;
};
scope.noNext = function () {
return scope.currentPage == scope.numPages;
};
}
};
});