20171217 前端开发周报-前端开发博客

JavaScript 性能优化技巧分享；CSS等比例缩放的盒子；CSS Flexbox详解；css3实现多个元素依次显示；Github分享：精心收集的48个JavaScript代码片段，仅需30秒就可理解；Web 动画帧率计算；用 JavaScript 画光：基础；前端框架架构模式

JavaScript 性能优化技巧分享 JavaScript 作为当前最为常见的直译式脚本语言，已经广泛应用于 Web 应用开发中。为了提高Web应用的性能，从 JavaScript 的性能优化方向入手，会是一个很好的选择。本文从加载、上下文、解析、编译、执行和捆绑等多个方面来讲解 Jav
CSS等比例缩放的盒子原文：《你不知道的 CSS》之等比例缩放的盒子你肯定已经知道，对于一个 img 元素而言，你可以单独地修改它的 width 或者 height 属性来设置它的大小，同时图片的比例还能够保持不变。如下图所示，最上面是原始大小的图片，下面两张则
CSS Flexbox详解 Flexbox是一个强大而灵活的布局，本篇文章主要对其进行学习了解。一、Flexbox简介 Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。简单的理解，就是
css3实现多个元素依次显示如上图所示，在许多的活动宣传html5中会经常需要用到这样的一个动画效果。特别是快到年底了，也许有同学正在为了公司的活动页面而忙碌，get到这样一个小技能说不定刚好对你有帮助哦。在css3中，我们使用animation与keyframes结合，可以给元素添加
Github分享：精心收集的48个JavaScript代码片段，仅需30秒就可理解该项目来自于Github用户Chalarangelo（文末有项目完整地址，原版为英文），目前已在Github上获得了3000多Star，精心收集了多达48个有用的JavaScript代码片段，该用户的代码可以让程序员在30秒甚至更少的时间内理解这些经常用到的基础算法，来看看这些JavaScript代码都传达出了什么吧！ Anagrams of string（带有…
Web 动画帧率计算我们知道，动画其实是由一帧一帧的图像构成的。有 Web 动画那么就会存在该动画在播放运行时的帧率。而帧率在不同设备不同情况下又是不一样的。有的时候，一些复杂或者重要动画，我们需要实时监控它们的帧率，或者说是需要知道它们在不同设备的运行状ԛ
用 JavaScript 画光：基础 Any application that can be written in JavaScript, will eventually be written in JavaScript. – Atwood’s Law 本文来源于我在看了 Milo Yip 在知乎专栏里的这篇文章：《用 C 语言画光（一）：基础》之后的一个想法，能不能将原文中 C 语言版本程序改成 JavaScript 版本的。动手之后发…
前端框架架构模式架构模式是使用多种设计模式，来改进代码的组织方式，实现软件设计的低耦合高内聚（降低模块间的接口的复杂度，每个模块尽可能独立完成自己的功能，不依赖于模块外部代码）前后端不分的时代，前端代码由后端生成发送到浏览器（服务端渲染），所以最先是后端采用
Parceljs和Webpack在React项目上打包速度对比最近这几天前端圈子估计都被Parceljs刷屏了。Parceljs主要特点为：极速构建零配置更多关于Parceljs的内容，请点这里在Parcejs的官方网站上给出了与其它的打包工具的构建速度的对比结果，但是并没有给出测试的项目地址，所以花了点时间在React上做了下面的测试。环境 node版本：v9.2.1 np…
听说你想学 React.js ？原文地址：So you want to learn React.js? 原文作者：Samer Buna 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译者：tv_哇校对者：kangkai124 jonjia 听说你
React系列——socket.io群聊系统在react的实现前奏这篇文章仅对不熟悉在react中使用socket.io的人、以及socket入门者有帮助。下面这个动态图展示的聊天系统是用react+express+socket搭建的，很模糊吧，要得就是这样的效果，我自己开了2个窗口，创建2个用户…
使用vue解决复杂逻辑问题后台需要提供提供怎样的的数据结构页面渲染如何实现如何拿到输入框的值解决思路每一条数据需要提供第一个select的options选项；后面的文本框需要输入类型；切换为区间输入的时候数据格式的切换，每条数据的唯一name属性。封装成组件，通过传入的optios渲染第一个select,根据传入的t…
[翻译] 理解 CSS 布局和块级格式上下文注：本文首发于个人博客 www.ferecord.com/understandi…，如若转载请注明来源。前言 BFC 的概念始于 CSS2，是个蛮古老的 CSS 话题了，网上也到处能搜到 BFC 的介绍，但是都不够简洁。本文系翻译自 Rachel And
#IT职场#【前端面试准备指南（英）】详见：本指南旨在帮助前端面试者提前做好面试的准备，以便在面试中能更好的发挥。这份列表中的学习资源多集中在 JS 上，但实践问题涵盖了整个前端领域。转需收藏！
JS中的柯里化及精巧的自动柯里化实现什么是柯里化？在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher S…
vuejs 水波纹框架 Touch ripple component for Vue.js(1.x ~ 2.x). 组件component/指令directive两种方法可供使用，灵活简单，兼容Vue.js全版本。
vue-cli 中使用 TypeScript 学以致用，这篇文章是对在 vue-cli 中使用 TypeScript 的一次小结。环境 npm webpack.base.conf.js 创建一个 .d.ts 文件让 TypeScript 识别 .vu
Vue单页面骨架屏实践
基于gulp+webpack 快速搭建的前端自动化脚手架适用于中小型项目，快速构建前端项目框架。比如运营活动页，官网类，简单移动端项目，小demo测试等项目启动 // 常用命令开发环境： npm run dev 生产环境： npm run build // 单任务命令执行压缩： gulp zip 编译页面： gulp html 编译脚本： gulp script 编译样式： gulp styles 语法检测： gulp eslint 压缩图…
《一个比 webpack 快10倍的打包工具》作为奇舞团的一个小小程序媛，每天都在不断地接受新知识，PostCSS刚学完，PostHTML又出来了。刚研究明白Rollup的配置，又有一个横空出世的打包工具——Parceljs。（by 奇舞团/betseyliu）
分享一个自己开发的 react拖拽排序组件列表拖拽排序在开发中，是经常遇到的一个需求。现有的拖拽排序轮子已经很多了，作者为什么开发一个呢？做了一个小调查，现有的拖拽存在以下问题：排序库大多功能太全，支持各种场景的拖拽，导致包太大使用复杂，学习成本高跟 react 不搭配，react 基于 s
webpack编译vue项目生成的代码探索前言往 main.js 里写入最简单的 vue 项目结构如下 import Vue from ‘vue’; import App from ‘./App.vue’; new Vue({ el: ‘#app’, template: ‘<App/>’, components: { App } }) App.vue 如下 <template> <div id="app"> <h1>{{ m…
three.js深入浅出 three.js的基本概念(渲染器,场景, 照相机, 光照) 加载3d模型控制3d模型旋转 1.首先我们生成一个渲染器 const renderer = new WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight) renderer.setPixelRatio(window.devicePixelRatio) new WebGLRenderer会在body里面生成一…
Parcel+vue 入门实战parcel一个快速，零配置的 Web 应用程序打包工具,这里我介绍下如何和vue结合进行开发,强烈建议node8以上,具体代码:https://github.com/zlxbuzz/pa… 初始化项目 {代码…} 安装依赖 {代码…} 其中parcel-bundle…
在本地开发环境(Mac)中安装自签名证书，启用https0. 前言今天一大早上班Chrome浏览器提示已经自动升级（Version 63）需要重启浏览器，重启之后发现本地的开发环境打开不，原因是新版的浏览器强制将http转换成https了，而我本地的开发环境没有启用https。解决方…
node-vue前后端分离记录node vue项目开发看了近一周的vue开发，有诸多感触，我之前接触过react、angular所以特别想学学久仰大名的vue。学习半天以后发现，接触到的东西多了，学习起来就是容易很多，vue的指令我能个联想到angular的指令…
【20171211 前端开发日报】简单易懂的 webpack 打包后 JS 的运行过程；Hydux: 一个 Elm-like 的全功能的 Redux 替代品；我还是想谈谈JS里面的闭包；JS时间处理插件MomentJS；20171210 前端开发日报；React Native 是如何让 JS 代码 “变成” Andr…详情→
Git提交历史的修改删除合并今天主要针对在项目版本控制器Git的使用中遇到的一些和提交历史操作相关的常见问题，进行实践总结。在项目开发中经常会需要修改提交commit信息，合并多个提交commit，甚至放弃当前修改回退至某一历史提交的需求，那我们到底该如何操作呢，本篇一一阐述。欢迎访问
Vue 2.0学习笔记：自定义指令在Vue中为了更好的操作DOM元素，其内置了一些指令，比如 v-model 、 v-if 、 v-show 、 v-text 、 v-html 、 v-for 和 v-bind 等。除此之外，Vue也允许注册自定义指令。这些自定义指令可以说我们对普通DOM元素进行底层操作。比如@SARAH DRASNER写的一篇有关于 Vue自定义指令的文章，简单易懂。今天自己也仔细…
重构：从 Promise 到 Async/Await 摘要：夸张点说，技术的发展与历史一样，顺之者昌，逆之者亡。JS开发者们，赶紧拥抱Async/Await吧！ GitHub仓库: Fundebug/promise-asyncawait 早在半年多之前，我就在鼓吹Async/Await替代Promise的6个理由，似乎还招致了一些批评。然而，直到最近，我才真正开始进行代码重构，抛弃Promise，全面使…
解读 JavaScript 之 V8 引擎及优化代码的 5 个技巧几个星期前，我们开始了一系列旨在深入研究 JavaScript 及其实际工作方式的系列文章：我们认为通过了解 JavaScript 的构建块以及它们如何一起协作的，你将能够编写更好的代码和应用程序。本系列的第一篇文章重点介绍了引擎，运行时和调用堆栈的概述。第二篇文章将深入到 Google V8 JavaScript 引擎的内部。我们还将…
一看就懂的JS抽象语法树 babel是现在几乎每个项目中必备的一个东西，但是其工作原理避不开对js的解析在生成的过程，babel有引擎babylon，早期fork了项目acron，了解这个之前我们先来看看这种引擎解析出来是什么东西。不光是babel还有webpack等都是通过javascript parser将代码转化成抽象语法树，这棵树定义了代码本身，通过操作这颗树，可以精准…
【20171210 前端开发日报】大佬谈谈越来越难做的前端，为什么很多人低下了头；2017 前端大事件和趋势回顾，2018 何去何从？；如何实现一个Web Server；Vue SPA 首屏加载优化实践；浅究Vue响应式原理；【jQuery插件分享】Cropper——一个简单方便的…详情→
【iPhone6的CSS3媒体查询】@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {/*iPhone 6 Portrait*/}@media only screen and (min-device-width: 375px) and (max-de…详情→ #前端开发博客#
移动Web加速技术月报第3期为推进Web技术的发展，Brilliant Open Web 团队特推出每月一期的《移动Web加速技术月报》，该月报将整理较流行的移动Web加速技术，并跟进各项技术的进展和发展方向，以期帮助开发者了解或选用相关的技术，把握技术发展趋势。欢迎关注【OpenWeb
再也不学AJAX了（三）跨域获取资源 ③ – WebSocket & postMessage让我们先简单回顾一下之前谈到的内容，AJAX是一种无页面刷新的获取服务器资源的混合技术。而基于浏览器的“同源策略”，不同“域”之间不可以发送AJAX请求。但是在某些情境下，我们需要“跨域获取资源”，为了满足这一…