专业网站建设——从宜家的家具设计讲模块化

当前位置：首页 > 新闻

专业网站建设——从宜家的家具设计讲模块化

发布时间：2018-06-22 11:07:29 浏览：2619

网站制作时代码优化和重用方面从专业角度对网站做了多方面的优化工作。去过宜家的同学应该都有注意到宜家的家具基本都是组合的可拆装。模块化的特点也是这样，可以组合，相对独立，需要的时候可以很方便的加上。那怎么写可以基本实现这种方式呢？给个简单的例子：

专业网站建设模块化Demo

专业网站建设模块化结构的例子。

对应的CSS可以这么写：.mode-a{...}.mode-ah3{...}.mode-ap{...}其中“mode-a就是这个模块的名称，表示这是名为“a模块，现在这个模块可以被放到所需要的地方。既然是做模块，就不会只有一个，再加一个“mode-b

专业网站建设模块化Demo

专业网站建设模块化的特点：

相对独立
可移植性高

对应的CSS可以这么写：.mode-b{...}.mode-bh3{...}.mode-bdiv{...}.mode-bh4{...}.mode-bulli{...}实际应用中大多需要加一些classnam来减少类定义的复杂度，这个例子比较简单，但足以说明模块化的特点。上面两个模块可同时被使用到一个或多个页面中。宜家的卖场中，也许你也注意到基本是以设计师来划分商品区的特别是那些小件的商品。模块化后的代码也可以被分配给不同的人进行编写，提高效率。当然要实现这种方式，也需要做些工作，如模块的命名规范、模块中哪些地方是需要留接口的等等。如上面的例子中可以约定的就有：命名以“mode开头，模块标题使用h3标签。这样不管是哪个人写出来的模块都可兼容项目中的页面。看到这你可能会发现，既然上面已经约定了模块固定的结构，每个模块的样式定义中所写的这一部分不就是冗余的吗？如果已经形成相关的约定，这部分的样式定义可以被提出来放到项目的公共定义中，减少代码的冗余。如上面的例子可以变成：/*=Sglobal*/h3{/*第一种写法 */...}.mode-ah3,专业的网站建设是从模块化的角度对网站进行设计的模块化的设计从网站设计的统一性。.mode-bh3{/*第二种写法 */...}/*=Eglobal*//*=Smode-a*/.mode-a{...}.mode-ap{...}/*=Emode-a*//*=Smode-b*/.mode-b{...}.mode-bdiv{...}.mode-bh4{...}.mode-bulli{...}/*==Emode-b*/不知你有没注意到宜家那些小件的商品，往往可以组合到不同的其它商品上面。这也带出了模块化的另一个话题：模块中的模块。即在模块中可以存在其它模块，也很好理解，就像我做网站的时候，整个页面的结构就像是一个大的模块，而上面所讲的例子就是模块中的模块了只不过我把这个定义缩小一层。上面例子中对h3定义，就可以看成是一个模块，mode-amode-b两个模块中都出现，并且结构表现相对固定。OK这只是对一个标签的定义，如果不只一个标签呢？重新改下例子：

专业网站建设模块化Demo

专业网站建设模块化结构的例子。

专业网站建设模块化的特点：

相对独立
可移植性高

专业网站建设模块化Demo

这个是专业网站建设模块中的模块”例子。

专业网站建设模块中的模块：

专业网站建设模块“mode-a就是一个模块中的模块。

/*=Smode-a*/.mode-a{...}.mode-ah3{...}.mode-ap{...}/*=Emode-a*//*=Smode-b*/.mode-b{...}.mode-bh4{...}.mode-b.cont{...}.mode-b.contulli{...}/*=Emode-b*//*=Smode-c*/.mode-c{...}.mode-ch4{...}.mode-c.cont{...}.mode-c.contp{...}/*=Emode-c*/从上面可以看到mode-a一个独立的模块，当它作为“mode-b和“mode-c一部分时，就成了模块中的模块了抛下砖，希望能引出更多相关的讨论。希望大家对专业网站建设模块化方面有更多的收获。本篇文章来源于ISDWebteam

标签: 网站建设网站设计网站制作

上一篇：优秀网站建设必须拥有专业网建团队

下一篇：做网络营销思想要懂得变通

INDUSTRY INFORMATION