20171217 前端开发周报

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

  1. JavaScript 性能优化技巧分享 JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中。为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择。 本文从加载、上下文、解析、编译、执行和捆绑等多个方面来讲解 Jav
  2. CSS等比例缩放的盒子 原文:《你不知道的 CSS》之等比例缩放的盒子 你肯定已经知道,对于一个 img 元素而言,你可以单独地修改它的 width 或者 height 属性来设置它的大小,同时图片的比例还能够保持不变。 如下图所示,最上面是原始大小的图片,下面两张则
  3. CSS Flexbox详解 Flexbox是一个强大而灵活的布局,本篇文章主要对其进行学习了解。 一、Flexbox简介 Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。简单的理解,就是
  4. css3实现多个元素依次显示 如上图所示,在许多的活动宣传html5中会经常需要用到这样的一个动画效果。特别是快到年底了,也许有同学正在为了公司的活动页面而忙碌,get到这样一个小技能说不定刚好对你有帮助哦。 在css3中,我们使用animation与keyframes结合,可以给元素添加
  5. Github分享:精心收集的48个JavaScript代码片段,仅需30秒就可理解 该项目来自于Github用户Chalarangelo(文末有项目完整地址,原版为英文),目前已在Github上获得了3000多Star,精心收集了多达48个有用的JavaScript代码片段,该用户的代码可以让程序员在30秒甚至更少的时间内理解这些经常用到的基础算法,来看看这些JavaScript代码都传达出了什么吧! Anagrams of string(带有...
  6. Web 动画帧率计算 我们知道,动画其实是由一帧一帧的图像构成的。有 Web 动画那么就会存在该动画在播放运行时的帧率。而帧率在不同设备不同情况下又是不一样的。 有的时候,一些复杂或者重要动画,我们需要实时监控它们的帧率,或者说是需要知道它们在不同设备的运行状ԛ
  7. 用 JavaScript 画光:基础 Any application that can be written in JavaScript, will eventually be written in JavaScript. – Atwood’s Law 本文来源于我在看了 Milo Yip 在知乎专栏里的这篇文章: 《用 C 语言画光(一):基础》 之后的一个想法,能不能将原文中 C 语言版本程序改成 JavaScript 版本的。动手之后发...
  8. 前端框架架构模式 架构模式是使用多种设计模式,来改进代码的组织方式,实现软件设计的低耦合高内聚(降低模块间的接口的复杂度,每个模块尽可能独立完成自己的功能,不依赖于模块外部代码) 前后端不分的时代,前端代码由后端生成发送到浏览器(服务端渲染),所以最先是后端采用
  9. Parceljs和Webpack在React项目上打包速度对比 最近这几天前端圈子估计都被Parceljs刷屏了。Parceljs主要特点为: 极速构建 零配置 更多关于Parceljs的内容,请点这里 在Parcejs的官方网站上给出了与其它的打包工具的构建速度的对比结果,但是并没有给出测试的项目地址,所以花了点时间在React上做了下面的测试。 环境 node版本:v9.2.1 np...
  10. 听说你想学 React.js ? 原文地址:So you want to learn React.js? 原文作者:Samer Buna 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:tv_哇 校对者:kangkai124 jonjia 听说你
  11. React系列——socket.io群聊系统在react的实现前奏 这篇文章仅对不熟悉在react中使用socket.io的人、以及socket入门者有帮助。 下面这个动态图展示的聊天系统是用react+express+socket搭建的,很模糊吧,要得就是这样的效果,我自己开了2个窗口,创建2个用户...
  12. 使用vue解决复杂逻辑 问题 后台需要提供提供怎样的的数据结构 页面渲染如何实现 如何拿到输入框的值 解决思路 每一条数据需要提供第一个select的options选项;后面的文本框需要输入类型;切换为区间输入的时候数据格式的切换,每条数据的唯一name属性。 封装成组件,通过传入的optios渲染第一个select,根据传入的t...
  13. [翻译] 理解 CSS 布局和块级格式上下文 注:本文首发于个人博客 www.ferecord.com/understandi…,如若转载请注明来源。 前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁。本文系翻译自 Rachel And
  14. #IT职场#【前端面试准备指南(英)】详见: 本指南旨在帮助前端面试者提前做好面试的准备,以便在面试中能更好的发挥。这份列表中的学习资源多集中在 JS 上,但实践问题涵盖了整个前端领域。转需收藏! ​​​

    前端面试准备指南(英)
  15. JS中的柯里化 及 精巧的自动柯里化实现什么是柯里化? 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher S...
  16. vuejs 水波纹框架 Touch ripple component for Vue.js(1.x ~ 2.x). 组件component/指令directive两种方法可供使用,灵活简单,兼容Vue.js全版本。
  17. vue-cli 中使用 TypeScript 学以致用,这篇文章是对在 vue-cli 中使用 TypeScript 的一次小结。 环境 npm webpack.base.conf.js 创建一个 .d.ts 文件让 TypeScript 识别 .vu
  18. 基于gulp+webpack 快速搭建的前端自动化脚手架 适用于中小型项目,快速构建前端项目框架。比如运营活动页,官网类,简单移动端项目,小demo测试等 项目启动 // 常用命令 开发环境: npm run dev 生产环境: npm run build // 单任务命令 执行压缩: gulp zip 编译页面: gulp html 编译脚本: gulp script 编译样式: gulp styles 语法检测: gulp eslint 压缩图...
  19. 一个比 webpack 快10倍的打包工具》作为奇舞团的一个小小程序媛,每天都在不断地接受新知识,PostCSS刚学完,PostHTML又出来了。刚研究明白Rollup的配置,又有一个横空出世的打包工具——Parceljs。 (by 奇舞团/betseyliu) ​​​​

    一个比 webpack 快10倍的打包工具
  20. 分享一个自己开发的 react拖拽排序组件 列表拖拽排序在开发中,是经常遇到的一个需求。现有的拖拽排序轮子已经很多了,作者为什么开发一个呢? 做了一个小调查,现有的拖拽存在以下问题: 排序库大多功能太全,支持各种场景的拖拽,导致包太大 使用复杂,学习成本高 跟 react 不搭配,react 基于 s
  21. 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...
  22. three.js深入浅出 three.js的基本概念(渲染器,场景, 照相机, 光照) 加载3d模型 控制3d模型旋转 1.首先我们生成一个渲染器 const renderer = new WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight) renderer.setPixelRatio(window.devicePixelRatio) new WebGLRenderer会在body里面生成一...
  23. Parcel+vue 入门实战parcel一个快速,零配置的 Web 应用程序打包工具,这里我介绍下如何和vue结合进行开发,强烈建议node8以上,具体代码:https://github.com/zlxbuzz/pa... 初始化项目 {代码...} 安装依赖 {代码...} 其中parcel-bundle...
  24. 在本地开发环境(Mac)中安装自签名证书,启用https0. 前言 今天一大早上班Chrome浏览器提示已经自动升级(Version 63)需要重启浏览器,重启之后发现本地的开发环境打开不,原因是新版的浏览器强制将http转换成https了,而我本地的开发环境没有启用https。解决方...
  25. node-vue前后端分离记录node vue项目开发 看了近一周的vue开发,有诸多感触,我之前接触过react、angular所以特别想学学久仰大名的vue。学习半天以后发现,接触到的东西多了,学习起来就是容易很多,vue的指令我能个联想到angular的指令...
  26. 20171211 前端开发日报】简单易懂的 webpack 打包后 JS 的运行过程;Hydux: 一个 Elm-like 的 全功能的 Redux 替代品;我还是想谈谈JS里面的闭包;JS时间处理插件MomentJS;20171210 前端开发日报;React Native 是如何让 JS 代码 “变成” Andr...详情→ ​​​

    20171211 前端开发日报
  27. Git提交历史的修改删除合并 今天主要针对在项目版本控制器Git的使用中遇到的一些和提交历史操作相关的常见问题,进行实践总结。在项目开发中经常会需要修改提交commit信息,合并多个提交commit,甚至放弃当前修改回退至某一历史提交的需求,那我们到底该如何操作呢,本篇一一阐述。 欢迎访问
  28. Vue 2.0学习笔记:自定义指令 在Vue中为了更好的操作DOM元素,其内置了一些指令,比如 v-model 、 v-if 、 v-show 、 v-text 、 v-html 、 v-for 和 v-bind 等。除此之外,Vue也允许注册自定义指令。这些自定义指令可以说我们对普通DOM元素进行底层操作。比如@SARAH DRASNER写的一篇有关于 Vue自定义指令的文章 ,简单易懂。今天自己也仔细...
  29. 重构:从 Promise 到 Async/Await 摘要: 夸张点说,技术的发展与历史一样,顺之者昌,逆之者亡。JS开发者们,赶紧拥抱Async/Await吧! GitHub仓库: Fundebug/promise-asyncawait 早在半年多之前,我就在鼓吹Async/Await替代Promise的6个理由,似乎还招致了一些批评。然而,直到最近,我才真正开始进行代码重构,抛弃Promise,全面使...
  30. 解读 JavaScript 之 V8 引擎及优化代码的 5 个技巧 几个星期前,我们开始了一系列旨在深入研究 JavaScript 及其实际工作方式的系列文章:我们认为通过了解 JavaScript 的构建块以及它们如何一起协作的,你将能够编写更好的代码和应用程序。 本系列的第一篇文章重点介绍了引擎,运行时和调用堆栈的概述。第二篇文章将深入到 Google V8 JavaScript 引擎的内部。我们还将...
  31. 一看就懂的JS抽象语法树 babel是现在几乎每个项目中必备的一个东西,但是其工作原理避不开对js的解析在生成的过程,babel有引擎babylon,早期fork了项目acron,了解这个之前我们先来看看这种引擎解析出来是什么东西。不光是babel还有webpack等都是通过javascript parser将代码转化成抽象语法树,这棵树定义了代码本身,通过操作这颗树,可以精准...
  32. 20171210 前端开发日报】大佬谈谈越来越难做的前端,为什么很多人低下了头;2017 前端大事件和趋势回顾,2018 何去何从?;如何实现一个Web Server;Vue SPA 首屏加载优化实践;浅究Vue响应式原理;【jQuery插件分享】Cropper——一个简单方便的...详情→ ​​​

    20171210 前端开发日报
  33. 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...详情→ #前端开发博客# ​​​

    iPhone6的CSS3媒体查询
  34. 移动Web加速技术月报第3期 为推进Web技术的发展,Brilliant Open Web 团队特推出每月一期的《移动Web加速技术月报》,该月报将整理较流行的移动Web加速技术,并跟进各项技术的进展和发展方向,以期帮助开发者了解或选用相关的技术,把握技术发展趋势。欢迎关注【OpenWeb
  35. 再也不学ajax了(三)跨域获取资源 ③ - WebSocket & postMessage让我们先简单回顾一下之前谈到的内容,AJAX是一种无页面刷新的获取服务器资源的混合技术。而基于浏览器的“同源策略”,不同“域”之间不可以发送AJAX请求。但是在某些情境下,我们需要“跨域获取资源”,为了满足这一...

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

原文:20171217 前端开发周报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-weekly-20171217.html)