极限前端 | 易学教程

聊聊未来的前端时代

阅读更多关于聊聊未来的前端时代

2016年结束了，前端技术的发展也将进入到一个新的阶段，那么未来又会给我们带来什么呢？这里就个人发表下意见，不喜勿喷。就前端主流技术框架的发展而言，过去的几年里发展极快，在填补原有技术框架空白和不足的同时也渐渐趋于成熟。未来前端在已经趋向成熟的技术方向上面将会慢慢稳定下来，并进入技术迭代优化阶段，例如语言标准、前端框架等。但这并不代表前端领域技术就此稳定了，因为新的技术方向已经出现，并在等待着下一个风口的到来。那么什么是下一个风口？虚拟现实？人工智能？或者其它的？不管未来如何，就前端应用开发方向来讲，MVVM、Virtual DOM和同构的技术解决方案依然会延续发展一段时间。而且这段时间内前端框架技术的变化将不会像原来一样具有颠覆性。当 MVVM、Virtual DOM或同构等技术实践都有很成熟高效的框架和方案去实现了。那么对于移动端应用，前端要重点发展的下一步可能就是MNV 的原生NativeView开发，例如使用通用的MNV 前端技术实现方案来降低移动端Native和前端Web交互的开发成本，让前端既可以通过Native编译开发出稳定的原生应用外壳，也可用来开发快速迭代、高性能的移动端MNV*应用，最终形成一套移动端上高效率的前端开发生态体系。另一方面，新领域的Web化思路也会给前端带来新的技术革新和发展机遇，例如Web VR（Virtual

Nodejs下的ES6兼容性与性能分析

阅读更多关于 Nodejs下的ES6兼容性与性能分析

ES6标准发布后，前端人员也开发渐渐了解到了es6，但是由于兼容性的问题，仍然没有得到广泛的推广，不过业界也用了一些折中性的方案来解决兼容性和开发体系问题，但大家仍很疑惑，使用ES6会有哪些兼容性问题。一、Nodejs下ES6兼容性现状之前写了es6通过Babel编译后的在浏览器端的兼容性问题《Babel下的ES6兼容性和规范》，随着范围的扩展，ES6在Nodejs上兼容性也有必要重新梳理下。随着iojs的引入，新版的Nodejs开始原生支持部分ES6的特性，既然ES6在浏览器端使用需要使用babel等编译，在Nodejs总可以放心使用了吧。然而事实并非如此，为此在nodejs端，我也做了特性兼容性研究： ES6新特性在Nodejs下的兼容性列表这里罗列下nodejs支持的新特性，没列出的新特性均为不支持。 https://iojs.org/en/es6.html https://kangax.github.io/compat-table/es6/ ES6特性 Nodejs兼容性 let,const,块 strict模式支持 class类 strict模式支持 Map，Set 和 WeakMap，WeakSet 支持 generators 支持进制转换支持对象字面量扩展支持 promise 支持 String对象新API 支持 symbols 支持

web前端图片极限优化策略

阅读更多关于 web前端图片极限优化策略

随着web的发展，网站资源的流量也变得越来越大。据统计，60%的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。一、现有web图片格式我们先来看下现在常用的web图片的格式：图片格式支持透明动画支持压缩方式浏览器支持相对原图大小适应场景 baseline-jpeg 不支持不支持有损所有由画质决定所有通用场景 progressive-jpeg 不支持不支持有损所有由画质决定所有通用场景, 渐进式加载 gif 支持支持无损所有由帧数和每帧图片大小决定简单颜色，动画 png 支持不支持无损所有由png色值位数决定需要透明时 webp 支持不支持有损 Chrome、Opera 由压缩率决定复杂颜色及形状，浏览器平台可预知 apng 支持支持无损 Firefox、Safari、iOS Safari 由每帧图片决定需要半透明效果的动画 svg 支持支持无损所有(IE8以上) 由内容和特效复杂度决定简单图形，需要良好的放缩体验，需要动态控制图片特效 bpg 支持支持有损不支持，需要js解码由画质决定 jpeg上需要极限优化的场景几种文件格式的特点概述 baseline-jpeg 这种类型的JPEG文件存储方式是按从上到下的扫描方式

前端数据的双向绑定方法

阅读更多关于前端数据的双向绑定方法

前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-binding)，例如mvvm框架，数据驱动视图，视图状态机等，研究了几个目前主流的数据双向绑定框架，总结了下。目前实现数据双向绑定主要有以下三种。 github演示例子 1、手动绑定比较老的实现方式，有点像观察者编程模式，主要思路是通过在数据对象上定义get和set方法(当然还有其它方法)，调用时手动调用get或set数据，改变数据后出发UI层的渲染操作；以视图驱动数据变化的场景主要应用与input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>data-binding-method-set</title> </head> <body> <input q-value="value" type="text" id="input"> <div q-text="value" id="el"></div> <script> var elems = [document.getElementById('el'), document

2015-2016前端体系技术图谱

阅读更多关于 2015-2016前端体系技术图谱

#2015-2016前端架构体系技术进入github查看大图点击查看完整版一、框架与组件 **bootstrap等UI框架设计与实现伸缩布局：grid网格布局基础UI样式：元素reset、按钮、图片、菜单、表单组件UI样式：按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告响应式布局：布局、结构、样式、媒体、javascript响应式第三方插件：插件管理 **jQuery、zepto使用原理以及插件开发支持amd、cmd、全局变量的模块化封装 $.fn.method = function(){} **mvc/mvvm框架原理设计，vue/angular/avalon等 directive设计：html、text、class、html、attr、repeat、ref，可扩展 filter设计：bool、upperCase、lowerCase，可扩展表达式设计：if-else等实现 viewmodel结构设计：例如数据，元素，方法的挂载与作用域数据更变检测：函数触发，脏数据检测、对象hijacking **polymer/angular2思想与设计思路 import技术 template和script引入方式 css样式命名空间隔离简单复用第三方库 **reactjs原理与使用 virtual