摘要：起因作為前端工程師，日常開發(fā)離不開文件。對于來說，市面上已經(jīng)有如，體驗也很不錯，但是需要下載同學(xué)提供的龐大的才能進行標(biāo)注體驗。而且有時候還是需要同學(xué)給龐大的文件，我們才能在中自動標(biāo)注。

作為前端工程師，日常開發(fā)離不開 psd 文件。

但是日常開發(fā)的一個小彈窗頁面，它的 psd 居然需要 30+Mb，所以經(jīng)常得定期清理 psd...

對于我一個 PS 小菜雞來說，用 PSD 無非只是需要用來度量元素大?。ㄔ亻g距），查看屬性等簡單的功能。

相對比于 sketch，sketch 具有 sketch-measure，設(shè)計師導(dǎo)出成靜態(tài)資源給前端即可。

對于 PSD 來說，市面上已經(jīng)有如 pxcook / lanhuapp，體驗也很不錯，但是需要下載 U 同學(xué)提供的 (龐大的) psd 才能進行標(biāo)注體驗。

而且有時候還是需要 U 同學(xué)給(龐大的) PSD 文件，我們才能在 pxcook / lanhuapp 中自動標(biāo)注。

于是鑒于以上，考慮做一個開源項目，類似于 sketch-measure， 定位為 psd-measure。

DEMO
源碼，歡迎 star

我們也可以使用命令行來導(dǎo)出頁面標(biāo)注

bash

npm i measure-export-cli -g
# 開啟服務(wù)，在線預(yù)覽 `path/to/psdDir` 下的 psd
measure-export start path/to/psdDir
# 構(gòu)建 `path/to/psdDir` 下的 psd 至 `dist` 文件目錄
measure-export build path/to/psdDir

提供 Chrome 插件，當(dāng)我們點擊 psd 鏈接時候跳出 Measure UI，而不是下載 PSD，當(dāng)然我們也可以點擊右上方的下載進行下載。

下載擴展，點擊下載

打開 Chrome 擴展頁面： chrome://extensions/

拖拽下載的包至頁面中進行安裝

出現(xiàn)該圖標(biāo)表示安裝完成

流程如下：

File Header（定長） 主要包括這個 psd 文件整體的數(shù)據(jù)，如版本，尺寸大小，圖片通道數(shù)，使用的顏色類別（rgb、cmyk...）

Color Mode Data Section（變長） 主要是部分顏色類型圖片需要用到

Image Resources（變長） 放置一些外部的圖片資源

Layer and Mask（變長） 放置圖層和蒙層的各種信息，大小位置，字體，描邊等等

Image Data（變長） 放置圖像像素數(shù)據(jù)

使用 psd.js 便是解析上述文件結(jié)構(gòu)，得到可讀的數(shù)據(jù)結(jié)構(gòu)。
其中 psd.js 使用 getter 得到懶解析數(shù)據(jù)，即如下代碼：

const obj = Object.defineProperty({}, "someParsedVal", {
  get: function () {
    if (!this._someParsedVal) {
      const afterMs = Date.now() + 3000
      while (true) {
        if (Date.now() >= afterMs) {
          this._someParsedVal = "ok"
          break
        }
      }
    }
    return this._someParsedVal
  }
})

obj.someParsedVal // 3s 后出來
obj.someParsedVal // 很快

在 mobx3 中也有類似的設(shè)計（LazyInitializer）

將 PSD 解析為 HAST，進而轉(zhuǎn)換為 HTML

如下 html：

對應(yīng) HAST 為

{
  "type": "element",
  "tagName": "a",
  "properties": {
    "href": "http://alpha.com",
    "id": "bravo",
    "className": ["bravo"],
    "download": true
  },
  "children": []
}

前后端同構(gòu)的意思：同時運行在客戶端和服務(wù)端，具體便是同時執(zhí)行在瀏覽器環(huán)境和 nodejs 環(huán)境

實現(xiàn)前后端同構(gòu)的一些常用方式，借助構(gòu)建工具 browserify / rollup / webpack 來分別打包不同環(huán)境的 js

模擬環(huán)境

在 nodejs 環(huán)境，對于 nodejs built-in modules 不進行打包

在 browser 環(huán)境，則將預(yù)設(shè)的 built-in modules 打包進去，以及一些 global 變量（如 process.env / __dirname）也會進行 mock

利用 變量替換 + treeshake 區(qū)分不同環(huán)境的代碼

如 webpack 配置 DefinePlugin

{
  plugins: [
    new webpack.DefinePlugin({
      "process.env.RUN_ENV": JSON.stringify("browser")
    })
  ]
}

在代碼中對不同環(huán)境打包進行區(qū)分

module.exports =
  process.env.RUN_ENV === "browser"
    ? {
        psdToHtml,
        psdToHtmlFromBuffer,
        psdToHtmlFromURL,
        psdToHAST,
        psdToHASTFromBuffer
      }
    : {
        psdToHtml,
        psdToHtmlFromPath,
        psdToHtmlFromBuffer,
        psdToHAST,
        psdToHASTFromBuffer,
        psdToHASTFromPath
      }

最終打包出來的 js 則會剔除掉 psdToHASTFromPath 相關(guān)代碼

package.json 配置

如下：

{
  "main": "dist/psd-html.cjs.js",
  "browser": "dist/psd-html.browser.cjs.js",
  "cdn": "dist/psd-html.browser.umd.min.js",
  "unpkg": "dist/psd-html.browser.umd.min.js"
}

main: nodejs 環(huán)境加載的 js

browser: browser 環(huán)境加載的 js

cdn: 部分 cdn 服務(wù)加載的 js

unpkg: unpkg cdn 服務(wù)加載的 js （主要使用 UMD 規(guī)范打包）

直接訪問 https://unpkg.com/@moyuyc/psd... 則會重定向至 https://unpkg.com/@moyuyc/psd...{latest-version}/dist/psd-html.browser.umd.min.js

將 psd 導(dǎo)出成整個圖片，利用每一個圖層的定位和大小來自動標(biāo)注。

2 個 div，相對與同一個父級的絕對定位，如何判斷他們是否相交？

.
.
.
.
.
.
.
.
.
.

正面直接判斷是很費力的，要考慮各種情況，這時候需要逆向思維，考慮不相交的情況。
這時候就簡單了

不相交只要滿足下面四種情況之一就可以

function isIntersect(node1, node2) {
  const rect1 = node1.getBoundingClientRect()
  const rect2 = node2.getBoundingClientRect()
  return !(
    rect1.right < rect2.left ||
    rect1.left > rect2.right ||
    rect1.bottom < rect2.top ||
    rect1.top > rect2.bottom
  )
}

輸入 psd / html 導(dǎo)出 meas-ui 靜態(tài)資源，流程如圖（區(qū)分 prod 和 dev 環(huán)境）

.svg)

[ ] 提供 chrome 插件：當(dāng)瀏覽器打開 psd 時候，渲染測量尺寸 UI

@moyuyc/psd.js - 解析 psd 文件，格式化 (Forked from psd.js)

@moyuyc/psd-html - psd -> hast -> html

html-measure - 標(biāo)注交互

meas-ui - 前端 UI 展示，包含標(biāo)注交互

measure-export(-cli) - 輸入 psd / html 導(dǎo)出 meas-ui 靜態(tài)資源

Adobe Photoshop File Formats Specification PS 文件格式官方標(biāo)準(zhǔn)

Photoshop Styles File Format

JS. 如何判斷兩個矩形是否相交

HAST