大象

摘要： 结合本系列文章 "第一篇" ，看本文。 要执行，保存代码到 ，打开拖一个目录进去回车，按提示选择对应数字序数操作。 转载保留原文地址和作者名，只为错误勘正和信息补充。 版权声明：自由转载 非商用 非衍生 保持署名（创意共享3.0许可证） 阅读全文

摘要： 扫一遍，旨在认识，不在熟悉。 当前目录 上一层目录 根目录 文件及目录路径：使用反斜杠 ，不使用正斜杠 文件及目录路径：存在空格，使用双引号包裹路径 不可用于文件目录名的字符： 需双引号包裹的字符：( ) [ ] { } ^ = ; ! ' + , ` ~ & 空格 转义字符 需要转义的字符： 、` 阅读全文

摘要： 页面由几个主干结构支撑和区分，主干结构(Site/Page)内部由多个区块(Section)组成的布局，区块作为弹性布局或定宽布局的钩子，可以实现通栏背景。区块内部则是栅格列(Grid)，格子列里是各模块(Module)和组件(Component)，各模块和组件可有边框、内外边距。 栅格的实现：将区 阅读全文

摘要： 前面章节方法论，从本章节开始实践。 布局中的层级关系，主要体现在主干结构、栅格结构、组件模块结构三部分，本篇讲主干结构。 主干结构按级别分成“站点”和“页面”，即site和page。如电商或门户站点，站点有统一的头尾、悬浮挂件，站点有很多不一样的子站和栏目。 站点主干结构 1234567891011 阅读全文

摘要： Web重构工作主要是语义化排版文档信息，排版文档信息的最佳实现就是基于OOP分离分割结构、样式、行为。 分离分割皆为解耦。 分离，使HTML、CSS、JavaScript三基石职责清晰，HTML逻辑化内容，CSS视觉呈现，JavaScript承载控制、驱动、交互； 分割就是模块化、组件化，对系统各业 阅读全文

摘要： 语义化概念：通过丰富的语义关系对数据进行逻辑化描述，便于数据人机可读、检索挖掘和共享交换，实现信息处理的自动化和智能化；即人类提供良好结构的、作为人能识别的数据给机器，让不同机器能准确高效的意会和处理数据反馈给人类。 语义化实现方案有多种，如RDF、RDFa、Microformats、Microda 阅读全文

摘要： Web重构搭建工程目录，即是合理分布项目静态资源。 目录和文件名，只能是英文、数字和-字符组成，名称不宜过长和生涩，不加排序前缀，干扰阅读和查找文件名，层级不宜过深，这样便于后期维护调整，交付后端程序清晰明了。 项目目录规划 移动Web端 → Project-H5 微信端 → Project-Wei 阅读全文

摘要： 本篇讲从设计稿中提取基础资源和信息：切图与标注。 合格的设计师，会使每个元素组基于矩形层，形成一个个单元，并做好图层分类及命名，不在‘组’上使用蒙版，按照栅格化模块化设计，考虑各组件的复用性、扩展性和兼容性。 遇到不合格的设计师，那就把设计稿退回去，深入交流沟通。 不建议设计师切图，因为要考虑到图形 阅读全文

摘要： 本篇讲重构前的分析。从“工作状态、工作环境和工作角色”和具体重构工作两方面分析。 凡是经过考验的朋友，就应该把他们紧紧地团结在你的周围 比较理想的工作状态：制定了各种设计和开发规范，各团队之间邮件、团队内部即时通讯工具或声波传输沟通，对已有的或将要孵化的项目和产品，或多或少会有参与和认识，较早的进入 阅读全文

摘要： 本篇主要从语言入门、规范、工具、构建、库、框架、版本控制等各方面展开，篇幅会有点长，涉及到的工具类，会另开博文详细介绍。 另外说明Web重构是Web前端的开始，主要侧重Web页面，如实现布局与兼容，符合W3C标准规范，组件化框架化，实现页面视觉效果，提升代码的可维护性、可读性和性能优化。 三生万物 阅读全文

摘要： 出于兴趣，选择从事Web重构工作，也非常幸运，能够将兴趣与工作结合在一起，既保证了公司和个人的收入，又能倒腾爱好。 到目前为止，一直就职于中小型互联网公司从事Web重构开发，在项目与技术结合方面，比较幸运的是项目有“旧衣翻新”，也有“无中生有”，技术点是“无所不用其极”；当然，在小团队中会有较多局限 阅读全文

摘要： 按需调整断点一、谷歌后摘抄的一部分媒体查询/*#region SmartPhones *//* SmartPhones */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}/* La... 阅读全文