- 博客(32)
- 收藏
- 关注
RSS订阅原创 现代前端库开发指南系列（三）：从说明文档看库的前世今生
前言我们在工作中很多时候都要做技术选型，去找寻既能满足自己需求又靠谱的第三方库；在前端开源生态季度繁盛的现状下，只要不是太小众的需求，我们很容易就能找到一堆相关的开源库，那我们具体要怎么做决策呢？我的做法是，先阅读开源库的说明文档让自己有一个感性的认识，然后挑选出其中的两三个库来进行更深入更全面的了解。如此说来，这说明文档是不是就很像我们求职时的简历呢？“简历”关都过不了，何谈“offer”啊！...
2019-12-13 07:06:19
175
原创 现代前端库开发指南系列（二）：使用 webpack 构建一个库
前言在前文中，我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学，因此本文在介绍 webpack 配置时，仅提及构建一个库所特有的配置，其余配置请参考 webpack 官方文档。输出产物构建一个库与构建一个一般应用最大的不同点在于构建完成后输出的产物。一般应用构建完成后会输出：一个 html 文件一个 js 入口 chunk 、若干子 chunk若干 css 文件...
2019-12-06 07:13:33
266
原创 现代前端库开发指南系列（一）：融入现代前端生态
本系列文章讲什么内容？本系列文章主要介绍如何在现代前端生态下，创建一个工业级别的库。近几年来，前端工程化、模块化、组件化的大潮铺天盖地而来，在解决以往的架构痛点之余，却又产生了信息过载的问题；我希望通过分享自己的经验，帮助大家少踩坑多出活。为什么需要开发一个前端库呢？在项目开发过程中，总有一些功能是相同或类似的，如果你只是单纯地复制粘贴这部分代码，那么恭喜你，假以时日，需求一改，你就只能自尝...
2019-12-04 07:01:48
192
原创 Web开发者手边的一本CentOS小书
缘起毕业四年有余，这一段走来甚是曲折。web开发是个大工程，其中牵涉到的知识点数不胜数，我本以为这路是一往无前，却道是盘绕而上；纸上得来终觉浅，初时看往往不知所然，非得整体境界提升，才能细品其中意味。真应了《苦瓜》的那句，“大概今生有些事 是提早都不可以 明白其妙处”。悟至此，我给自己安排了新一轮的web开发知识补完计划。正文对于web开发者来说，Linux始终是一个绕不开的坎...
2018-03-31 17:45:05
244
原创 ES6部分方法点评（三）：babel-preset-es2015-loose可转换且移动端兼容性较好的语法
前言由于目前各浏览器对ES6兼容性较低，再加上需要兼容历史上各种版本的浏览器，因此，使用编译器将ES6语法转译成ES5语法则势在必行了。babel是目前最常用的ES6转ES5的工具，但即使是ES5，各浏览器的支持度也是不一的，因此便产生了本文，找出一些能够被翻译成兼容性高代码的ES6语法。讨论基础兼容IE10+、android4.0+、ios6+。使用babel的一个preset：babel-p
2016-10-27 09:40:29
2378
原创 ES6部分方法点评（二）
template stringtemplate string（模板字符串），至ES6，javascript终于也能直接往字符串里插变量了。这用途嘛，说大不大，说小也不小；虽说不能实现比较复杂的例如if/for等语句就不能说是一个完整的模板引擎，但起码以后拼字符串就不用老写连接符+了不是？let name = 'guoyongfeng';let age = 18;console.log(`${nam
2016-10-27 09:39:18
352
原创 ES6部分方法点评（一）
一直以来，我对ES6都不甚感兴趣，一是因为在生产环境中使用ES5已是处处碰壁，其次则是只当这ES6是语法糖不曾重视。 只是最近学习react生态，用起babel来转换jsx之余，也不免碰到诸多用上ES6的教程、案例，因此便稍作学习。这一学习，便觉得这语法糖实在是甜，忍不住尝鲜，于是记录部分自觉对自己有用的方法在此。箭头函数(Arrow Functions)箭头函数是一个典型的语法糖，即创造了一种新
2016-10-27 09:38:33
724
原创 巧用Html5 History Api解决SPA的SEO问题
背景想当年，我做了一个新媒体网站项目（AIISPO，已下线）。跟普通资讯网站不一样的是，老板要求PC端前台的文章阅读模式一定得是瀑布流+模态框。瀑布流指的是以瀑布流的形式将文章罗列出来，而模态框则指的是点击瀑布流中代表文章的某个文块时，直接在当前页面弹出模态框来显示文章正文。
2015-12-09 17:34:34
1660
原创 记离线缓存(manifest)一大坑，断定其只适用于静态网站或离线应用
今天看了离线缓存(manifest)方面的资料，兴冲冲地就想给自己的网站用上。待我把代码都写好部署上服务器，并测试过OK的时候，在SegmentFault刷了一把manifest方面的问答，才发现这个大坑：manifest除了缓存manifest.appcache文件所指定的资源外，还必定会缓存当前的html页面。
2015-12-08 12:54:54
1900
1
原创 localstorage 必知必会
HTML APIlocalstorage在浏览器的API有两个：localStorage和sessionStorage，存在于window对象中：localStorage对应window.localStorage，sessionStorage对应window.sessionStorage。 localStorage和sessionStorage的区别主要是在于其生存期。生存期localStorag
2015-12-07 10:57:53
2345
原创 chrome开发者工具功能拾遗：Network面板篇
本文主要介绍一些本人在此之前不甚了解，但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己，在实际项目中多使用这些功能，尽快熟悉起来，提升自己的工作效率。
2015-12-04 18:41:06
3661
原创 chrome开发者工具功能拾遗：Sources面板篇
本文主要介绍一些本人在此之前不甚了解，但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己，在实际项目中多使用这些功能，尽快熟悉起来，提升自己的工作效率。
2015-12-03 21:29:02
7992
1
原创 chrome开发者工具功能拾遗：Elements面板篇
本文主要介绍一些本人在此之前不甚了解，但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己，在实际项目中多使用这些功能，尽快熟悉起来，提升自己的工作效率。给DOM设置断点 在Elements面板，右键选中想要监听的DOM节点弹出菜单，鼠标停在Break on……，这时候就会出现子菜单，子菜单有三个选项：Subtree modification
2015-12-03 17:59:01
3223
原创 photoshop cc 自动切图
很多年前，当我只知道photoshop有图层这个概念时，我就猜想，应该有一个功能能把这些图层都分别导出来才对呀。不过从今时今日来看，我的这个猜想还是比较超前的
2015-12-03 16:33:53
4058
原创 chrome扩展调试：background.html如何调试？
chrome扩展其实有点像是一个打包编译好的app，如果加载到chrome里再调试，即使是未打包的状态也相当麻烦，每调试一次便要重新加载一次，由此，我想当比较方便的方法是，直接在浏览器中打开（推荐部署在本地服务器再打开），这样每改一个小地方，只要刷新一下浏览器，马上就能看到最新的结果了。
2015-12-03 16:32:55
5169
原创 html5系列：notification api升级——从webkitNotifications到Notification
最近又鼓捣起两年前做的一个chrome扩展，想要跑起来却发现报错了，看了下console，首先是indexedDB报错，说是window.webkitIndexedDB已经被废弃了，用window.indexedDB代替后，就没再报错了，看来我这chrome 46的indexedDB api只是改了个更通用的名称，还是比较厚道的，所以，这里就不详述了。 真正出问题的是桌面通知，chrome 46给
2015-12-03 16:31:48
3596
原创 如何在使用新技术前评估其浏览器兼容性
这里向大家推荐两个网站：caniuse.com以及html5test.com，大家在使用新技术前，可以在这两个网站上看看浏览器的支持情况，看看自己能不能接受，同时也考虑一下能不能优雅降级。caniuse.com域名可以用can i use（我能使用……吗？）来记忆。 这个网站提供了两种方式给用户提供浏览器兼容性的信息：分类索引，在首页，caniuse.com按CSS、HTML5、SVG、JS A
2015-12-03 16:30:27
407
原创 html5系列：form 2.0 新表单属性
首先必须提到，html5对boolean类型的标签属性更倾向于使用html 4.01时代的传统段语法形式，即只有属性名而没有属性值，例如：<input type="checkbox" checked />html5有不少新的表单属性，仅列出一些比较重要的：autocomplete这个属性用来开启或关闭表单的“自动完成”功能（属性值为”on”表示开启，为”off”表示关闭），不填的话就看浏览器的默认
2015-12-03 16:29:30
616
原创 html5系列：form 2.0 新数据类型
所谓新数据类型，其实是体现在倆方面的：输入方式：对比起以前只能用键盘敲的input:text，现在已经有调用日历/时钟的，有调用调色板的，有拉滑动条的……总体来说就是让你可以更懒更准确地进行输入。格式校验：新的数据类型如range、color等其实不需要校验，因为用户只能按系统提供的方式进行输入，所以不存在出错的可能。而对于一些需要使用键盘输入的input，则提供了数据格式的校验，比如input
2015-12-03 16:27:49
432
原创 html5系列：form 2.0 新结构
以往的一个form表单，结构比较死板，所有的form元素都必须处在<form>和</form>之间才有效，这会造成一些麻烦，比如说：像bootstrap这种使用<div>来控制布局的框架，<form>放在哪都很尴尬；另外，目前的web 2.0，UI比较丰富，为了布局或其它的原因，表单元素之间可能充斥着大量非表单相关的元素，而form 1.0又规定表单元素必须在闭合的<form>标签以内，那<form
2015-12-03 16:26:59
393
原创 应对恶劣网络环境，为php-curl设置超时限制，防止服务器卡死
挖洋货这项目，因为没有公司的名头，也就无法备案，所以前端机放在阿里云香港ECS，另配一台阿里云杭州ECS来跑crontab——执行爬虫、保存图片到阿里云OSS等。最近觉得杭州ECS有点多余了（原本还有个杭州RDS的，统一搬到香港RDS了），打算撤掉，就把杭州ECS上的crontab全部搬回香港ECS来跑，这下就引发不少问题了。
2015-12-03 16:23:58
7073
原创 利用DataURL技术在网页上显示图片
DataURL是什么？DataURL是一种对文件进行编码，并将编码后的内容嵌入及呈现在另一个文件中的规范/协议。 目前DataURL用得最多的领域是把图片文件转化成DataURL（此时，这个DataURL就是这个图片的所有内容）并在网页上利用<img>直接输出，而非给<img>指定文件路径让浏览器另行下载。DataURL的格式是怎么样的？ data:[<mediatype>][;base64]
2015-12-03 16:22:21
5034
原创 推荐插件：imagesLoaded，监测图片加载情况并提供相应的事件（加载成功/失败）
惯例，首先贴上imagesLoaded的官方网址：http://imagesloaded.desandro.com/第一次知道imagesLoaded这个插件是在做瀑布流布局时，当时选用的是masonry这个老牌瀑布流插件，imagesLoaded这个插件也是masonry官方推荐的，可能是同一伙人吧。具体场景是这样的，我们的图片宽度都是固定的，但高度不固定（瀑布流都是这样的吧），但masonry在
2015-12-03 16:19:09
3397
原创 html5系列：伪主动触发input:file的click事件
背景从前，input:file是不能主动触发click事件的，据说是安全方面的考虑。因此，在美化input:file的时候就麻烦了，最通用的方案是，制作一个经过美化后的<button>，然后把input:file调整好尺寸，覆盖在<button>上方，然后再设置 opacity: 0;，如此一来，用户看到的是<button>，点击的却其实是input:file
2015-12-03 16:17:13
17768
2
原创 html5系列：利用html5 file api读取本地文件（如图片、PDF等）
在html4的年代，我们如果要在网页上呈现一张用户本地的图片，需要用户先把图片上传到服务器，再根据服务器提供的图片地址把图片下载下来，才能把图片在网页上呈现出来。这一来二往，起码已经费了两倍于这张图片的流量了，更别说服务器为了存储这张图片所花费的资源以及用户上传错了图片的冤枉成本（因为在html4时代，用户选择好图片后，往往只能看到图片的文件名，而无法通过预览图来进一步确认这张图片是否就是自己想要上
2015-12-03 16:16:07
1735
原创 推荐一个用于压缩图片的JS插件：localResizeIMG
首先说到，为嘛要压缩图片，这需求一般出现在需要上传照片（尤其是移动端）的情况下，现在手机拍出来的照片随随便便就是好几兆，无论3/4G还WIFI要上传都很吃力，而且实际上也用不着这么大呀，一般压缩到个一百几十k就够用了。因此，我们需要在用户选好照片，利用js把图片压缩好，再上传到服务器。
2015-12-03 16:13:11
2652
原创 html5系列：device's media capture mechanism（设备的媒体捕捉机制）——利用input:file调用设备的照相机/相册、摄像机、录音机
html5对input:file作了扩展，使用户可以通过input:file来调用设备（主要是移动设备）
2015-12-03 16:09:27
806
原创 无法为 php_mysqli 指定 mysqli.default_socket 参数
此bug尚未找出解决方案，但我已使用了曲线救国的方案来救命
2015-12-03 16:06:38
2331
原创 关于IE下中文URL乱码的问题
在做公司前台的时候，遇到了这么一个需求：通过url（形如 http://aiispo.cn/tag/女孩限定 ）来做一个路由，并提取url中的信息进行相应的操作，在我的规划中，url出现中文是无可避免的事情了。但是，当我把中文参数作为get参数拼成请求的Url时，就发现，在chrome下测试是正常的，但放到IE8下，中文参数传到后端就变成乱码了。我敏感地察觉到这是编码问题！
2015-12-03 16:03:29
687
原创 avalon搭配masonry实现MVVM瀑布流
最近，在公司的项目中，要开发一个使用瀑布流的前台，衡量了各种解决方案后，还是觉得masonry最成熟，所以就选用了它。而在之前开发后台的过程中，对avalon也用得挺熟手的了，所以这次做前台也用上。由于avalon是管dom的，masonry也是管dom的，所以实现兼容的重点就是，让它们管同一份dom，而不是各管各的。
2015-12-03 16:00:59
605
原创 分离开发环境与生产环境的配置文件
前言：遥想从前在4399，老是有人把自己本地的配置文件commit到线上，然后公司的RTX就开始疯狂轰炸过来：“页面出错了！”、“这数据不对啊！”、“领导要用啊快点修复啊啊啊啊啊”，好吧，这我也是醉了……
2015-12-03 15:58:18
2715
原创 JS根据动态生成的字符串，验证是否存在对应function并执行
这个需求是在我搭建前端项目框架的时候遇到的：由于我走的是前后端完全分离的路线，那前端部分少了后端的支持，所以就少不了要做点路由、分发之类的工作，而在用路由跳转到新的“页面”后，我需要执行相应的function来获取第一版的数据。有个挫一点的方法：写个switch，根据目前要跳到哪个页面，来判断执行哪个function；这种方法work是work，就是维护起来不方便，以后每添一个新“页面”都要来维护这个switch
2015-12-03 15:33:49
2567
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人