摘要：效果預覽來自的效果預覽引用了，已被墻，請謹慎預覽轉載聲明這篇文章其實源自的博客。主要內容整個效果都建立在的里面。為了彌補這個缺陷，我決定改成在函數中對進行操作。重點來了，是和初始位置的相對位置。就是元素的初始值。

來自codepen的效果預覽：（引用了angularjs，已被墻，請謹慎預覽）
http://codepen.io/flybywind/pen/aNjxJa

這篇文章其實源自BenNadel的博客。在此我要分享一下自己的收獲和一些更改。

整個效果都建立在angularjs的directive里面?？梢韵氲剑髡呓壎薽ousemove事件，通過勾股定理計算的距離，除此之外，我還有些小收獲要跟大家分享一下：

directive中compile和link函數的區別

$interpolate和$compile這2個service的區別

如何把node內部包含的所有文本字母都用span包裹起來

relative定位和absolute定位的差別

根據BenNadel自己在博客中的解釋：

I use the compile() phase when I need to alter the structure of the DOM (Document Object Model) in a way that is based on nothing but the existing structure of DOM.

翻譯成漢字就是：當我需要根據原始DOM(文檔對象模型，說詳細了可能看不懂，還是用簡稱吧~)的結構對Dom進行改變時，我使用compile函數。
道理其實也很簡單，因為angluar會對Dom結構進行改變，當你進入link函數后，你看到的Dom結構可能跟你預期的不一樣，找不到你要的元素了，此時很多人可能就懵圈了。在BenNadel的另一篇博客中，他就給出了一個例子：首先他在一個directive中使用了template，在transclude部分（嵌入部分）中使用了ngRepeat。他發現，只有在Compile階段，才能訪問到使用了ngRepeat的元素，并且改變它們的class；而在link階段，是找不到的。
原因就是ngRepeat這個directive已經把那些元素從Dom樹中刪除了，它們會在隨后被加入，但是在link階段你是找不到的。
所以，在這種可能很多人一輩子都見不到的情況下，你才必須使用compile。
在以上的例子中，BenNadel還利用priority對同一個directive進行了兩階段處理，這種奇技淫巧從來沒見過，領教了。

其實很多時候，在link和compile中處理的結果是一樣的，但是細節上有些差異，比如以下情況：

    {{ word }}

其中bn-compile和bn-link分別是2個directive，一個在compile函數中打印出日志“compile”，并且給element增加class "c1"，一個在link函數中打印出“link”，并且給element增加class "c2"，c1、c2都有css樣式進行展示。最終結果是生成的4個span都可以看到c1、c2的樣式，但是console中compile只打印了1次，link卻打印了4次。
這是因為，bn-compile是在compile階段修改的dom，它修改的是原始Dom結構，這跟你在html文檔中，手動寫上 class="c1"是一樣的。

當然，在link函數中，也有一些地方是compile做不到的，有的時候你可能就是要對已經部分渲染后的Dom結構進行修改，而且link函數中可以傳入scope，此時你可以進行數據綁定了。這也就是下面我要講到的。

在BenNadel的原始文章中，他使用了compile對dom結構進行修改。但是如果我的文本內容是通過數據綁定了，如下：

    {{hello}}

特效就失敗了，如下：

第二個div因為綁定的是動態數據，最終是以模板形式顯示的。
為了彌補這個缺陷，我決定改成在link函數中對Dom進行操作。其實就是把BenNadel在compile中的代碼放到link最開始執行就行了。另外，還需要對{{}}進行手動編譯，此時$interpolate就要閃亮登場了。
以下是我的部分js代碼：

  angular.module("Demo").directive(
        "scatterEffect",
// $compile是把字符串編譯為element，所以字符串必須是dom形式
// $interpolate是把表達式和data 綁定到一起，$compile中會調用$interpolate
    function ($document, $interpolate) {
        return ({
            link: link,
            restrict: "A"
        });

    function link(scope, element, attributes) {
       // 如果是compile，則無法獲取scope
       var realContent = $interpolate(element.html())(scope);
       element.empty().append(realContent);
       // 這是原來compile中的函數，element處理后，再放到link中調用
       wrapLetters(element);
           /*  other code  */
    }
 })

在以上代碼中，element.html()返回的是字符串，比如在處理第一個div時，就是Happy Friday You Beautiful People!，第二個div就是{{hello}}，開始我嘗試用$compile編譯這個字符串，結果控制臺顯示 unrecognized expression: Happy Friday You Beautiful People!以及unrecognized expression: {{hello}} ！問了一下google大叔，發現原來要用$interpolate才行。
$compile是把字符串編譯為element，所以字符串必須是dom形式；$interpolate是把表達式和data綁定到一起，$compile中會調用$interpolate，后者只是前者的子過程。顯然，在我這個情況下，用$interpolate才行。
其實Happy Friday You Beautiful People!扔到chrome，會自動給你加html和body使其正常顯示，但是angular沒法替你加，加上就亂套了。所以$compile必須接受標準的html語句，此處可以用正則判斷一下。我就懶得寫了。

這句話盡管很長，但是做起來，其實也很難(⊙﹏⊙)b。在此我只能奉上大神的代碼和我的膝蓋了，謹和諸君分享：

            function findTextNodes(parent) {
                // node是一個DOMElement, map返回一個jQuery對象，所以要想獲得array可以使用toArray() or get()
                /* 我的注釋
                    If the node is an element node, the nodeType property will return 1.
                    If the node is an attribute node, the nodeType property will return 2.
                    If the node is a text node, the nodeType property will return 3.
                    If the node is a comment node, the nodeType property will return 8.
                */
                // 此處的angular.element就是jQuery
                var textNodes = angular.element(parent).contents().map(
                    function operator(i, node) {
                        return ((node.nodeType === 1) ? findTextNodes(node) : node);

                    }
                );

                return (textNodes.toArray());

            }

            // I find and wrap each text-based letter, within the given parent, 
            // in its own Span tag.
            function wrapLetters(parent) {

                findTextNodes(parent).forEach(
                    function(node) {
                        // Replace each individual letter with a Span tag.         
                        var wrappedHtml = node.nodeValue.replace(/(S)/g, "$1");
                        // 最值得推敲的在這里：
                        var fragment = angular.element(document.createDocumentFragment())
                            .append(wrappedHtml);

                        node.parentNode.insertBefore(fragment[0], node);
                        node.parentNode.removeChild(node);
                        // 以下方法不行：jquery生成的元素列表默認丟棄了首尾空格！
                        //$(wrappedHtml).insertBefore(node);
                        //node.parentNode.removeChild( node );
                    }
                );

            }

其實提取textNode，然后正則替換，最后插入原來的位置，聽起來不難，但是如果利用jQuery把字符串轉換為dom，那么兩頭的空格就會丟掉，比如Happy Friday You 這個node，正則替換后wrappedHtml是這樣的：

jQuery轉換后，前后的空格都沒了。所以不能用它來轉換。
（哪位大神如果知道有可以控制jquery不丟空格的方法，請不吝賜教?。?br>最后，BenNadel大神也只好使用原生js進行dom樹的替換了。

下面我們說點關于css的知識。我經常對absolute元素進行top、left、right、bottom定位，我也知道這樣做之前，父元素必須用relative，但是我還真不知道原來relative元素也可以用TLRB這四兄弟進行操作！真是丟人，確實需要反思啊。下面附上英文解釋和中文對照翻譯：

static   Default value. Elements render in order, as they appear in the document flow   
absolute The element is positioned relative to its first positioned (not static) ancestor element   
fixed    The element is positioned relative to the browser window      
relative The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element"s LEFT position   
initial  Sets this property to its default value.

static是position的默認值，什么都不加就是那種效果；
absolute，大家最熟悉，TLRB指定的是和最近的relative父元素之間的相對位置
fixed，和瀏覽器窗口的相對位置，也比較簡單。
重點來了，relative是和初始位置的相對位置。這也正是relative這個名字的含義，以前都沒仔細想過。。。
initial就是元素的初始值。有些元素的初始值可能不是static。反正各種奇葩的元素都可能，或者將來可能出現。
所以，總結一下，absolute、fixed和relative都是position類型，只是相對的位置不同而已。
BenNadel正是利用了relative的這個特性，給每個span元素都設置為：

span.scatter-item {
    position: relative ;
    z-index: 100 ;
}

然后，在mousemove事件中，調整top、left的值，使它們在鼠標距離目標元素遠的時候，偏離自己的位置；在鼠標進入目標元素時，重新回到自己的位置。
（z-index好像沒用~~）

終于碼完了