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

15 个有趣的 JS 和 CSS 库（2017 年 5 月）；HTTP 缓存策略解析；JS框架 – 收藏集 – 掘金；Vue SPA（单页应用）首屏优化实践；基于 Vue JS, Webpack 以及 Material Design 的渐进式 Web 应用（一）；React+AntD 后台管理系统解决方案；JavaScript 面向对象笔记和总结；从零开始搭建vue-ssr系列之二：Client端渲染以及webpack2+vue2踩坑之旅

15 个有趣的 JS 和 CSS 库（2017 年 5 月）时光飞逝，每月 Tutorialzine 都会为大家分享一些有趣的前端库。那么在本月，又准备了哪些优秀的 Web 开发资源呢？前端儿，一起来瞧瞧吧！ 1. Buefy 这是一个基于 Bulma 的 Vue.js 轻量级 UI 组件，而 Bulma 则是基于 Flexbox 的 CSS 库。Buefy 具备典型的 Web 应用程序所必备的所有组件，例如 modals、t…
HTTP 缓存策略解析做项目的时候遇到过需要将静态资源长期缓存的情况，因为在我们的需求里，最初一个静态资源上传完毕，针对此链接一次发布终生受益——于是乎，是时候研究一波缓存策略了：我们都知道缓存状态码：304 Not Modified. 然而实际上，命中缓存也不一定是 304 的。我们这里先要说明 HTTP Response 头中的cache…
JS框架 – 收藏集 – 掘金关于js、jq零碎知识点 – 掘金写在前面：本文都是我目前学到的一些比较零碎的知识点，也是相对偏一点的知识，这是第二篇。前后可能没有太大的相关性，需要的朋友可以过来参考下，喜欢的可以点个赞，希望对大家有…
Vue SPA（单页应用）首屏优化实践 1.代码压缩(gzip) 如果你用的是nginx服务器，请修改配置文件(其他web server 类似)： sudo nano /etc/nginx/nginx.conf 在Gzip Settings里加入： gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_comp_level 5;gzip_types gzip 开启或者关闭 gzip 模块，这里使用 on 表…
基于 Vue JS, Webpack 以及 Material Design 的渐进式 Web 应用（一）原文：基于Vue JS, Webpack 以及Material Design的渐进式web应用译者：neal1991 welcome to star my articles-translator , providing you advanced articles translation. Any suggestion, please issue or contact me LICENSE: MIT 渐进式web应用是大势所趋。越来越多的大公司…
React+AntD 后台管理系统解决方案重点基于 React+AntD 以及多个模块，集成了一套完整的 react 后台管理系统，是一套很不错的可供参考的解决方案 —— 由叶子浩浩分享
JavaScript 面向对象笔记和总结自己总结的参考的 JavaScript 面向对象笔记 —— 由XanderHank分享
从零开始搭建vue-ssr系列之二：Client端渲染以及webpack2+vue2踩坑之旅要实现什么效果？咱们就实现一个项目中常用并且简单的效果：通过Ajax从后端取数据，前端做展示，点列表的每一项，alert出这一项的标题效果如下： Client端的渲染？因为Client端的渲染是ssr渲染的一部分，这一…
100 行代码理解 JavaScript 原型通过实例代码描述类，实例和原型的相互关系 —— 由lIlIIlllIlIIIlII分享
微软推荐的 TypeScript-Vue-Starter 微软推荐的 Vue 和 Typescript 模板, 有详细得使用说明 —— 由HopeFE分享
给熟悉jquery，想使用vue的人的页面搭建建议一直主要用vue做spa，有工程化，可以受益于es6语法的高效。但是我们还提供开发服务，这里仅通过样例代码说明梗概。首先你得有个页面，暂命名为index.html {代码…} 引入需要的jquery,vue.js文件后，建立自己的i…
遇见未知的 CSS 如果对 CSS 有过疑问，不妨看一看 —— 由zhuimengzi分享
简介我的 Git Work Flow 重要性我们从重要性说起。团队开发中要重视有洁癖的人，这种人往往对糟糕的工作流不断提出意见、对 Git 的使用方式提出要求。如果你的团队中这种人正在不断的被忽视，那么你的团队一定出现了管理混乱、代码质量不高等等等等问题。统一的工作流程是至关重要的，不管对于哪一个行业的作业来说都一样…
JavaScript 异步与 Promise 实现在阅读本文之前，你应该已经了解JavaScript异步实现的几种方式：回调函数，发布订阅模式，Promise，生成器（Generator），其实还有async/await方式，这个后续有机会会介绍。本篇将介绍Promise，读完你应该了解什么是Promise，为什么使用Promise，而不是回调函数，Promise怎么使用，使用Promise需要注意什么，以及Promise…
ECMAScript6系列之六：对象的扩展一、属性的简洁表示法 ES6允许直接写入变量和函数，作为对象的属性和方法；属性名为变量名，属性值为变量的值；属性名为函数名，属性值为函数；二、属性名表达式两种方法：标识符作为属性名(obj.foo)，表达式作…
js图片加载效果（延迟加载+瀑布流加载）主要做了两种图片加载的效果一种是遇到页面图片比较多的时候，带读条效果的加载提示（为了验证正确加载，设置了1秒钟的加载间隔时间）另外一种是根据滑块的位置进行图片的预加载，在用户不察觉的情况下，实现瀑布…
Vue 源码阅读笔记第一篇今天又是一个读书的好天气，我打开电脑，总想做些什么，过了一会儿，却又意兴阑珊, 突然想起 Vue，就想着来学习一下。我去翻了一番，里面的设计思想着实让我的视野开阔了不少，然后赶紧动手把这些东西记下来，就形成了这一篇文章。 Vue 一共九千多行代码，这只是 Vue 源码开头的一个很小的部分。我打算专门学习一下 Vu…
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]渐进式web应用是大势所趋。越来越多的大公司开始使用这些技术（比如推特：https://mobile.twitter.com/）。想象你可以在地铁中浏览一个web应用，这个应用能够向用户推送通知并且提供实时的数据，以及提供类似于a…
Html5 – 收藏集 – 掘金Emoji简介|阮一峰 – 前端 – 掘金一、含义 Emoji 是可以插入文字的图形符号。它是一个日语词，e表示”絵”，moji表示”文字”。连在一起，就是”絵文字”。 Emoji 在上个世纪90年代，由日本电信商引入服务，最早用于在…
koa和egg项目webpack内存编译和热更新实现背景在用Node.js+Webpack构建的方式进行开发时, 我们希望能实现修改代码能实时刷新页面UI的效果.这个特性webpack本身是支持的, 而且基于koa也有现成的koa-webpack-hot-middleware 和 koa-webpack-dev-middleware…
JS数组去重!!一篇不怎么靠谱的”深度”水文前言数组去重,这是一个老梗了…今天我又拿出来说了…我们在考虑全面一点的情况下,数组去重的实现,比如针对NaN,undefined,{};这其中涉及的知识点挺多，不信跟着走一波;这里不考虑浏览器兼容性这些破问题，因为涉及ES5&6 基础版-只
构建一个 Cache-aware 的 HTTP/2 Server Push 机制 Server Push 让服务器能够在客户端请求一个资源的时候，预先下发另外一个资源。 —— 由彷梓分享
2017 年 5 月：15 个有趣的 JS 和 CSS 库今天，程小狮给大家带来了一些 5 月前端 “新鲜货”，速速来尝鲜吧！喜欢的朋友，不妨点个赞咯。 —— 由IT程序狮分享
ES6：spread syntax —— JavaScript 将元素应用于数组和函数的优雅方法编译：胡子大哈翻译原文：http://huziketang.com/blog/posts/detail?postId=58f6b7b3a58c240ae35bb8e7 英文连接：ES6: The spread syntax — A concise way
React 教程 – 2. 学习 JSX React 官方文档翻译 – 2. 学习 JSX —— 由缪运泽分享
#前端开发那些事#【Redux 介绍之概述】详见：Redux介绍之概述跟随源码理解 Redux.（作者：张歆琳）
#CSS3#【CSS3 calc()是怎么实现计算】CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。本文分析了calc()的计算使用方法及兼容性 #前端开发博客#
#前端头条#【前端入门参考】结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路。 #前端开发博客#