Javascript框架及相关知识

综合框架

• arale.js{:target=”_blank”} 支付宝的前端基础类库 Arale 基于 SeaJS 和 jQuery 等，目前新构建 2.0 版本。 demo: 计算器{:target=”_blank”}
• KISSY{:target=”_blank”} 是由淘宝前端攻城师们发起创建的一个开源 JS 类库。
• Ender.js{:target=”_blank”} - Ender is a full featured package manager for your browser. 作者 Dustin Diaz{:target=”_blank”}

模块加载框架 Javascript模块化{:target=”_blank”}

• Seajs{:target=”_blank”} 由支付宝团队开源，基于（CommonJS{:target=”_blank”}的一种实现，类似的模块加载框架：,,）和jquery的前端框架
• BravoJS
• Require.js{:target=”_blank”}
• FlyScript
• AlmondJS{:target=”_blank”} A minimal AMD API implementation for use after optimized builds
• Amdjs{:target=”_blank”} The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.
• ozjs{:target=”_blank”} 土豆网的开源模块加载js库
• npmjs{:target=”_blank”} 后端依赖加载工具，包管理工具
• Yarn{:target=”_blank”} 后端依赖加载工具，包管理工具
• Yarn vs npm：你需要知道的一切
• UMD{:target=”_blank”}

模板框架

• Handlebars.js{:target=”_blank”} provides the power necessary to let you build semantic templates effectively with no frustration.
• mustache.js{:target=”_blank”} - Logic-less templates with Javascript.
• Eco{:target=”_blank”}: Embedded CoffeeScript templates
• Jade{:target=”_blank”}: Node Template Engine

MVXX框架 （初步选择Emberjs，Knockoutjs 和 Canjs）

• The Top 10 Javascript MVC Frameworks Reviewed{:target=”_blank”}
• TodoMVC{:target=”_blank”} 「官网{:target=”_blank”}」A common learning application for popular JavaScript MV* frameworks
• 最佳实践之 Javascript MVC{:target=”_blank”}
• Regular.js a concise, flexible framework for creating data-driven component.
• 前端框架Regularjs的设计与选型之路
• Vue.js v2.0 中文{:target=”_blank”} 官网{:target=”_blank”}
• Nuxt.js 是一个基于 Vue.js 的通用应用框架。 类似于 Next.js 之于 React.js。
• 2018年最值得关注的30个Vue开源项目
• NUXT Vue.js 通用应用框架

• Rant about VueJS + ClojureScript + Pug 一次 Vue 与 ClojureScript 结合的尝试记录。

• Backbone.js{:target=”_blank”}
  • Backbone.js vs Ember.js{:target=”_blank”}
  • What are the key differences between Ember.js (formerly SproutCore 2.0) and Backbone.js?{:target=”_blank”}
  • Marionette{:target=”_blank”} Backbone.Marionette 组合应用库，用于简化大型 Javascript 应用。
  • TroraxJS{:target=”_blank”} 将 Backbone 和 Handlebars 结合的框架，适合大型可扩展的 Web 应用。
  • RivetsJS{:target=”_blank”} 轻量强大的数据模板绑定的解决方案，可与 Backbone 等合用。
  • ChaplinJS{:target=”_blank”} 可与 Backbone 结合使用，也可以与Exoskeleton{:target=”_blank”}（可替代 Backbone 系列，仅 8k） 结合使用。
• Emberjs{:target=”_blank”}
  • 学习心得{:target=”_blank”}
  • Ember/Handlebars template precompilation with Play{:target=”_blank”}
  • Ember data{:target=”_blank”} 与RubyOnRails结合较好
  • ember-rest{:target=”_blank”} Simple RESTful resources in Ember.js
  • Beginning Ember.js on Rails{:target=”_blank”}
  • The architecture of Ember.js apps - data{:target=”_blank”}
  • ember.js and the server{:target=”_blank”}
  • AngularJS vs Emberjs{:target=”_blank”} 英文贴，讨论哪个更好，其中提到AngularJS的机制有2000个绑定的限制，做大型系统更应该选Emberjs。
  • Fire Up Ember.js{:target=”_blank”} 代码实例录像，需购买？
  • EMBLR, THE EMBER.JS TUMBLR{:target=”_blank”}
    • Experimenting with the Architecture of Ember.js{:target=”_blank”}
• knockoutjs{:target=”_blank”} Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern
  • 优点：HTML中的data-binding属性可以方便地与其他模板框架并用。如：Django合用的比较案例{:target=”_blank”}
  • 在线练习学习网站{:target=”_blank”}
  • BootStrap网站使用 knockoutjs的文章{:target=”_blank”} ，说明了Knockoutjs比Emberjs更适合改造网站的原因。
• AngularJS{:target=”_blank”} HTML enhanced for web apps! MIT-licensed, Super-powered by Google!
  • angularui{:target=”_blank”}
  • 一篇从Ember.js迁移到AngularJS的文章{:target=”_blank”}。介绍了AngularJs更加可扩展的好处。
  • 基于jQuery UI Autocomplete Widget的ui-autocomplete{:target=”_blank”}
  • Ember.js or Angular.js?{:target=”_blank”} 英文论坛一贴
  • Choosing a JS MVC Framework: Angular.js vs Ember.js{:target=”_blank”}
• Canjs{:target=”_blank”} is a MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy. 与其他框架共用性最佳，据评测性能也最佳{:target=”_blank”} 还有这个测试{:target=”_blank”} 这项显示knockoutjs在Live binding方面更好些{:target=”_blank”}。
• Batman.js{:target=”_blank”} is a framework for building rich web applications with CoffeeScript or JavaScript.
• JavaScriptMVC{:target=”_blank”} is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.
• PureJS{:target=”_blank”} effortless. javascript.The missing API for Javascript.
• http://obvious.github.com/matador/
• http://derbyjs.com/ interesting
• http://flatironjs.org/ interesting
• http://railwayjs.com/ pretty bad.

服务器端（并客户端）框架

• Nodejs{:target=”_blank”}
  • Node.js Framework Comparison: Express vs. Koa vs. Hapi 三大主流 Node.js Web 服务框架比较
  • Node.js performance 2017: v7.9.0 vs. Hapi, Express.js, Restify and Koa and more 性能比较
  • 三种Javascript(NodeJS)异步编程代码模式比较{:target=”_blank”}
  • 在Node.js 中用 Q 实现Promise – Callbacks之外的另一种选择{:target=”_blank”}
• Meteor{:target=”_blank”} is a full stack framework 基于 Node.js，服务端与客户端都使用 javascript。
• Yahoo! Mojito{:target=”_blank”} is the JavaScript library implementing Cocktails, a JavaScript-based on-line/off-line, multi-device, hosted application platform.
• Wakanda{:target=”_blank”} 服务器，开发工具studio和框架。

辅助工具及测试框架

• Puppeteer 谷歌最新的大招，替代了 PhantomJS 等。
  • 译文：Puppeteer 与 Chrome Headless —— 从入门到爬虫
  • Try Puppeteer online
  • Puppeteer之爬虫入门
  • Headless Chrome入门
  • Puppeteer: 更友好的 Headless Chrome Node API
• 我终于弄懂了各种前端build工具{:target=”_blank”}
• Jasmine{:target=”_blank”}
• QUnit{:target=”_blank”} is a powerful, easy-to-use, JavaScript test suite.
• YEOMAN{:target=”_blank”} 脚手架工具，与下面的 Grunt 和 Bower 工具合并使用。
• GruntJS{:target=”_blank”} 自动化任务的工具，可以压缩脚本、编译 coffescript、单元测试等。是一个基于任务的 JavaScript 项目命令行构建工具。
• Bower{:target=”_blank”} 依赖管理工具
• JSHint{:target=”_blank”} 是一个 JavaScript 的代码质量检查工具，主要用来检查代码质量以及找出一些潜在的代码缺陷。
• Phantom JS{:target=”_blank”} 是一个服务器端的 JavaScript API 的 WebKit。其支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。主要用于无首自动化测试、网页抓图或转 pdf 等、操控网页自动化、网络监控（类似YSLow）等方面。 自从 Puppeteer 发布后，停止维护了。

函数式编程

• Ramda 函数库参考教程
• Ramda for reactive streams

Ramda 函数式编程：

• 自动柯里化
• “函数优先，数据最后”
• 函数式组合使用

UI框架

• Ant Design 这个是蚂蚁金服前端样式解决方案小组的项目代称。Alice Css书写规范{:target=”_blank”} 支付宝CSS样式架构{:target=”_blank”} 样式库构建规范{:target=”_blank”}

• D3.js{:target=”_blank”} is a JavaScript library for manipulating documents based on data. 二维图像生成框架
• Wijmo{:target=”_blank”} 商业全面控件UI，包含类似Excel控件图表控件SpreadJS等企业级UI控件，价格：$895。
• iView 官网 基于 Vue 的 UI 框架

• Joint.js 关系图类库，国外，高级收费。
• G6 关系图类库，国内蚂蚁金服旗下，免费。

绘图报表

• jQuery Sparklines{:target=”_blank”} 很特别的在一行内显示一个小曲线或柱状图等的功能。
• Peity{:target=”_blank”} 也是一行内的小图形功能。
• RGraph{:target=”_blank”} 功能很全面，对公益或个人使用免费，有商业授权。
• Highcharts JS{:target=”_blank”} 功能强大，对公益或个人使用免费，有商业授权，单网站$80。
• jQuery HighchartsTable{:target=”_blank”} 免费MIT授权，但基于Highcharts JS，基本的线图、柱图等。
• canvasXpress{:target=”_blank”} 使用HTML5的<canvas&rt;标签实现，功能全面，LGPL免费授权。
• JointJs{:target=”_blank”} 用于创建完全互动式图表，如组织架构图、UML状态图、UML类图等。
• Elycharts{:target=”_blank”} 是一个易于使用的，可定制的JavaScript图表绘制组件。这个组件可用于绘制大部分常用的图表类型包括：line, column, are, bar, pie, sparklines and combinations。图表利用SVG/VML技术生成，基于jQuery + Raphaël开发。

脚本压缩打包工具

• TUICompiler{:target=”_blank”} 土豆网的js打包工具
• Webpack 2 入门教程{:target=”_blank”}

脚本牛人博客

• Evan Wallace{:target=”_blank”} HTML5和 Javascript 高手，擅长 WebGL 等技术。

其他相关

• Bootstrap中文官网{:target=”_blank”}
• 指令式Callback和函数式Promise：对nodejs的一声叹息{:target=”_blank”}
• 七个富应用JavaScript框架{:target=”_blank”}
• UIBox{:target=”_blank”} 一个方便搜索Javascript UI 框架的网站。
• TodoMVC{:target=”_blank”}各种js框架写的TODO示例，帮助选择适合自己的js框架。
• Yahoo开放的Json资源{:target=”_blank”}
• JSONP详解{:target=”_blank”}
• jQuery的deferred对象详解{:target=”_blank”}

桌面应用，NodeJS 打包编译

• NodeJs中用node-webkit开发多平台的桌面客户端{:target=”_blank”}
• Node.js Packer 编译打包服务端 Node.js 代码最佳方案，文档下方列出了与其他类似项目的区别，间接说明了它的先进性。
  • Nexe is a command-line utility that compiles your Node.js application into a single executable file.
  • ~ Depracted EncloseJS Compile your Node.js project. No sources aboard. Recommand Pkg below.
  • Pkg Single-Command Node.js binary compiler.
• Electron Build cross platform desktop apps with JavaScript, HTML, and CSS

CoffeeScript

• 《Smooth CoffeeScript》{:target=”_blank”}

脚本示例收集

• 图片选择框{:target=”_blank”}
• 布仿真特效{:target=”_blank”}
• 数字用英文怎么读{:target=”_blank”}
• 粒子系统{:target=”_blank”}
• 水滴下流系统{:target=”_blank”}
• 机械手臂系统{:target=”_blank”}
• 字母雨系统{:target=”_blank”}

正则表达式在线测试：

• REGex TESTER{:target=”_blank”}
• JavaScript 正则表达式在线测试工具{:target=”_blank”}
• regexpal{:target=”_blank”} 0.1.4 — a JavaScript regular expression tester
• 常用的正则表达式

CSS 相关

• PostCSS{:target=”_blank”} A tool for transforming CSS with JavaScript
• CSSNext{:target=”_blank”} Use tomorrow’s CSS syntax, today.