- 博客(138)
- 资源 (3)
- 收藏
- 关注
RSS订阅
转载 写给想成为前端工程师的同学们
本文转载自：https://www.h5jun.com/post/to-be-a-good-frontend-engineer.html前端工程师是做什么的？前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，
2016-05-14 23:05:52
21190
10
转载 前端，我为什么不要你
对于文中提到的一些观点还是持保留态度，之所以把这篇文章转载过来，并且置顶，是想给自己一些勉励，如果自己某天换工作，不想得到下面的一些评价。本文转载自博客园地址：http://www.cnblogs.com/vans/p/4550356.html今年一月份以前端主管的身份进入现在的公司，到现在为止陆陆续续面试了十几个应聘者，惊讶地发现前端这个细分岗位的市场行情竟如此奇怪，一方面是各种公司争相聘请，导
2016-02-14 11:14:22
3961
9
原创 前端性能优化之----静态文件客户端离线缓存_20191110
前端性能优化之----静态文件客户端离线缓存1. 前言上次的文章给大家分享了怎么在webpack打包阶段去将自己的项目优化到极致。文章链接：将webpack打包优化到极致_20180619前端优化是无止境的，这篇文章主要介绍我在前端工程化方面对项目优化的一些探索和经验总结。2. 探究业务的瓶颈H5页面的性能瓶颈，网络因素几乎可以占到80%。不管是减小产出文件体积，还是使用HTTP2.0或...
2019-11-10 14:02:42
1439
原创 Linux文件权限管理_20190323
Linux文件权限管理如果平时主要在Mac 和 Linux 环境下工作，对于文件和目录权限应该不陌，看下面这张我电脑上的截图：当我们看到上面这张图的时候能不能很快的理解每一列的意思，如果你能够很快读懂那么下面的文章可以节省时间不看了，如果不是很清楚可以再详细的学习下每一列代表的意义。1、Linux的用户和权限系统Linux的权限分为3中：文件所有者（属主）（u）文件属组用户(g)...
2019-03-23 11:49:50
407
原创 29岁的人生并不是那么平平淡淡_20190308
人生下半场，当所有的心高气傲被磨平，是时候接纳平凡的自己了。在写这篇文章的时候我特地翻看了下自己博客的文章记录，确实是很久没有写文章了。最近的一篇文章还是2017年7月份写的年中总结----《工作三年小结----我依然是那个不变初心的少年_20170710》，看名字就知道当初的意气风发。当我开始在键盘上敲下这篇文章题目的时候，我知道这将是一个横跨两年的漫长的自我总结的故事。这两年自己经历了...
2019-03-08 18:25:33
1179
6
原创 基于Nodejs的前端灰度发布方案_20190228
基于Nodejs的前端灰度发布方案1. 灰度发布和A/B测试简介灰度发布将某个功能灰度发布（逐渐放量）给特定线上人群，避免新功能全量上线带来的风险。上面的图可以通过两个方面来理解：蓝色实线和蓝色虚线访问Nginx服务器，nginx通过负载均衡将流量分摊到后端服务器。黄色的线是应用了灰度的流量（配置Nginx规则）可以将特定流量分发到特定的机房，以达到对特定用户应用产品新功能；...
2019-02-28 11:58:36
2115
原创 我是如何使用React+Redux构建大型应用的
背景我们团队有个项目由于开发时间较长，且是前后端杂糅的开发方式，维护成本很高，在线上暴露的问题很多。而且因为对接了公司一百多条产品线，每天都会接到大量的客诉和产品线反馈的问题。2017年11月份以产品为主导，从产品层面对流程进行重新设计，对该项目进行了前后端的重构。作为前端的负责人我用这篇文章分享下，整个过程从技术选型，开发，上线的一些经验。技术选型的思考首先我们先看下下面我们项目
2018-01-12 15:56:32
5742
4
原创 记一次Nodejs安全工单的处理过程_20171226
事件原因：之前使用Nodejs开发的一个网站。在网站上有一个页面有个功能，允许用户上传图片或者粘贴一张图片链接。服务端读取用户上传的图片信息或者是请求用户填写的图片链接获取图片信息。如果是用户使用上传功能，前端可以在input控件上做下限制上传文件的类型，后端再做下校验，以保障获取图片文件的合法（或者是安全）。如果是用户填写的图片链接，其中隐藏的安全隐患就比较大了。如果用户填写不是正常的http、h
2017-12-26 16:26:14
930
原创 axios使用知识点总结
概要最近的一个项目中使用了axios来代替XMLHttpRequest来发送请求。也是遇到了一些问题。这里做下简单的记录。GET请求不同方式结果不同官方文档我们可以看到的示例demo如下：// 直接在请求理解里面拼接参数get参数axios.get('/user?ID=12345') .then(function (response) { console.log(response);
2017-09-25 19:12:55
5116
原创 记一次fis3+react开发经历
前言：虽然说是记录fis3+react的一次开发经历。但是在项目的上线前几天收到公司TC委员会的邮件，因为react的开源协议让找到react的替代方案，并且逐步下线线上的react项目。真的是可以用“出师未捷身先死”来形容这次开发了。不过经过调研以后发现在业界已经有了一些开源方案来替代react 。最有名的就是preact的了吧。而且按照官网的方案来做迁移的话，迁移的成本也挺小的。后续会介绍下迁移
2017-09-17 16:33:04
1534
原创 记最近一次Nodejs全栈开发经历
背景：前段时间大部门下新成立了一个推广百度OCR、文字识别、图像识别等科技能力在金融领域应用的子部门。因为部门刚成立，基础设施和人力都是欠缺的。当时分到我们部门的任务是抽调一个人做新部门主站前端开发工作。本来说的是只负责页面的开发工作。当我参加过需求品审会后，了解到新部门人力不足，而我今年主要任务又是在我们部门做基于Nodejs的前端后端分离的架构升级工作。在这之前就是用Nodejs写了两个内部系统
2017-07-22 16:42:44
15111
17
原创 MDN搜索结果自动跳转中文地址
MDN社区（即Mozilla开发者社区）具有很多高质量中英文文档。它是我开发时遇到概念模糊的地方经常访问的网站。因为默认搜索一些代码，优先显示的都是英文。但是恰恰这些显示的英文文档是有中文的。每次都是自己手动切换下中文显示。所以就想着在点击英文链接的时候，能够自动跳到中文链接。需求分析点击英文的搜索结果自动跳转到中文文档地址。问题分析其实在MDN的每篇文档的页面上都提供了一个select表单供用
2017-07-17 11:14:51
2060
原创 踩坑koa1.x升级koa2.x及前端工程师面临的新挑战
前言较早的Nodejs开发者为了实现程序的同步都会使用几个“工具”，回调，promise，co，或者是generator。记得写过一个递归删除目录下文件和文件夹的需求，用以上方法都是各种不爽（关键我就是想简单的写个递归啊）。就在前几天Nodejs发布了v7.6.0版本。Nodejs开发者终于不用使用第三方模块就可以使用async和await让自己的程序在不需要异步的地方保持同步的特性了。就在Node
2017-03-07 19:32:38
6884
原创 微信小程序开发知识点总结
微信小程序开发知识点总结1.微信小程序的目录结构1.外联公共样式的方法根据微信的官方文档，是支持@import的方式一如外联的公共样式的 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html但是在
2017-02-19 08:50:05
9979
原创 迟到的2016年年终总结----拒绝平庸的一年
前言本来应该是2016年年末或者2017年年初的时候写完这篇文章的，最终还是事与愿违，没有能够按计划完成这件事情（写作真的是一件困难的事情）。2016年的最后一天看了一场电影《血战钢锯岭》。抛开惨烈的，逼真的剧情不说，女主真的很漂亮，是我喜欢的类型。而我也是被男主的撩妹技折服。主人公说的那句： “如果我不坚持自己的信仰，我不知道活着还有什么意义！”。是啊，明白自己人生方向的人，是多么的让人羡慕
2017-02-02 23:33:30
2806
5
原创 微信小程序调研文档
关于微信小程序之前只是听说，并没有引起我太大的兴趣。周一被小程序刷屏，然后就顺手搜索了解了一下。发现小程序已经火遍了整个程序员圈子。刚好团队内部有个需求需要微信小程序。就紧急对微信小程序进行了调研，阅读过开发者文档后总结了以下的几个开发者比较关心的问题：微信小程序提供给开发者的能力有哪些；在微信小程序易忽略的知识点和代码安全问题；PassFE和PassRD的学习和开发成本；注意：这篇文章删除
2017-01-14 12:35:14
5628
原创 对“粘连”footer布局的思考和总结
经典的"粘连"footer布局参考文章链接在文章末尾，简单的语言总结如下：经典的“粘连”footer布局就是。我们有一块内容。当的高度足够长的时候，紧跟在后面的元素会跟在元素的后面。当元素比较短的时候（比如小于屏幕的高度），我们期望这个元素能够“粘连”在屏幕的底部。如下图所示：当main足够长时当main比较短时上面布局的实现方法在参考文章中已经有提到。下面主要探讨我们项目中遇到的情况：我们需要实
2016-12-27 20:44:27
2943
转载 Vue.js 和 MVVM 小细节
本文转载自博客园：http://www.cnblogs.com/onepixel/p/6034307.html?f=tt&hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.ioMVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这
2016-12-04 16:29:22
1748
原创 再谈移动端适配和点5像素的由来
前言这篇文章的内容如题目一样，主要分为两个部分，谈谈业内主流的移动端适配解决方案点5像素的由来和实现方法建议在读这篇文章的时候先读下这篇文章《高清屏概念解析与检测设备像素比的方法_20161005》，因为这些文章涉及的很多概念在这篇文章中都会提到。1.再谈移动端适配1.1百分比解决方案的缺点在我们的项目中大量的使用百分比来解决页面在宽度上的自适应，其实在高度上并没有很好的自适应。所以在我们的前端页
2016-10-06 17:05:23
3638
原创 高清屏概念解析与检测设备像素比的方法
前言做移动端h5开发很久了，从开始入行到现在。很多知识和工具都是在用前辈留下的遗产，都没有深入的研究过原因，了解为什么要这么去做。终于在国庆节有一个大块的时间，把最近看到的东西总结一下，也算是对这方面的知识划一个句号。着实把国庆节过成了劳动节，没办法，自己就是一个这样的人，“有些应该去做的，而且有能力做的，但是不把它给做了，心里面总是不舒服”。这篇文章的内容主要分为两个部分：高清屏相关概念解析与和
2016-10-05 14:43:54
4501
原创 nodejs分析excel文件将结果写入excel文件
背景因为 Team 本身工作性质的问题，平时需要值班。值班数据可以导出为本地的Excel文件。之后需要对Excel中的结果数据做分析，并且制作图表写周报发给老大。对于我这种对word都玩不转的人，别说用Excel中强大的公式分析数据了��。轮到我值班的时候就用nodejs写了一个脚本自动处理Excel中的数据，并且将数据再写入Excel文件。后来分享给同事，得到了老大的夸奖，自信心爆棚 ��之前仅
2016-10-05 00:01:20
5736
原创 移动端h5开发相关内容总结（四）
前言：看了下博客的更新时间，发现9月份一篇也没有更新。一直想着都要抽时间写一篇的，不然今年的更新记录就会断在了9月份。但是还是应为各种各样的事情给耽搁了。当内心突然涌起一股必须写点什么的时候，突然发现自己把写博客的“套路”都忘了。(●´ω｀●)φ一直认为自己还是一个比较热爱思考的人。最近一直在思考两个问题：自己做技术的初衷；自己的技术成长之路；当然这两篇文章自己也在润色之中，相信很快会跟大家见面。
2016-10-03 16:12:23
5397
2
原创 JavaScript 面向对象开发知识总结基础篇
引子：1.JavaScript 中的变量类型和类型检测1.1原始类型1.2引用类型1.3內建类型的实例化1.4函数的字面形式1.5正则表达式的字面形式1.6类型检测1.6.1原始类型的检测1.6.2鉴别引用类型1.6.3鉴别数组1.6.4原始封装类型2.JavaScript 中的函数2.1定义函数的两种方式2.1.1函数声明2.1.2函数表达式2.2JavaScript函数的参数2.3函数的重载2
2016-08-07 12:48:53
3729
原创 html5学习开发指南
本文发表于CSDN《程序员》杂志2016年8月期，未经允许不得转载！概述：随着移动互联网的兴起，前端开发工程师的岗位也随着兴起。前端工程师不仅在用户和产品之间扮演着越来越重要的角色，而且前端的职能也能够（开始）朝着服务端延伸。所以不仅小公司缺人在招前端，大公司同样面临着缺少优秀前端工程师的尴尬处境。当我们在谈论或者招聘前端工程师的时候，都会提到熟练或者是熟悉 h5（html5） 开发。那么所谓的
2016-08-05 15:12:03
4625
3
原创 JavaScript设计模式----职责链模式
声明：这个系列为阅读《JavaScript设计模式与开发实践》 ----曾探@著一书的读书笔记1.职责链模式的定义使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。2.2.1 简单职责链模式故事背景：用户可以支付定金购买手机，并且可以获得优惠券。没有支付定金的就是普通用户，进入普通购买模式，没有优惠券，且
2016-08-01 21:51:43
1856
1
原创 工作两年小结----勿忘初心不负梦想
前言：转眼又是一年，2016年7月3号是自己正式参加工作两年，入职一家新公司工作两个月的日子。每年到这个时间点，总是想要写点儿什么总结一下。前半年除了学习提高专业技能外，主要读了几本书《余罪》，沉默的羔羊系列。这里我想说《余罪》原著比现在爱奇艺播出的网剧真的好看一百倍。我是先看完书，再看了2集电视剧，然后真的看不下去了，因为张一山刻画的余罪跟自己心中的那个余罪落差太大。我甚至觉得夏雨来主演会更好一
2016-08-01 00:21:59
9036
28
原创 JavaScript设计模式----策略模式
声明：这个系列为阅读《JavaScript设计模式与开发实践》 —-曾探@著一书的读书笔记1.策略模式的定义将不变的部分和变化的部分隔开是每个设计模式的主题。 定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。2.策略模式的目的将算法的使用与算法的实现分离开来。3.传统语言中的策略模式和JavaScript中的策略模式对比3.1.传统语言中的策略模式使用策略模式来实现计算奖金v
2016-07-25 01:09:21
2036
翻译 Chrome开发者工具中关于“Deferred long-running timer task(s) ”的警告
原文地址：http://stackoverflow.com/questions/37367200/what-is-the-deferred-long-running-timer-tasks-warning-in-the-chrome-devtools在开发过程中遇到了题目描述的问题，使用 Google 搜索，中文答案很少，而且没有令人满意的。就在segmentfault上提了一个问题，而且很快我就发
2016-07-23 22:46:24
12553
原创 JavaScript设计模式----单例模式
声明：这个系列为阅读《JavaScript设计模式与开发实践》 —-曾探@著一书的读书笔记1.单例模式的特点和定义 保证一个类仅有一个实例，并且提供一个访问它的全局访问点。2.传统面向对象语言的单例模式2.1传统语言描述的单例模式JavaScript实现var Singleton = function(name) { this.name = name; this.instanc
2016-07-23 11:05:50
14942
2
原创 JavaScript设计模式----装饰者模式
装饰者模式的定义：装饰者(decorator)模式能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。装饰者模式的特点：可以动态的给某个对象添加额外的职责，而不会影响从这个类中派生的其它对象；继承的一些缺点：继承会导致超类和子类之间存在强耦合性，当超类改变时，子类也会随之改变；超类的内部细节对于子类是可见的，继承常常被认为破坏了封装性；传
2016-07-17 20:00:21
6127
2
原创 Python 解析har 文件将域名分类导出
前言作为程序员平时主要是使用 shadowsocks 作为代理工具的。shadowsocks 有个很明显的优点儿就是可以设置白名单和黑名单。白名单是会走shadowsocks的自动代理模式。遇到的问题：shadowsocks 代理是分白名单和黑名单的。当我访问某个网站，而恰好这个网站的域名和静态文件域名都在白名单里，访问这个网站的http请求就会自动走代理模式；如果访问某个网站的域名没有在白名单里
2016-07-17 10:22:35
6188
转载 粘连 Footer 的 5 种方法 | CSS-Tricks
本文转载自：http://www.zcfy.cc/article/491文中对于“吸附”布局的实现非常巧妙，当我第一次看到那个效果图，第一时间也没有想到好的实现方法。一个简短的历史，如果你愿意那样说的话。粘连 footer 的目的是让它“支撑”在浏览器窗口的底部。但不总是在底部，如果有足够的内容将页面撑开，footer 可以被撑到网页下方去。但是，如果页面的内容很短，粘连 footer 仍然会出现
2016-06-20 21:38:29
5096
原创 前端开发知识点总结
1.a标签的相互嵌套很多时候我们会有下面的场景，如下图中所显示的那样。点击1区域（从图上看1区域包含2区域）和2区域跳转不同的链接。正常的代码结构应该是：<ul> <li> <a href="#1"> <div>内容1区域 <a href="#2"> <div>按钮2</div>
2016-04-05 19:40:58
4188
原创 myslide 插件开发知识点总结和 css3 动画性能问题的研究
myslide 插件开发知识点总结和 css3 动画性能问题的研究这篇文章主要是总结最近开发过程中遇到的问题。有几个问题又是不容易发现原因的问题，但是最后的结果又是很简单的。1.手机端的 slider 插件是否有必要集成点按操作对于我自己开发的版本来说还是集成了这个操作的。但是参考了京东，天猫，淘宝电商网站首页的 slider 图片轮播插件都没有支持点按操作。那么是为什么呢？我想到的答案可能如下：
2016-03-19 19:44:51
2199
1
原创 “瀑布流式”图片懒加载代码解析及优化(二)
之前写过一版图片“懒加载”的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。 这篇文章主要就是结合上篇《“瀑布流式”图片懒加载代码示例》再来看看图片“懒加载”的一些知识。图片“懒加载”的主旨： 按照需要加载图片，也就是说需要显示的时候再加载图片显示，减少一次性加载的网络带宽开销。先来看一段代码： var conf = { 'loa
2016-02-22 20:02:37
3534
2
原创 JavaScript “跑马灯”抽奖活动代码解析与优化（二）
既然是要编写插件。肯定会有一些功能的需求。 功能需求： 1.能够控制灯的自动播放 2.灯的旋转方向 3.灯的旋转速度 4.奖品的旋转速度
2016-02-15 17:04:34
2434
1
原创 JavaScript “跑马灯”抽奖活动代码解析与优化（一）
最近的项目中做了一个“跑马灯”的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在写这篇文章的时候，也顺便把自己的代码重构了一下。 这里主要是来写写自己的优化过程。俗话说： 一个程序猿的进步是从对自己的代码不满意开始的。开始之前先来看上篇文章遗漏的两个问题和几个知识点，是自己重构的过程中需要用到的：1.移动端1px像
2016-02-15 17:03:48
4752
3
原创 移动端 h5开发相关内容总结(三)
之前写过两篇开发中遇到的问题和解决方案。当时是CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很多内容都是有内在联系的，所以不好分开。给大家分享一下这半年来的感受吧：知道和理解之间是有很大距离的。别人谈到一个知识点，能接上嘴并且能发表一下自己的意见，这叫知道。遇到问题能够想到用什么知识点解决问题，这叫理解。所以有很多知识点自己确实在书上都看到过但是在平时遇到问题的时候却不知道怎
2016-01-31 14:52:43
3416
原创 根据iPhone6设计稿动态计算rem值
rem 单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题，我们需要动态的给文档的更节点添加font-size 值。使用mediaquery 可以解决这个问题，但是每一个文件都引用一大串的font-size 值很繁琐，而且值也不能达到连续的效果。就使用js动态计算给文档的fopnt-size 动态赋值解决问题。/** * [以iPhone6的设计稿为例js动态设置文档 rem
2016-01-29 10:46:58
14564
7
原创 h5端呼起摄像头扫描二维码并解析
引子：最近公司项目有个需求，微博客户端中， h5 的页面上的某个按钮能够与native 交互呼起摄像头，扫描二维码并且解析。在非微博客户端中（微信或者是原生浏览器，如：safari）呼起系统的拍照或者上传图片按钮，通过拍照或者上传图片解析二维码。第二种方案需要在前端 js 解析二维码。这样依赖一个第三方的解析库jsqrcode。这个库已经支持在浏览器端呼起摄像头的操作了，但是依赖一个叫getUse
2016-01-20 15:24:55
60071
31
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人