最近一个季度,我们都在为手 Q 家校群做重构优化,将原有那套问题不断的框架换掉。经过一些斟酌,决定使用 react 进行重构。选择 react,其实也主要是因为它具有下面的三大特性。
学习 React 的好处就是,学了一遍之后,能够写 web, node 直出,以及 native,能够适应各种纷繁复杂的业务。需要轻量快捷的,直接可以用 Reactjs;需要提升首屏时间的,可以结合 React Server Render;需要更好的性能的,可以上 React Native。
但是,这其实暗示学习的曲线非常陡峭。单单是 Webpack+ React + Redux 就已够一个入门者够呛,更何况还要兼顾直出和手机客户端。不是一般人能 hold 住所有端。
Virtual Dom(下称 vd)算是 React 的一个重大的特色,因为 Facebook 宣称由于 vd 的帮助,React 能够达到很好的性能。是的,Facebook 说的没错,但只说了一半,它说漏的一半是:“ 除非你能正确的采用一系列优化手段”。
另一个被大家所推崇的 React 优势在于,它能令到你的代码组织更清晰,维护起来更容易。我们在写的时候也有同感,但那是直到我们踩了一些坑,并且渐渐熟悉 React+ Redux 所推崇的那套代码组织规范之后。
前两天做了个需求需要 Unix 时间戳和北京时间的各种转换,其中 Date 对象用到的极多,今天就来讲讲我所了解到的 Date 对象。
hin 简单~
1 |
var date = new Date(); |
这时的时间是当前时间。
那么 Date 都可以用什么来作为参数呢?
1、Date 对象可以使用指定时间到 1970 年 1 月 1 日 00:00:00 UTC 的毫秒数做参数。
针对多点触控设备编程的 Web 手势组件,快速帮助你的 web 程序增加手势支持,也不用再担心 click 300ms 的延迟了。拥有两个版本,无依赖的独立版和 react 版本。除了 Dom 对象,也可监听 Canvas 内元素的手势(需要 Canvas 引擎内置对象支持 addEventListener 绑定 touch 相关事件)。
某天老板在群里反馈,英文单词为什么被截断了?
很显然,这是我们前端的锅,自行背锅。这个问题太简单了,css 里加两行属性,分分钟搞定。
1 2 |
word-break: keep-all; word-wrap: break-word; |
开心的提交代码,刷新页面。我擦,怎么还是没有断词?不可能啊!!! 难道这两个属性有什么兼容性问题或者有什么限制条件?为了不搬石头砸自己的脚,还是去深入了解一下。
腾讯 AlloyTeam 开始社会招聘啦,想加入 AlloyTeam 的工程师们请抓紧!欢迎前来应聘,机会难得,各种挑战等着你~~
视频直播这么火,再不学就 out 了。
为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主要的技术点,包括但不限于前端技术。
1 H5 到底能不能做视频直播?
当然可以, H5 火了这么久,涵盖了各个方面的技术。
对于视频录制,可以使用强大的 webRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的技术,缺点是只在 PC 的 chrome 上支持较好,移动端支持不太理想。
原文:https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/
作者:Yoav Weiss
译者按:网络优化一直是译者长期研究的方向,除了近期热门的 HTTP/2 之外,还是要关注浏览器在加载策略上的一些改进,从不同层面提升用户的访问体验。prefetch 这些 HTML5 的新特性,虽然很新鲜,但并未在生产环境中得到广泛使用,其中的原因是什么?preload 有什么改进?本文将娓娓道来~
========================译文分割线===========================
Preload(规范)是一项新的 Web 标准,旨在提升性能,让 Web 开发者对加载的控制更加粒度化。它让开发者有自定义加载逻辑的能力,免受基于脚本的 loader 所带来的性能损耗。
几周前,我在 Chrome Canary 提交了对 preload 的支持,解决了一些 bug,预计将在四月中旬合入 Chrome 稳定版。但 preload 到底是什么?它有什么用处?对你有什么好处呢?
在单页应用上,前端路由并不陌生。很多前端框架也会有独立开发或推荐配套使用的路由系统。那么,当我们在谈前端路由的时候,还可以谈些什么?本文将简要分析并实现一个的前端路由,并对 react-router 进行分析。
1 |
刀耕火种是新石器时代残留的农业经营方式。又称迁移农业,为原始生荒耕作制。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var TodoApp = Nuclear.create({ add: function (evt) { evt.preventDefault(); var textBox = this.node.querySelector('input'); this.option.items.push(textBox.value); }, installed: function () { var form = this.node.querySelector('form'); form.addEventListener('submit', this.add.bind(this), false); }, render: function () { return '<div>\ <h3>TODO</h3>\ <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>\ <form >\ <input type="text" />\ <button>Add #{{items.length}}</button>\ </form>\ </div>'; } }); new TodoApp( { items: [] },"#container"); |
将 babel 捧作前端一个划时代的工具一定也不为过,它的出现让许多程序员幸福地用上了 es6 新语法。但你就这么放心地让 babel 跑在外网?反正我是不放心,我就曾经过被坑过,于是萌生了研究 babel 代码转换的想法。本文不是分析 babel 源码,仅仅是看看 babel 转换的最终产物。
es6 在 babel 中又称为 es2015。由于 es2015 语法众多,本文仅挑选了较为常用的一些语法点,而且主要是分析 babel-preset-2015 这个插件(react 开发的时候,常在 webpack 中用到这个 preset)。
Copyright © 2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2