從Nodejs腳本到vue首頁看開源始末的DemoHouse

最近上Github看見了大漠的DemoHouse項目，看到Issues說準備作一個首頁，因而個人第一想法就是作一個md列表頁面，md文件能夠很容易的生成一個html文件。剛剛作好腳本文件，能夠生成list.md。隨後提了pr。同時看到 @jerexyz 使用gulp構建工具作好了一個生成index.html的工具，我也就暫時放棄了繼續後面的工做，還好沒作，繼續作的話生成出來的也比較粗糙，還得再繼續美化修改。想象一下，若是這時我新收集了一個Demo，準備提交版本庫，我是否是還得先執行一下命令 node index.js 而後再添加暫存區，提交版本庫，推遠程。如何省略執行命令行這一句呢？

git hook (鉤子)

說到鉤子，不知道你們喜歡釣魚嗎？喜歡不喜歡應該都知道魚鉤，不知道的再看一下，魚鉤長這樣的。

這是有一期我愛發明裏面介紹的，一個釣魚狂熱愛好者發明的釣魚神器，看節目彷佛頗有效。一般咱們見到的魚鉤就只是上半部分，這裏卻多了一個小鉤，其實他就是咱們這裏準備學習的hook。

爲了達到某種效果，咱們添加的一個腳本，在正常流程執行的時候觸發這個腳本（我的拙略，若有偏頗忘指出）。

git的鉤子存放在 .git/hooks 目錄下，git init 時會自動生成一些示例腳本在該目錄下，腳本都是 .simple 後綴結尾，若是須要使用的時候，重命名取消後綴便可。

這裏是但願在存入版本庫以前生成列表頁，查詢文檔發現 pre_commit 是在 鍵入提交信息前運行 。

git add demo => pre_commit => git add list.md => git commit -m 'add new demo and update list.md'

pre_commit 是一個腳本文件，因爲nodejs寫好了一個腳本文件，因而添加了一個頭部，而後最後添加生成的list.md到暫存區間

git add demo => git commit -m 'add new demo and update list.md'

實際上咱們的操做流程就變成如上描述的樣子。這個就是正常流程，git commit 命名回車後先執行的是 pre_commit 腳本，再存入版本庫

自動生成list.md的工做到這裏就完成了，更多的鉤子文件這裏暫時不繼續擴展了。
又看到還有一個需求就是爲每一個demo添加一些其餘信息，例如：分類/做者等信息。這樣 @jerexyz 的項目工具怎麼修改實現一下呢，或者說其餘方案怎麼實現呢？

方案討論

參考 @jerexyz 的想法與 大漠 的思路，若是要配置多項信息我想就是在每一個demo下配置一個config.json文件靠譜一些。
或者像 @jerexyz 提出的直接title添加分類，方法也行，這樣存在修改index.html文件，還有就是配置信息多或者後期再增長修改就沒有配置文件方便直觀。若是在原來的工具的基礎上修改的話就須要生成幾個也買你，把分類數據統計出來，而後再爲每一個分類數據生成一次頁面，最後相互調用。是否是有一種其餘的方法來處理呢？恰巧最近又在學習vue，因而就準備嘗試一下。一個單頁就能夠搞定，不須要每次更新前端頁面，只須要更新後端數據文件db.json便可。

vue

在vue仍是版本號1打頭的時候看過文檔，沒有實際作過demo，後面天然而然仍是隻能對着文檔編碼。
一開始我是直接script編譯好的vue.js文件，而後實例化vue。也就是這樣子的

# index.html 中這樣引入vue
    <script type="text/javascript" src="vue.min.js"></script>

    # scirpt 標籤中這樣實例化，純純的文檔風
    var vm = new Vue({
        el: '#id',
        data: {
            message: '阿彌陀佛'
        }
    })

這樣子沒毛病，沒有任何問題。可是對於招牌需求這個構建工具那個構建工具，仍是要摸索學習學習。因而又決定嘗試一下也只是停留在文檔風的webpack。選擇它也是有緣由的，由於我重視基礎也更風啊，哈哈哈～

前期準備工做

這裏是寫在vue2.0.0的RC版本

• 建立項目目錄（這裏其實也跟風的玩了一下yarn，可是並沒太多感覺理解它的優秀，不作描述）

npm i vue-cli -g
    vue init webpack demo
    cd demo
    npm i
    npm run dev

自動啓動瀏覽器打開 http://localhost:8080 頁面，展現一個vue的初始模板頁面

• 列表頁組件
  不會從頭至尾手寫，還不會修改嗎？因爲暫時須要實現的就是一個列表，想到的就是 `v-for="demo in demos"

# 入口文件main.js中引入了app.vue組件

    # app.vue組件中包含了這裏咱們須要修改的list.vue

    # list.vue 
    /**
     * 組件的三個部分（html+js+css），若是描述感受vue就簡單了好多
     * template（html或者是自定義標籤）
     * script （js）
     * style （css）
     */
    <template>
        <ol>
            <li v-for="demo in demos"> {{ demo.title }} </li>
        </ol>
    </template>

    <script>
        export default {
            name: 'list',
            data: function() {
                return {
                    {
                        title: 'title1'
                    },
                    {
                        title: 'title2'
                    }
                }
            }
        }
    </script>

    <style>
        ol { /**/ }
        ol li { /**/ }
    </style>

須要注意的一點是這裏的data是一個函數，組件內的data都是函數的形式，至於爲何還沒去理解，先學會第一步如何使用。其實你寫成了對象形式，在開發者工具會輸出提示。

• 導入數據
  準備了一個數據文件db.js，修改以前生成列表的工具，把每一個demo下的配置文件讀取出來追加到db.js中。

# 如下代碼位於template中
    <div class="category" data-category="demo.category" @click="getCategoryDemos"> {{demo.category}} </div>
    # li標籤須要修改一下，若是newDemos存在，按照newDemos的分類數據輸出
    <li v-for="demo in (newDemos || demos}}"> {{ demo.title }} </li>

    # 如下代碼位於script中
    # 導入db.js
    import demos from './db'

    data: function() {
        return {
            demos: demos,
            newDemos: ''
        }
    }

    # 若是要分類顯示呢
    # 添加一個方法
    methods: {
        getCategoryDemos: function(e) {
            var newDemos = [];
            this.demos.forEach(function(demo) {
                if(demo.category === e.target.dataset.category) {
                    newDemos.push(demo);
                }
            })
            this.newDemos = newDemos;
        }
    }

• 顯示所有
  上面取巧式的把分類數據實現了，若是要顯示所有呢？即回到首頁。把newDemos的值設爲空不就行了嗎？數據綁定的好處就是這裏吧，監控數據的變化從新渲染。

# 添加template    
    <div class="goHome" @click="showAll"> Home </div>

    # 添加method
    showAll: function() {
        this.newDemos = '';
    }

• 預覽demo
  預覽demo即在列表頁面添加iframe標籤引入demo靜態頁面。默認是不顯示的，若是添加了一個判斷語句 v-if
  

# template add iframe
    <iframe src="{{ demo.url }}" scrolling="no" v-if="isShow"></iframe>

    # script 
    # data中添加isShow 
    data: function() {
        return {
            // 新增
            isShow: false
        }
    }

    # method中添加showAll
    method: {
        // 新增
        showAll: function() {
            this.isShow = true;
        }
    }

其它問題總結

• iframe https
  github page是https協議，iframe的資源多是http，也多是https。對於不肯定的狀況下，咱們不代表具體的協議，使用 // 。（不擴展討論其它問題）
  • URI 是https協議，iframe src是http協議
    Mixed Content: The page at 'https://domain.dev' was loaded over HTTPS, but requested an insecure stylesheet 'http://domain.dev'. This request has been blocked; the content must be served over HTTPS.
    
  • URI 是http協議，iframe src是https協議
    均正常加載訪問，iframe請求地址是https協議。
  • URI 是https協議，iframe src是https協議
  • URI 是http協議，iframe src是http協議
• 開源協議與開源精神
  截止昨晚22點左右，幾位國外的開發者在 漠大 的repo下開了issue，討論關於項目是否不該該存在，或者說是否是不該該拷貝其它平臺（codepen，Codrops …）上的內容在github備份一份。

  • 觀點一 原創
    國外：重視原創。對於原創的做品的保護或者尊重，咱們是否是不該該在其它位置備份別人的做品，而沒有署名源做者的版權信息（其實這一步是準備作，或者說是還沒來得及作，可是考慮到的）。只是沒想到國外的開發者對於原創的重視，還有在Twitter上發推討論，雖然也就那麼幾我的在討論，但其中不乏也有Codrops的開發者。
    國內：太多的技術類型的網站，除了做者本身主動分發。更多的仍是爬蟲抓取，最後抹去源做者的信息，也不註明來源出處。最後不得不說讓源做者的原創不能獲得很好的保護，還形成了不少垃圾水文的存在。

  • 觀點二 加源保持最新
    不少做者會一直更新本身的項目，可是咱們一般只是拷貝了一份最初的版本，若是有升級更新，一般咱們都不能使用到最新的內容。還會以爲怎麼參考的文章有錯誤，其實否則，是被抓取出來的沒有及時更新。

  • 觀點三 網絡問題
    國外開發者也知道中國的問題，其實這是讓我以爲有些可悲的，網絡始終是病。當問及codepen是否能訪問的時候，我說的不能，由於這個網絡不穩定，經常是不能直接訪問的，因此咱們經常收藏一些好的例子，以備不時之需，但最後卻始終是以爲國外的作的好。國內的好做品怎麼蒐集起來，怎麼讓他可以在trending上持續排第一，獲得不止國內開發者的確定。

雖然我也只是一個渣渣，可是我也有夢想，但願能夠更多的提高本身，參與開源，對於原創的保護以及鼓勵但願更多的人可以重視並自律參與，對於源進行物質的鼓勵或者說行爲上容許後再進行轉載。這路應該還很長…