前端架构与工程

摘要： 《微信小程序七日谈》系列文章： 1. " 第一天：人生若只如初见" ； 2. "第二天：你可能要抛弃原来的响应式开发思维" ； 3. "第三天：玩转Page组件的生命周期" ； 4. "第四天：页面路径最多五层？导航可以这么玩" ； 5. "第五天：你可能要在登录功能上花费大力气" ； 6. [第六 阅读全文

摘要： 《微信小程序七日谈》系列文章： 1. " 第一天：人生若只如初见" ； 2. "第二天：你可能要抛弃原来的响应式开发思维" ； 3. "第三天：玩转Page组件的生命周期" ； 4. "第四天：页面路径最多五层？导航可以这么玩" ； 5. "第五天：你可能要在登录功能上花费大力气" ； 6. "第六 阅读全文

摘要： 《微信小程序七日谈》系列文章： 1. " 第一天：人生若只如初见" ； 2. "第二天：你可能要抛弃原来的响应式开发思维" ； 3. "第三天：玩转Page组件的生命周期" ； 4. "第四天：页面路径最多五层？导航可以这么玩" ； 5. "第五天：你可能要在登录功能上花费大力气" ； 6. "第六 阅读全文

摘要： 《微信小程序七日谈》系列文章： 1. " 第一天：人生若只如初见" ； 2. "第二天：你可能要抛弃原来的响应式开发思维" ； 3. "第三天：玩转Page组件的生命周期" ； 4. "第四天：页面路径最多五层？导航可以这么玩" ； 5. "第五天：你可能要在登录功能上花费大力气" ； 6. "第六 阅读全文

摘要： 《微信小程序七日谈》系列文章： 1. " 第一天：人生若只如初见" ； 2. "第二天：你可能要抛弃原来的响应式开发思维" ； 3. "第三天：玩转Page组件的生命周期" ； 4. "第四天：页面路径最多五层？导航可以这么玩" ； 5. "第五天：你可能要在登录功能上花费大力气" ； 6. "第六 阅读全文

摘要： 《微信小程序七日谈》系列文章： 1. " 第一天：人生若只如初见" ； 2. "第二天：你可能要抛弃原来的响应式开发思维" ； 3. "第三天：玩转Page组件的生命周期" ； 4. "第四天：页面路径最多五层？导航可以这么玩" ； 5. "第五天：你可能要在登录功能上花费大力气" ； 6. "第六 阅读全文

摘要： 很荣幸作为前端专题讲师参加2016年SDCC，与周爱民老师同台，听业界牛人的分享真是受益匪浅。对我来说是第一次在如此规模的专题论坛上演讲，全程紧张的要命，提前准备好的内容有很多因为紧张没有讲出来。此次参会最大的收获不仅仅是对自己的一次锻炼，更多的是了解前端行业的技术现状和未来走向。 我的分享主题是《 阅读全文

摘要： 本文是58到家前端工程化集成解决方案 "boi" 的博文系列之一。boi是基于webpack打造的一站式前端工程化解决方案，现已开源 "Github" 。 作为前端构建工具不可或缺的一个环节，自动生成css sprites图片不仅仅能够减少频繁的人工操作，还能够避免多人协作时对同一个sprites图 阅读全文

摘要： 本文内容只适用于webpack v1版本，webpack v2已经修复了hash计算规则。 之前讨论了 "webpack的hash与chunkhash的区别以及各自的应用场景" ，如果是 常规单页面 应用的话，上篇文章提供的方案是没有问题的。但是前端项目复杂多变，应对 复杂多页面 项目时，我们不得不 阅读全文

摘要： 微信钱包内的58到家全新首页已经上线，感兴趣的同学们可以在微信中打开“我的 钱包 58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题： 1. 每个城市开通的服务项目不同，有些内容是写死在tpl中，维护非常头疼； 2. 开通新服务或者某些UI调整（比如更换服务项的图片造成更改雪碧图）时必 阅读全文

摘要： 文件的hash指纹通常作为前端静态资源实现增量更新的方案之一，Webpack是目前最流行的开源编译工具之一，其强大的功能也带来很多坑（当然，大部分麻烦其实都可以在官方文档中找到答案）。 比如，在Webpack编译输出文件的配置过程中，如果需要为文件加入hash指纹，Webpack提供了两个配置项可供 阅读全文

摘要： 斟酌之后，决定在《嗨猫》项目中引入react，整体项目偏重spa模式，舍弃部分server端的模板渲染，将一部分渲染工作交给前端react实现。 react拥有丰富的组件，虽然不如Backbone和underscore这对老基友成熟，但考虑到嗨猫的前端并不需要很多的MV 架构，目前使用到Backbo 阅读全文

摘要： 1. 使用Backbone实现前端hash路由 登录注册页面如下： 初步设想将注册和登录作为两个不同的url实现，但 登录和注册功能的差距只有form表单部分 ，用两个url实现显然开销过大，所以最终方案为使用hash作为前端路由，根据url的hash值切换相应的表单显示。 很多致力于SPA开发的前 阅读全文

摘要： 构建的核心是资源管理 。简单说，构建就是把前端工程师开发的源代码进行编译、压缩、打包等一系列操作，最终产出可以直接上线或者可供后端工程师的资源。 构建可以划分为 纯前端构建 和 前后端协作构建 。 这两个不是专业术语，如果你有更合适的称谓，欢迎指正。 所谓 纯前端构建 ，就是说 不涉及后端模板 的构 阅读全文

摘要： 1. 什么是前端工程化 自有前端工程师这个称谓以来，前端的发展可谓是日新月异。相比较已经非常成熟的其他领域，前端虽是后起之秀，但其野蛮生长是其他领域不能比的。虽然前端技术飞快发展，但是前端整体的工程生态并没有同步跟进。目前绝大多数的前端团队仍然使用非常原始的 “切图（FE） 套模板（RD）” 的开发 阅读全文

摘要： 1 Google Analytics GA向window暴露一个名为 的全局函数，ga()函数以参数格式、数目来分发不同的行为。这种模式的好处是API单一，不易混淆。但是缺点同样明显，在调用 时需要谨慎处理参数，包括格式、数目、名称等，推荐使用 的方式调用，比如： 而不是 GA的API总体分为两种： 阅读全文

摘要： 1. 业界案例 目前前端性能监控系统大致为分两类：以GA为代表的 代码监控 和以webpagetest为代表的 工具监控 。 代码监控 依托于js代码并部署到需监控的页面，手动计算时间差或者使用浏览器的的API进行数据统计。 影响代码监控数据的因素有以下几种： 浏览器渲染机制； 浏览器对API的实现 阅读全文

摘要： NativeScript是一个runtime，它提供一些机制可以使用JavaScript构建原生的IOS、Android甚至WP（未来会加入）应用。NativeScript有很多非常酷的功能，比如 "MVVM" 和 "CSS渲染原生UI" 。但是NativeScript最令人兴奋的是它使JavaSc 阅读全文

摘要： 在web产品优化准则中，很重要的一条是针对js脚本的加载和执行方式的优化。本篇文章简单描述一下其中的优化准则。 1. 脚本加载优化 1.1 脚本位置对性能的影响 优化页面加载性能的原则之一是 将script标签放在body底部 ，这跟 浏览器的渲染原理 有关： 1. js脚本的下载和执行会阻塞浏览器 阅读全文

摘要： 前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的 ,`:hover 标签的 、`visited :before :after`等。 其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将 、`:after`称为伪 阅读全文