摘要： 前端工程化是一个新兴的词语，改变了前端的开发模式，《前端工程化体系设计与实践》系统的阐述了前端工程化的方方面面。 一、前端工程简史 1. 前端工程师的技能栈 （1）硬技能：HTML、CSS、JavaScript，三者相互耦合，并非独立。 （2）软技能：用户体验，保证内容的快速呈现、减少等待时间等。快 阅读全文

摘要： 原子设计是一种方法，由五个不同的阶段一起工作，以更慎重和更具层次的方式创建界面设计系统。 一、五个阶段 1）原子 用户界面的原子就是那些构成我们用户界面的基本构件。这些原子包括了基本的HTML元素，例如表单标签，输入，按钮，和其他除非损坏其功能否则不能进一步拆解的元素。在模式库中，原子一目了然地展示 阅读全文

摘要： 最近在拜读一本《前端架构设计》的书，该书讲到前端架构师的用户是开发人员。所选择的工具、编写的代码、创建的流程，都是为了让开发人员能够构建出最高效的、不出错的、可扩展的和可持续优化的系统。 一、HTML 1）标签规范化 div乱炖是指嵌套多层div元素。为了保持简洁，语义化的标签是首选，应用样式所依靠 阅读全文

摘要： 这些天突然想了解一点关于项目管理方面的知识，因此找了一本叫做《写给大家看的项目管理书》的书，该书比较通俗易懂，下面将该书的重点部分加以记录。 一、项目具有挑战性 1）未知的领域，项目都是独一无二的。 2）多方的项目预期，不同项目干系人的需求和期望不同。 3）沟通障碍，组织自身边界复杂、沟通渠道多样， 阅读全文

摘要： 最近在拜读一本Web体验相关的书《渐进增强——跨平台用户体验设计 》，阅读后做些总结，消化一下书中的精髓。 在阅读本文前，可以先思考下面几个问题。 1. 浏览网页的目的是什么？ 2. 浏览网页的时候会碰到哪些问题？ 3. 用什么方法来解决这些问题？ 4. 这些方法具体的实施步骤有哪些？ 一、契机 1 阅读全文

摘要： 将表单验证的通用部分提炼出来，做成一个简易插件，方便调用。 已将源码放到GitHub上，名字叫zValidate。 手机可扫描下图查看示例，PC端可点击此处查看： 一、原理 1）需要引入zepto.js库，便于DOM操作。 2）将验证规则作为控件的一个属性，写在控件的html中，有点MVVM模式的味 阅读全文

摘要： 最近在研读《高性能JavaScript》，在此做些简单记录。示例代码可在此处查看到。 一、DOM 1）DOM和JavaScript 文档对象模型（DOM）是一个独立于语言的，用于操作XML和HTML文档的程序接口（API）。 浏览器通常会把DOM和JavaScript独立实现。例如Chrome中使用 阅读全文

摘要： 大多数程序员的英语是软肋，包括我在内。自己也曾经试过多种方法来学习英语，但最后都是不了了之，现在回想起来，有几个原因： 1. 无针对性的学习，例如每日背十几个单词。 2. 不能反复复习，例如看美剧。 3. 太功利性，感觉见效不明显，就没坚持下来。 古语说：“锲而不舍，金石可镂”。想要持续的做一件事， 阅读全文

摘要： 最近在研读《正则指引》，再将正则相关知识点梳理一遍。 下图是JavaScript中的正则功能，说明一列可看到支持程度。 一、语法 1）量词 匹配优先量词（greedy quantifier），也称为贪婪量词，在拿不准是否要匹配的时候，优先尝试匹配，记下这个状态，以备将来返回（回溯）。 忽略优先量词（ 阅读全文

摘要： 前面曾经写过一篇《H5图片裁剪升级版》，但里面需要借助第三方手势库，这次就不需要使用手势库，全部封装在代码中。 下图是裁剪的展示，下面就做了拖放和裁剪，没有做缩放，在插件中需要用到大量的计算。veImage的源码可以在此处浏览。 一、原理 1）拖动、缩放、裁剪都是借助Canvas实现的。Canvas 阅读全文