陈材华
## Jquery jQuery的意义在我看来和他自己说的主要是两点：一是更好的API，二是兼容。这两点JQ做到了极致，在上一个时代，这两点恰好是前端最痛的两个点，所以它成功了。 不过到了移动时代，一是web平台的api有了大幅度演进，又有es6的新特性，这些新的API，我认为设计水平是远远超过JQ的。而移动端的兼容问题更加复杂，JQ所创造的shiv方式，是没办法照顾到移动端的适配需求的，比如说单单屏幕适配这一条，就这么复杂。 ## angular 近年有一点好现象，就是前端逐渐开始有人重视架构这件事了，Angular（指1代）在我看来最大的特色是directive对html语法的扩展能力和MVVM架构，MVVM微软的架构师2005年搞出来的，至今在UI架构方面，我还没有见到超过这个的架构，但是Angular的问题也很明显，一是它很重，二是directive离了angular，就完全没法复用。 ## react 后面就是React了，React（泛指）有意思的东西很多：React Native，GraphQL，jsx，UI组件化，flux。其实每一样都很有想象空间。有让我很兴奋的，比如RN和GraphQL（虽然两者的实现都糟透了）分别代表了向客户端和服务端的延伸，也有让我觉得完全是垃圾的，比如flux，我认为只是把所有的耦合中间用类似事件的形式弄到了dispatcher上，完全是自欺欺人。总的来说，我觉得这个体系蕴含了各种nb的思想，但有点过于封闭，fb想要的太多，其实每一点都没做透，没一点都让我觉得我思想特别好，但是实际用的话都问题多多，最后变成只能吸收下思想自己搞一套了。另外React跟MVVM半毛钱关系都没有，它既没有绑定的概念，又没有命令的概念。 ## vue 最后讲小右的Vue，它是非常纯粹的一个MVVM的实现，用前端比较熟悉的事件代替了命令，实现了双向绑定。这里面有些实现细节，比如Model所有的属性变成getter/setter我是有些疑问的，但总体而言，我觉得它就是web端实现MVVM的一个自然的延伸。比起前两者，它是比较轻量的，最重要的是它是单一职责的。 ## 前端的演变 从架构的角度看，前端经历了几个时代，2005-2008左右，复用基本靠ctrl-c ctrl-v，各种特效站满地，重在“能实现”，不问形式；2008-2012，复用是中心化的，各种框架，是把所有需要复用的东西塞到一个文件里，反正pc流量也足，最后jQuery胜出；2012年到现在，npm发展把复用这件事带上了正轨（虽然夹带了common js的私货），也终于开始有一点真正意义上的UI架构，沿着79年开始的MVC，几年发展过来客户端几十年走过的路。 ## 关于前端架构发展，我的一些看法是： 1. MVVM至今仍是最先进的UI架构，目前各种所谓”创新“，我的评价基本都是“幼稚” 2. 我觉得View层本身的发展没有得到应有的重视，毕竟数据绑定和架构是为了大型应用和开发效率，但是我怀疑现在有哪个公司真正在需要“大型”应用，一个Model展现到多个视图的场景真的很多吗？也可能受业务类型限制，我目前工作中遇到的这种情况，是非常少，甚至多次在客户端更新model的场景都很少。而开发效率嘛，理论上确实好的架构会提升开发效率，但是现在很多公司其实开发效率并没有卡在写代码上……你懂得。 3. UI组件化势在必行，目前最有希望的是Web component和React组件，directive基本可以出局了。 4. 前端职责的扩展，GraphQL和React...
Web 发展了几十个春秋，风起云涌，千变万化。我很庆幸自己没有完整地经历过这些年头，而是站在前人的肩膀上行走。Web 技术发展的速度让人感觉那几乎不是继承式的迭代，而是一次又一次的变革，一次又一次的创造。这几年的前端，更为之甚！ ## 那些年，一度追捧，一度放弃 下面，花一些篇幅简单回顾下 09 年到 15 年前端的发展历程。 ## 09 年，基础类库完善，寻求突破 09 年之前，JavaScript 还处于对自身语言的完善过程中，而到了 09 年，JavaScript 类库已经颇为成熟，jQuery/Prototype/Script.aculo.us/Dojo 等都已经发布了好几个 stable 版本，各大类库也是相互吸收优点，不断完善并提高自身性能，然而功能上已经没有太多增加的势头。部分框架开始了思想上的转变，更加注重前端开发的组织和结构，条理性强了很多，如 YUI，Dojo 等。 从 ECMAScript 规范的争执，开启了浏览器引擎大战，各大厂商也趁机瓜分 IE6 份额，Chrome 和...
个人的收藏夹的内容越来越多，看上去比较乱，虽然时不时的也会整理下，但还是显得不是很清晰，准备花点时间好好整理下。
每个前端团队都在打造自己的前端开发体系，这通常是一个东拼西凑，逐渐磨合的过程，在技术发展日新月异的今天，这样的过程真的是不可抽象和复制的么？本文希望能够通过系统的拆解前端开发体系为大家提供体系设计思路参考。 ## 什么是前端集成解决方案 前端集成解决方案，英文翻译为 Front-end Integrated Solution，缩写fis，发音[fɪs] 前端集成解决方案并不是一个新词汇，将这个词拆开来看，我们能得到： - 前端：指前端领域，即web研发中常用的浏览器客户端相关技术，比如html、js、css等 - 集成：将一些孤立的事物或元素通过某种方式改变原有的分散状态集中在一起，产生联系，从而构成一个有机整体的过程。[1] - 解决方案：针对某些已经体现出的，或者可以预期的问题，不足，缺陷，需求等等，所提出的一个解决问题的方案，同时能够确保加以有效的执行。[2] ### 总结来说，前端集成解决方案就是： 将前端研发领域中各种分散的技术元素集中在一起，并对常见的前端开发问题、不足、缺陷和需求，所提出的一种解决问题的方案。 ## 前端领域有哪些技术元素 前端行业经历了这么长时间的发展，技术元素非常丰富，这里列举出一般web团队需要用到的技术元素： ### 前端开发体系技术元素及其关联关系 - 开发规范：包括开发、部署的目录规范，编码规范等。不要小瞧规范的威力，可以极大的提升开发效率，真正优秀的规范不会让使用者感到约束，而是能帮助他们快速定位问题，提升效率。 - 模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。现在流行的模块化框架有requirejs、seajs等。 - 组件化开发：在模块化基础上，以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护，组件单元是资源独立的，组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等，甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装，解决一些常见的组件渲染、交互问题。 - 组件仓库：有了组件化，我们希望将一些非常通用的组件放到一个公共的地方供团队共享，方便新项目复用，这个时候我们就需要引入一个组件仓库的东西，现在流行的组件库有bower、component等。团队发展到一定规模后，组件库的需求会变得非常强烈。...
## touch系事件概述 touch系事件是触屏设备上的一系列事件，当用户触摸屏幕时及进行一系列操作时发生的事件。 包含touchstart, touchmove, touchend事件。 ## 程序思路 我们将焦点集中在事件这个抽象对象上去，例如当手指在触摸屏上移动过程中发生的touchmove事件，我们去查找此事件相关的属性，根据前后事件的发生（例如touchstart和touchend事件），去判断是否符合程序触发任务的条件（例如当用户向上滑动时你要做一个页面动画）。 ## 事件模式 需要指出的是，touch事件同其他dom事件一样（因为本身就属于dom事件，只不过用在触屏设备的新增html5事件而已），用addEventListener绑定，在事件处理时使用e.prevantDefault()来阻止默认事件执行（例如你在滚动div时，使用它来阻止页面滚动），使用e.stopPropagation()来阻止事件向上冒泡，等等。 ## 对象解释 touchList：touch类对象组成的数组 touch对象:touch对象表示一个触点，触点属性包含identifier, target, clientX/clientY, pageX/pageY, screenX/screenY, force（接触面最小椭圆角度）/radiusX（接触面最小椭圆X轴）/radiusY（接触面最小椭圆Y轴）/rotationAngle(chrome上目前还是带有webkit前缀的webkitForce(压力)/webkitRadiusX/webkitRadiusY/webkitRotationAngle), 其中identifier用来标识该触点，因为屏幕上可能同时存在多个触点。 # 事件解析 ## touchstart事件 ### 1、发生条件：当用户触摸到屏幕时，发生touchstart事件。 #### 实验：...
## 高性能 CSS3 动画 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。 关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。 而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。 然而，CSS3动画在移动多终端设备场景下，相比PC会面对更多的性能问题，主要体现在动画的卡顿与闪烁。 目前对提升移动端CSS3动画体验的主要方法有几点： ### 尽可能多的利用硬件能力，如使用3D变形来开启GPU加速 ``` css -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0,...
详细参见：http://browserhacks.com/
为元素增加以下样式 ``` css -webkit-transform: translateZ(0); z-index: 1000; ``` 参见：http://stackoverflow.com/questions/11258877/fixed-element-disappears-in-chrome
``` javascript function showallselect(id){ var select = document.getElementById(id); if(select && select.options && select.options.length >1){ select.size = select.options.length; } } ··· ```
# 删减版的backbone 结合项目的实际使用，对backbone源码做了删减和部分增加； 详见：https://github.com/mishe/backbone_mishe ## 删除部分 - backbone.model - backbone.collection ## 增加部分 - 支持路由不区分大小写，使得路由可以实现驼峰命名 - 支持路由事先检测，解决在跳路由前，先处理通用的功能 # 删减版的underscore 只提供backbone依赖的underscore函数 ## 保留的其他函数 - _.each - _.template