摘要: 《微信小程序七日谈》系列文章: 1. " 第一天:人生若只如初见" ; 2. "第二天:你可能要抛弃原来的响应式开发思维" ; 3. "第三天:玩转Page组件的生命周期" ; 4. "第四天:页面路径最多五层?导航可以这么玩" ; 5. "第五天:你可能要在登录功能上花费大力气" ; 6. "第六 阅读全文
posted @ 2017-01-12 19:58 JunpengZ 阅读(15966) 评论(13) 推荐(6) 编辑
摘要: 《微信小程序七日谈》系列文章: 1. " 第一天:人生若只如初见" ; 2. "第二天:你可能要抛弃原来的响应式开发思维" ; 3. "第三天:玩转Page组件的生命周期" ; 4. "第四天:页面路径最多五层?导航可以这么玩" ; 5. "第五天:你可能要在登录功能上花费大力气" ; 6. "第六 阅读全文
posted @ 2016-12-16 14:48 JunpengZ 阅读(13985) 评论(1) 推荐(4) 编辑
摘要: 《微信小程序七日谈》系列文章: 1. " 第一天:人生若只如初见" ; 2. "第二天:你可能要抛弃原来的响应式开发思维" ; 3. "第三天:玩转Page组件的生命周期" ; 4. "第四天:页面路径最多五层?导航可以这么玩" ; 5. "第五天:你可能要在登录功能上花费大力气" ; 6. "第六 阅读全文
posted @ 2016-12-06 11:00 JunpengZ 阅读(7957) 评论(7) 推荐(5) 编辑
摘要: 《微信小程序七日谈》系列文章: 1. " 第一天:人生若只如初见" ; 2. "第二天:你可能要抛弃原来的响应式开发思维" ; 3. "第三天:玩转Page组件的生命周期" ; 4. "第四天:页面路径最多五层?导航可以这么玩" ; 5. "第五天:你可能要在登录功能上花费大力气" ; 6. "第六 阅读全文
posted @ 2016-11-26 15:07 JunpengZ 阅读(5905) 评论(2) 推荐(7) 编辑
摘要: 《微信小程序七日谈》系列文章: 1. " 第一天:人生若只如初见" ; 2. "第二天:你可能要抛弃原来的响应式开发思维" ; 3. "第三天:玩转Page组件的生命周期" ; 4. "第四天:页面路径最多五层?导航可以这么玩" ; 5. "第五天:你可能要在登录功能上花费大力气" ; 6. "第六 阅读全文
posted @ 2016-11-24 15:17 JunpengZ 阅读(5662) 评论(17) 推荐(7) 编辑
摘要: 很荣幸作为前端专题讲师参加2016年SDCC,与周爱民老师同台,听业界牛人的分享真是受益匪浅。对我来说是第一次在如此规模的专题论坛上演讲,全程紧张的要命,提前准备好的内容有很多因为紧张没有讲出来。此次参会最大的收获不仅仅是对自己的一次锻炼,更多的是了解前端行业的技术现状和未来走向。 我的分享主题是《 阅读全文
posted @ 2016-11-22 19:31 JunpengZ 阅读(882) 评论(1) 推荐(1) 编辑
摘要: 本文是58到家前端工程化集成解决方案 "boi" 的博文系列之一。boi是基于webpack打造的一站式前端工程化解决方案,现已开源 "Github" 。 作为前端构建工具不可或缺的一个环节,自动生成css sprites图片不仅仅能够减少频繁的人工操作,还能够避免多人协作时对同一个sprites图 阅读全文
posted @ 2016-11-11 10:00 JunpengZ 阅读(5646) 评论(2) 推荐(1) 编辑
摘要: 本文内容只适用于webpack v1版本,webpack v2已经修复了hash计算规则。 之前讨论了 "webpack的hash与chunkhash的区别以及各自的应用场景" ,如果是 常规单页面 应用的话,上篇文章提供的方案是没有问题的。但是前端项目复杂多变,应对 复杂多页面 项目时,我们不得不 阅读全文
posted @ 2016-10-24 16:11 JunpengZ 阅读(11168) 评论(10) 推荐(5) 编辑
摘要: 微信钱包内的58到家全新首页已经上线,感兴趣的同学们可以在微信中打开“我的 钱包 58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题: 1. 每个城市开通的服务项目不同,有些内容是写死在tpl中,维护非常头疼; 2. 开通新服务或者某些UI调整(比如更换服务项的图片造成更改雪碧图)时必 阅读全文
posted @ 2016-08-29 17:59 JunpengZ 阅读(4623) 评论(5) 推荐(6) 编辑
摘要: 文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案)。 比如,在Webpack编译输出文件的配置过程中,如果需要为文件加入hash指纹,Webpack提供了两个配置项可供 阅读全文
posted @ 2016-06-28 14:49 JunpengZ 阅读(27790) 评论(15) 推荐(17) 编辑
摘要: 斟酌之后,决定在《嗨猫》项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现。 react拥有丰富的组件,虽然不如Backbone和underscore这对老基友成熟,但考虑到嗨猫的前端并不需要很多的MV 架构,目前使用到Backbo 阅读全文
posted @ 2016-04-18 13:08 JunpengZ 阅读(1754) 评论(0) 推荐(0) 编辑
摘要: 1. 使用Backbone实现前端hash路由 登录注册页面如下: 初步设想将注册和登录作为两个不同的url实现,但 登录和注册功能的差距只有form表单部分 ,用两个url实现显然开销过大,所以最终方案为使用hash作为前端路由,根据url的hash值切换相应的表单显示。 很多致力于SPA开发的前 阅读全文
posted @ 2016-04-15 18:58 JunpengZ 阅读(4364) 评论(0) 推荐(0) 编辑
摘要: 构建的核心是资源管理 。简单说,构建就是把前端工程师开发的源代码进行编译、压缩、打包等一系列操作,最终产出可以直接上线或者可供后端工程师的资源。 构建可以划分为 纯前端构建 和 前后端协作构建 。 这两个不是专业术语,如果你有更合适的称谓,欢迎指正。 所谓 纯前端构建 ,就是说 不涉及后端模板 的构 阅读全文
posted @ 2016-04-12 17:08 JunpengZ 阅读(2232) 评论(0) 推荐(4) 编辑
摘要: 1. 什么是前端工程化 自有前端工程师这个称谓以来,前端的发展可谓是日新月异。相比较已经非常成熟的其他领域,前端虽是后起之秀,但其野蛮生长是其他领域不能比的。虽然前端技术飞快发展,但是前端整体的工程生态并没有同步跟进。目前绝大多数的前端团队仍然使用非常原始的 “切图(FE) 套模板(RD)” 的开发 阅读全文
posted @ 2016-04-11 14:29 JunpengZ 阅读(17783) 评论(7) 推荐(13) 编辑
摘要: 1 Google Analytics GA向window暴露一个名为 的全局函数,ga()函数以参数格式、数目来分发不同的行为。这种模式的好处是API单一,不易混淆。但是缺点同样明显,在调用 时需要谨慎处理参数,包括格式、数目、名称等,推荐使用 的方式调用,比如: 而不是 GA的API总体分为两种: 阅读全文
posted @ 2016-03-30 12:03 JunpengZ 阅读(1721) 评论(6) 推荐(2) 编辑
摘要: 1. 业界案例 目前前端性能监控系统大致为分两类:以GA为代表的 代码监控 和以webpagetest为代表的 工具监控 。 代码监控 依托于js代码并部署到需监控的页面,手动计算时间差或者使用浏览器的的API进行数据统计。 影响代码监控数据的因素有以下几种: 浏览器渲染机制; 浏览器对API的实现 阅读全文
posted @ 2016-03-23 17:21 JunpengZ 阅读(2863) 评论(4) 推荐(3) 编辑
摘要: NativeScript是一个runtime,它提供一些机制可以使用JavaScript构建原生的IOS、Android甚至WP(未来会加入)应用。NativeScript有很多非常酷的功能,比如 "MVVM" 和 "CSS渲染原生UI" 。但是NativeScript最令人兴奋的是它使JavaSc 阅读全文
posted @ 2016-03-22 14:40 JunpengZ 阅读(1937) 评论(1) 推荐(0) 编辑
摘要: 在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化。本篇文章简单描述一下其中的优化准则。 1. 脚本加载优化 1.1 脚本位置对性能的影响 优化页面加载性能的原则之一是 将script标签放在body底部 ,这跟 浏览器的渲染原理 有关: 1. js脚本的下载和执行会阻塞浏览器 阅读全文
posted @ 2016-03-22 13:12 JunpengZ 阅读(1671) 评论(2) 推荐(4) 编辑
摘要: 前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的 ,`:hover 标签的 、`visited :before :after`等。 其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同行将 、`:after`称为伪 阅读全文
posted @ 2016-03-19 13:18 JunpengZ 阅读(52297) 评论(6) 推荐(26) 编辑
摘要: 目录 "模块是什么" "使用基础" "接口标识符重命名" "缺省接口" "Re exporting" "非绑定import" "总结" JavaScript令人困惑并且易引发错误的特性之一是以“一切皆共享”的方式加载代码。所有文件内定义的一切代码都共享一个全局作用域,这一点是JavaScript落后 阅读全文
posted @ 2016-03-18 20:01 JunpengZ 阅读(238) 评论(0) 推荐(0) 编辑