导读：大家每天都与代码打交道，但当被问道什么是好的代码时，很多人可能会先愣一下，然后给出的回答要么比较空泛，要么比较散，没办法简单明了地概括出来。显然，这个问题并没有唯一的标准答案，谁都可以谈论自己的理解，今天谈谈偶对于好代码的理解。
一句话概括衡量代码质量的唯一有效标准：WTF/min —— Robert C. Martin
Bob大叔对于好代码的理解非常有趣，对偶也有很大的启发。大家编写的代码，除了用于机器执行产生大家预期的效果以外，更多的时候是给人读的，这个读代码的可能是后来的维护人员，更多时候是一段时间后的作者本人。
偶敢打赌每个人都遇到过这样的情况：过几周或者几个月之后，再看到自己写的代码，感觉一团糟，不禁怀疑人生。
大家自己写的代码，一段时间后自己看尚且如此，更别提拿给别人看了。
任何一个傻瓜都能写出计算机可以理解的代码。唯有写出人类容易理解的代码，才是优秀的程序员。—— Martin Fowler
所以，谈到好代码，首先跳入自己脑子里的一个词就是：整洁。
好的代码一定是整洁的，给阅读的人一种如沐春风，赏心悦目的感觉。
整洁的代码如同优美的散文。—— Grady Booch
好代码的特性很难给好的代码下一个定义，相信很多人跟偶一样不会认为整洁的代码就一定是好代码，但好代码一定是整洁的，整洁是好代码的必要条件。整洁的代码一定是高内聚低耦合的，也一定是可读性强、易维护的。
高内聚低耦合
高内聚低耦合几乎是每个程序员员都会挂在嘴边的，但这个词太过于宽泛，太过于正确，所以聪明的编程人员们提出了若干面向对象设计原则来衡量代码的优劣：
开闭原则 OCP (The Open-Close Principle)单一职责原则 SRP (Single Responsibility Principle)依赖倒置原则 DIP (Dependence Inversion Principle)最少知识原则 LKP (Least Knowledge Principle)) / 迪米特法则 (Law Of Demeter)
里氏替换原则 LSP (Liskov Substitution Principle)接口隔离原则 ISP (Interface Segregation Principle)组合/聚合复用原则 CARP (Composite/Aggregate Reuse Principle)这些原则想必大家都很熟悉了，是大家编写代码时的指导方针，按照这些原则开发的代码具有高内聚低耦合的特性。换句话说，大家可以用这些原则来衡量代码的优劣。
但这些原则并不是死板的教条，大家也经常会因为其他的权衡（例如可读性、复杂度等）违背或者放弃一些原则。比如子类拥有特性的方法时，大家很可能打破里氏替换原则。再比如，单一职责原则跟接口隔离原则有时候是冲突的，大家通常会舍弃接口隔离原则，保持单一职责。只要打破原则的理由足够充分，也并不见得是坏的代码。
可读性
代码只要具有了高内聚和低耦合就足够好了吗？并不见得，偶认为代码还必须是易读的。好的代码无论是风格、结构还是设计上都应该是可读性很强的。可以从以下几个方面考虑整洁代码，提高可读性。
命名
大到项目名、包名、类名，小到方法名、变量名、参数名，甚至是一个临时变量的名称，其命名都是很严肃的事，好的名字需要斟酌。
► 名副其实
好的名称一定是名副其实的，不需要注释解释即可明白其含义的。
/** * 创建后的天数 **/ int d; int daysSinceCreation;
后者比前者的命名要好很多，阅读者一下子就明白了变量的意思。
► 容易区分
大家很容易就会写下非常相近的方法名，仅从名称无法区分两者到底有啥区别（eg. getAccount()与getAccountInfo()），这样在调用时也很难抉择要用哪个，需要去看实现的代码才能确定。
► 可读的
名称一定是可读的，易读的，最好不要用自创的缩写，或者中英文混写。
► 足够短
名称当然不是越长越好，应该在足够表达其含义的情况下越短越好。
格式
良好的代码格式也是提高可读性非常重要的一环，分为垂直格式和水平格式。
► 垂直格式
通常一行只写一个表达式或者子句。一组代码代表一个完整的思路，不同组的代码中间用空行间隔。
public class Demo { @Resource private List<Handler> handlerList; private Map<TypeEnum, Handler> handlerMap = new ConcurrentHashMap<>(); @PostConstruct private void init() { if (!CollectionUtils.isEmpty(handlerList)) { for (Handler handler : handlerList) { handlerMap.put(handler.getType(), handler); } } } publicResult<Map<String, Object>> query(Long id, TypeEnum typeEnum) { Handler handler = handlerMap.get(typeEnum); if (null == handler) { return Result.returnFailed(ErrorCode.CAN_NOT_HANDLE); } return handler.query(id); } }
如果去掉了空行，可读性大大降低。
public class Demo { @Resource private List<Handler> handlerList; private Map<TypeEnum, Handler> handlerMap = new ConcurrentHashMap<>(); @PostConstruct private void init() { if (!CollectionUtils.isEmpty(handlerList)) { for (Handler handler : handlerList) { handlerMap.put(handler.getType(), handler); } } } public Result<Map<String, Object>> query(Long id, TypeEnum typeEnum) { Handler handler = handlerMap.get(typeEnum); if (null == handler) { return Result.returnFailed(ErrorCode.CAN_NOT_HANDLE); } return handler.query(id); } }
类静态变量、实体变量应定义在类的顶部。类内方法定义顺序依次是：公有方法或保护方法 > 私有方法 > getter/setter 方法。
► 水平格式
要有适当的缩进和空格。
► 团队统一
通常，同一个团队的风格尽量保持一致。集团对于 Java 开发进行了非常详细的规范。（可点击下方阅读原文，了解更多内容）
类与函数
► 类和函数应短小，更短小
类和函数都不应该过长（集团要求函数长度最多不能超过 80 行），过长的函数可读性一定差，往往也包含了大量重复的代码。
► 函数只做一件事（同一层次的事）
同一个函数的每条执行语句应该是统一层次的抽象。例如，大家经常会写一个函数需要给某个 DTO 赋值，然后再调用接口，接着返回结果。那么这个函数应该包含三步：DTO 赋值，调用接口，处理结果。如果函数中还包含了 DTO 赋值的具体操作，那么说明此函数的执行语句并不是在同一层次的抽象。
► 参数越少越好
参数越多的函数，调用时越麻烦。尽量保持参数数量足够少，最好是没有。
注释
► 别给糟糕的代码加注释，重构他
注释不能美化糟糕的代码。当企图使用注释前，先考虑是否可以通过调整结构，命名等操作，消除写注释的必要，往往这样做之后注释就多余了。
► 好的注释提供信息、表达意图、阐释、警告
大家经常遇到这样的情况：注释写的代码执行逻辑与实际代码的逻辑并不符合。大多数时候都是因为代码变化了，而注释并没有跟进变化。所以，注释最好提供一些代码没有的额外信息，展示自己的设计意图，而不是写具体如何实现。
► 删除掉注释的代码
git等版本控制已经帮大家记录了代码的变更历史，没必要继续留着过时的代码，注释的代码也会对阅读等造成干扰。
错误处理
► 错误处理很重要，但他不能搞乱代码逻辑
错误处理应该集中在同一层处理，并且错误处理的函数最好不包含其他的业务逻辑代码，只需要处理错误信息即可。
► 抛出异常时提供足够多的环境和说明，方便排查问题
异常抛出时最好将执行的类名，关键数据，环境信息等均抛出，此时自定义的异常类就派上用场了，通过统一的一层处理异常，可以方便快速地定位到问题。
► 特例模型可消除异常控制或者 null 判断
大多数的异常都是来源于NPE，有时候这个可以通过 Null Object 来消除掉。
► 尽量不要返回 null ，不要传 null 参数
不返回 null 和不传 null 也是为了尽量降低 NPE 的可能性。
如何判断不是好的代码讨论了好代码的必要条件，大家再来看看好代码的否定条件：什么不是好的代码。Kent Beck 使用味道来形容重构的时机，偶认为当代码有坏味道的时候，也代表了其并不是好的代码。
代码的坏味道
► 重复
重复可能是软件中一切邪恶的根源。—— Robert C.Martin
Martin Fowler 也认为坏味道中首当其冲的就是重复代码。
很多时候，当大家消除了重复代码之后，发现代码就已经比原来整洁多了。
► 函数过长、类过大、参数过长
过长的函数解释能力、共享能力、选择能力都较差，也不易维护。
过大的类代表了类做了很多事情，也常常有过多的重复代码。
参数过长，不易理解，调用时也容易出错。
► 发散式变化、霰弹式修改、依恋情结
如果一个类不是单一职责的，则不同的变化可能都需要修改这个类，说明存在发散式变化，应考虑将不同的变化分离开。
如果某个变化需要修改多个类的方法，则说明存在霰弹式修改，应考虑将这些需要修改的方法放入同一个类。
如果函数对于某个类的兴趣高于了自己所处的类，说明存在依恋情结，应考虑将函数转移到他应有的类中。
► 数据泥团
有时候会发现三四个相同的字段，在多个类和函数中均出现，这时候说明有必要给这一组字段建立一个类，将其封装起来。
► 过多的 if…else 或者使用 switch
过多的 if…else 或者 switch ，都应该考虑用多态来替换掉。甚至有些人认为除个别情况外，代码中就不应该存在 if…else 。
总结本文首先一句话概括了偶认为的好代码的必要条件：整洁，接着具体分析了整洁代码的特点，又分析了好代码的否定条件：什么样的代码不是好的代码。仅是本人的一些见解，希望对各位以后的编程有些许的帮助。
偶认为仅仅编写出可运行的代码是远远不够的，还要时刻注意代码的整洁度，留下一些漂亮的代码，希望写的代码都能保留并运行 102 年！
后续增加一些实际的例子来说明好的和坏的代码；分享下如何编写整洁代码——自己认为有用的一些编程技巧。
css文字，撤销css格式，css 判断是否隐藏，表格设置宽高 css，css 圈放大 动画效果，导致css显示不正常，css3按钮
能否推荐几个好用的javascript在线编译工具？
1. CodePen
CodePen是偶最喜欢的代码编辑器之一。 CodePen有一些炫酷而独特的功能，这使得它成为Web开发中最流行的在线代码编辑器之一。CodePen的特点是：
实时预览HTML，CSS和JavaScript您可以使用预处理程序的语法像Sass, LESS, Stylus. Markdown, Haml, Slim, Jade使用CodePen组合展示才华和设计自己的组合主页。您可以使用Hire Me（聘用偶）功能服务找到兼职工作。任何资源都可以嵌入在任何其他网站。2.Dabblet
Dabblet的界面十分简洁，操作起来并不复杂，特别适合新手和想尝试最新HTML5标签和CSS3样式的前端攻城师使用。Dabblet的一大特色是代码编写时可免加CSS前缀。因为，Lea Verou（工具的作者）本人就是免CSS前缀JavaScript脚本 -prefix-free的作者，Dabblet拥有此功能当然是顺理成章的事。HTML和CSS代码间的切换也很方便，点击隐藏工具栏右上方的标签即可。用户可以根据习惯，调整前端代码的预览效果，浏览器内全屏预览将新标签页中打开。Dabblet支持用Github帐号登录，测试的代码段既可以匿名保存也可以保存在用户的Github:gist中，以便用户将代码段嵌入自己的站点或是进一步分享给其他人。
3.Thimble
Mozilla 推出 的HTML/CSS 在线交互式学习网站 Thimble：左侧编辑，右侧实时预览，带有大量真实案例。该站是 Mozilla 新近推出的 Webmaker 计划 的组成部分，旨在帮助普通用户在线学习编写 HTML 和 CSS。Thimble 提供的是双面板设计， 左侧为带语法高亮的代码编辑，右侧可实时预览 网页效果， 如果用户对效果满意， 可通过右上方的蓝色 “Publish” 按钮一键发布， 还可通过提供的 Twitter 发布按钮与好友分享你的设计成果。
4.JSFiddle
JSFiddle是一个老牌的在线JavaScript代码调试工具。支持JavaScript、CSS、HTML代码可视化在线调试工具，支持多种应用多种主流框架，用起来非常方便，而且还可以将调试好的结果以非常简洁的页面直接嵌其他网页里。除了可以调试代码外，还可以方便的发布到社区，论坛或者社交媒体上与朋友们分享或者提问。整合了很多的不同的类库供大家选择。
5.CSSDesk
CSSDesk工具是一个标准的CSS沙盒，可以给予CSS初学者最大的帮助，网站分成三栏，大家可以非常方便的通过在左侧实时修改代码来查看某个CSS属性的改变给HTML元素带来的影响，甚至大家可以把整个网站都放到其中来进行调试，并将调试完成的文件保存为HTMl。唯一的遗憾是缺少代码提示，需要手工输入CSS属性。6.CodeMirror
又一款“Online Source Editor”，基于Javascript，短小精悍，实时在线代码高亮显示，他不是某个富文本编辑器的附属产品，他是许多大名鼎鼎的在线代码编辑器的基础库。可以看出，CodeMirror的作者是一个十分向往自由的人。但他的CodeMirror绝对不简单，看看下面这份清单：
Google Earth KML samplerEloquent JavaScript’s consoleThe qooxdoo playgroundA cool tutorial about the elementAn online IDE for the Orc programming languageGoogle’s API playgroundRaphaël LiveJS BinThe RokPad plugin for JoomlaThe scraperwiki editorjsLinb UI Builder上述的这些在线代码编辑器都是基于CodeMirror的，是不是感到惊讶，里面有你熟悉的JS Library。
CodeMirror本身的定位也很明确，短小精悍，但代码质量很高，在Google Group的群里面，人们热烈的进行着用CodeMirror做各式各样改造的讨论，可见对他的欢迎。
假如你有项目需要在线代码编辑，还等什么？CodeMirror，绝对是你最好的选择。
7.JS Bin
JSBin 是一个 Web 应用，主要用于帮助测试 JavaScript 和 CSS 的代码片段。功能与 jsFiddle 网站一致。8.eCoder
ecoder是一个基于Web的代码编辑器，采用PHP和JavaScript开发。它包括：实时语法加亮，一个文件浏览器，一个文件上传器和一个标签系统能够实现直接在服务器上同时编辑多个文件。9.Codeanywhere
Codeanywhere是一个在线的代码编辑器，你可以在浏览器中编写html、css、javascript、php、XML的代码，目前支持chrome、firefox、Opera、Safari、IE，当然也可以在android、iphone上安装codeanywhere的软件。Codeanywhere的特点是：随时随地可以写代码（虽然偶认为手机上写代码有点搞笑）。
Codeanywhere支持连接FTP Server、Dropbox、Github，比如Dropbox，你只要有一个账号，连上Dropbox后，Codeanywhere能够在Dropbox上创建html等文件，你写的代码都存放在Dropbox上了。
10.AWS Cloud9 IDE
Cloud9 IDE是一个用来测试运行Node.js 和 JavaScript平台，但也支持Python, Ruby和 Apache+PHP的应用程序，例如Wordpress。前几天分享了支持Node.js、Python、Go、Rails等程序语言的Nitrous.io空间，很快有朋友给部落写邮件，告知Cloud9可以比Nitrous.io更长久地运行应用实例。Cloud9支持的程序语言有Node.js、HTML5、PHP、Python / Django、Ruby on Rails、C/C++、StrongLoop，提供FTP、S-S-H和空间托管，有MysqL、MongoDB、SQLite数据库，可以一键安装Wordpress，也可以自己上传程序代码，支持协同编辑合作，另外可以和其它的云空间整合。
Cloud9支持将代码一键发布到Heroku、Windows Azure、Google App Engine、CloudFoundry等云空间上，还可以同步应用到Github空间上，总之，除了Cloud9空间不支持绑定自己的域名、无法永久保持应用在线外，Cloud9空间用来测试程序和代码还是不错的。
以上就是为你推荐的10个最好的JavaScript在线编辑器。它们有的是单纯的JavaScript代码编辑器,有些则支持多种语言,还有一些提供完整的IDE。哪一个是你最喜欢的呢?分享你的评价吧。
SEO应该怎么做站内优化？
总的来说，站内优化（On Page SEO）其实就是通过各个纬度，把一个页面做到极致的过程，继而在谷歌上取得最好的关键词排名。所以，掌握以下8个细节，站内优化不再怕。
01 合理规划关键词，简化网站结构关键词规划是建立网站架构的关键步骤。你的网站能否被目标客户搜索到，能否转化更多的订单，很大程度上取决于关键词规划阶段。概括来说，关键词规划分为3步：查找与你的产品相关的关键词，并确认这些关键词具备搜索量（有潜在客户搜索）按相关度和竞争度对关键词分组将分好组的关键词布局到网站的特定页面，以更好地满足用户的搜索意图具体可以参考上一篇内容：关键词研究与分析这里要提醒大家，网站结构最好遵循“三次点击”：即着陆页是否可通过三次以内的点击到达。通常来说，扁平化的网站架构更有利于蜘蛛抓取，也方便用户快速获取信息。而“深度”结构的网站不仅显得内容繁杂，也会面临蜘蛛抓取遗漏的风险。为什么网站结构要遵循“三次点击”观察国内那些名列前茅的品牌独立站，往往会发现同样的规律：这些网站内容丰富，但结构却很清晰，大部分网页都满足“三次点击”原则，在首页导航栏就能通览网站全部内容。而这也是一条做好SEO站内优化的铁律，无论算法如何变化，保障访问体验，永远都是优化工作的核心。2020出海品牌50强：Aukey官网架构02 创建有含义的产品标题和描述对于产品Title和Description，千万不要再把关键词进行无意义地堆砌啦！随着谷歌算法的更新，创建一条便于理解的有含义的标题和描述，更为重要！产品标题怎么算合适呢？大家先看一个例子：这顶帐篷的标题是2-person tent, 2-person camping tent suitable for outdoor play, two doors and windows, breathable mesh, windproof and waterproof camping tent, easy to install, with storage bag.这个标题好不好？很明显，答案是否定的。因为谷歌根本无法根据标题确定此页面的内容。更糟糕的是，这显然是堆砌关键词，违反了谷歌的优化准则。如果被谷歌发现，很可能会受到处罚。那么，什么才是好的产品标题呢？还是那顶帐篷，标题可以这么写：2-person camping tent with storage bag (Multi-colored).如果你的产品SKU很多，用这个标题无法指代清晰，也不用担心，只需要在标题末尾添加产品型号，这也是一个好的标题。产品描述也是同样的道理，避免使用专业难懂的词汇，通俗易懂的描述更能拉近与客户之间的距离。所以，标题和产品描述要有指向性，大家需要从客户的需求及场景出发，可以加上品牌词。03 添加图片Alt标签Alt标签是做SEO优化时，必须关注的图片说明性标签。它的最基本的功能是提高用户体验。ALT标签是大家的通常称呼，准确来说它是图片标签<img>的一个属性。它的写法是<img src=”图片链接.png” alt=”图片描述” />，加Alt标签很简单，但要注意以下几点。言简意赅，不用多余的说明文字，如“这张图片”注意描述文本与图片的相关性最好可以把文章关键词嵌入其中避免关键词堆砌04 页面加载速度很关键如今，用户愿意等待时间越来越少，花十几秒去刷新一个页面的体验太糟糕，所以网站打开loading速度比任何优化点更加重要。打开时间越短，用户满意度越高，对于搜索引擎是一样的道理。所以优化一上来先考虑提速有哪些点可以做，如CDN，代码优化，压缩图片，服务器升级，缓存优化，多用纯静态页面等优化手段。这里偶推荐一个测试工具 https://gtmetrix.com/，输入你想要测试的网址，根据测试出来的问题，针对性的优化。05把不重要的页面设置为No-index在大家的独立站店铺中，有的页面仅仅是用于完成一些功能性的动作，比如会员账号登陆页面、购物车页面、付款页面等，这些页面是不需要被用户搜索到的——因为这些页面大概率不能满足目标用户的搜索意图，可能导致谷歌对网站排名的评分下降。针对这些页面，大家可以把它们设置为No-index，这样可以告诉谷歌爬虫，这些页面不需要被收录。06 提交Sitemap（站点地图）简单说，站点地图就是你网站的URL列表。它的作用是指路，能告诉搜索引擎哪些内容可用以及如何到达，协助 Google 爬网程序更快地建立索引。只要生成了站长地图，就可以上传到Google Search Console（GSC，谷歌站长工具）了。一般在GSC上传了站长地图几天或者一周后，谷歌就会收录店铺的页面了。那么，怎么判断店铺有没有被收录呢？也非常简单，在谷歌搜索框中使用site:yoursite这个指令即可。如 http://keenchase.com 有10个页面已经被收录，而下面的结果就是收录的页面。07 移动端适配有数据统计，2019年有超过 60% 的谷歌搜索来自移动设备，并且这一数字每年都在增长。用MFSHOP搭建的独立站，在店铺装修这一步就充分考虑了“移动端友好”，点击即可切换电脑端/移动端预览。要查看你的网站目前对移动设备的友好程度，可以在 Google 中输入“Google Mobile-Friendly Tool”。 这将打开一个框，输入你想要 Google 评估的网站 URL即可。08 合理部署网站内链搜索引擎在考察独立站质量时，除了页面中的文字、图片、视频等内容，还会探查页面上的锚文本和锚链接。这些内链是引导站内 SEO 权重的关键要素。那么，什么是锚文本和锚链接呢？其实就是被加入了超链接的文本——这些加入了超链接、点击后可以跳转到其他页面的文本被称为锚文本（Anchor Text）；相应地，所链接到的网页被称为锚链接（Anchor Link），独立站内的锚链接也一般被大家称为内链。在MFSHOP建站后台文章管理—去添加—详情，选择锚文本，添加锚链接即可。内链传递的其实是页面之间的权重，在实际操作中，大家可以把有明显上下级关系的页面联系起来，也可以把并列的页面联系起来。同理，在更新博客、新闻时，也要根据文章的内容，在文中插入链接，导向相关的产品页面。这样，页面的权重就会不断流动，搜索引擎更偏爱页面之间有互动的独立站。如果你在落地执行的过程中有任何疑问，欢迎私信偶。同时，大家的团队也在制作一套详细的视频实操课程，敬请关注！HTML代码中src和href什么意思？
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。<script src ="js.js"></script>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果大家在文档中添加<link href="common.css" rel="stylesheet"/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。