熱門文章 (Popular Post)

顯示具有 JavaScript 標籤的文章。 顯示所有文章

[AngularJS][SignalR] AngularJS 與 SignalR 實作

By : Duran Hsieh

前言:

因為公司某個專案,為了達到即時更新資料,開始研究SignalR。
這個專案使用long polling方法,每隔一段時間向WebAPI Server要求資料,無法
達到前端、後端更改資料後,即時真正即時更新的需求,故改用SignalR套件,
來實作即時更新 (real time is so cool ! )。

(但實際效益與伺服器的負載量還需要再深入研究)


這個功能在專案上已經實作完畢,在開始實作前,我有找些教學影片與網站,
自己嘗試連接SignalR的服務,作成一個範例,這篇就是整個範例的實作過程,
除了記錄下來給未來的自己複習,也分享大家參考。

(若有說明或觀念錯誤,歡迎指導)

本篇文章同步發布於個人的blogger與點部落,文章最後有提供範例下載。
文長謹慎。


實作:

實作可以分成三段(可點超連結):
  1. 後端專案設定:SignalR相關設定,包含解決 cross domain 問題
  2. 前端專案設定:JQuery + AngluarJS 使用與設定
  3. 結果呈現:SiganlR成果呈現與範例專案下載

後端專案設定

Step 1首先我們先開啟新專案,選擇ASP .NET MVC 4 Web Application
          專案名稱為 SignalRDemo
          File => New Project => ASP .NET MVC 4 Web Application
          Name is SignalRDemo

[Chrome Developer Tools] Javascript Debug and CSS Test

By : Duran Hsieh


前言:

從事網站開發已經四年多(研究所2年、就業2年多),雖然多數都是後端開發,但因為是網站開發,我必須多少需要學習CSS與JavaScript基礎,協助調整畫面與簡單作一些前端處理(如防呆、套件處理...等)。

三年前經由同學介紹與自學,知道能夠使用瀏覽器工具進行簡單的測試與修改。
這一篇紀錄如何使用瀏覽器(Google Chrome)進行CSS測試與JavaScript Debug的簡易方法:

Tag : , ,

[JavaScript]基礎概念筆記

By : Duran Hsieh

JavaScript 常見幾種function方式:


function jsutDo(...){}

function getSomething(){ ... return somthing;}

function doWithArg(arg){
    // use arg
}

function doWithArg(arg1, arg2){
    // use arg1 or arg2
}

Function多載?

log(f1("one",2,0.78,{},[]));
function f1(){
    debugger;
}
輸入arguments 會發現參數帶入"one"、2、0.78、{object}{}、{array}[]


Method

var ops = function addNumbers(n1,n2){
        return n1+n2;
    }
};
var x = ops.add(3,5)   //x==8
var y = ops.addNumbers(3,5) //not valid


Function in function

inner function 不能直接被呼叫
function outerFunction(n){
    function innerFunction(){
        return n*n;
    }
}
var x = outerFunction(4); //x == 16


Immediate Functions

(function() {...}());
or
(function() {...})();


Module Pattern

因為回傳的為物件,故可以直接呼叫getHiddenYear方法。
var mod = (function(){
    var m =2000,c=0,d=10,y=2;
    return{
        getHiddenYear : function(){
            return m+c+d+y;
        }
    }
}());
var x = mod.getHiddenYear(); //x ==2012


其他範例一:

function add(n1, n2){
    return n1 + n2;
}

function calc(n1,n2, processForCalc){
    return processForCalc(n1,n2);
}

function executeNath(){

    setOutput(calc(4,4,add));
}


Array:

var x = [];

var fruit = ["apple","orange","banana","strawbery","cherry"];
fruit .push("pear");  //push
fruit.pop(); //pop
fruit.sort(); //sort

var vegetables = ["carrot","broccoli","cauliflovd"];
fruit = fruit.concat(vegetable); //連接字串
fruit.slice(0,1); //index 0 -> index 1  will print apple
fruit.slice(1,2); //index 1 -> index 2  will print orange
fruit.slice(1,2,"melon","grape"); // will print apply,melon,grape,strawberry,cherry

fruit = fruit.map(function (i) {return i.toUpperCase();} ); //will print upper case;

fruit = fruit.filter(function (i) {return i[0] ===  "a" ;} ); //will print apply

fruit.every(function (i) {return i[0]==="a"}) //false 不是每個開頭都是a
fruit.every(function (i) {return i.length > 0}) //true 每個字串長度都>0

fruit.some(function (i) {return i.length > 0}) //true 部份字串長度都>0
fruit.some(function (i) {return i[0]==="a"}) //true 部份開頭都是a

fruit.forEach(function(i){

});

Object

var dog = {};
dog.breed = "German Shepherd";
dog.bark = function () {log("woof")};

var dog = {
    breed: "German Shepherd";
};


註記:
The variable in javascript are weakly-typed
截錄自MVA : developing in HTM5 with JavaScript and CSS3 Jump Start
Tag : ,

- Copyright © Duran Hsieh @ Matsurigoto - Date A Live - Powered by Blogger - Designed by Johanes Djogan -