#感覺我們接觸到的一切都是精心設(shè)計的：網(wǎng)站、電話、地鐵地圖等等。即使是我們過去認(rèn)為理所當(dāng)然的東西：恆溫器、煙霧偵測器和汽車儀表板現(xiàn)在也得到了仔細(xì)的使用者體驗處理。

設(shè)計不僅僅是外觀和感覺：它還需要考慮使用者與我們的裝置/工具/螢?zāi)?物件互動所需的各種方式。

這也適用於程式設(shè)計。

（未）設(shè)計的程式設(shè)計

程式語言是一個龐大而複雜的世界。即使是許多程式設(shè)計勢利小人認(rèn)為太「簡單」的 PHP，實際上也是函數(shù)和類別的相當(dāng)複雜的組合，其行為方式非常不一致。

多年來，語法、方法和命名在數(shù)百萬不同的用戶和應(yīng)用程式中不斷發(fā)展。大多數(shù)傾向於反映內(nèi)部的底層構(gòu)造 - 不一定是您想要如何使用它。

API 設(shè)計的偉大時刻：jQuery

##當(dāng)我在 2006 年左右開始寫 JavaScript 時，情況一團(tuán)糟。以下是我如何找到具有特定類別的標(biāo)籤並將其在 DOM 中移動的方法：

var uls = getElementsByTagName("ul");
var classToSearch = "foods";
for (var i = 0; i < uls.length; i++) {
    var classes = uls[i].getClasses();
    for (var j = 0; j < classes.length; j++){
        if (classes[j] == classToSearch){
            myUL = uls[i];
        }
    }
}

var $li = document.createElement('li');
$li.innerHTML = 'Steak';
myUL.innerHTML += $li;

完成！

jQuery 讓 JavaScript 再次變得有趣。在 2000 年代末，這種影響是如此巨大，以至於我記得我父親問我他在《華爾街日報》上讀到的「一些奇怪的事情」。但儘管效果巨大，jQuery 並沒有為 JavaScript 添加任何「新功能」。它只是將開發(fā)人員必須做的事情分解為非常清晰的模式。

他們沒有重新發(fā)明如何在頁面上找到內(nèi)容，而是利用了人們已經(jīng)知道的東西：CSS 選擇器。然後，只需收集大量常見操作並將它們組織成數(shù)十個函數(shù)即可。讓我們再次嘗試前面的範(fàn)例，現(xiàn)在使用 jQuery：

var $li = $('<li>Steak</li>');
$("ul.foods").append($li);

2006 年，我買了一本 680 頁的 Ajax 書。有了 jQuery 出色的 API，它幾乎被這個取代了：

$.post();

WordPress API

雖然 API 已經(jīng)開始代表“第三方服務(wù)”，但它僅僅意味著與系統(tǒng)對話的程式設(shè)計介面。就像 Twitter API 或 Facebook API 一樣，WordPress API 也存在。您不會進(jìn)行原始資料庫查詢來建立帖子，對吧？您使用 wp_insert_post。

但是許多設(shè)計漏洞困擾著 WordPress API。您可能使用 get_the_title 但 get_the_permalink 會產(chǎn)生錯誤，您使用 get_permalink 。嘿，當(dāng)您有一個長達(dá)數(shù)十年的開源項目，涉及數(shù)千人的程式碼和數(shù)百萬用戶時：您會遇到一些怪癖。

透過掩蓋這些怪癖並根據(jù)您正在編寫的程式設(shè)計師（可能是您）的習(xí)慣和行為進(jìn)行編寫，您可以節(jié)省大量時間。您可以在這裡設(shè)計正確的介面來對您日常使用的插件和主題進(jìn)行編程。

解決方案

為了加快工作速度並減少重複性任務(wù)，我創(chuàng)建了一個庫來處理我一直需要的命令和自訂設(shè)定。

1。常見任務(wù)的捷徑

以取得貼文縮圖的來源為例。事實證明，WordPress 沒有內(nèi)建功能來根據(jù)貼文 ID（僅附件 ID）取得縮圖。

這意味著我經(jīng)常發(fā)現(xiàn)自己這樣做：

$thumb_id = get_post_thumbnail_id( get_the_ID() );
$src = wp_get_attachment_thumb_url( $thumb_id );
echo '<img alt="" src="' . $src . '" />';

但是一定有更好的方法！

function get_thumbnail_src( $post ){

    $thumb_id = get_post_thumbnail_id( $post );
    $src = wp_get_attachment_thumb_url( $thumb_id );
    
    return $src;
}

echo '<img alt="" src="' . get_thumbnail_src( get_the_ID() ) . '" />';

2：不可預(yù)測的輸入，可預(yù)測的輸出

好多了！事實上，您發(fā)現(xiàn)自己一直在使用它，然後與公司的其他開發(fā)人員分享。

你的朋友遇到了麻煩，所以他打電話給你來調(diào)試，你看到：

echo '<img src="' . get_thumbnail_src( get_post() ) . '">';

看來他不小心使用了 get_post?而不是 get_the_ID。你對他大喊。但是等一下，為什麼不讓它更容易被接受呢？

也許我們可以調(diào)整我們的函數(shù)，以便它可以採用 WP_Post 對象，並且仍然為用戶提供他們所期望的內(nèi)容。讓我們回到該函數(shù)：

function get_thumbnail_src( $post ){

    if ( is_object( $post ) && isset( $post->ID ) ){
    
        $post = $post->ID;
        
    } else if ( is_array( $post ) && isset( $post['ID'] ) ) {
        $post = $post['ID'];
    }
    
    $thumb_id = get_post_thumbnail_id( $post );
    $src = wp_get_attachment_thumb_url( $thumb_id );
    
    return $src;
    
}

因此，如果他們發(fā)送 WP_Post 物件或一個數(shù)組，您的函數(shù)仍然可以幫助他們獲得所需的內(nèi)容。這是成功 API 的重要組成部分：隱藏混亂的內(nèi)部結(jié)構(gòu)。您可以為 get_thumbnail_src_by_post_id 和 get_thumbnail_src_by_wp_post_object. 製作單獨的函式

事實上，對於更複雜的轉(zhuǎn)換可能更可取，但是您可以透過將單一函數(shù)路由到正確的子程式來簡化介面。無論使用者發(fā)送什麼內(nèi)容，該函數(shù)都會始終傳回圖像來源的字串。

讓我們繼續(xù)：如果他們什麼都沒發(fā)送怎麼辦？

3。合理的默認(rèn)值

function get_thumbnail_src( $post = false ) {

    if (  false === $post ) {
        $post = get_the_ID();
    } else if ( is_object( $post ) && isset( $post->ID ) ) {
        $post = $post->ID;
    } else if ( is_array( $post ) && isset( $post['ID'] ) ) {
        $post = $post['ID'];
    }
    
    $thumb_id = get_post_thumbnail_id( $post );
    $src = wp_get_attachment_thumb_url( $thumb_id );
    
    return $src;
    
}

我們再次進(jìn)行了簡化，因此用戶無需發(fā)送帖子，甚至無需發(fā)送帖子 ID。在循環(huán)中時，所需要做的就是：

echo '<img src="'.get_thumbnail_src().'" />';

我們的函數(shù)將默認(rèn)為當(dāng)前帖子的 ID。這正在變成一個非常有價值的功能。為了確保它能很好地發(fā)揮作用，讓我們將它包裝在一個類中，這樣它就不會污染全局命名空間。

/*
Plugin Name: JaredTools
Description: My toolbox for WordPress themes.
Author: Jared Novack
Version: 0.1
Author URI: http://upstatement.com/
*/

class JaredsTools {

    public static function get_thumbnail_src( $post = false ) {
    
        if (false === $post ) {
            $post = get_the_ID();
        } else if ( is_object( $post ) && isset( $post->ID ) ) {
            $post = $post->ID;
        } else if ( is_array( $post ) && isset( $post['ID'] ) ) {
            $post = $post['ID'];
        }
        
        $thumb_id = get_post_thumbnail_id( $post );
        $src = wp_get_attachment_thumb_url( $thumb_id );
        
        return $src;
        
    }
    
}

并且請不要在您的類前面添加 WP。我將其設(shè)為公共靜態(tài)函數(shù)，因為我希望它可以在任何地方訪問，并且它不會改變：輸入或執(zhí)行不會更改函數(shù)或?qū)ο蟆?

該函數(shù)的最終調(diào)用是：

echo '<img src="'.JaredsTools::get_thumbnail_src().'">';

先設(shè)計，后構(gòu)建

讓我們繼續(xù)處理更復(fù)雜的需求。當(dāng)我編寫插件時，我發(fā)現(xiàn)我總是需要生成不同類型的錯誤和/或更新消息。

但是基于事件的語法一直困擾著我：

add_action( 'admin_notices', 'show_my_notice');
functon show_my_notice(){
    echo '<div class="updated"><p>Your thing has been updated</p></div>';
}

WordPress 遵循這種基于事件的架構(gòu)有很多充分的理由。但這并不直觀，除非您想坐下來記住不同的過濾器和操作。

讓我們將此匹配作為最簡單的用例：我需要顯示管理員通知。我喜歡首先設(shè)計這個 API：我找出在代碼中引用該函數(shù)的最佳方式。我希望它讀起來像這樣：

function thing_that_happens_in_my_plugin($post_id, $value){
    $updated = update_post_meta($post_id, $value);
    if ($updated){
        JaredsTools::show_admin_notice("Your thing has been updated")
    } else {
        JaredsTools::show_admin_notice("Error updating your thing", "error");
    }
}

一旦我設(shè)計了端點，我就可以滿足設(shè)計要求：

class JaredsTools {
    public static function show_admin_notice($message, $class = 'updated'){
        add_action('admin_notices', function() use ($message, $class){
            echo '<div class="'.$class.'"><p>'.$message.'</p></div>';
        });
    }
}

好多了！現(xiàn)在我不需要創(chuàng)建所有這些額外的函數(shù)或記住瘋狂的鉤子名稱。在這里，我使用 PHP 匿名函數(shù)（也稱為“閉包”），它讓我們可以將函數(shù)直接綁定到操作或過濾器。

這可以讓您避免在文件中出現(xiàn)大量額外的函數(shù)。 use 命令讓我們將參數(shù)從父函數(shù)傳遞到子閉包中。

保持直覺

現(xiàn)在另一位同事打電話給您。她不知道為什么她的管理通知沒有變成紅色：

JaredsTools::show_admin_notice("Error updating your thing", "red");

這是因為她正在發(fā)送“紅色”（她希望將盒子變成紅色），而實際上她應(yīng)該發(fā)送觸發(fā)紅色的類名稱。但為什么不讓它變得更容易呢？

public static function show_notice( $message, $class = 'updated' ) {

    $class = trim( strtolower( $class ) );
    if ( 'yellow' == $class ) {
        $class = 'updated';
    }
    
    if ('red' == $class ) {
        $class = 'error';
    }
    
    add_action( 'admin_notices', function() use ( $text, $class ) {
        echo '<div class="'.$class.'"><p>' . $text . '</p></div>';
    });
}

我們現(xiàn)在已經(jīng)接受了更多的用戶容忍度，這將使我們在幾個月后回來使用它時更容易分享。

結(jié)論

在構(gòu)建了其中一些之后，以下是我學(xué)到的一些原則，這些原則使這些原則對我和我的團(tuán)隊真正有用。

1.首先進(jìn)行設(shè)計，讓函數(shù)的構(gòu)建符合人們想要使用它的方式。

2. 拯救你的鍵盤！為常見任務(wù)創(chuàng)建快捷方式。

3. 提供合理的默認(rèn)值。

4. 保持最小化。讓您的庫來處理處理。

5. 對輸入要寬容，對輸出要精確。

6. 也就是說，使用盡可能少的函數(shù)參數(shù)，最多四個是一個很好的參數(shù)。之后，您應(yīng)該將其設(shè)為選項數(shù)組。

7. 將您的庫組織成單獨的類，以涵蓋不同的領(lǐng)域（管理、圖像、自定義帖子等）。

8. 包含示例代碼的文檔。

在 Upstatement，我們的 Timber 庫使構(gòu)建主題變得更加容易，而 Jigsaw 提供了節(jié)省時間的快捷方式來自定義每個安裝。

這些工具節(jié)省的時間讓我們可以花更多時間構(gòu)建每個網(wǎng)站或應(yīng)用程序的新的和創(chuàng)新的部分。通過執(zhí)行深奧的命令（例如向管理帖子表添加一列）并制作簡單的界面：我們公司的任何設(shè)計師或開發(fā)人員都可以使用與專業(yè) WordPress 開發(fā)人員相同的能力完全自定義每個網(wǎng)站。