https://webgradients.com/ (色彩)
http://www.userinterface.com.cn/ (设计网站导航)
http://www.shejidaren.com/category/design-tools (设计网站&工具汇总)
① ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。编程语言JavaScript是ECMAScript的实现和扩展,由ECMA(一个类似W3C的标准组织)参与进行标准化。
ECMAScript与JavaScript的关系
ECMAScript 是一种开放的、国际上广为接受的脚本语言规范。 它本身并不是一种脚本语言。正如在 Web 应用程序中执行有用操作的 bean 集合(例如,Netscape 的 AWT)是 Sun 的 JavaBean 规范的一种实现一样,JavaScript 是 ECMAScript 规范的一种实现。
JScript和JavaScript
JavaScript: Netscape公司
Jscript: Microsoft公司
Jscript是微软版的JavaScript,与JavaScript基本一致. 如果你这样写:<script> </script> 不声明脚本版本的话,在IE里默认用Jscript,在Netscape里默认用JavaScript 脚本语言本身和浏览器版本无关,JavaScript就是JavaScript,永远是Netscape公司的JavaScript,永远首先默认支持 NS;JScript永远就是MS的JScript,IE永远默认首先支持JScript,其实只是MS和NS之间的积怨罢了,于我们这些使用者本无区别......
② ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准
ReactJS是基于组件化的开发
在Web开发中,我们总需要将变化的数据实时反应到UI上 React是Facebook开源的JavaScript库,用于构建UI
Virtual DOM
Virtual DOM并没有完全实现DOM,Virtual DOM最主要的还是保留了Element之间的层次关系和一些基本属性。
基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。
React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
这里需要注意的是,react并不依赖jQuery,当然我们可以使用jQuery,但是render里面第二个参数必须使用JavaScript原生的getElementByID方法,不能使用jQuery来选取DOM节点。
所有html结构,都可以用js dom来构造,而且能将构造的步骤封装起来,做到「数据-dom结构」的映射。
将普通的DOM以数据结构的形式展现出来
自我认知:
react主要用于构建UI,可用react来构建component,开发时所有的dom构造都基于virtual dom,所谓virtual dom 指的是由js dom 而且能够封装起来形成【数据-dom】结构的映射,具体来说就是一个数据结构,利用react的render将构造好的数据结构插入界面,构造的过程就是根据所提供的数据与要求,设置数据结构中的参数,要怎么做就做成什么。将界面与业务隔离,将重心转移到业务。
AngularJS
http://www.cnblogs.com/xing901022/p/4280299.html
AngularJS:
AngularJs相对于其他的框架来说,有一下的特性:
包括的主要有
1 angularjs模板
视图和模板
2 迭代器过滤
控制器
3 双向绑定
输入框的任何更改会立即反映到模型变量(一个方向),模型变量的任何更改都会立即反映到问候语文本中(另一方向)。
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。
AngularJS应用的解析
AngularJS应用程序的三个组成部分,及它们如何映射到模型-视图-控制器设计模式:
模板是您用HTML和CSS编写的文件,展现应用的视图。 您可给HTML添加新的元素、属性标记,作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记!
应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同,您不需要另外编写侦听器或DOM控制器,因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。
模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象。
AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中,反之亦然。
此外,AngularJS还提供了一些非常有用的服务特性:
如果应用时常要处理大量的动态数据集,并以相对简便和高性能的方式对大型数据表进行显示和变更,React是相当不错的选择。但是React不像AngularJS那样包含完整的功能,举例来说,React没有负责数据展现的控制器
虽然Angular的数据的表达能够非常紧凑, 但是渲染大型数据集依旧被证明是一个痛点. 由于双向数据绑定需要监听每一个可变元素, 数据量变大就会带来显著的性能问题. React, 在另一方面, 使用虚拟DOM来跟踪元素的变化. 当检测到变化时, React会构建一个针对DOM变化的补丁, 然后应用这些补丁. 由于不必在每个元素每次变化时重新渲染整个巨大的table, React相对于其他JavaScript框架有显著的性能提升.
性能
虽然Angular的数据的表达能够非常紧凑, 但是渲染大型数据集依旧被证明是一个痛点. 由于双向数据绑定需要监听每一个可变元素, 数据量变大就会带来显著的性能问题. React, 在另一方面, 使用虚拟DOM来跟踪元素的变化. 当检测到变化时, React会构建一个针对DOM变化的补丁, 然后应用这些补丁. 由于不必在每个元素每次变化时重新渲染整个巨大的table, React相对于其他JavaScript框架有显著的性能提升.
熟悉,学习Node的运行方式以及主流框架的设计模式,有助于深入理解Javascript
有助于深入理解Javascript异步编程
1.gulp/webpack等前端工具
2.前端模块化、组件化、可测试化、性能优化、可伸缩性(scalable)
3.前端自动化测试,(如PhantomJS之类的工具)
1.ES7(ECMAScript 7)
2.html5新特性 webGL openGL
3.React/Web Components
1.《Javascript高级程序设计》
2.《高性能Javascript》
3.《深入浅出Node.js》
4.Google/Stack Overflow/Github
5.关注国内前端牛人的博客或者Github动态
6.Mozilla开发者网站,Web标准、Api等等文档比较详细和权威 https://developer.mozilla.org/zh-CN/
7.慕课网,有很多质量不错的前端课程
8.前端技术发展迭代非常快,需要及时关注新动向
9.选择一个热门的前端开源项目,深入研究其用法和源代码,学习其设计思想,逐步提升自己的前端架构设计能力
10.关注大型技术会议的技术分享,关注大公司的技术团队
11.优秀总结
1.html5新元素、标签、标准、常用的新特性Api
2.css3的使用
3.bootstrap,移动Web、跨浏览器开发
4.react
5.Node.js
持续更新······
如有其他资源或建议,欢迎留言交流~