day33—前端开发的模块化和组件化
转行学开发,代码100天——2018-04-18
今天是记录前端开发中模块化、组件化的知识。关于何为模块化,何为组件化以及为何要如此,目前还是处于一个只可意会不可言传的理解应用阶段。
当然,这样的存在也能想到其好处——方便你我他!
一个模块案例展示如下:
其HTML内容:
<div class="nav">
<ul>
<li class="current">
<a href="#">推荐</a>
</li>
<li>
<a href="#">排行榜</a>
</li>
<li>
<a href="#">歌单</a>
</li>
<li >
<a href="#">主播电台</a>
</li>
<li >
<a href="#">歌手</a>
</li>
<li>
<a href="#">新碟上架</a>
</li>
</ul>
</div>
一个导航栏中,nav下的个元素均是与nav相关元素。因此其各元素CSS样式命名可按照如下方式进行整体化区分:
/* nav begin */
.nav{ }
.nav ul{ }
.nav li{ }
.nav li a{ }
.nav li .current{ }
.nav li .current{ }
.nav-1 ul{ }
/* nav end */
案例中,模块容器为class为nav,也就是或nav代表了这个导航模块。通过这种方式区分后,便于查找-修改等设置,也便于其他开发者阅读。
有了对模块的认识,在开发中常常需要对外观相似,语义相同的模块进行扩展。可通过“nav-?”方式进行CSS样式的编写,以实现代码代价最小化,避免了大量重复代码的编写。
.nav-1 ul{ } 组件:是一系列相关联的结构组成的整体,是对多模块内通用内容的抽象。 换言之,就是通过代码优化,实现代码更大的通用性。
同样组件也存在着扩展。 组件化及组件的扩展,都有避免重复造轮子的优势。其次就是便是实现多人协同。
(组件,跟“类”的概念很相像。) 其次,在开发中通过模块化和组件化以更高效的方式完成开发工作,同时在这个过程中可通过“
规范”进行不同开发者之间的高效沟通。 规范包括:命名规范,格式规范等。 对于一个初级开发者来说,首先了解这些代码编写思想非常有必要,便于大家一开始就养成规范编码的习惯,也能更好地适应团队协同开发工作。 于此,在提醒并要求自己,从现在开始培养规范意识,提高代码编写的规范性,可读性,可维护性等。
day33—前端开发的模块化和组件化的更多相关文章
- Android 开发:由模块化到组件化(一)
在Android SDK一文中,我们谈到模块化和组件化,现在我们来聊聊组件化开发背后的哪些事.最早是在广告SDK中应用组件化,但是同样适用于普通应用开发 以下高能,请做好心理准备,看不懂请发私信来交流 ...
- Android 开发:由模块化到组件化
在Android SDK一文中,我们谈到模块化和组件化,现在我们来聊聊组件化开发背后的哪些事.最早是在广告SDK中应用组件化,但是同样适用于普通应用开发 以下高能,请做好心理准备,看不懂请发私信来交流 ...
- [Android Pro] 由模块化到组件化(一)
cp from : https://blog.csdn.net/dd864140130/article/details/53645290 在Android SDK一文中,我们谈到模块化和组件化,现在我 ...
- 面试指南」JS 模块化、组件化、工程化相关的 15 道面试题
JS 模块化.组件化.工程化相关的 15 道面试题 1.什么是模块化? 2.简述模块化的发展历程? 3.AMD.CMD.CommonJS 与 ES6 模块化的区别? 4.它们是如何使用的? 5.exp ...
- 模块化Vs组件化
模块化&组件化 原因 图解 模块化Module 概念 使用 目的 依赖 架构定位 内容:组件内的Script 组件化 概念 使用 目的:复用,解耦 依赖 架构定位 内容:template.st ...
- 微信小程序开发之路之组件化
类似于页面,自定义组件拥有自己的 wxml 模版和 wxss 样式. 官方链接 组件化,反过来理解,写重复的页面,方法,写第二遍就烦了,抽取出来就是组件化,可以理解为公用的方法 对于通用的数据,最先想 ...
- vue前端开发那些事——vue组件开发
vue的学习曲线不是很陡(相比其它框架,如anglarjs),官方文档比较全面,分为基础篇和高级篇.我们刚开始学习的时候,肯定像引用jquery那样,先把vue的js引进来,然后学习基础内容.如果仅仅 ...
- UI组件化介绍
组件化相关概念 怎么理解组件化开发 https://www.cnblogs.com/zs-note/p/7093323.html 前端组件化框架之路 https://blog.csdn.net/hap ...
- Vue.js-组件化前端开发新思路
Vue.js-组件化前端开发新思路 12017.04.14 18:31:25字数 6228阅读 5632 本文章是我最近在公司的一场内部分享的内容.我有个习惯就是每次分享都会先将要分享的内容写成文章. ...
随机推荐
- Ad Hoc Distributed Queries / xp_cmdshell 的启用与关闭
启用Ad Hoc Distributed Queries: reconfigure reconfigure 关闭Ad Hoc Distributed Queries: reconfigure reco ...
- Java JDK在Mac下的配置方法
Java JDK在Mac.Windows下的配置方法 Mac 第一步:下载JDK 官网下载地址 第二步:安装JDK 安装步骤很简单,一直点击下一步即可. 第三步:配置环境变量 打开terminal(终 ...
- 在react中用装饰器来装饰connect
假设我们在react中有如下header组件: import React, { PureComponent } from 'react'; import { connect } from 'react ...
- apache2.4 只允许合法域名访问网站 禁止使用ip、非法域名访问
1.ip访问禁用ip访问 只能对应端口有效<VirtualHost *:80> ServerName xx.xx.xx.xx ServerAlias * <Location /> ...
- 06-File-文件
文件 长久保存信息的一种数据信息集合 常用操作 打开关闭(文件一旦打开,需要关闭操作) 读写内容 查找 open函数 open函数负责打开文件,带有很多参数 第一个参数: 必须有,文件的路径和名称 m ...
- linux ab压力测试
1.安装 yum -y install httpd-tools 2.检测版本 ab -V 3.常用 ab -c -n 127.0.0.1/index.php #同时处理100个请求并运行10次inde ...
- 完整项目:网上图书商城(一、MySQL数据库设计)未完
一.建立数据库 CREATE DATABASE IF NOT EXISTS bookshop CHARACTER utf8; 二.建立数据库表 1.建立用户表 #用户表(用户id号,用户名,用户密码, ...
- scapy - 基于python的数据包操作库
简介 地址:https://github.com/secdev/scapy scapy是一个基于python的交互式数据包操作程序和库. 它能够伪造或者解码多种协议的数据包,通过使用pcap文件对他们 ...
- mycat权威指南阅读笔记--序言1
前言 mycat官方地址http://www.mycat.io/,mycat是关系数据库的中间件,也就是说它可以把后端的多个数据库,抽象成一个关系数据库. mycat能干啥 官方文档介绍,主要是用来做 ...
- man(2) readv writev
#include <sys/uio.h> ssize_t readv(int fd, const struct iovec *iov, int iovcnt); unix高级环境编程中的定 ...