使用純JavaScript重新實現CSS布局：css-layout

jopen 10年前發布 | 19K 次閱讀 CSS 前端技術 css-layout

這個項目使用純JavaScript實現了CSS的一個子集包括Flexbox和box模型，然后轉成C 和 Java。它目標是成為一個小的獨立庫來布局元素。它不依賴于DOM。

為了確保該代碼是正確的，它是在JavaScript中使用TDD開發，每個提交增加了單元測試和相關的代碼，使其能夠正常工作。所有的單元測試都有經過Chrome瀏覽器的CSS實現測試。
computeLayout(
  {style: {padding: 50}, children: [
    {style: {padding: 10, alignSelf: 'stretch'}}
  ]}
);
// =>
{width: 120, height: 120, top: 0, left: 0, children: [
  {width: 20, height: 20, top: 50, left: 50}
]}

項目主頁：http://www.baiduhome.net/lib/view/home/1414842643184

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！