菜鸟入门第三天——了解WEUI源码

引言

今天就让我们认识一下WEUI源码，在认识源码之前，先给兄弟们科普一下有关于BEM小知识。

什么是BEM？

BEM 是一种前端开发的命名方法论，它的名称代表 "块"（Block）、"元素"（Element）、"修饰符"（Modifier）。旨在帮助前端开发者更有效地组织和命名 HTML 和 CSS 代码，以构建可维护和可扩展的用户界面。

块（Block）：块是界面中的独立组件或模块，通常是一个父级容器，代表一个独立的功能单元。每个块都有一个唯一的名称，用于描述其用途或功能。
元素（Element）：元素是块的内部部分，用于构成块的子元素。元素的命名应该基于包含它们的块的名称，用两个下划线（__）来分隔块名和元素名。
修饰符（Modifier）：修饰符是用于修改块或元素的外观、状态或行为的标志。修饰符的命名应该基于块或元素的名称，并用两个短划线（--）来分隔名称和修饰符。

使用BEM命名规范可以提高代码的可维护性、可读性和可重用性，同时避免样式和命名的冲突，此规范已经在前端开发社区中广泛使用。

WEUI源码

现在就让我们开始分析WEUI源码吧！这是页面的完整效果，供兄弟们参考

在这整个页面中分上下两个部分，上部分我们起名为：page__hd；下部分叫：page__bd

在上部分page__hd中我们可以拆分为标题：page__title和面板：page__desc

在下部分page__hd中我们可以拆分为头部：weui-panel__hd 身体：weui-panel__bd 尾部：weui-panel__ft

拆到这是不是就认为拆完了？

答案是当然没有啦！细心点小伙伴应该发现了在weui-panel__bd中还有几个组件是没有拆分的，现在我们就将它拆分为weui-media-box__hd和weui-media-box__bd

整体的weui源码结构分析就已经讲完了，下面给大家看一下完整代码。

WEUI源码复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEUI源码之Panel组件</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./panel.css">
    <style>
        
    </style>
</head>
<body>
    <div class="page">
        <div class="page__hd">
            <h1 class="page__title">Panel</h1>
            <p class="page__desc">面板</p>
        </div> 

        <div class="page__bd">
            <!-- panel组件 -->
            <div class="weui-panel">
                <div class="weui-panel__hd">
                    图文组合列表
                </div>
                <div class="weui-panel__bd">
                    <!-- 开始了 media-box组件 -->
                    <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="" class="weui-media-box__thumb">
                        </div>
                        <div class="weui-media-box__bd">
                            <strong class="weui-box__title">标题一</strong>
                            <p class="weui-wedia-box__desc">
                                由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                            </p>
                        </div>
                    </a>
                    <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="" class="weui-media-box__thumb">
                        </div>
                        <div class="weui-media-box__bd">
                            <strong class="weui-box__title">标题二</strong>
                            <p class="weui-wedia-box__desc">
                                由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                            </p>
                        </div>
                    </a>
                </div>
                <div class="weui-panel__ft">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

总结

使用完BEM运行规范以后，会发现代码更加美观，更加具有条理，有助于建立清晰的代码结构。使我们能够快速理解代码的层次结构，从而更容易维护和修改代码。早期学习WEUI源码会使我们代码条理更加清晰，改正我们写代码的出现的小毛病等问题。

如果你想了解更多这类文章，请继续关注作者！