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

如何只用 CSS 完成漂亮的加载；一张图告诉你最流行的7个JavaScript框架特点；jQuery DOM节点的创建、插入、删除；JS的加载、执行顺序；react+react-router4+redux最新版构建分享；阿里云前端周刊 – 第 20 期；基于HTML5 SVG的页面过渡切换效果；优化webpack配置

如何只用 CSS 完成漂亮的加载为什么要做加载只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载我是如何做的不同的页面, 对加载的设计也就可…
【一张图告诉你最流行的7个JavaScript框架特点】分享最流行的7个JavaScript框架特点。详见（来自：葡萄城控件技术团队博客）
jQuery DOM节点的创建、插入、删除DOM节点的创建 DOM创建节点及节点属性首先，介绍如何使用JavaScript创建div节点元素，主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容创建流程：创建节点(常见的：元素、属性和文本) 添加…
JS的加载、执行顺序我们通常会认为，在html中，位置靠前的js，会优先加载、执行。这句话大部分情况下正确，但是随着浏览器的升级调整，新特性的加入，这个加载、执行顺序也越来越复杂。首先我们看一个最简单的情况 chrome下，为了减少等待时间，…
react+react-router4+redux最新版构建分享相信很多刚入坑React的小伙伴们有一个同样的疑惑，由于react相关库不断的再进行版本迭代，网上很多以前的技术分享变得不再适用。比如react-touter2与react-router4在写法上存在不少区别，以前的调用方法将…
阿里云前端周刊 – 第 20 期推荐 1. 阿里电商架构演变之路 https://yq.aliyun.com/article… 首届阿里巴巴中间件技术峰会上，阿里巴巴中间件技术部专家唐三带来“阿里电商架构演变之路”的演讲，本文从阿里业务和技术架构开始引入，分别分享…
基于HTML5 SVG的页面过渡切换效果这是一款基于HTML5 SVG的页面过渡变形切换效果。该页面切换效果在两个页面进行切换时，通过SVG路径变形，制作出炫酷的页面过渡效果，可用于产品介绍页。查看演示下载源码示例中使用了CSS Flexbox和CSS变量，不是所有的浏览器都支持这些新的CSS属性。该HTML5 SVG的页面过渡变形切换效果的基本HTML结构如…
优化webpack配置happypack happypack可以加快rebuild的速度在开发的时候，需要将babel-loader替换成happypack/loader {代码…} 同时添加插件, 根据需要定义不同的babel配置，控制线程的数量 {代码…} AutoDllPlugin 同样用来…
小型 Web 页项目打包优化方案背景目前团队中新的 Web 项目基本都采用了 Vue 或 React ，加上 RN，这些都属于比较重量级的框架，然而对于小型 Web 页面，又显得过大。早期的一些项目则使用了较原始的 HTML 页面构建技术，但业务逻辑基本无法复用。近半年做过几个小型 Web 页面，在不断学习前端知识的同时，也在重构并摸索小型 Web 项目可…
2017-08-12 前端日报2017-08-12 前端日报精选 JSX中的spread操作符【译】理解Service WorkerVue.js教程: 构建一个预渲染SEO友好的应用示例【译】如何学习V8开发如何编写轻量级 CSS 框架React Without JSXaksakalli/gtop: System mon…
[源码解读] react-reduxreact -redux 源码解读 [TOC] 前置知识阅读本篇文章前，请先确认你是否了解以下知识： react redux 高阶组件 react diff 机制其中高阶组件如果你不太了解也无所谓，你只需要知道，高阶组件就是一个工厂函数，它…
JS打包工具rollup——完全入门指南前言最近在做一个提供给浏览器和node同时使用的js的url模板工具类，在用什么打包工具上纠结了一段时间，正好有一天在知乎上看到了关于rollup的介绍，在自己试了试之后，就决定用rollup.js来打包自己的工具类了。…
前端的数据结构与算法（1）– dfsdfs 前端在开发过程中接触到的算法最多的莫过于排序和 dfs(深度优先遍历) 。 dfs 算法广泛用于图（树是图的一种）的遍历，如：没有 querySelectorAll 的时候，根据 classname 或者 tag 查找 element。关于 dfs …
现代JavaScript使用技巧：ES6中的简写语法 ES6为一些已有的功能提供了非破坏性更新，这类更新中的大部分我们可以理解为语法糖，称之为语法糖，意味着，这类新语法能做的事情其实用ES5也可以做，只是会稍微复杂一些。本章我们将着重讨论这些语法糖，看完之后，可能你会对一些你很熟悉的ES6新语法有不一样的理解。对象字面量对象字面量是指以 {} 形式直接…
Spring Boot [基于Spring Boot 与 Vue的后台脚手架] SanJi Boot Security导读：在上篇文章中谈到了最近基于Vue+zhengAdmin 搭建了一个简易的后台页面框架，在这篇文章中将其与Spring Boot 结合，算是之前在Spring Boot 学习资料收集进阶篇中的最后一个项目案例，希望能对大家有些帮…
从 V8 源码看 JS 数组排序的诡异问题前几天一个朋友在微信里面问我一个关于 JS 数组排序的问题。原始数组如下： var data = ; data 是个数组…
#jQuery#【jquery鼠标经过导航菜单来回弹性滑动】鼠标经过导航来回滑动，也就是鼠标滑过导航的时候下面一条横线随着鼠标滚动，当鼠标离开菜单时自动滚回原来的位置，本文分享我的两种做法。 #前端开发博客#
利用 std/esm 在 Node.js 开发中使用 ES Modules – 知乎专栏利用 std/esm 在 Node.js 开发中使用 ES Modules 整理自 ES Modules in Node Today! ，从属于笔者的现代 JavaScript 开发：语法基础与实践技巧系列中的模块化与构建章节。本文主要介绍了如何利用 std/esm 第三方库在 Node.js 应用中顺滑地使用 ES Modules 语法。利用 std/esm 在 Node.js 开发中使用 ES Modu…
解读 Vue 之 Reactive
【 js 基础】作用域和闭包一、编译过程常见编译性语言，在程序代码执行之前会经历三个步骤，称为编译。步骤一：分词或者词法分析将由字符组成的字符串分解成有意义的代码块，这些代码块被称为词法单元。例子： var a = 2; 这一句通常被分解成为下面这些词法单元：var 、a 、 = 、2、; 。步骤二：解析或者语法分析将词法单…
自制刻度尺-前端简易实现”腾讯信用”界面