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

快速学习新技术，以 Vue2 为例；轻松掌握react-router-redux；CSS实现Tab布局；实现环形进度条（CSS3+jQuery）；从 Bundle 文件看 Webpack 模块机制；js 正则表达式匹配字符串与优化过程；使用Gradle整合SpringBoot+Vue.js-开发调试与打包；javascript 之隐藏你的代码

快速学习新技术，以 Vue2 为例此学习方式不仅适用于开发技术学习，应该是适用于各行各业（比如学习UI技术，金融经济等）为什么需要学习新技术在从来都不缺乏新技术的软件行业，关于学习新技术从来都是绕不开的永恒的话题。我们在面试的时候一般会被问到这个技术会不会，那个技术了不了解。那么我们为什么要花时间学习新技术呢？…
轻松掌握react-router-redux 使你的router纳入redux的store树中 ✨ 看到这篇文章说明你是一个聪明人，你用redux来管理state,用router来管理前端路由。技术栈选的不错，好像也没有别的可选。但react-router-redux并不是必须得使用的。
CSS实现Tab布局一、布局方式 1、内容与tab分离 {代码…} {代码…} 2、内容与tab一体 {代码…} {代码…} 利用负margin，将内容区对齐，然后内容去添加背景色，避免不同tab对应的区域透视重叠。二、CSS实现交互 1、锚点实现…
实现环形进度条（CSS3+jQuery）整体思路是：通过裁切（clip）产生两个半圆展示出静态的进度条，而后通过旋转（rotate）角度的变化产生动态效果。先来回顾两个基础知识点（1）css的一个不常见的属性： {代码…} 这个属性规定了一个裁切的矩形…
从 Bundle 文件看 Webpack 模块机制本文将通过一个最简单的示例，分析 Webpack 打包后为我们生成的代码，来阐述项目代码运行时的模块机制。 —— 由MrDream24分享
js 正则表达式匹配字符串与优化过程有时候需要实现对 js 源文件中的 url 字符串做拦截预处理，或者前端 js 语法高亮，或者需要对动态加载的关键源码做混淆保护，在某些步骤实现之前，有一个步骤是需要提炼出所有的合法字符串 —— 由Chccc分享
使用Gradle整合SpringBoot+Vue.js-开发调试与打包首先非常感谢kevinz分享的文章《springboot+gradle+vue+webpack 组合使用》，这文章对我的帮助非常大。我是做Java后台开发的，一般做Java的要做网页都是用jsp，但我并不喜欢在jsp代码中使用jstl标签，我一直想找…
javascript 之隐藏你的代码 javascript 之隐藏你的代码
vue实现旋转木马轮播同事拿到个设计稿,是旋转木马的轮播效果,于是网上找了一下,发现了jquery实现的效果,一有空就看看源码，研究其实现原理，想着用vue的数据驱动方式来实现一个，但这个效果跟以往做的demo效果不同，每次思考实现都被…
前端开发框架简介: angular 和 react react 是 facebook 推出一个用来构建用户界面的 js 库，angularjs 是 google 推出的一个前端 js 框架，本文对两者进行了一些对比。 —— 由腾讯云技术社区分享
What's New in the Bootstrap 4 Grid Boostrap4 开始使用 flex 实现网格系统，并且 dist 中有单独提供 bootstrap-grid.css, 让我们了解下 bootstrap4 的网格系统，并且用它来愉快的布局吧 —— 由悖论分享
react-route v4 立志今天看完加油 v4 v4 v4！！version4
iBlog：基于Gracejs及github issues的全功能博客方案iBlog 是完全基于github API 并充分利用 gracejs 数据代理特性实现的全功能博客方案。项目地址： https://github.com/xiongwilee/iblog 体验地址： https://iblog.wilee.me (访问比较慢是因为用的最最低配的aws …
CSSGAMES：纯CSS实现五星评价效果上图：上代码： {代码…} {代码…} 没了。 PS：大力推荐《CSS揭秘》，一本让人钻牛角尖不亦乐乎的书
ionic2的环境搭建与调试最近在预研ionic这个框架，和大家分享下过程。注：1.我是借用了git clone https://github.com/driftyco/i…的项目下载到本地去运行的，并没自己写项目。2.我用的环境是mac系统，目录跟windows下的有些不同，没什…
JavaScript深入之从原型到原型链 JavaScript深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧
Mobi.css 2 发布 beta 版，一个轻量、可拓展、移动端优先的 css 框架特性轻量。默认的 Mobi.css 只有 3kb after gzipped 。易于学习。可拓展。 Plugin 系统使 Mobi.css 可拓展。你可以引入一个 plugin 来增强 Mobi.css 。或者将这个插件作为一个独立的 css 库使用。一个插件甚至可以脱离 Mobi.css 使用。移动端优先。专注于细节，尤其适合 content-rich 网站。在桌面端也表现优秀。
动画
背景
边框和轮廓
盒（框）
颜色
内容分页媒体
定位
可伸缩框
字体
生成内容
网格
超链接
行框
列表
外边距
Marquee
多列
内边距
分页媒体
定位
打印
Ruby
语音
表格
文本
2D/3D 转换
过渡
用户界面
在 NodeJS 中玩转 Protocol Buffer Protocol Buffers 是一种轻便高效的结构化数据存储格式，可以用于结构化数据序列化，很适合做数据存储或 RPC 数据交换格式。 —— 由腾讯云技术社区分享
JavaScript阿拉伯数字与中文数字互相转换有一次在上海前端交流群看见有人在群里发了一个求助信息：请用JavaScript语言编写一个函数，要求入口参数为数字，取值范围是一位数整数，返回值是字符串，该函数的功能为：返回该数字对应的汉字，例如：输入数…
html2canvas 踩坑总结 html2canvas 踩坑总结
百度前端学院任务：动态数据绑定 (四) 百度前端学院任务：动态数据绑定 (四) 及文本的搜索替换 —— 由Edward-Ren分享
#前端技术#【CSS3 动画实践】详见：在本文中，作者将通过示例，对 CSS3 中的关键帧动画与逐帧动画进行分别的介绍。一起来看看。[喵喵]
Script error.全面解析 | Fundebug博客本文介绍了Script error.的由来，并提供了一个简单的实例来演示什么情况下出现Script error.。
TypeScript & React 开发的 TodoMVC 官方 TodoMVC 项目的 TypeScript&React 示例代码已经太陈旧，该项目使用最新版本的 TypeScript 进行了重构，并在 README 中提供了 TypeScript 项目开发过程的推荐配置 —— 由猫了个喵分享
教你如何在 web 应用程序中使用本地文件~ 使用在 HTML5 中添加到 DOM 的 File API，现在可以让 Web 内容要求用户选择本地文件，然后读取这些文件的内容。 —— 由LHammer分享
HTML 上事件句柄的作用域 HTML 中 on 开头的属性们，它的作用域是什么？form 元素怎么就神奇地拿到了 input 元素变量了？ —— 由woozy分享
关于Web开发中“程序=数据结构+算法”的思考在这里统一说Web开发，可能有失颇偏，毕竟我后端一直都是用PHP实现的，没用过.net也没用过java，但我想大体都是一样都，我就此阐述一下我所认为的“程序=数据结构+算法”。输入输出思想相对于前端程序来说，前端…
Script error. 全面解析本文介绍了 Script error. 的由来，并提供了一个简单的实例来演示什么情况下出现 Script error. —— 由Fundebug分享
理解 CSS 命名规范 –BEM 非常赞的 CSS 命名方式 —— 由Zee分享