对于中大型前端项目，项目规范与代码质量尤为重要。当功能需求变更或需要重构时，随心所欲的(糟糕的)代码可能带来比重新开发还麻烦的问题。 1 前端项目代码中的常见问题 1.1 凌乱的书写风格，阅读体验差 这个问题不用作过多阐述，想必接手过他人代码的同学，多少都有些体会。简单来说，太过随意的代码会让强迫症患者难以容忍，难以阅读理解的代码有时甚至不如推倒重来。 1.2 低质量的编码，bug 不断 什么样的

前段时间将所负责的 Angular2 项目升级到了 Angular5 版本，这两天又进行了升级至 Angular6 的尝试。总的来说，两次升级过程比较类似，也不算复杂。 0. 项目特点 该项目有如下特点： 历史悠久，项目庞大，源码文件数量近千 业务代码为主，极少应用 Angular 高级特性(升级简单) 采用 pug 编写 html 结构 采用 Less 编写 css 样式 采用 Express

Android Chrome 浏览器默认禁止音频自动播放，但可以通过修改系统配置参数允许这个功能。 在 Android Chrome 60.X 版本之前，chrome://flags 中有一个 disable-gesture-requirement-for-media-playback 的选项，在浏览器中输入 chrome://flags/#disable-gesture-requirement-

compodoc 是针对 angular2+ 设计的 API 文档生成工具，其最大的特点是使用简单，生成文档全面美观。 1 compodoc 的优缺点 API 文档主要的作用一般有： 方便快速了解整体的模块、组件依赖、项目架构等 方便 API 文档快速查阅 利于重复方法、变量等的分析，优化项目结构( Miscellaneous) 项目质量跟踪，文档覆盖率统计分析(Documentation cov

1 什么是 BEM 命名规范 Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。 BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。 1.1 BEM 命名模式 BEM 命名约定的模式是： .block {} .block__ele

无论使用 npm 还是 yarn 管理前端项目的依赖，都可能会遇到网络访问问题而头疼。另外，你可能工作中需要使用内部私有仓库模块，却又有时又需要对外发布或更新模块。此时频繁来回切换或加 registry 后缀也会比较烦人。 nrm 即是因此类需求而产生的，它是一个用于快速切换 npm 源地址的 nodejs 工具。 1. 使用 nrm 安装 nrm： npm i -g @lzwme/nrm nrm

本文介绍的方案来源于一次 H5 活动的开发实践。 H5 DEMO 参考：bir2017 拿到设计稿后，如何进行布局还原？ 如果只需要做非精确的响应式设计，那么使用媒体查询来实现就 OK 了。如果需要精确还原设计稿，则一般通过缩放来实现，常见的缩放方案有基于 viewport 和基于 rem 的布局适配方法。 1 viewport 缩放方案 在移动端，可以通过 viewport 缩放页面大小比率达到

puppeteer 安装设置国内代理下载 chrome 的方法 通过执行命令 npm install puppeteer，可以快速简单的将 puppeteer 添加到项目依赖中。 但是期间会下载 Chromium，如果是在国内大概率会被卡主很长时间，甚至是失败。 设置如下环境变量（支持puppeteer新旧版本），可以让它通过访问在国内的镜像文件达到快速下载的目的： export PUPPETEE

在中后台管理系统中，由于业务功能模块的复杂性，使用 iframe 是不可避免的。当需要嵌入单独实现的或由另外一个系统提供的页面功能模块时，你只能选择 iframe。 本文尝试对 iframe 应用实践中常见的问题进行简要整理。 1 HTML <iframe> 标签 iframe 用于创建页内框架，以在当前页面中嵌入另外一个页面。所有浏览器都支持 &lt;iframe&g

1. fis3 简介 fis3 是狼厂出产的工程化构建工具，在其厂内得到广泛推广应用，在国内也火了很长一段时间。而在 webpack 和 rollup 大红大紫的当下，fis3 似乎在日新月异的前端圈里渐渐地淡出大众的视野。 暂不说孰优孰劣，好用够用就是最好的。fis3 相对已比较成熟稳定，又太长时间没有新东西拿出来，在 tree shaking 这些技术面前显得有些落后。当前应该仍有不少的团队在