Code Learning: 3月 2017

2017年3月16日星期四

Why 『Map<> = new HashMap()』 not 『HashMap<> = new HashMap()』

Reason

1.less typing

2.more flexible.

For example:

You can see the image below, use Map<> = new HashMap() can easily change HashMap to TreeMap

2017年3月15日星期三

調派請求 servlet forward include sendRedirect

Reference
https://openhome.cc/Gossip/ServletJSP/DispatchRequest.html
https://www.javaworld.com.tw/jute/post/view?bid=6&id=50491&sty=1&tpg=1&age=1
https://read01.com/R3dy.html
http://fecbob.pixnet.net/blog/post/43270957-%5Bjsp%5D-servlet%E7%9A%84%E5%B9%BE%E7%A8%AE%E9%A0%81%E9%9D%A2%E8%B7%B3%E8%BD%89%E6%96%B9%E5%BC%8F

Sevlet 請求轉發主要的三種方式

redirect：
1.重定向,包含兩次瀏覽器請求，瀏覽器根據url請求一個新的頁面，所有的業務處理都轉到下一個頁面，url發生改變。
2.可以將頁面跳轉到任何頁面，不一定局限於本『web內部應用中』，如：
response.sendRedirect("HTTP://www.ycul.com");
3.跳轉後瀏覽器網址列變化。
這種方式要傳值出去的話，只能在url中帶parameter或者放在session中，無法使用request.setAttribute來傳遞。

response.sendRedirect("other.view");

forward：
1.轉發，將當前request和response對象保存，交給指定的url處理。並沒有表示頁面的跳轉，所以url不會發生改變。
2.頁面的路徑是相對路徑。forward方式『只能跳轉到本web應用中的頁面上。』
3.跳轉後瀏覽器網址列不會變化。
使用這種方式跳轉，傳值可以使用三種方法：url中帶
白話：就這樣了，我不會再對請求和回應做任何處理了

parameter，session，request.setAttribute
req.getRequestDispatcher("hello.jsp").forward(req, resp);

include
(通常不會在servlet內使用，而是應用在jsp<jsp:include>)：
意為包含，將當前request和response對象保存，交給指定的url處理，沒有頁面的跳轉，所以url不會發生改變，但是會將include的Servlet回應包括至目前的回應之中。
例如：
1.servletA 若include→servletB
2.servletB forward→jsp
則jsp會含有servletA『轉向前&轉向後執行的所有資訊』+ servletB『轉向前的資訊』
白話：servletA請servletB幫忙，等他完成請求和回應後，我會再對最後的請求和回應進行處理

RequestDispatcher dispatcher = req.getRequestDispatcher("other.view");
dispatcher.include(req, resp);

小提示
1.如果路徑以斜線("/")開頭，Container會將他視為『從這個Web應用程式的根目錄算起』，如果該路徑不是斜線開頭，就會被視為『相對於原始的請求』，但不能誘騙Container至Web以外的路徑，這是行不通的
總結
1.redirect與include、forward的區別在於是不是同一個Request，redirect會有兩次交互。

2.include與forward的區別在於輸出的內容，include包含本身servlet與跳轉頁面內容的結果，而forward不包含本身servlet的內容。
---------------------------------------------------------------------------------
include 相關補充

Refrence
https://www.javaworld.com.tw/jute/post/view?bid=6&id=50491&sty=1&tpg=1&age=1

在JSP技術中，您可以選擇在
1.編譯時期include一個網頁 <%@include>
2.執行時期include一個網頁 <jsp:include>

include一個網頁表示暫時將response的權限交給被include的網頁，在include的網頁執行完畢或送出內容之後，response的權限會再度回到要求include的原網頁。

1.<%@include> 選擇在編譯時期(程式碼compile的時候)include網頁的好處是效能，JSP引擎不用再動態呼叫被include的網頁，被include的網頁被當作要求include的網頁的一部份，您可以使用指令元素include來於編譯時期include網頁
通常用來include『靜態的網頁』
(當進到該網頁的第一次時，沒有帶入任何動態參數時適用)
(但該include網頁中依然可以寫JSTL or EL 的語法，依據某些情況，接收參數)

例如：

2.<jsp:include>來於動態時期include網頁，並可搭配<jsp:param>動作元素來指定參數給被include的網頁，被include的網頁執行完後，response的權限會交回到要求include的網頁中，我們使用以下這個例子來說明：

user=Jstin 此參數，是動態時期給予的

2017年3月9日星期四

基本的 jQuery 插件 - How to Create a Basic Plugin

Reference:
https://learn.jquery.com/plugins/basic-plugin-creation/
http://maidot.blogspot.tw/2011/04/jquery-this-this-different-between-this.html

1.創建一個基礎的jQuery plugin

-把我們創造的plugin加入至$.fn之中
(擴展$.fn.abc(),即$.fn.abc()是對jquery擴展了一個abc方法,那麼後面你的每一個jquery實例都可以引用這個方法了)

$.fn.greenify = function() {
    this.css( "color", "green" );
};
 
$( "a" ).greenify(); // Makes all the links green.

-注意這邊是使用css()，所以我們也用this，而非$(this)，
因為在JQuery中this代表目前的DOM對象，$(this)代表我們用JQuery所選取的JQuery對象，
在上述方法中，this代表greenify()，而他與.css()都同屬同一個jQuery object的一部份

2.Chaining 讓自建jQuery plugin可與其他方法相連
新增一行『return this』把該jQuery Object 傳回

$.fn.greenify = function() {
    this.css( "color", "green" );
    return this;
}
 
$( "a" ).greenify().addClass( "greenified" );

3.確保plugin不會與其他JavaScript libraries產生衝突
(Protecting the $ Alias and Adding Scope)
在最外層多加一層$()宣告

(function ( $ ) {
 
    $.fn.greenify = function() {
        this.css( "color", "green" );
        return this;
    };
 
}( jQuery ));

4.讓一個plugin根據參數，做出不同的動作

(function( $ ) {
 
    $.fn.popup = function( action ) {
 
        if ( action === "open") {
            // Open popup code.
        }
 
        if ( action === "close" ) {
            // Close popup code.
        }
 
    };
 
}( jQuery ));

5.透過each()，對多個指定的DOM elements進行處理

$.fn.myNewPlugin = function() {
 
    return this.each(function() {
        // Do something to each element here.
    });
 
};

Notice that we return the results of .each() instead of returning this. Since .each() is already chainable, it returns this, which we then return. This is a better way to maintain chainability than what we've been doing so far.

.each() 方法，會遍歷jQuery對象中的每一個DOM元素
然後透過$(this) 將每一個取到的DOM變成jQuery Object

 return this.each(function() {
    var link = $(this);
    link.css("color", setting.color)
});

6.讓一個plugin接受『一組設定』

(function ( $ ) {
 
    $.fn.greenify = function( options ) {
 
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "white"
        }, options );
 
        // Greenify the collection based on the settings variable.
        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });
 
    };
 
}( jQuery ));

Example usage:

$( "div" ).greenify({
    color: "orange"
});

defaults 設定的顏色透過$.extend()把覆蓋成傳進來的值
The default value for color of #556b2f gets overridden by $.extend() to be orange.

7.完整範例
my_plugin.js

(function($) {
 
    $.fn.greenify = function(action, options) {
        var setting = $.extend({
            color: "green",
            backgroundColor: "white"
        }, options);
 
        if (action === 'div') {
 
            return this.css({
                color: setting.color,
                backgroundColor: setting.backgroundColor
            });
        };
 
        if (action === 'a') {
            return this.each(function() {
                var link = $(this);
                link.css("color", setting.color)
            });
 
        }
 
    };
 
}(jQuery));

template.html

<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/my_plugin.js"></script>
    <script>
    $(document).ready(function() {
        $("a").greenify("a", {
            color: "red"
        });
 
        $("div").greenify("div", {
            color: "white",
            backgroundColor: "red"
        });
    });
    </script>
    <title>jQuery</title>
 
    <body>
        <a href="www.google.com.tw">GoogleGoog</a>
        <a href="www.yahoo.com.tw">YahooYahoo</a>
        <div>
            Hello
        </div>
    </body>
 
</html>

2017年3月16日 星期四