https://github.com/vvenv/hybrid

hybrid development toc
https://github.com/vvenv/hybrid

Last synced: about 5 hours ago
JSON representation

hybrid development toc

• Host: GitHub
• URL: https://github.com/vvenv/hybrid
• Owner: vvenv
• Created: 2015-03-09T08:46:17.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-03-10T08:55:45.000Z (over 9 years ago)
• Last Synced: 2024-10-27T00:09:55.363Z (19 days ago)
• Size: 133 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 37
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# hybrid

hybrid development toc

- 基础篇

  - HTML/CSS/JS 基本概念及相关框架/库讲解

- 开发篇

  - 模块化、组件化、模块化、自动化开发简介

## 基础篇

> HTML/CSS/JS 基本概念及相关框架/库讲解

### HTML

> 包含 Data 与 Layout，通过浏览器渲染成 DOM Tree

- HTML

- HTML5

### CSS

> 设置 DOM Tree 各元素样式

- css

- less/scss

### JS

> 获取 DOM 节点，管理 DOM 属性，侦听 DOM 事件（配图）

- coffee

- typescript

### JS/UI 框架/库

> 有面向 DOM 的，面向 GUI 的，以及基于 MV* 的。

- [jQuery](http://jquery.com)

- [Zepto.js](http://zeptojs.com)

- [AngularJS](https://angularjs.org)

- [Bootstrap](http://getbootstrap.com/)

- [React](http://facebook.github.io/react/)

- [AraleJS](https://github.com/aralejs)

- [**Sencha Touch**](https://www.sencha.com/products/touch/)

- [**jQuery Mobile**](http://jquerymobile.com/)

## 开发篇

> 模块化、组件化、模板化、自动化开发简介

### 前端开发

- 以前很简单：需求简单 + 语言实现简单

- 现在很复杂：需求复杂 + 语言实现简单

### 模块化

> 在代码文件方面，提高复用率及可维护性

- [**SeaJS**](http://seajs.org/)

- [RequireJS](http://requirejs.org/)

- [ES6](http://es6.ruanyifeng.com/)

### 组件化

> 在用户需求方面，提高复用率及可维护性

- [WebComponents](https://github.com/webcomponents)

- [Polymer](https://github.com/polymer)

- [React](http://facebook.github.io/react/)

- [**AraleJS**](https://github.com/aralejs)

### 模板化

> 基于 JS 的模板引擎，数据与结构分离，提高 UI 呈现灵活性

- [**Handlebars**](http://handlebarsjs.com/)

- [mustache](https://mustache.github.io/)

- [doT.js](http://olado.github.io/doT/)

### 自动化

> 让机器代替人工。

- [**node**](http://nodejs.org/)

- [**grunt**](http://gruntjs.com/)

- [gulp](http://gulpjs.com/)

- [**jshint**](http://jshint.com/)

- [QUnit](http://qunitjs.com/)

- [**mocha**](http://mochajs.org/)

- [Jasmine](http://jasmine.github.io/)