hong's writing: front-end

顯示具有 front-end 標籤的文章。顯示所有文章

2016年11月29日星期二

var、let 的scope介紹

以往Javascript的變數宣告都用「 var 」，「 var 」屬於比較鬆散的變數宣告方式，即使在不同的地方宣告一樣的變數名稱，在瀏覽器上執行一樣不會出錯，而這個特性同時也很容易造成一些Bug，ES6出現的「 let 」就很好的補足了var的不足。

回顧var的特性，var屬於function scope，意思就是在function裡面宣告的變數只有在function裡面才有用，不會影響到外面，同樣的，也不能從外頭取得function裡的變數。

var i = 0;

function varTest() {
    var i = 100;
}

varTest();

console.log(i);

結果：0

function varTest() {
    var i = 100;
}

varTest();

console.log(i);

∆ 想直接取得宣告變數，結果就會是：

而function scope也代表只有在function裡面才算有自己的地盤，一旦沒有function包住var，那幾乎等於跟全域變數一樣了，會直接影響到外面宣告的變數。

var i = 0;

if (true) {
    var i = 50;
}

console.log(i);

結果：50

同樣包在大括號之間，但是像這樣的if statement沒有包覆住裡頭的var，連帶地影響到外面宣告的變數。

而let在一開始宣告就比var嚴謹了。

let i = 0;
let i = 50;

在這一步，瀏覽器會直接報錯：

而相較於function scope的var，let是block scope的，意思是在任何的{大括弧}裡面，let都會被緊緊包住，不會leak到外面去。

let i = 0;

if (true) {
    let i = 50;
}

console.log(i);

結果：0

在看歐萊禮的繁體中文書的時候，javascript的宣告變數scope會翻譯成「範疇」，不過如果用更白話文的方式來表達的話就是：

「只要宣告在xxx裡，就不會影響到別人」。

function scope：只要宣告在function裡，就不會影響到別人。

block scope：只要宣告在任何一個{區塊}裡，就不會影響到別人。

2016年10月15日星期六

簡易型即時更新頁面

這篇獻給需要急需要讓網頁呈現非同步刷新的人員而又沒時間學習優秀的framework的開發人員。

非同步刷新的意思是在一個網頁上，再刷新的時候只會有一個部分更新，而其他的部分不變，例如當使用者輸入搜尋字串，接著按下搜尋的時候，畫面上會有一個區塊專門顯示搜尋結果，而其他部分像選單、頁頭、頁尾之類的都不會受到更動，以下來示範如何用很簡單的方式跟後台取得資料並渲染在網頁上。

這次要使用的技術為ajax，要使用這項技術必須引用JQuery，接著才能使用ajax的程式語法：

<!doctype html>
<html lang="en">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<head>
    <script>
        function Search() {
            $.ajax({
                type: "POST",
                url: "backend.php",
                data: {
                    "type": "search",
                    "id": $("#search_id").val()
                },
                dataType: "json",
                success: function (str) {
                    document.getElementById('result').innerHTML = str.name;
                },
                error: function (e) {
                    alert('something wrong');
                },
                beforeSend: function() {
                    // 發送中                
                }
            });
        }
    </script>
</head>
<body>
    我是：<span id="result"></span>！    <hr />
    <input id="search_id" />
<button onclick="Search()">搜尋</button>
</body>
</html>

這裡的jquery並不一定要第三版，使用1.8.x之類的穩定版本也行。

Search方法裡面就是固定格式

url: 要送請求到哪裡
data: 要傳送過去的值
dataType : 回傳資料格式(json or html)

這邊要特別注意：dataType的大小寫是有差別的，寫成datatype就會出錯！

到這邊為止，網頁渲染結果：

接著backend.php：

<?php
$type = $_POST["type"];
$id = $_POST["id"];
$result = array();

if ($type == "search") {
    if ($id == 1) {
        $name = "Chen Chih Hong";
    } elseif ($id == 2) {
        $name = "a dog";
    }
}

$result = array("name" => $name);

echo json_encode($result);

用post接收資料，接著在依我們的程式邏輯在php運算或進資料庫撈資料，最後如果是json格式的話，我們用echo的方式回傳就行了，接著，前台收到資料，success裡的程式碼就會起作用，於是我們得到結果：

以上就是json格式的示範，如果用html的話，只需要改一點地方：

<!doctype html>
<html lang="en">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<head>
    <script>
        function Search() {
            $.ajax({
                type: "POST",
                url: "backend.php",
                data: {
                    "type": "search",
                    "id": $("#search_id").val()
                },
                dataType: "html",
                success: function (str) {
                    document.getElementById('result').innerHTML = str;
                },
                error: function (e) {
                    alert('something wrong');
                },
                beforeSend: function() {
                    // 發送中                
                }
            });
        }
    </script>
</head>
<body>
    我是：<span id="result"></span>！    
    <hr />
    <input id="search_id" />
<button onclick="Search()">搜尋</button>
</body>
</html>

在前端我們改動了兩個地方，dataType 還有success裡的最後str，把.name去掉了，因為我們後端再回傳值的時候，json的格式會需要從裡面指定其中一個名稱，然後才會去撈到名稱對應的值，而html是直接回傳echo後面的所有東西一次給前端，來看一下後端變成html回傳的方法：

<?php
$type = $_POST["type"];
$id = $_POST["id"];

if ($type == "search") {
    if ($id == 1) {
        $name = "Chen Chih Hong";
    } elseif ($id == 2) {
        $name = "a dog";
    }
}

echo $name;

瞬間變得簡單許多，對於只需要傳一個值來說的確不錯，但如果要傳多個值，還是用json的格式會比較工整，前端也比較好梳理。

結果出來會是一樣：

其實現在有很多的framework都已經把非同步刷新做得很好了，之前有接觸一點點RoR、angular、React，都有支援非同步刷新，幾乎都不需要像這樣手動刻一個了，一起加油學習吧！

2016年10月10日星期一

模擬圖片與文字 in HTML

接到案子的時候，有時候客戶來不及提供圖片及文字時，而工程師為了先看版面是否跟自己設計的一樣，需要先在裡面加入模擬的圖片或文字，不但圖片配合版面所需要的尺寸不盡相同，而且文字也需要隨機產生。

要讓模擬的圖片不用自己找來裁減，而文字也不用很麻煩的去找，我們需要點工具。

lorempixel 和 Lorem Ipsum 就是為這個應運而生的，以下來實際演示：

lorempixel的頁面：http://lorempixel.com/

程式的實作：

<img src="http://lorempixel.com/370/277" />

規則：http://lorempixel.com/寬/高/類別/第幾個

如果需要加文字在上面只需要在最後面加上 /你的文字。

點開右上方的images，從右方跑出圖片區，依序可以選擇你要的圖片：

Lorem Ipsum 用法則是十分容易，現在主流的編輯器像phpstorm有支援，而sublime也只要安裝emmet也可以直接使用，以下是實作：

lorem

然後按下Tab，Done。（這裡為了排版我分了三行，原來是一行。）

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem est

eveniet illo odit perspiciatis quae recusandae rerum sit ullam! Accusamus ad

assumenda debitis exercitationem hic ipsum nostrum quae rem!

如果你只想特定字數，只需要加上數字就行了：

lorem7

按下Tab，Done。

Lorem ipsum dolor sit amet, consectetur adipisicing.

2016年10月5日星期三

前端組件化開發願景

今天拜讀了张云龙大神的大作，讓我對前端開發大開眼界，以往的網頁流程是：

前端切版->丟給後端實作功能->完成

前端跟後端沒有建立一個工程化的機制，所以傳統的檔案架構是js統一放在js/，css統一放在css/和網站上的圖片通通都放在images/，看起來很乾淨整齊，但對於開發人員來講好處就真的只是乾淨整齊而已。

更新程式時，需要到各個資料夾，Ex. js/ 去尋找對應的function或檔案。

=> 對於開發人員只有一人的自幹小公司來講，不會有特別的感覺，如果開發人員三人以上，很容易發生奇怪的Bug，做一個改動可能會非常容易影響到整個項目，像如果有人在css裡面下了一個!important..........

而更需要擔心的是，時間一久，就算自幹的工程師也是還要再花一大堆時間去回想當初是怎麼寫的。

2. 有些檔案不知道該不該刪

=> 剛到一家新公司，接手一個離職前輩的專案，滿腔熱血的要好好大幹一場了！

不經意地打開images/，一看，哇操，怎麼有好幾百張圖片，我記得看專案沒這麼多啊？！趕緊問隔壁同事

「我也不知道啊，不過最好是不要亂動啦，免得出問題哈哈」
「哈哈哈哈....（鍵盤怎麼濕濕的）」

张云龙大神說過：

除非你的团队只有1-2个人，你的项目只有很少的代码量，而且不用关心性能和未来的维护问题，否则，以文件为依据设计的开发概念是应该被抛弃的。

原來我一直以來的開發模式都是應該被拋棄的.........

张云龙大神的前端模組化開發理念：

页面上的每个独立的可视/可交互区域视为一个组件；
每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；
由于组件具有独立性，因此组件与组件之间可以自由组合；
页面只不过是组件的容器，负责组合组件形成功能完整的界面；
当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。

剛好手頭上有個項目需要做翻修，就拿這個來做模組化實踐吧！

推薦前端工程師去看张云龙大神的github，裡頭有非常多乾貨。

https://github.com/fouber/blog

2016年3月16日星期三

webpack初探 part1

第一個決定學習的javascript框架為React，沒什麼特別的原因，就是想先把React學起來，不過看到FaceBook的Document開頭就傻了：

Using React from npm

We recommend using React with a CommonJS module system like browserify or webpack. Use the react and react-dom npm packages.

npm還有稍微使用的經驗，但是CommonJS、browserify和webpack又是什麼工具，完全陌生，「工欲善其事，必先利其器。」這回可是活生生的體會了，更何況連學習器具的先決條件都沒有，決定把webpack瞭解一下。

一般來說，沒有將Javascript的檔案放在模組化管理的話，內嵌在檔案裡的方法會是這樣的：

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>

通通包在script的tag裡，我現在用的也是這種方法，常見的問題有：

在全域的物件上面可能會互相衝突。
讀取的順序會非常重要。
開發者必須解決模組或是函式庫的相依問題。
在開發大項目的時候，script的tag會極長，而且如此一來，非常難以管理。

再來就是CommonJS的方式，CommonJS用同步的require方法去讀取一個文件，並回傳一個已輸出的對象。而一個模組能用將屬性加到exports物件的方式或者是直接設定一個值到module.exports裡面來指定輸出。

這是用node.js於伺服器端的流程。

好處：

伺服器端的模組可以重複使用。
目前已經有很多模組在CommonJS的方法裡面（npm）。
相對簡單

壞處：

不太適用在瀏覽器端，伺服器需要讀取的模組都已經存在本地的硬碟裡了，所以載入不用考慮同步或非同步的問題。
多個模組沒辦法平行要求。

於是於是有了AMD的解決方案。

AMD可以說是CommonJS的非同步版：

require(["module", "../file"], function(module, file) { /* ... */ });
define("mymodule", ["dep1", "dep2"], function(d1, d2) {
  return someExportedValue;
});

好處（幾乎就是克服CommonJS的缺口XD）：

可以用非同步的方式在瀏覽器端request。
平行載入多個模組。

壞處（也相對了增加CommonJS沒有的劣勢）：

需要經常性的維護，不管是讀或是寫代碼都會難上許多。
這種方式會感覺很像某種無法根本解決，但是可以透過避開而讓代碼順利運行的狀況。

PS.感覺變成在翻譯官方文件，不過發現或許以前看文件的時候，漏掉了很多東西。

訂閱：文章 (Atom)

2016年11月29日 星期二