20170425 前端开发日报-前端开发博客

JS用原型对象写的贪吃蛇，很粗糙的代码；那些年前端遇到的面试题我的你的他的都有（不断更新中）；从网络通信角度谈web性能优化；如何在 Vue.js 中使用第三方库；这道题–致敬各位10年阿里的前端开发；bilibili-vue：前端 vue + 后端 koa，全栈式开发 bilibili 首页；一个简单的拆分 Bundle & 资源做法（React Native）；使用 gulp + seajs + zepto 构建项目

JS用原型对象写的贪吃蛇，很粗糙的代码/** 贪吃蛇类 @author 默识 @param {int} speed 贪吃蛇速度，毫秒 @param {int} x 地图x轴分为多少单位 @param {int} y 地图y轴分为多少单位 @returns {Snake} none*/ function Snake(speed, x, y) { {代码…} }…
那些年前端遇到的面试题我的你的他的都有（不断更新中）https://github.com/ddcouples/…前端面试题新添加面试问题：(2017-04-25) 1 bootstrap的删格布局实现方法： row在container下会有padding－left：15px；自身有margin－right：－15px 在row外使用col是无…
从网络通信角度谈web性能优化博客原文地址：Claiyre的个人博客 https://claiyre.github.io如需转载，请在文章开头注明原文地址衡量一个网站的性能有多个指标，DNS解析时间，TCP链接时间，HTTP重定向时间，等待服务器响应时间等等，从用户角…
如何在 Vue.js 中使用第三方库在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你…
这道题–致敬各位10年阿里的前端开发很巧合，我在认识了两位同是10年工作经验的阿里前端开发小伙伴，不但要向前辈学习，我有时候还会选择另一种方法逗逗他们，拿了网上一道经典面试题，可能我连去阿里面试的机会都没有，但是我感受到了一次面试10年阿里的前端开发，让我感觉一个字，比吃老坛酸菜还爽！虽然有答对
bilibili-vue：前端 vue + 后端 koa，全栈式开发 bilibili 首页 README.md 预览地址： http://www.lybenson.com/bilibili/ 前言为什么是写哔哩哔哩(俗称B站)呢？其一是因为本人是B站的重度使用者，每周基本上都会在B站上看看火影忍者、暴走大事件等。另外一个原因呢，就是B站首页很美观大方，而且处处充满了细节。所以对于实践确实是一个不错的项目…
一个简单的拆分 Bundle & 资源做法（React Native）本文的RN代码基于0.43版本一般应用React Native(RN)后，随着使用页面的增加，bundle包（携带资源）会逐渐加大，这会带来以下两个缺点：页面启动速度&内存占用增加这是不言而喻的，一个页面启动时会加载其他无关页面的代码，自然会有内存占用加大、启动时间增加的问题，这部分的…
使用 gulp + seajs + zepto 构建项目最近使用gulp工具，将公司现有项目重新构建了下，有许多大改动，绕了许多坑，我不擅长表达，只能把我现在总结出的对的和比较深刻的应该注意的几点记录下来，免得以后自己都忘记了。一，基本环境的搭建，安装nodej…
[摘] 如何编写高效的 CSS 选择器了解浏览器匹配 CSS 选择符的真实情况，掌握高效选择符编写指南。 —— 由Awesome分享
玩转 animate.css，提高动画开发效率整了一个 animate.css 动画效果的插件，可以实时预览动画效果并同步生成对应动画效果的 CSS 代码，助你动画开发一臂之力。 —— 由聆木听风分享
一文读懂 HTTP/2 特性 HTTP/2 是 HTTP 协议自 1999 年 HTTP 1.1 发布后的首个更新，主要基于 SPDY 协议。由互联网工程任务组（IETF）的 Hypertext Transfer Protocol Bis（httpbis）工作小组进行开发。该组织于2014年12月将HTTP/2标准提议递交至IESG进行讨论，于2015年2月17日被批准。HTTP/2标准于2015年5月以RFC 7540正式发表。 …
Web 图片性能优化系列一：背景与基础什么是响应式图片组成网站的资源中，图片往往是网络负载的主要组成部分，占据了大部分负载而且随着时间推移，这个现象仍然会保持。虽然现在的网络连接速度持续改进，但是同样出现了越来越多的高 DPI 分辨率设备…
#前端技术#【深入理解 JavaScript 异步】详见：在这一系列文章里，作者将通过 6 大部分内容为大家介绍 JavaScript 异步的方方面面，涉及基础概念、 jQuery 的解决方案、ES6-Promise、Generator 以及 async-await 等内容。
vue2+element 管理后台集成解决方案没有没做的，只要想不到的线上地址前言这半年来一直在用vue写管理后台，目前后台已经有七十多个页面，十几种权限，但维护成本依然很低，效率依然很高，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+ax…
Fetch 进阶指南导读 Fetch 是 web异步通信的未来. 从chrome42, Firefox39, Opera29, EdgeHTML14(并非Edge版本)起, fetch就已经被支持了. 其中chrome42~45版本, fetch对中文支持有问题, 建议从chrome46起使用fetch. 传送门: fetch中文乱码 . Fetch 先过一遍Fetch原生支持率. 可见要想在IE8/9/10/…
翻译 | 摆脱浏览器限制的 JavaScript – 掘金
前端开源项目周报0425由OpenDigg 出品的前端开源项目周报第十八期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。 react-move React中精致而准确的动画…
使用CSS clip 属性实现音频播放圆环进度条突然有需求要做一个圆环的音频播放进度条（上图效果），自己琢磨尝试了半天，也没有实现。最后度娘一下，才知道css还有一个clip属性，完美实现需求。分享一下，说不定能帮其它小伙伴。至于有没有用，那就不知道…
如何在 react 项目中配置 ESlint 规范自己的代码从 ESlint 开始。 ESlint 和 webpack 集成，在 babel 编译代码开始前，进行代码规范检测。 Eslint介绍 ESLint是js中目前比较流行的插件化的静态代码检测工具。通过使用它可以保证高质量的代码，尽量减少和提早发现
我为什么选择了AdonisJs原文地址：https://adonis-china.org/posts/2 前言用Laravel也有些时日了，各种代码生成工具，各种Eloquent关联操作，各种微信、支付插件，再配合Larvel-admin扩展写后台简直爽到飞起。但总觉得PHP+Javascript还…
Web 探索之旅 | 第三部分第三课：协议 — 作者谢恩铭转载请注明出处《Web探索之旅》全系列第三部分第三课：协议之前的课 Web探索之旅 | 第三部分第二课：IP地址和域名中，我们学习了Client-Server模型的客户端语言和服务器语言。客户端语言有HTML，CSS和J
写个vue-emoji组件最近公司需求做个类似于QQ空间的项目(其实开始的时候我是崩溃的),好在历时一个月的时间,也终于进入测试的阶段。完成项目过程中，发现并没有一个好用的emoji插件，于是写了一个简单的component，希望对各位有所帮助。原理其实很简单，雪碧图+背景定位的方
mock.js 那点事 (下) 这篇针对不管看没看过mock.js那点事(上),你都会有收获前几天讲了一下mock.js那点事(上)，有心的哥们估计看完了我的那篇mock.js那点事(上)，估计看得太过瘾了，然后又去官网也把所有demo也刷了一遍了，可能有些朋友花了半个小时刷完了所有d
优雅的使用 Js 或 CSS 处理文本的截断与展示之前遇见一个问题，就是处理文本截断，然后可以手动切换文本是全展示和手动展示，因为这个问题比较常见，而且其实现方式有多种，于是决定总结一下，与读者分享。前言首先，我们看这样一个场景：展开更多其html 结构如下： <p class=”te
【PWA：移动Web的现在与未来】Google主推的PWA是移动Web的代表技术，到底这项技术强在哪里？移动Web将会向何处去？在6月的#GMTC 2017#上，来自Google开发者平台的工程师Michael Yeung将向大家揭晓。现在报名，享8折优惠，听全球移动开发专家解读最新移动和Web前端技术趋势！
Web 探索之旅 | 第四部分： Web 程序员 — 作者谢恩铭转载请注明出处《Web探索之旅》全系列内容简介第四部分第一课：什么是Web程序员？第四部分第二课：如何成为Web程序员？第四部分第三课：成为优秀Web程序员的秘诀大家好，经过上一课 Web探索之旅 | 第三部分第三
谈谈jquery的实现最近写了些移动端的项目，在PC端操作dom，jQuery必不可少。但是在移动端引入jQuery就显得不合适，一是文件太大，二是不支持一些触摸。zepto.js是移动端的jQuery，体积很小，支持触摸。在用这些库的时候，经常会想…
#开源项目#【JavaScript 多线程和并行执行库：Hamsters.js】详见： Hamsters.js 是一个纯 Vanilla Javascript 多线程和并行执行库。它可以跨多线程来最大限度地提高性能，并能自动聚合数据，按照字母顺序或数字自动输出。同时，它还支持所有主流浏览器、Web workers、Node.js.
《使用 babel 插件来打造真正的“私有”属性》大家都知道 JavaScript 的对象属性默认是可以被从外部访问和修改的，也就是说，JavaScript 本身不存在完全“私有”的对象属性。（by 十年踪迹）
#HTTP#【HTTP状态码作用】HTTP状态码的作用是：Web服务器用来告诉客户端，发生了什么事。状态码位于HTTP Response 的第一行中，会返回一个”三位数字的状态码“和一个“状态消息”。 ”三位数字的状态码“便于程序进行处理， “…请戳→ #前端开发博客#