作為前端工程師，日常開發離不開 psd 檔案。
但是日常開發的乙個小彈窗頁面，它的 psd 居然需要30+mb，所以經常得定期清理 psd...
對於我乙個 ps 小菜雞來說，用 psd 無非只是需要用來度量元素大小（元素間距），檢視屬性等簡單的功能。
相對比於 sketch，sketch 具有 sketch-measure，設計師匯出成靜態資源給前端即可。
於是鑑於以上，考慮做乙個開源專案，類似於 sketch-measure， 定位為 psd-measure。
demo
原始碼，歡迎 star
我們也可以使用命令列來匯出頁面標註
bash
npm i measure-export-cli -g
measure-export start path/to/psddir
# 構建 `path/to/psddir` 下的 psd 至 `dist` 檔案目錄
安裝開啟 chrome 擴充套件頁面： chrome://extensions/
出現該圖示表示安裝完成
流程如下：
使用 psd.js 便是解析上述檔案結構，得到可讀的資料結構。
其中 psd.js 使用 getter 得到懶解析資料，即如下**：
const obj = object.defineproperty({}, 'someparsedval', }}
return this._someparsedval
}})obj.someparsedval // 3s 後出來
obj.someparsedval // 很快
在 mobx3 中也有類似的設計（lazyinitializer）
將 psd 解析為 hast，進而轉換為 html
hast (html 抽象語法樹)
如下 html：
對應 hast 為
,
"children":
}
前後端同構
前後端同構的意思：同時執行在客戶端和服務端，具體便是同時執行在瀏覽器環境和 nodejs 環境
實現前後端同構的一些常用方式，借助構建工具 browserify / rollup / webpack 來分別打包不同環境的 js
模擬環境
利用 變數替換 + treeshake 區分不同環境的**
package.json配置
如下：
直接訪問 則會重定向至 /dist/psd-html.browser.umd.min.js
布局定位
將 psd 匯出成整個，利用每乙個圖層的定位和大小來自動標註。
其他2 個 div，相對與同乙個父級的絕對定位，如何判斷他們是否相交？..
....
....
正面直接判斷是很費力的，要考慮各種情況，這時候需要逆向思維，考慮不相交的情況。
這時候就簡單了
不相交只要滿足下面四種情況之一就可以
function isintersect(node1, node2)
輸入 psd / html 匯出meas-ui靜態資源，流程如圖（區分 prod 和 dev 環境）
photoshop styles file format
js. 如何判斷兩個矩形是否相交
hast
告別繁瑣 運維管理一身輕鬆
及時全面的收集網管人員關心的資料資訊 自動收集網路裝置 伺服器及應用的效能指標，提供準確的 及時的資料，為網管人員提供判斷依據。能直觀的將關鍵資料資訊展現給網管人員 1 通過閥值設定，將及時的效能指標加以分析判斷，及時告知網管人員可能發生或已經發生的效能超標，消除隱患。2 通過歷史資料展示，提供1小...
基於 PTS 壓測輕鬆玩轉問題診斷
效能測試 pts performance testing service 是具備強大的分布式壓測能力的 saas 壓測平台，可模擬海量使用者的真實業務場景，全方位驗證業務站點的效能 容量和穩定性。在不斷的對被壓服務端水位進行摸高的過程中，我們可以從壓測檢視或者壓測報告中看到較為全面的壓測指標，例如 ...
基於 PTS 壓測輕鬆玩轉問題診斷
簡介 效能測試 pts performance testing service 是具備強大的分布式壓測能力的 saas 壓測平台，可模擬海量使用者的真實業務場景，全方位驗證業務站點的效能 容量和穩定性。效能測試 pts performance testing service 是具備強大的分布式壓測能...