前端Js框架汇总
　　有些日子没有正襟危坐写博客了，互联网飞速发展的时代，技术更新迭代的速度也在加快。看着Java、Js、Swift在各领域心花路放，也是煞是羡慕。寻了寻.net的消息，也是振奋人心，.net core 1，mono，xamarin等等，但大多都还在狂吼的阶段。其实一直以来对技术的理解是技术服务于业务和产品，产品又在不同程度的推进着技术的演进。
　　Web、无线、物联网、VR、PC从不同方向推进着技术的融合与微创新。程序员在不同业务场景下的角色互换。而随着node.js的出现语言的角色也在发生着转变，Js扮演了越来越重要的角色。也就有了茶余饭后也把了解到的知识整理一下。看过&你的知识需要管理&后，强烈的意识到杂乱且范范的知识储备远不如整理后条理清晰的知识带来好处多。所以，是的，我们需要时不时的回来对掌握的知识梳理归类，以备不时之需。
一、前端框架库：
1.Zepto.js
地址：/doc/zeptojs/
描述：Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，&它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。关于Zepto认知我也是通过与一位腾讯朋友聊天的时候知道的，只作了些基础的了解。
2.SUI Mobile
地址：http://m.sui.taobao.org
描述：SUI Mobile 是一套基于&&开发的UI库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。
用途：你也看到了，他是用于无线端的Web App的开发。
地址：/nodejs/nodejs-tutorial.html (中文网)
描述：Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。
　　Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用， 非阻塞&模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。
　　简单的说 Node.js 就是运行在服务端的 JavaScript。
　　Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
　　Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
　　1. RESTful API
　　这是NodeJS最理想的应用场景，可以处理数万条连接，本身没有太多的逻辑，只需要请求API，组织数据进行返回即可。它本质上只是从某个数据库中查找一些值并将它们组成一个响应。由于响应是少量文本，入站请求也是少量的文本，因此流量不高，一台机器甚至也可以处理最繁忙的公司的API需求。
　　2. 统一Web应用的UI层
　　目前MVC的架构，在某种意义上来说，Web开发有两个UI层，一个是在浏览器里面我们最终看到的，另一个在server端，负责生成和拼接页面。
不讨论这种架构是好是坏，但是有另外一种实践，面向服务的架构，更好的做前后端的依赖分离。如果所有的关键业务逻辑都封装成REST调用，就意味着在上层只需要考虑如何用这些REST接口构建具体的应用。那些后端程序员们根本不操心具体数据是如何从一个页面传递到另一个页面的，他们也不用管用户数据更新是通过Ajax异步获取的还是通过刷新页面。
　　3. 大量Ajax请求的应用
例如个性化应用，每个用户看到的页面都不一样，缓存失效，需要在页面加载的时候发起Ajax请求，NodeJS能响应大量的并发请求。　　总而言之，NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景。
4.angular.Js
地址：/angularjs/angularjs-tutorial.html (中文网)
描述：AngularJS[1]&&诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
用途：通过描述我们应该就能很好的明白AngularJS的真实用途了，MVVM，模块化，自动化双向数据绑定等等。除了简单的dom操作外，更能体现Js编程的强大。当然应用应该视场合而定。
5.JQuery Mobile
地址：.cn/jquerymobile/ & &(中文网)
描述：Query Mobile是&在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。
用途：jQuery Mobile 是创建移动 web 应用程序的框架。
　　　　　　jQuery Mobile 适用于所有流行的智能手机和平板电脑。
　　　　　　jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
6.requirejs
描述：RequireJS的目标是鼓励代码的模块化，它使用了不同于传统&script&标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。
RequireJS以一个相对于的地址来加载所有的代码。 页面顶层&script&标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。
用途：模块化动态加载。
地址：http://cn.vuejs.org/
描述：Vue.js 是用于构建交互式的 Web &界面的库。它提供了&&数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在&&模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。
8.backbone.js
地址：/doc/backbone/
描述：&为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESTful JSON接口连接到应用程序。
地址：/react/docs/why-react.html
描述：React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人认为 React 是&&中的&V（视图）。我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。
地址：http://www.ionic.wang/js_doc-index.html
描述：Ionic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果，尽管通常组件不需要编码，通过框架扩展可以很容易地使用，比如我们的AngularIonic扩展。
Ionic遵循视图控制模式，通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中，我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器&驱动&内部视图来提供交互和UI功能。一个很好的例子就是标签栏（Tab Bar）视图控制器处理点击标签栏在一系列可视化面板间切换。
浏览我们的API文档来了解视图控制器和Ionic中可用的Javascript实用工具。
Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。
二、前端UI框架
地址：http://purecss.org/layouts/
描述：Pure精心设计，只为可以在任何Web项目中使用。为了例证这一点，我们制作了如下几个模板。这些模板都是响应式的，并且没有使用任何JavaScript。
用途：真的是很精美的一个样式框架，便于我们快事构建一些个人产品，当然也可以服务于工作中的一些项目。
2.bootstrap
描述：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
地址：http://www.jeasyui.net/ &(中文网)
描述：easyui是一种基于jQuery的用户界面插件集合。
　　　　　　easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
　　　　　　使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
　　　　　　easyui是个完美支持HTML5网页的完整框架。
　　　　　　easyui节省您网页开发的时间和规模。
　　　　　　easyui很简单但功能强大的。
&4.Ant Design
地址：http://ant.design/
描述：一个 UI 设计语言，一套提炼和应用于企业级后台产品的交互语言和视觉体系
三、可视化组件
描述：ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
2.tableau(收费)
地址：/special/tableau/index.html
描述：Tableau 是桌面系统中最简单的商业智能工具软件，Tableau 没有强迫用户编写自定义代码，新的控制台也可完全自定义配置。在控制台上，不仅能够监测信息，而且还提供完整的分析能力。Tableau控制台灵活，具有高度的动态性。
四、前端构建工具
地址：.cn/
描述：易于使用
　　　　　　通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
　　　　　　构建快速
　　　　　　利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
　　　　　　插件高质
　　　　　　Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
　　　　　　易于学习
　　　　　　通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
五、博客搭建&
1.技术组合
　　HEXO+Github,搭建属于自己的博客。
　　站点：/p/ea9
　　HEXO介绍：Hexo是一个开源的静态博客生成器,用node.js开发,作者是台湾大学生tommy351
　　准备：git &+ node.js + markdown编辑 + gitcafe + 域名
小结：本文做为知识梳理或者说资料梳理类文章，一方面用于自身知识的管理，同时也可以用做一个资料库备查。将持续更新。&
感谢小光同学的支持，Pure的提供很不错。&
阅读(...) 评论() &&ul&&li&如果是因为 Angular 2 采用了 TypeScript ，那么没有多大必要，因为 Angular 2 的难点从来就不来自于 TypeScript，并且其语法上具有绝对的包容性，不论以 TypeScript、ES6 还是 ES5 都能很方便的使用。&br&&/li&&li&如果是因为你的项目足够复杂又不愿写测试（当然这是病得治），你需要依赖于静态类型系统来增强可靠性，或者你天生讨厌 JavaScript 的动态类型特性，那么用 TypeScript 当然是极好的。&/li&&/ul&&br&先谈谈 Angular 2 的包容性：&br&&br&1. 政治最正确的用法（TypeScript with Annotation）&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&err&&@&/span&&span class=&nx&&Component&/span&&span class=&p&&({&/span&
&span class=&nx&&selector&/span&&span class=&o&&:&/span& &span class=&s1&&'my-app'&/span&
&span class=&p&&})&/span&
&span class=&err&&@&/span&&span class=&nx&&View&/span&&span class=&p&&({&/span&
&span class=&nx&&template&/span&&span class=&o&&:&/span& &span class=&s1&&'&h1&Hello World!&/h1&'&/span&
&span class=&p&&})&/span&
&span class=&kr&&class&/span& &span class=&nx&&AppComponent&/span& &span class=&p&&{&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&br&2. 不喜欢 Annotation 的数组标注法&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&kd&&function&/span& &span class=&nx&&AppComponent&/span&&span class=&p&&()&/span& &span class=&p&&{}&/span& &span class=&c1&&//这里换成 class 也是一样&/span&
&span class=&nx&&AppComponent&/span&&span class=&p&&.&/span&&span class=&nx&&annotations&/span& &span class=&o&&=&/span& &span class=&p&&[&/span&
&span class=&k&&new&/span& &span class=&nx&&angular&/span&&span class=&p&&.&/span&&span class=&nx&&ComponentAnnotation&/span&&span class=&p&&({&/span&
&span class=&nx&&selector&/span&&span class=&o&&:&/span& &span class=&s1&&'my-app'&/span&
&span class=&p&&}),&/span&
&span class=&k&&new&/span& &span class=&nx&&angular&/span&&span class=&p&&.&/span&&span class=&nx&&ViewAnnotation&/span&&span class=&p&&({&/span&
&span class=&nx&&template&/span&&span class=&o&&:&/span& &span class=&s1&&'&h1&Hello World!&/h1&'&/span&
&span class=&p&&})&/span&
&span class=&p&&];&/span&
&/code&&/pre&&/div&&br&3. 喜欢 Annotation 但是不喜欢 TypeScript 的伪标注法&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&kd&&var&/span& &span class=&nx&&AppComponent&/span& &span class=&o&&=&/span& &span class=&nx&&angular&/span&&span class=&p&&.&/span&&span class=&nx&&Component&/span&&span class=&p&&({&/span&
&span class=&nx&&selector&/span&&span class=&o&&:&/span& &span class=&s1&&'my-app'&/span&
&span class=&p&&}).&/span&&span class=&nx&&View&/span&&span class=&p&&({&/span&
&span class=&nx&&template&/span&&span class=&o&&:&/span& &span class=&s1&&'&h1&Hello World!&/h1&'&/span&
&span class=&p&&}).&/span&&span class=&nx&&Class&/span&&span class=&p&&({&/span&
&span class=&p&&});&/span&
&span class=&c1&&//可参见 https://angular.io/docs/js/latest/api/core/TypeDecorator-interface.html&/span&
&/code&&/pre&&/div&&br&也就是说，Angular 在用法上并没有对 TypeScript 用户增加什么特殊的语法糖，不论你用 TypeScript、ES6、ES5，都可以获得类似的体验。&br&&br&-------以下是原答案-------&br&&br&TypeScript 的核心是在 JavaScript 上增加了 &b&静态类型&/b& 特性。当然还有其他一些特性，但是不论是相对于 Angular 还是相对于 TypeScript 本身都不重要。&br&&br&TypeScript 相对于 JavaScript 来说并没有多大的学习成本，更多的是主观意愿问题，很多人可能就是因为 JavaScript 没有繁杂的类型系统才喜欢用的。&br&&br&回到正题，先来总结下 Angular 2.0 的差别都在哪。&br&&br&&br&&b&1. 标注（Annotation）&/b&&br&&br&最反直觉的地方，就是 Angular 2.0 把大量定义内容（非逻辑代码）采用 Annotation 的形式放到了元数据当中。形如：&br&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&err&&@&/span&&span class=&nx&&Component&/span&&span class=&p&&({&/span&
&span class=&nx&&selector&/span&&span class=&o&&:&/span& &span class=&s1&&'my-app'&/span&
&span class=&p&&})&/span&
&span class=&err&&@&/span&&span class=&nx&&View&/span&&span class=&p&&({&/span&
&span class=&nx&&template&/span&&span class=&o&&:&/span& &span class=&s1&&'&h1&Hello {{ name }}&/h1&'&/span&
&span class=&p&&})&/span&
&span class=&kr&&class&/span& &span class=&nx&&MyAppComponent&/span& &span class=&p&&{&/span&
&span class=&p&&...&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&br&然而，特别注意，&br&&br&&b&Annotation 不是 TypeScript 的语法！！！！！&/b&&br&&b&Annotation 不是 TypeScript 的语法！！！！！&/b&&br&&b&Annotation 不是 TypeScript 的语法！！！！！ &/b&&br&&br&Angular 2.0 刚刚宣布的时候，采用的是 TypeScript 的超集 AtScript ，Annotation 是 AtScript 的语法，之后 AtScript 被放弃，开发团队改用 TypeScript ，但是 Annotation 继续保留，于是：&br&&br&&b&Annotation 现在是无主语法！！！！！&/b&&br&&b&Annotation 现在是无主语法！！！！！&/b&&br&&b&Annotation 现在是无主语法！！！！！&/b&&br&&br&&br&虽然 TypeScript 在明说了不会支持 Annotation 的情况下默默增加了新版本编译器对其的支持选项，但是这是完全没有任何文档指导的啊！现在唯一有的文档只有 Angular 自己的文档，但是现在 Angular 的文档完全没法看！全没法看！没法看！法看！看！按！&br&&br&&b&&i&注：我当然知道TypeScript在1.5版本已经开始支持ES7的Decorator，看起来很像AtScript的Annotation，但是在被放到文档之前，这个顶多算编译器功能，并不算语言语法。没有发现TypeScript有挂靠任何标准组织，暂时倾向于以其自己的Language Spec为语法标准。&/i&&/b&&br&&br&&br&&b&&i&目前 Proposal 中（&a href=&///?target=https%3A///wycats/javascript-decorators/blob/master/README.md& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&javascript-decorators/README.md at master · wycats/javascript-decorators · GitHub&i class=&icon-external&&&/i&&/a&&/i&&/b&&b&&i&）的 Decorator 仅支持 class 和 property ，而 TypeScript/Angular 中的 Annotation 可以支持到构造函数的参数。都创造新功能了显然并不是一个 Polyfill。&/i&&/b&&br&&br&【截至今天（） TypeScript 的 Spec 里面依然没有任何 Annotation 的内容，你唯一可以看到示例的地方在它的某个 GitHub Issue 里。】&br&&br&&b&2. 模块化&/b&&br&&br&Angular 1.x 采用自己的模块定义，坏处是如果要用非 Angular 的代码一般都要进行一层封装（比如 Angular-Bootstrap）；好处是，大家都这么用惯了。&br&&br&Angular 2.0 采用了 ES6 的标准模块定义，好处是，它是标准的，如果大家都这么干的话相互调用会变得很方便；坏处是，大家一开始都会用的不习惯。&br&&br&ES6 的模块引入示例：&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&kr&&import&/span& &span class=&p&&{&/span&&span class=&nx&&Component&/span&&span class=&p&&,&/span& &span class=&nx&&View&/span&&span class=&p&&,&/span& &span class=&nx&&bootstrap&/span&&span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'angular2/angular2'&/span&&span class=&p&&;&/span&
&/code&&/pre&&/div&有点类似于 Python 的 import 大法，不过别人是 from 放前面的。&br&&br&值得注意的事，这里的引用不再是应用级别的了，而是文件级别的。（仔细想想好像也没什么不对，不管是 #include、using、import、open 等等好像都是文件级的。）&br&&br&&br&&b&3.
数据绑定&/b&&br&&br&首先，一个悲哀的情况是，没有 Scope 了，没有 Controller 了，我需要花一些时间来思考一下人生。&br&&br&看看示例，看起来貌似在 HTML 的语法上是变得更简单了，对应的 TypeScript 实现也是。比如 1.4 的 ngRepeat 有 200 行，2.0 对应的 ngFor 只有 100 行不到了。貌似是使用了 2.0 的 View 和 ViewContainer 等等之类的东东来简化了在处理 Scope 上花的无关代码。&br&&br&但是，View 是什么，Template 是什么，ViewContainer 又是什么，看文档等于什么都没看，看源码整个人都不好了。&br&&br&&br&&b&4. 路由&/b&&br&&br&2.0 终于支持子路由了，1.x 的时候只有一个 ng-view 确实很麻烦。不过 angular-ui 的 ui-router 早就有了，并不是什么大亮点。&br&&br&&br&&b&5. 数据格式化&/b&&br&&br&Filter 终于不叫 Filter 了，改名叫 Pipe 了，和写法的读法一样，避免了有个 filter 叫 filter 这样的神奇情况。这部分也是为数不多的能看源码看的毫无压力的地方。。。&br&&br&&br&&b&总结&/b&&br&&br&TypeScript 确实是一门很优秀的语言，可以深入学习没什么危害。&br&&br&当你把 TypeScript 学得了如指掌的时候，再回来看 Angular ，你会发现。。这和 TypeScript 有毛线关系。。
如果是因为 Angular 2 采用了 TypeScript ，那么没有多大必要，因为 Angular 2 的难点从来就不来自于 TypeScript，并且其语法上具有绝对的包容性，不论以 TypeScript、ES6 还是 ES5 都能很方便的使用。 如果是因为你的项目足够复杂又不愿写测试（当然这是病…
日 更新:&br&更换了域名, &a href=&///?target=http%3A//mashiro.io& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&mashiro.io&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& &br&下面的链接也都进行了更新.&br&日 更新：&br&更新域名的绑定方法。&br&- - - &br&&a href=&///?target=http%3A//www.mashiro.io/2015/09/hexo-guide-1/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hexo系列教程: (一)Hexo介绍&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//www.mashiro.io/2015/09/hexo-guide-2/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hexo系列教程: (二)Hexo的Windows环境搭建&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//www.mashiro.io/2015/09/hexo-guide-3/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hexo系列教程: (三)基于GitHub Page的Hexo搭建&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//www.mashiro.io/2015/09/hexo-guide-4/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hexo系列教程: (四)将独立域名与GitHub Pages的空间绑定&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//www.mashiro.io/2015/09/hexo-guide-5/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hexo系列教程: (五)部署时保证README.md不被渲染&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//www.mashiro.io/2015/09/hexo-guide-6/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hexo系列教程: (六)更换更新主题&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//www.mashiro.io/2016/03/hexo-guide-7/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hexo系列教程: (七)分别部署在Github和Coding的平台进行分流&i class=&icon-external&&&/i&&/a&
日 更新: 更换了域名,
下面的链接也都进行了更新. 日 更新： 更新域名的绑定方法。 - - -
- 前端网页&br&- 后端服务（node）&br&- shell，工具（grunt, FIS）&br&- 爬虫&br&- 数据库（mongodb）&br&- 桌面应用（atom-shell, node-webkit,AIR）&br&- 移动客户端（phonegap, nativescript）&br&- 开源硬件 （Tessel）&br&- GoogleGlass应用&br&- 嵌入语言/脚本&br&&br&。。。&br&&br&是的，JS拯救世界。
- 前端网页 - 后端服务（node） - shell，工具（grunt, FIS） - 爬虫 - 数据库（mongodb） - 桌面应用（atom-shell, node-webkit,AIR） - 移动客户端（phonegap, nativescript） - 开源硬件 （Tessel） - GoogleGlass应用 - 嵌入语言/脚本 。。。 是的，JS…
把整个过程比喻成组装一个机器人的过程&br&&br&HTML是这个机器人的支架 骨骼 关节 什么的&br&&br&CSS是这个机器人外部的涂装 用什么颜色 什么主题（荧光白 钻石红）什么的&br&&br&JS是控制这个机器人行为的 让他抬胳膊 开火 行走 跑步 等等&br&&br&HTML5是一种新型材料 组成的支架 更耐用 更简洁 更清晰 同时提供一些可以调用的新的牛逼的行为（JS API） 比如 获得该机器人坐标 自动缓存数据 绘图功能 等等&br&&br&CSS3是一种改进版涂装 更轻 渲染更快 颜色更加绚丽 &br&&br&Jquery是基于JS封装好的控制行为的库 用这种指令 就可以更快的写出控制机器人行为的内容 用这种东西 写出的指令 开发人员可以节省时间 提高效率 但是没有原生的动作（JS） 他什么都做不了&br&&br&你完成的网站或者web APP就是组装好的机器人 如果你用的是先进的HTML5和CSS3完成的机器人 有一个悲剧就是 只有在高级作战环境下才能全部发挥作用（&a href=&///?target=http%3A///& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&） 如果是低级环境（牛逼哄哄的ie6等） 你的机器人就是一坨废铁
把整个过程比喻成组装一个机器人的过程 HTML是这个机器人的支架 骨骼 关节 什么的 CSS是这个机器人外部的涂装 用什么颜色 什么主题（荧光白 钻石红）什么的 JS是控制这个机器人行为的 让他抬胳膊 开火 行走 跑步 等等 HTML5是一种新型材料 组成的支架 更耐…
不要作梦吧， angular1.x系列需要是用jquery jqLite对DOM进行了层层封装，但大多数小白，有时还可能是你的同事，还是对jquery念念不忘，在angular里面使用大量操作DOM的逻辑，当你要维护他们的代码还是要有DOM基础。 更现实的是，使用angular等MVVM的公司太少了，都是初创公司或大公司的一些不起眼的小组，核心部门由于有老人们把持着，他们在DOM沉浸了这么久，要他们放弃是非常费劲的。&br&&br&此外，angular1.x是在最优情况下不使用DOM，但逼急了还是不得不写DOM，另你为angular写插件时，还是需要自己操作DOM。到了angular2.0，那些巨头们认为，既然新浏览器的DOM API接口如此一致了，他们就不会在angular2.0对DOM进行封装，并且大肆改进，估计让用户回归操作DOM的事实不远了。&br&&br&再次，像移动端，不与DOM打交道是不可能的。在那个性能底下的环境中，他们连jquery也不敢用。&br&&br&总之，做前端是不可能不与DOM打交道。DOM兼容能力是考虑一个高级前端的重要指标。
不要作梦吧， angular1.x系列需要是用jquery jqLite对DOM进行了层层封装，但大多数小白，有时还可能是你的同事，还是对jquery念念不忘，在angular里面使用大量操作DOM的逻辑，当你要维护他们的代码还是要有DOM基础。 更现实的是，使用angular等MVVM的公司太…
1. 什么叫“疯狂使用”？链式调用你用不好就可以不用。除了动画，jQuery有强制要求你链式调用吗？就连ajax你也可以完全不去管deferred，就按照callback方式写。&br&&br&2. “泛滥的插件扩展，质量良莠不齐”，这能怪jQuery？它提供了这个可扩展的方便，至于怎么用，这就看使用者的自觉了。什么都懒得写，完全依赖插件，那还是不要追求那么多效果。&br&&br&3. “更有甚者，盲目的使用jQuery，甚至误以为jQuery是一门新兴独立的语言”，这真的不怪jQuery，它做得太成功，掩盖了其他东西的光芒，只能怪使用者一叶障目不见泰山。事实上，当你的产品面向PC浏览器用户时，jQuery能给你很大的帮助，但当你的脚步走得远一点，遇到移动互联网用户，或者转身去做Node.js时，就应该能知道jQuery不是一切。不过话说回来，jQuery好用，名气大，这本身没有什么错。&br&&br&4. “随着浏览器日益标准化，新的DOM接口（诸如：querySelector、querySelectorAll等）已经可以渐渐取代jQuery的选择器，强大的选择器似乎正在渐渐的丧失光芒”，是的，如果你的产品所面向的用户端是现代浏览器，那么可以逐渐脱离jQuery。但我要提醒一句，jQuery不只是选择器，起码还包括样式(各种CSS3私有前缀哦)，ajax(原生xhr真不如promise化的ajax好用)，动画(这个可以用transition和animation代替，但动画流程管理和css3私有前缀就呵呵呵呵了)。&br&&br&总结：jQuery是在特定时空内，在特定环境下解决特定问题的一个类库，不能解决一切问题。将心比心，你不能因为它做得好名气大而怪他掩盖js的光辉，不能因为插件水平不行而责怪它提供了易扩展的机制，也不该因为它有局限而责怪它没有做得更好。用与不用，取决于你和你的项目，离开它你和你的用户会不会过得更好，这是关键。
1. 什么叫“疯狂使用”？链式调用你用不好就可以不用。除了动画，jQuery有强制要求你链式调用吗？就连ajax你也可以完全不去管deferred，就按照callback方式写。 2. “泛滥的插件扩展，质量良莠不齐”，这能怪jQuery？它提供了这个可扩展的方便，至于怎么用…
官方教程如中学生的 性教育课，你可能会脸红，但绝对进入不了高潮！&br&&br&没撸过Python，但从ng2 beta开始撸过，撸主本人按这个路径学的 ，不是按重要性排序4567可以互换顺序，仅供参考：&br&————————————&br&假设你已经懂html5, css3, Javascript, bootstrap, jQuery 等。&br&（对于没有前端基础，上来就要撸ng2的，先看 &a href=&/question//answer/& class=&internal&&新手小白想系统性学习angular2，不知从何学起，求大神指点？ - 吴盐以兑的回答&/a&）&br&&br&&b&第一步&/b&【0,1, ...rest】： &b&ES6/ ES2015&/b&&br&现在学JS，ES6是必备啦。&br&&b&第二步&/b&【99乘法表】： &b&TypeScript &/b&&br&也可以从这一步开始，但有第一步这个会理解的更快。同时，这一步我觉得重的要的还是OO思想，原来JS太开放，各种坑不利于软件工程化。&br&&b&第三步&/b&【方程式】：&b&Angular 2 Basics, Material Design( Lite ) 等&/b&&br&一些基础的概念，如Component, Module, Router, Pipe 等&br&&b&第四步&/b&【排列组合】：&b&Javascript Reactive Programming&/b&&br&因为Angular 2 全面拥抱 RxJs, 所以这个我觉得很重要，主是是Observable的思想。&br&&b&第五步&/b&【数列极限】：&b&Redux 概念 &/b&&br&不需要学 React + Redux ， 主要是概念和原理。&br&&b&第六步&/b&【几何学】&b&：相关命令&/b&&b&工具（wepack， Angular-Cli）&/b&&br&webpack以前做前端的已懂的略过。&br&调试及打包。最新ng tools已经内置Wepack并作为默认打包工具。（完美）&br&Webpack 套路与 gulp grunt不一样。&br&&b&第七步 【&/b&行列式&b&】：测试&/b&&br&哎，想当年哪能想到前端也要写单元测试。&br&&b&第八步【&/b&高考啦&b&】： &/b&&b&Angular2, RxJS, and ngrx/store 开始做个像样的项目！&/b&&br&！！！ 此处才能有有高潮，官方教程没有！！！&br&&br&（级别只是类比，不准确可以建议修改，但求别喷）&br&————————————&br&先这么多，看点赞数量我再补允每一步的资源。&br&&b&两个月内上面这些认真学完弄懂的，赶紧给我发个简历，工资 10K 起步（北京 或 杭州），我招 。&/b&&br&我是认真的，所有调侃并不回复。
官方教程如中学生的 性教育课，你可能会脸红，但绝对进入不了高潮！ 没撸过Python，但从ng2 beta开始撸过，撸主本人按这个路径学的 ，不是按重要性排序4567可以互换顺序，仅供参考： ———————————— 假设你已经懂html5, css3, Javascript, bootst…
是bootstrap.css里这处影响的：&br&* {&br&
-webkit-box-sizing: border- &br&
-moz-box-sizing: border-box；&br&
box-sizing: border- &br&}&br&盒模型被悄悄改了，简单改可以这样：&br&&a href=&///?target=http%3A///vamajapova/edit%3Fhtml%2Coutput& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/vamajapova/ed&/span&&span class=&invisible&&it?html,output&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&br&另外，你应该把代码帖到jsbin里看着干净点
是bootstrap.css里这处影响的： * { -webkit-box-sizing: border- -moz-box-sizing: border-box； box-sizing: border- } 盒模型被悄悄改了，简单改可以这样：
另外，你应该把代码帖到jsbin里看着干净点
可参考 &a data-hash=&fd3fdaf3cd2& href=&///people/fd3fdaf3cd2& class=&member_mention& data-hovercard=&p$b$fd3fdaf3cd2&&@CSS魔法&/a& 翻译的 &a href=&///?target=https%3A///cssmagic/blog/issues/59& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&[译] jQuery 3 有哪些新东西 · Issue #59 · cssmagic/blog · GitHub&i class=&icon-external&&&/i&&/a&
谢邀。&br&&br&曾经用了大概一个礼拜左右，后来换回来了 。个人觉得CS的一些语法简化还是不错的（尤其是array comprehension和arrow function），但同时还引入了一些semantic上的不同，掩盖了很多JS本身的东西。比如用class掩盖了构造函数和原型链，把JS的原型继承硬套上了OO的外衣。还有一些不太明显的行为上的差异，比如variable shadowing（因为不用var所以在一个函数里没法覆盖同名的外层变量），implicit return（总是会返回最后一个expression的值）之类。另外就是有时候能省括号有时候又不能省... 这些问题导致我在写CS的时候会无法遏制地在脑子里把写下来的CS人工编译成JS... 时间长了感觉比写原生JS还累。&br&&br&也就是说如果你深入了解并习惯了JS的各种细节之后，换到CS反而会带来一层额外的思考负担。这种情况在长期以JS作为主力语言的开发者身上比较常见。相比之下，新手、从其他语言转过来的、或者是主力语言不是JS并且没有也不想去了解JS各种坑的开发者会比较容易接受CS（我估计CS的一大部分用户都是rails开发者）。&br&&br&另一方面就是生态圈上的原因：CS的项目接到Pull Request的概率会低很多（写CS的会愿意开JS项目的PR，但写JS的一般不乐意开CS项目的PR），不利于开源协作。
谢邀。 曾经用了大概一个礼拜左右，后来换回来了 。个人觉得CS的一些语法简化还是不错的（尤其是array comprehension和arrow function），但同时还引入了一些semantic上的不同，掩盖了很多JS本身的东西。比如用class掩盖了构造函数和原型链，把JS的原型继承…
谢邀。&br&&br&既然大牛都是批评态度，那么我这种正面评价 React 的小菜还是诚惶诚恐。&br&&br&其实在编程界，又有多少东西称得上是创意，有多少是是不重复，有多少是完美的呢？&br&&br&React 可从来没说过自己是不重复的、完美的、什么什么的，它很谦虚地说自己就是一个 View ，就是用来做 UI 的，一点点微不足道的工作，这比 angular 的侵入性弱化多了。它的思想当然不是什么新鲜事物， abstract renderer 嘛，rendering hierarchy 嘛，scene graph 嘛，component lifecycle 嘛，UI 界游戏界用了多少年了，就连 DOM 树，究其根本，不就是这么些东西吗？好用就行了管它新不新鲜？&br&&br&任何技术都有他的弊端，React 肯定也有，但 React 没能填补的空白，React 留下的问题，岂不是新来者的机会？这又有什么可怕的呢？&br&&br&如果 React 没有解决任何痛点，那么它是无缘无故火起来的？FLAG 和 MS，乃至于国内的阿里，这些巨头主推的技术就一定能火？&br&&br&不能光听大牛怎么说，大牛说的，有可能他没去用过，有可能他是 React 竞争对手，也有可能他对新事物就是有一些偏见。&br&&br&还是要自己去用一用，写一个 helloworld 又不麻烦。&br&&br&用完你有可能会发现这不是你的 style，或者你发现其实也没那么遭， React 写组件起来还是很溜的嘛，但这就是你自己的观点了。就不是别人告诉你一个结论，这玩意好不好，你就傻傻的听了。&br&&br&一点点小菜之见，大家轻喷。
谢邀。 既然大牛都是批评态度，那么我这种正面评价 React 的小菜还是诚惶诚恐。 其实在编程界，又有多少东西称得上是创意，有多少是是不重复，有多少是完美的呢？ React 可从来没说过自己是不重复的、完美的、什么什么的，它很谦虚地说自己就是一个 View ，…
Angular都能搞定，还搞不定React&br&先看官网的最弱智的例子 &a href=&///?target=https%3A//facebook.github.io/react/docs/tutorial.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Tutorial | React&i class=&icon-external&&&/i&&/a&&br&再看官网的flux的例子&a href=&///?target=https%3A//facebook.github.io/flux/docs/todo-list.html%23content& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Flux | Application Architecture for Building User Interfaces&i class=&icon-external&&&/i&&/a&&br&再看react router的例子&a href=&///?target=https%3A///rackt/react-router& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&rackt/react-router · GitHub&i class=&icon-external&&&/i&&/a&&br&再看redux的例子&a href=&///?target=https%3A///rackt/redux& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/rackt/redux&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&可以去写项目了
Angular都能搞定，还搞不定React 先看官网的最弱智的例子
再看官网的flux的例子 再看react router的例子 再看redux的例子…
似乎大多数回答是一年前的了
更新一下这里的一些争议吧 &br&&br&JQuery从1.7版本开始将bind(),live()和delegate()方法合并成了on()方法了&br&同样unbind(),die()和undelegate()方法也合并成了off()方法&br&&br&新旧API对比:&br&&br&$('a').bind('click', myHandler); &br&$('a').on('click', myHandler); &br&&br&$('form').bind('submit', { val: 42 }, fn); &br&$('form').on('submit', { val: 42 }, fn); &br&&br&$(window).unbind('scroll.myPlugin'); &br&$(window).off('scroll.myPlugin'); &br&&br&$('.comment').delegate('a.add', 'click', addNew); &br&$('.comment').on('click', 'a.add', addNew); &br&&br&$('.dialog').undelegate('a', 'click.myDlg'); &br&$('.dialog').off('click.myDlg', 'a');
&br&&br&$('a').live('click', fn); &br&$(document).on('click', 'a', fn); &br&&br&$('a').die('click'); &br&$(document).off('click', 'a');&br&&br&了解更多:&a href=&///?target=http%3A////jquery-1-7-released/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/2011/11&/span&&span class=&invisible&&/03/jquery-1-7-released/&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&
似乎大多数回答是一年前的了 更新一下这里的一些争议吧 JQuery从1.7版本开始将bind(),live()和delegate()方法合并成了on()方法了 同样unbind(),die()和undelegate()方法也合并成了off()方法 新旧API对比: $('a').bind('click', myHandler); $('a').on('clic…
关于这些问题呢，我已经回答不少。首先，我个人认为jqm并不是一个非常好的移动应用框架，首先这个框架里面集成了很多的ui组件。当然这些ui组件可以剥离开，但是这个框架依然显得有点重，而且对于动画，手势得又不及sencha touch。好上手，这是值得肯定得，问题是好用嘛？我个人觉得不好用。&br&&br&对于做Phonegap的应用的话我觉得要抱着写web app的态度去写移动应用。尽可能轻量，ui自己架构自己渲染（因为设计是多变的），手势交互用插件实现（&a href=&///?target=http%3A//cubiq.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Matteo Spinelli's Cubiq.org&i class=&icon-external&&&/i&&/a& 这个团队好多累死的插件，当然github还有很多），然后前端架构的话爱用框架可以用框架，也可以自己实现架构方案（我是后者），前端开发过程中可以用一些js模板，还可以用轻量的js选择器jqmobi，帮助你写代码。&br&&br&我觉得如果你真的要找哪款应用是用jquery mobile + phonegap写的话，你只能够在phonegap的官方网站上面找了，因为那里很多example app，你可以作为对比和参考。&br&&br&至于你说如何区分那个app是原生的还是web的，我觉得没有必要，因为要是真的模仿的话，html5已经可以达到以假乱真的地步了，没有这个必要。&br&&br&如果你还想要了解更多，直接奉上本人的开发经验分享ppt：&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&您访问的网站不存在&i class=&icon-external&&&/i&&/a& 有关于phonegap开发的经验，客户端的架构，以及技巧等。&br&&br&上面ppt的地址已经消失，大家可以看我最近分享的文章：&a href=&///?target=http%3A//q.com/cn/articles/hybrid-app-development-combat& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&/cn/articles/h&/span&&span class=&invisible&&ybrid-app-development-combat&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&br&希望对提问的人有帮助。
关于这些问题呢，我已经回答不少。首先，我个人认为jqm并不是一个非常好的移动应用框架，首先这个框架里面集成了很多的ui组件。当然这些ui组件可以剥离开，但是这个框架依然显得有点重，而且对于动画，手势得又不及sencha touch。好上手，这是值得肯定得，…
不是大神，但有经验。&br&1. 用ES6, webpack, react-hot-loader....详细内容参照&a href=&///?target=http%3A//mern.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&MERN v2.0 - Build production ready universal apps easily&i class=&icon-external&&&/i&&/a&&br&2. 根据你的需求，选择middleware (thunk vs saga?...)&br&3. &a href=&///?target=https%3A///gaearon/redux-devtools& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/gaearon/redu&/span&&span class=&invisible&&x-devtools&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&4. 关于文件的结构，小项目用类型分类，大项目用feature分类&br&5. 区分smart component (know the state) 和 dump component (stateless)&br&6. component里不要出现任何async calls，交给action creator来做&br&7. reducer尽量简单，复杂的交给action creator&br&8. reducer里return新state的时候：&br&&br&&div class=&highlight&&&pre&&code class=&language-text&&// add new item to state array
// bad and does not work
case &ADD&:
return state.push(newItem);
case &ADD&:
&/code&&/pre&&/div&&br&&div class=&highlight&&&pre&&code class=&language-text&&// delete new item to state array
// bad and does not work
case &DELETE&:
return state.splice(index, 1);
case &DELETE&:
return state.slice(0, index).concat(state.slice(index + 1));
&/code&&/pre&&/div&&br&&div class=&highlight&&&pre&&code class=&language-text&&// update new item to state array
// First way
case &EDIT&:
return state.slice(0, index)
.concat([{id: &id&, value: &newValue&}])
.slice(index + 1);
// Second way
case &EDIT&:
return state.map((item) =& {
if (item.id === &id&) {
value: &newValue&
&/code&&/pre&&/div&9. action creator里，用promise/async/await以及redux-thunk来帮助你完成想要的功能&br&10. 在test里不管你用tape还是mocha，请用&a href=&///?target=http%3A//airbnb.io/enzyme/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&airbnb.io/enzyme/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&11. 有些时候有些项目你并不需要redux
不是大神，但有经验。 1. 用ES6, webpack, react-hot-loader....详细内容参照 2. 根据你的需求，选择middleware (thunk vs saga?...) 3.
4. 关于文件的结构，小项目用类型分…
根本整理不完。&br&&br&等小明花了一年时间整理完了，结果又出来一堆前端框架。&br&&br&书只要一出版，马上过时。
根本整理不完。 等小明花了一年时间整理完了，结果又出来一堆前端框架。 书只要一出版，马上过时。
&a href=&///?target=http%3A//ant.design/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&ant.design/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设计师和前端工程师经过大量的项目实践和总结，希望能抽象出一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。&br&&br&不谢！
Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设计师和前端工程师经过大量的项目实践和总结，希望能抽象出一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前…
刚起床，醒醒脑，分别简约的回答下三个问题：&br&&br&&b&Require、Seajs模块器加载的原理是怎么样的？&/b&&br&1. 定义一套依赖规则， 如AMD CMD CommonJS Modules规范，规范即规则&br&2. 加载入口文件及其依赖，原理即按依赖关系递归执行 document.createElement('script')
&br&3. 维护模块从初始到销毁的生命周期&br&&br&&b&模块加载都有什么方式？&/b&&br&1. 手动模式 - 人肉管理&br&2. 自动模式- 模块加载器管理&br&3. 混合模式 - 1，2结合&br&&br&&b&不同方式各有什么利弊？&/b&&br&1. 首先千万别拿着锤子看啥都是钉子，依场景使用&br&2. 基于约定的模块依赖管理相比人肉是更好实践，但谨记1&br&3. 使用了模块管理器后，必然会引入复杂度，这是复杂度的转移，如何驾驭这些也是成为优秀工程师的修炼之路&br&4. 使用模块加载器后最头疼的是构建发布问题，使用seajs的童鞋应该深有体会吧，（广告时间）推荐 ModJS自动零配置构建seajs项目：&a href=&///?target=https%3A///modjs/mod/tree/master/example/buildseajs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&mod/example/buildseajs at master · modjs/mod · GitHub&i class=&icon-external&&&/i&&/a&&br&零配置构建requrejs项目：&a href=&///?target=https%3A///modjs/mod/tree/master/example/buildrequirejs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&mod/example/buildrequirejs at master · modjs/mod · GitHub&i class=&icon-external&&&/i&&/a&
刚起床，醒醒脑，分别简约的回答下三个问题： Require、Seajs模块器加载的原理是怎么样的？ 1. 定义一套依赖规则， 如AMD CMD CommonJS Modules规范，规范即规则 2. 加载入口文件及其依赖，原理即按依赖关系递归执行 document.createElement('script') 3. …
&a href=&///?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&豆瓣市集&i class=&icon-external&&&/i&&/a& 移动版本全部使用了 es6+react+redux 的方式来开发&br&&br&最新的版本为了解决 css 全局命名冲突，我们使用了
css-modules 的方式来组织样式&br&&br&组件化的最大的特点就是当你的项目里有了足够的 components 时，很多新需求，其实完全就可以直接套几个 components 就直接实现了。&br&&br&另外，使用 redux 真爽啊！！！
移动版本全部使用了 es6+react+redux 的方式来开发 最新的版本为了解决 css 全局命名冲突，我们使用了 css-modules 的方式来组织样式 组件化的最大的特点就是当你的项目里有了足够的 components 时，很多新需求，其实完全就可以直接套几个 compone…
用户本地的图片体积都很大，尺寸不变的绘制的确会失败。&br&&br&如果要保证尺寸不变的上传，一般就直接FileReader读取文件然后塞到formdata中，不压缩上传文件，还想前端压缩，估计只能尝试把大图分解成多个瓦片来逐个绘制然后逐个上传，后端再拼接实现了。&br&&br&如果能接受修改绘制尺寸，那就好办多了，把大图绘制到一个等比的小canvas上，然后读取这个小canvas的base64上传。&br&&br&另外，上传base64字符串其实不是一个很好的方案，base64的体积很大，这里贴一下twitter的图片上传逻辑：&br&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&c1&&// 压缩前的代码&/span&
&span class=&p&&...&/span&
&span class=&nx&&convertCanvasToBlob&/span&&span class=&o&&:&/span&&span class=&kd&&function&/span&&span class=&p&&(&/span&&span class=&nx&&e&/span&&span class=&p&&){&/span&&span class=&kd&&var&/span& &span class=&nx&&t&/span&&span class=&p&&,&/span&&span class=&nx&&i&/span&&span class=&p&&,&/span&&span class=&nx&&s&/span&&span class=&p&&,&/span&&span class=&nx&&n&/span&&span class=&p&&,&/span&&span class=&nx&&r&/span&&span class=&p&&,&/span&&span class=&nx&&a&/span&&span class=&p&&,&/span&&span class=&nx&&o&/span&&span class=&p&&,&/span&&span class=&nx&&c&/span&&span class=&p&&;&/span&&span class=&k&&for&/span&&span class=&p&&(&/span&&span class=&nx&&n&/span&&span class=&o&&=&/span&&span class=&s2&&&image/jpeg&&/span&&span class=&p&&,&/span&&span class=&nx&&t&/span&&span class=&o&&=&/span&&span class=&nx&&e&/span&&span class=&p&&.&/span&&span class=&nx&&toDataURL&/span&&span class=&p&&(&/span&&span class=&nx&&n&/span&&span class=&p&&),&/span&&span class=&nx&&i&/span&&span class=&o&&=&/span&&span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&atob&/span&&span class=&p&&(&/span&&span class=&nx&&t&/span&&span class=&p&&.&/span&&span class=&nx&&split&/span&&span class=&p&&(&/span&&span class=&s2&&&,&&/span&&span class=&p&&)[&/span&&span class=&mi&&1&/span&&span class=&p&&]),&/span&&span class=&nx&&r&/span&&span class=&o&&=&/span&&span class=&k&&new&/span& &span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&ArrayBuffer&/span&&span class=&p&&(&/span&&span class=&nx&&i&/span&&span class=&p&&.&/span&&span class=&nx&&length&/span&&span class=&p&&),&/span&&span class=&nx&&a&/span&&span class=&o&&=&/span&&span class=&k&&new&/span& &span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&Uint8Array&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span&&span class=&p&&),&/span&&span class=&nx&&s&/span&&span class=&o&&=&/span&&span class=&mi&&0&/span&&span class=&p&&;&/span&&span class=&nx&&s&/span&&span class=&o&&&&/span&&span class=&nx&&i&/span&&span class=&p&&.&/span&&span class=&nx&&length&/span&&span class=&p&&;&/span&&span class=&nx&&s&/span&&span class=&o&&++&/span&&span class=&p&&)&/span&&span class=&nx&&a&/span&&span class=&p&&[&/span&&span class=&nx&&s&/span&&span class=&p&&]&/span&&span class=&o&&=&/span&&span class=&nx&&i&/span&&span class=&p&&.&/span&&span class=&nx&&charCodeAt&/span&&span class=&p&&(&/span&&span class=&nx&&s&/span&&span class=&p&&);&/span&&span class=&k&&return&/span& &span class=&nx&&o&/span&&span class=&o&&=&/span&&span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&WebKitBlobBuilder&/span&&span class=&o&&||&/span&&span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&MozBlobBuilder&/span&&span class=&p&&,&/span&&span class=&nx&&o&/span&&span class=&o&&?&/span&&span class=&p&&(&/span&&span class=&nx&&c&/span&&span class=&o&&=&/span&&span class=&k&&new&/span& &span class=&nx&&o&/span&&span class=&p&&,&/span&&span class=&nx&&c&/span&&span class=&p&&.&/span&&span class=&nx&&append&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span&&span class=&p&&),&/span&&span class=&nx&&c&/span&&span class=&p&&.&/span&&span class=&nx&&getBlob&/span&&span class=&p&&(&/span&&span class=&nx&&n&/span&&span class=&p&&))&/span&&span class=&o&&:&/span&&span class=&k&&new&/span& &span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&Blob&/span&&span class=&p&&([&/span&&span class=&nx&&r&/span&&span class=&p&&],{&/span&&span class=&nx&&type&/span&&span class=&o&&:&/span&&span class=&nx&&n&/span&&span class=&p&&})}&/span&
&span class=&p&&...&/span&
&/code&&/pre&&/div&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&kd&&function&/span& &span class=&nx&&convertCanvasToBlob&/span&&span class=&p&&(&/span&&span class=&nx&&canvas&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&kd&&var&/span& &span class=&nx&&format&/span& &span class=&o&&=&/span& &span class=&s2&&&image/jpeg&&/span&&span class=&p&&;&/span&
&span class=&kd&&var&/span& &span class=&nx&&base64&/span& &span class=&o&&=&/span& &span class=&nx&&canvas&/span&&span class=&p&&.&/span&&span class=&nx&&toDataURL&/span&&span class=&p&&(&/span&&span class=&nx&&format&/span&&span class=&p&&);&/span&
&span class=&kd&&var&/span& &span class=&nx&&code&/span& &span class=&o&&=&/span& &span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&atob&/span&&span class=&p&&(&/span&&span class=&nx&&base64&/span&&span class=&p&&.&/span&&span class=&nx&&split&/span&&span class=&p&&(&/span&&span class=&s2&&&,&&/span&&span class=&p&&)[&/span&&span class=&mi&&1&/span&&span class=&p&&]);&/span&
&span class=&kd&&var&/span& &span class=&nx&&aBuffer&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&ArrayBuffer&/span&&span class=&p&&(&/span&&span class=&nx&&code&/span&&span class=&p&&.&/span&&span class=&nx&&length&/span&&span class=&p&&);&/span&
&span class=&kd&&var&/span& &span class=&nx&&uBuffer&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&Uint8Array&/span&&span class=&p&&(&/span&&span class=&nx&&aBuffer&/span&&span class=&p&&);&/span&
&span class=&k&&for&/span&&span class=&p&&(&/span&&span class=&kd&&var&/span& &span class=&nx&&i&/span& &span class=&o&&=&/span& &span class=&mi&&0&/span&&span class=&p&&;&/span& &span class=&nx&&i&/span& &span class=&o&&&&/span& &span class=&nx&&code&/span&&span class=&p&&.&/span&&span class=&nx&&length&/span&&span class=&p&&;&/span& &span class=&nx&&i&/span&&span class=&o&&++&/span&&span class=&p&&){&/span&
&span class=&nx&&uBuffer&/span&&span class=&p&&[&/span&&span class=&nx&&i&/span&&span class=&p&&]&/span& &span class=&o&&=&/span& &span class=&nx&&code&/span&&span class=&p&&.&/span&&span class=&nx&&charCodeAt&/span&&span class=&p&&(&/span&&span class=&nx&&i&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&kd&&var&/span& &span class=&nx&&Builder&/span& &span class=&o&&=&/span& &span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&WebKitBlobBuilder&/span& &span class=&o&&||&/span& &span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&MozBlobBuilder&/span&&span class=&p&&;&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&nx&&Builder&/span&&span class=&p&&){&/span&
&span class=&kd&&var&/span& &span class=&nx&&builder&/span& &span class=&o&&=&/span& &span class=&k&&new&/span& &span class=&nx&&Builder&/span&&span class=&p&&;&/span&
&span class=&nx&&builder&/span&&span class=&p&&.&/span&&span class=&nx&&append&/span&&span class=&p&&(&/span&&span class=&nx&&buffer&/span&&span class=&p&&);&/span&
&span class=&k&&return&/span& &span class=&nx&&builder&/span&&span class=&p&&.&/span&&span class=&nx&&getBlob&/span&&span class=&p&&(&/span&&span class=&nx&&format&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span& &span class=&k&&else&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&k&&new&/span& &span class=&nb&&window&/span&&span class=&p&&.&/span&&span class=&nx&&Blob&/span&&span class=&p&&([&/span& &span class=&nx&&buffer&/span& &span class=&p&&],&/span& &span class=&p&&{&/span&&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&nx&&format&/span&&span class=&p&&});&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&br&这是它触屏版上传前的图片压缩逻辑之一，就是在前端把base64转成二级制数据，这个数据体积相比base64小很多，还可以塞到formdata中提交，不过不支持android 2及以下，ios 5.1及以下版本的浏览器。&br&&br&我猜你的业务可能也是想实现类似这样的图片上传功能，分析twitter的源码可能会对你有一些帮助&br&&br&====【补刀】====&br&评论中，提问者
&a data-hash=&d6e39f3612aadd8fccb4c4eebfa93b81& href=&///people/d6e39f3612aadd8fccb4c4eebfa93b81& class=&member_mention& data-editable=&true& data-title=&@亦俊& data-hovercard=&p$b$d6e39f3612aadd8fccb4c4eebfa93b81&&@亦俊&/a& 找到了一个开源的实现 &a href=&///?target=https%3A///stomita/ios-imagefile-megapixel& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&stomita/ios-imagefile-megapixel · GitHub&i class=&icon-external&&&/i&&/a& 这个已经实现了瓦片绘制、最终结果转Blob，考虑全面，应该可以拿来直接用了
用户本地的图片体积都很大，尺寸不变的绘制的确会失败。 如果要保证尺寸不变的上传，一般就直接FileReader读取文件然后塞到formdata中，不压缩上传文件，还想前端压缩，估计只能尝试把大图分解成多个瓦片来逐个绘制然后逐个上传，后端再拼接实现了。 如果能…
已有帐号？
无法登录？
社交帐号登录}