在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 便于维护 保持代码清晰易懂 保持代码的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一部分将探讨语法.格式以及分析 CSS 结构:第二部分将围绕方法论.思维框架以及编写与规划 CSS 的态度. CSS 文档分析 无论编写什么文档,我们都应当尽力维持统一的风格,包括统一的注释.统一的语法与统一的命名规范. 总则 尽量将行宽控制在 80 字节以下.渐变(gradient)相关的语法以及注释中的…

最近读完<编写可维护的JavaScript>,让我受益匪浅,它指明了编码过程中,需要注意的方方面面,在团队协作中特别有用,可维护性是一个非常大的话题,这本书是一个不错的起点. 本书虽短,却五脏俱全,主要涵盖:编程风格(基本格式化.注释.语句和表达式.变量),编程实践(UI层松耦合.避免使用全局变量等).自动化,3个部分的内容. 本文主要整理归纳了书中编程实践章节的核心内容,其他两章编码风格和自动化部分,还需结合当前的流行趋势重新整理,稍后再与大家分享. 第5章 UI层的松耦合 Web开发三大要…

上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. 二.编程实践 1.UI松耦合 第一.将css从javascript中抽离(要改变dom样式数据,应该去操作dom的class名而非dom的style属性,后续要修改此样式只需到对应的css文件中修改而不用修改js文件): 第二.将javascript从HTML中抽离,比如下面的写法是不好的 <!-- 不…

译者注:这是一篇很棒文章,使用有趣的叙述方式,从反面讲解了作为一个优秀的 PHP 工程师,有哪些事情是你不能做的.请注意哦,此篇文章罗列的行为,都是你要尽量避免的. 随着失业率越来越高,很多人意识到保全自己的工作是多么的重要.那么,什么是保住自己工作,并让自己无可替代的好方法呢?一个很简单的事实是只要你的代码没有人能够维护,那么你就成功保住了工作.编写不可维护的代码是一个特殊的技能,但奇怪的是,似乎对某些开发者来说是很自然的.不过对于剩下的开发者来说,这里有一些技巧和提示来让你开始写不可维护的代…

本书的第二个部分总结了有关编程实践相关的内容,每一个章节都非常不错,捡取了其中5个章节的内容.对大家组织高维护性的代码具有辅导作用. 5个章节如下—— 一.UI层的松耦合 二.避免使用全局变量 三.事件处理 四.将配置数据从代码中分离出来 五.抛出自定义错误 一.UI层的松耦合 如果两个组件耦合太紧,则说明一个组件和另一个组件直接相关,这样的话,如果修改一个组件的逻辑,那么另外一个组件的逻辑也需要修改.比如,有一个名为error的CSS类名,它是贯穿整个站点的,它被嵌入到HTML之中.如果有一天…

平时使用的时VS来进行代码的书写,VS会自动的将代码格式化,所有写了这么久的JS代码,也没有注意到这些点.看了<编写可维护的javascript代码>之后,做了些笔记. var result = parameter1 + parameter2 + parameter3 + parameter4 + parameter5 parameter6 + parameter7; 当代码超过一行的时候应该给代码换行.换行的时候,第二行的代码应该增加两个缩进 if (isTrue && is…

目录 推荐一本好书:编写可维护的JavaScript(可下载) 书摘: 下载: 有些建议: 推荐一本好书:编写可维护的JavaScript(可下载) 书摘: 很多设计模式就是为了解决紧耦合的问题.如果两个组件耦合太紧,则说明一个组件和另一个组件直接相关,这样的话,如果修改一个组件的逻辑,那么另外一个组件的逻辑也需修改.比如,假设有一个名为error的CSS类名,它是贯穿整个站点的,它被嵌入到HTML之中.如果有一天你觉得error的取名并不合适,想将它改为warning,你不仅需要修改CSS还要…

能够写出可维护的面向对象JavaScript代 码不仅可以节约金钱,还能让你很受欢迎.不信?有可能你自己或者其他什么人有一天会回来重用你的代码.如果能尽量让这个经历不那么痛苦,就可以节省不少时 间.地球人都知道,时间就是金钱.同样的,你也会因为帮某人省去了头疼的过程而获得他的偏爱.但是,在开始探索如何编写可维护的面向对象JavaScript代码之前,我们先来快速看看什么是面向对象.如果已经了解面向对象的概念了,就可以直接跳过下一节. 什么是面向对象?  面向对象编程主要通过代码代表现实世界中的实…

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></s…

在Visual Studio 2012中,我们介绍了创建可视化使用原生类型的能力natvis文件. Visual Studio 2013中包含了一些改进,使其更容易编写可视化的类,在内部利用收集来存储项目. 在这篇博客文章中,我将介绍一个示例场景,告诉你什么是你必须做的VS2012以达到预期的效果,然后告诉你如何在natvis创作变得更容易,体验VS2013新功能的增强. 示例场景 让我们考虑下面的源代码,并假设我们是在写一个可视化的CNameList类:   #include <vector>…

写在前面:之前硬着头皮参加了java方面的编程规范培训,收货良多,工作半年有余的时候,总算感觉到一丝丝Coding之美,以及造轮子的乐趣,以至于后面开发新功能的时候,在Coding style方面花了很多时间,但还有一些细节方面,总感觉一直没有统一,比如什么时候该加空行,比如是不是所有的return前面都应该加个空行以及注释的添加等等,才有了对这本书<编写可维护的Javascript>的阅读,还是如之前一样,只收纳了一些自己看本书的时候,还未完全贯彻的style 有待改进的点:在前端自动化的路…

前言 在现在的互联网业务中,前端开发人员往往需要支持比较多的项目数量.很多公司只有 1-2 名前端开发人员,这其中还不乏规模比较大的公司.这时前端同学就需要独挡一面支持整个公司上下的前端业务,项目如流水一般从手里流过,此时更需要前端开发人员将工作工程化.流水线化. 一个栗子 现在需要编写页面中的一个按钮,结构与样式如下: <div class='button'>开始</div> 有人说,这有什么难的,不到1分钟就能写好了: .button { width: 100px; heigh…

我是一名前端小白,之前没写过多少代码,心里没有代码质量这个概念,人人都说代码是团队的产物,应该将代码写规范,但是我对具体什么样的代码是可维护的是茫然的. 我没写过多少代码,本来好多东西就不咋会,每次给我需求,我第一想到的就是怎样实现,我应该先完成这项工作,这就使我一次次都到最后再看看自己的代码,从头开始就是乱的,怎样一下再改成规范代码呢,我很迷茫. 长此下去,我入职了一个月两个月三个月,我的代码质量还是没有提升,我写的代码还是一塌糊涂,给后人挖坑,实力坑队友啊,一般,在团队中,自己写的后期基本都…

本书作者Joost Visser,译者张若飞.本书讲解了编写可维护代码的10个要则,从目录就可以看出这10点分别是: 编写短小的代码单元(15行以内,在大部分情况下还是能实现的,但是当我们使用Linq或者使用对象初始化器代码一下子就超过15行了,这点要则还是有些苛刻的) 编写简单的代码单元(分支不超过4个,这个还是很值得学习的) 不写重复代码(代码重用是很重要的技巧,然而现在大部分项目追求快速迭代,把每个功能都当成独立的来进行设计,导致很多相似重复的代码,留下了很多的技术债务) 保持代码单元的接…

最近在读<编写可维护的javascript>这本书,为了加深记忆,简单做个笔记,同时也让没有读过的同学有一个大概的了解. 一.编程风格 程序是写给人读的,所以一个团队的编程风格要保持一致. 1.缩进:一种是利用制表符缩进,一种是使用空格符缩进,各有利弊,任选一种,保持一致即可.个人比较喜欢制表符缩进. 2.语句结尾需要加上分号,避免没必要的BUG. 3.命名:首先要语义化,使用驼峰式命名法,小驼峰即首字母小写,之后每个单词首字母大写:大驼峰即首字母大写,之后同小驼峰:变量名前缀应该是名词(my…

如果你看过Nicolas C.Zakas写过的任何作品,你必须承认他是个不折不扣的天才.也只有天才级的才能写出<JavaScript高级程序设计>让所有的前端攻城师人手一本.Nicolas C.Zakas除了对现代JavaScrpt技术的详细讲解,还倡导了很多最佳实践,包括渐进增强.可访问性.性能.扩展性和可维护性等. 编写可维护的Javascript就意味着:消灭团队个体的差异达成整体的统一,以保持大家的代码风格一致和可读的.可维护性的.可扩展的.所以该系列收纳架做一个收纳整理. 书从编码风…

在JavaScript应用中事件处理是非常重要的,所有的JavaScript都是通过事件绑定到UI上的. 1. 典型用法 当事件触发的时候,事件对象event会最为回调参数传入到事件处理程序中.event对象包含所有和事件相关的信息. 123456789 // 不好的写法function handleClick( event ){ var popup = document.getElementById("popup"); popup.style.left = event.clientX…

在团队中只有每个人的编程风格一致,大家才能方便的互相看懂和维护对方的代码. 1. 层级缩进 对于层级缩进目前有两种主张:1)使用制表符这种方法有两种好处,第一,制表符和缩进层级之间是一一对应关系,符合逻辑:第二是文本编辑器可以配置制表符的展现长度.缺点是系统对制表符的解释不一致.2)使用空格符目前主要有三种具体的做法:2个空格表示一个缩进,4个空格表示一个缩进,8个空格表示一个缩进优点:在所有的系统和编辑器中,文件的展现格式不会有任何差异:缺点:对于单个开发者来说,使用一个没有配置好的文本编辑器…

<编写可维护的JavaScript> 笔记 我的github iSAM2016 概述 本书的一开始介绍了大量的编码规范,并且给出了最佳和错误的范例,大部分在网上的编码规范看过,就不在赘述 重点是总结了数据类型的判断,我再此和underscore中的类型判断一起做个总结: 总结 string number undefined boolean 这四中数据类型使用typeof 在检测即可 typeof '1' == 'string' typeof 1 == 'number' typeof found…

拯救一切强迫症 - 读<编写可维护的 JavaScript>(一) 本文写于 2020 年 4 月 24 日 我在小学的时候就有接触过编程,所以读大一的时候 C 语言还算是轻车熟路.自然会有很多同学给我看他们的代码,麻烦我帮助他们找一找 bug. 我代码拿到手的第一件事儿是啥? 重排代码格式!(相信大家基本上大学学 C 语言都用的是 VC++,并没有代码自动格式化功能,现在我极力推荐 prettier 进行自动格式化) 通常我看到的代码都是这样的: if (wl && wl.l…

第九章 将配置数据从代码中分离出来 9.2 抽离配置数据 这章比较好理解,也非常常见,作者给的俩个例子就能说明一切: // 将配置数据藏在代码中 function validate(value) { if (!value) { alert("Invalid value"); location.href = "/errors/invalid.php"; } } function toggleSelected(element) { if (hasClass(elemen…

原文:How To Write Mobile-first CSS 作者: 译者:huansky 构建响应式网站是今天前端开发人员必备的技能. 当我们谈论响应式网站时,移动优先这个词立刻就会浮现. 我们知道从移动优先的角度设计的重要性. 不幸的是,关于移动优先的配置方法很少提及. 今天,我想和大家分享一下移动优先的样式方法,为什么它会更好,以及如何运用它的魔力. 注意:如果您正在学习使用Susy构建响应式布局,本文将非常有用. 什么是移动优先和桌面优先方法? 让我们了解移动优先和桌面优先之间的差异…

以前使用ASP.NET WebForm开发时,喜欢使用Repeater控件嵌套的方式开发前台页面,这样就不用JS拼接HTML或者后台拼接HTML了,写出的HTML页面美观.简捷.易于维护,由于不用JS拼接HTML,所以JS写的也很少. 最近使用ASP.NET MVC开发,前台页面的功能比较复杂,每次刷新整个页面的话体验会很差,所以通过JS控制页面元素,实现局部刷新.刚开始使用的方法是通过JS在前台拼接HTML,结果JS写的很长,要命的事,每增加一个新功能,都要拼接很长的HTML,结果页面的JS越…

原文转自:http://blog.jobbole.com/55067/ 编写好的CSS代码,有助提升页面的渲染速度.本质上,引擎需要解析的CSS规则越少,性能越好.MDN上将CSS选择符归类成四个主要类别,如下所示,性能依次降低. ID 规则 Class 规则 标签规则 通用规则 对效率的普遍认识是从Steve Souders在2009年出版的<高性能网站建设进阶指南>开始,虽然该书中罗列的更加详细,但你也可以在这里查看完整的引用列表,也可以在谷歌的<高效CSS选择器的最佳实践>中…

编写好的CSS代码能提升页面的渲染速度.本质上,一条规则都没有引擎解析的最快.MDN上将CSS选择符归拆分成四个主要类别,如下所示,性能依次降低. ID 规则 Class 规则 标签规则 通用规则 对效率普遍认识是从Steve Souders在2009年出版的<高性能网站建设进阶指南>开始的,虽然Souders的书中罗列的非常详细,你可以在这里查看完整列表引用.你也可以在谷歌的高效的CSS选择器的最佳实践中查看更多的细节. 本文我想分享一些我在编写高性能CSS中用到的简单的例子和指导方针.受M…

市面上我们常常会看到各种各样的设计模式书籍,Java设计模式.C#设计模式.Ruby设计模式等等.在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料,即使在网上找到类似内容,细细一看之下才发觉是南辕北辙.经过浩瀚文章搜索发掘下依旧一无所获之后,直接导致了我萌生一股写一篇CSS设计模式的冲动,至此写下这篇文章,其中叙述如有不当之处,也恳请各位提出意见,分享出您宝贵的经验. 在写页面之中,width, margin, padding这三个CSS属性可以说是用到频率最高的几个属性之一.但根据我…

原文链接:https://zellwk.com/blog/how-to-write-mobile-first-css/ 构建响应式网站是如今前端开发者的必备技能,当我们谈到响应式网站时,“移动端优先”这个词立刻就会出现在脑海中. 我们知道从“移动端优先”这个角度开始设计很重要,但我们很少谈到使用“移动端优先”的方法来写代码. 今天,我想与你分享“移动端优先”添加样式的方法,为什么这种方法更好,以及如何发挥它的魔力. 贴士:如果你在学习使用Susy来建立响应式布局,这篇文章会对你帮助非常大. #什…

在工作中,制定一套统一的编码风格,可以提高开发效率,维护起来的也要容易很多,也能避免一些不必要的错误出现. 项目中常用的检查编码风格的工具JSLint.JSHint.JSCS.ESLint,,在这呢,我就不介绍这些工具的使用,大家可以自行去看看官方文档就好,我就给大家介绍平时写时候的要点就好 基本的格式化 缩进层级 使用制表符进行缩进(tab键:一个制表符的长度相当于4个字符) 编辑器可以设置是一个缩进是2个空格还是4个空格还是8个空格,建议是使用4个空格,折中处理,很多编辑器默认也是4个空格.…

第一部分: 编程风格 在大型项目开发中,因为项目可读性规范性的需要(就像<编写可维护性的Javascript>一书作者Nicholas Zakas大神所说,他们团队所有成员写出的代码就像是经同一个人之手写出的一样),风格约定要大于个人喜好这一点毋庸置疑,不过什么样才是好的编程风格约定?下面推荐一些实践中沉淀下来的代码规范和最佳实践: 缩进 缩进问题和编辑器问题一样是一个因为个人喜好和其他不管值得不值得争执的理由而存在争议的问题,目前存在两个流派,空格流和tab流.个人比较习惯于tab(4个空格…

load-grunt-tasks 插件 首先介绍下 load-grunt-tasks 这个插件. 我们一般都会把所有用到的插件以及插件的配置写到 Gruntfile.js 里面,对于小项目来说这个文件最终或许不是很大,但是对于大项目.有很多配置或者很多自定义任务的项目来说,最后这个文件都会变得越来越长,维护起来就成了麻烦.比如下面这样: module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('…