[JS] 偵測設備是否支援觸控

$(document).ready(function() {
var $body = $(‘body’);
var detectMouse = function(e){
if (e.type === ‘mousedown’) {
alert(‘Mouse interaction!’);
}
else if (e.type === ‘touchstart’) {
alert(‘Touch interaction!’);
}
// remove event bindings, so it only runs once
$body.off(‘mousedown touchstart’, detectMouse);
}
// attach both events to body
$body.on(‘mousedown touchstart’, detectMouse);
});

參考來源:http://stackoverflow.com/questions/7838680/detecting-that-the-browser-has-no-mouse-and-is-touch-only

[ChUI] 快速打造iOS like app

http://www.chocolatechip-ui.com/

http://www.appliness.com/getting-started-with-html-mobile-application-development-using-jquery-mobile-requirejs-and-backbonejs/

Tools – HTML, JS, CSS

http://www.layoutit.com/build

http://jsfiddle.net/

http://css-tricks.com/

 

AngularJS – angular.Module常用API

以下介紹angular.Module幾個常用的API,更多方法請至官網查看:http://docs.angularjs.org/api/angular.module

A. angular.module: 給前端ng-app用的模組產生器函數。用法:angular.module(name[, requires], configFn); 回傳值:angular.Module

PS: [requires]通常包括:’name.filters’, ‘name.services’, ‘name.directives’

B. angular.Module API介紹:

1.config(configFn): 設定時期的函數區塊configFn(injectables)。injectables是一些provider, 例如: $routeProvider

2.run(initializationFn): 所有module都載入後初始的執行區塊initializationFn(injectables)。 injectables是一些變數, 例如: $rootScope

3.value(name, object): 設定service的key-value。例如: value(‘version’, ‘0.1’)

4.factory(name, providerFunction): 跟service方法類似,但可以回傳更複雜的Object。例如: factory(‘getNum’, function(){return 123;})

5.filter(name, filterFactory): 專門做過濾的factory類型,用|接前端的param變數。例如:app.filter(‘greet’, function() {

return function(param) {
return ‘Hello, ‘ + param+ ‘!’;
};

});

6.directive(name, directiveFactory): 用法見之前文章

Configuration Blocks: (一般config的縮寫)

  1. angular.module(‘myModule’, []).
  2. value(‘a’, 123).
  3. factory(‘a’, function() { return 123; }).
  4. directive(‘directiveName’, …).
  5. filter(‘filterName’, …);
  6. // is same as
  7. angular.module(‘myModule’, []).
  8. config(function($provide, $compileProvider, $filterProvider) {
  9. $provide.value(‘a’, 123);
  10. $provide.factory(‘a’, function() { return 123; });
  11. $compileProvider.directive(‘directiveName’, …);
  12. $filterProvider.register(‘filterName’, …);
  13. });

factory, service, provider(value) 之間的差異

http://stackoverflow.com/questions/16565105/angularjs-what-is-difference-of-creating-service-method-between-module-service-a

DataTables.net server side processing

http://www.datatables.net/release-datatables/extras/Scroller/server-side_processing.html

http://activeengine.net/2010/12/19/how-to-create-server-side-paging-for-datatables-net-with-asp-net/

http://stackoverflow.com/questions/8667649/how-do-i-modify-ajax-url-of-a-query-datatable

http://datatables.net/ref#fnDrawCallback

AngularJS – controller簡介

controller就像是MVVM中的「view model」,可以在一個app下定義多個controller, 每個controller包含不同的callback function, 用法:

var app = angular.module(‘myApp’, []);

app.controller(‘ctrlName’, function($scope){

$scope.Func1 = function(){

//detail of the callback function

}

});

AngularJS – directives簡介

directives是AngularJS重要的屬性,可以讓特定element以自訂屬性達到模組化功能。使用方法:

var app = angular.module(‘myApp’, []);

app.directive(‘directiveName’, function(){

restrict: ‘指定此directive的使用方式, 有A(屬性)/E(元素)/C(類別)/M(註解), 以A和E較常用’, ex: A: <div my-directive="exp"></div>, E: <my-directive>,

controller: function($scope){

this.Func1 = function(){ 自訂此controller的callback函數; }

},

template: ‘預先寫好的html片段’,

replace: ‘如果設為true則template會取代原來的元素,否則append到原來的元素’,

compile: funcion(element, attrs, transclude){ //先於link,編譯template到DOM元素

//return link function物件;

},

link: funcion(scope, element, attrs, ctrl){ //將local scope變數與DOM元素建立關聯

element.bind(‘eventName’, function(){

套用的element綁定事件callback, 後面的attr和ctrl兩參數可作用在其他的element上,

ex: scope.$apply.(attr.enter); //當element觸發’eventName’事件時, 執行此scope的所有具有enter屬性的回呼函數

});

},

priority: ‘當一個DOM元素包含多重directive,可設定此directive優先權。值愈大愈高,預設值是0’,

terminal: ‘如果設為true,在有設priority的多重directive下,執行到此directive時就會中止’,

scope: ‘true 或 {}’, //如果設為:

/*

true – 此directive會產生一個新的scope。注意: 多重directive的元素,只會有一個新scope。此設定不適用有template的情況,template有自己的’isolate’ scope。

{} – 獨立於directive的’isolate’ scope將會套用在此directive的template。{}裡的property可衍生parent的scope變數到自己的scope:
。@ 或 @attr – 綁定此DOM的屬性,得到的永遠是string。例如template: <widget my-attr="hello {{name}}">,此widget有scope: { localName:’@myAttr’ },則這裡localName的值會反映到parent scope的{{name}}
。= 或 =attr – local scope與parent scope的屬性雙向綁定,改變會互相反映。如果parent scope的屬性不存在會拋出NON_ASSIGNABLE_MODEL_EXPRESSION錯誤,避免這情況可以設為=? 或 =?attr。
例如:template: <widget my-attr="parentModel">,此widget有scope: { localModel:’=myAttr’ },則這裡localModel的值和parent scope的parentModel會互相反映。
。& 或 &attr – 綁定計算的expression。例如template: <widget my-attr="count=count+value">,此widget有scope: { localFn:’&myAttr’ },則這裡localFn會指向count=count+value表達式。
綜合範例:
<div ng-show="visible">
<h3>{{title}}</h3>
<div class="body" ng-transclude></div>
<div class="footer">
<button ng-click="onOk()">Save changes</button>
<button ng-click="onCancel()">Close</button>
</div>
</div>
可用以下的scope設定綁定:
scope: {
title: ‘@’, // the title uses the data-binding from the parent scope
onOk: ‘&’, // create a delegate onOk function
onCancel: ‘&’, // create a delegate onCancel function
visible: ‘=’ // set up visible to accept data-binding
}

*/

});

useful live demo:

http://jsfiddle.net/colvint/uAwJG/

https://github.com/angular/angular.js/wiki/JSFiddle-Examples

KnockoutJS – 不用ko foreach的bind array方法

http://jsfiddle.net/G9T3u/13/

HTML:

<ul id=’tw’/>

JavaScript:

var li_array = [];
li_array.push({item:’A’});
li_array.push({item:ko.observable(‘B’)});
li_array.push({item:’C’});

var inner_html = “;
for(i=0, max =li_array.length; i<max; i++){
inner_html += ‘<li data-bind="text: items()[‘+i+’].item"/>’;
}
$(‘#tw’).html(inner_html);
var viewModel = function(list){
this.items = ko.observableArray(list);
}
ko.applyBindings(new viewModel(li_array));
li_array[1].item(‘b’);

最近要survey的東東

http://code.angularjs.org/

http://egghead.io/ Angular course

http://angular-ui.github.io/ng-grid/ Angular grid

http://morlay.tla42.org/coding/2013/02/20/AngularJS-Core/ Angular核心

http://morlay.tla42.org/coding/2013/03/01/AngularJS-Socket.IO/

http://expressjs.com/

http://sailsjs.org/

https://www.firebase.com/

http://mongodb.github.io/node-mongodb-native/

http://cnodejs.org/topic/5206581b44e76d216aae072e

javascript getter setter

http://robertnyman.com/javascript/javascript-getters-setters.html

http://ejohn.org/blog/javascript-getters-and-setters