Web前端开发技术栈
时间:2022-05-06
本文章向大家介绍Web前端开发技术栈,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前端领域的发展非常迅猛,大前端的时代到来了,据说每隔12-24个月,前端的难度将增加一倍,从下面的技术栈就可以看出前端领域的丰富度和复杂度
核心概念
HTML
|-- DOM
|-- Element
|-- Attribute
JavaScript
|-- 原型 Prototype
|-- 作用域 Scope
|-- 闭包 Closure
|-- JSON
|-- AJAX
CSS
|-- 选择器 Selector
|-- 优先级
|-- 特性 Specificity
|-- 盒子模型
渲染引擎
|-- Trident (IE)
|-- Blink / prev. WebKit (Chrome)
|-- Gecko (Firefox)
|-- WebKit (Safari)
|-- Blink / prev. Presto (Opera)
|-- EdgeHTML (Edge)
脚本引擎
|-- JScript (IE8- / ASP)
|-- Chakra (IE9+ / Edge)
|-- V8 (Chrome / Opera / Nodejs / MongoDB)
|-- SpiderMonkey (Firefox)
|-- Nitro (Safari)
编译任务
|-- 精简
|-- 编译
|-- 合并
|-- 混淆
|-- 图像优化
|-- 单元测试
包管理
|-- npm
|-- Bower
编译工具
|-- Grunt
|-- Gulp
|-- Brunch
|-- Yeoman
|-- Broccoli
调试
|-- Developer Tools
|-- Firebug
基础工具
|-- Node.js
|-- Phantom.js
|-- fibjs
库
|-- jQuery
|-- Prototype
|-- Zepto
|-- MooTool
框架
|-- AngularJS
|-- Backbone
|-- Knockout
|-- Ember
|-- React
|-- polymer
|-- Deft.js
|-- Vue
UI框架
|-- Bootstrap
|-- Semantic UI
|-- Foundation
|-- Material UI
|-- jQuery UI
手机 UI框架
|-- jQuery Mobile
|-- Jo
|-- Dojo Mobile
|-- Lungo
CSS3 动画
|-- Animate.css
|-- bounce.js
|-- Effeckt.css
|-- move.js
CSS 预处理器
LESS
|-- LESS
|-- Hat
Sass(SCSS)
|-- Compass
|-- Bourbon
|-- Gumby
Stylus
|-- nib
质量控制
|-- JSLint
|-- JSHint
|-- jscs
|-- Closure Linter
测试工具
|-- QUnit
|-- Jasmine
|-- Mocha
|-- Selenium
|-- WebDriverIO
|-- Karma
|-- nodeunit
|-- tape
在线测试工具
|-- Sauce Labs
|-- Browser Stack
|-- Browser Shots
|-- Browser Sandbox
|-- Cross Browser Testing
模块化
|-- ES6 Module
|-- CommonJS
|-- webpack
|-- browserify
|-- AMD
|-- RequireJS
|-- UMD
|-- umd
WebSocket
|-- Socket.io
|-- web-socket-js
数据可视化
|-- D3
|-- Echarts
|-- HighCharts
|-- Vis.js
|-- Flot
WebGL
|-- Three.js
|-- Babylon.js
|-- Pixi.js
模板引擎
|-- Handlebars
|-- Haml
|-- Slim
|-- Jade
|-- Ejs
|-- Spacebars
|-- mustache
移动应用开发
|-- PhoneGap / Cordova
|-- MUI
|-- React Native
|-- Ionic
- 为何webpack风靡全球?三大主流模块打包工具对比
- 今天研究了一下手机通信录管理系统(C语言)
- Android软件测试Monkey测试工具
- 程序员面试50题(4)—把字符串转换成整数[算法]
- 程序员面试50题(3)—翻转句子中单词的顺序[算法]
- H5动画开发快车道
- Open vSwith模拟网关实现不同子网的互通
- 总结了一些指针易出错的常见问题(二)
- 史上最清晰的红黑树讲解(上)
- C++之new/delete/malloc/free详解
- 验证 结构体指针与自增运算符
- Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失下篇
- ONOS1.3.0集群实验
- Spring Boot下的TDD(测试驱动开发)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP基于mcript扩展实现对称加密功能示例
- php和asp语法上的区别总结
- 解决python pandas读取excel中多个不同sheet表格存在的问题
- .img/.hdr格式转.nii格式的操作
- PHP实现的操作数组类库定义与用法示例
- python使用nibabel和sitk读取保存nii.gz文件实例
- PHP从尾到头打印链表实例讲解
- python如何写try语句
- python怎么判断素数
- php数组遍历类与用法示例
- PHP格式化显示时间date()函数代码
- python操作微信自动发消息的实现(微信聊天机器人)
- 使用ITK-SNAP进行抠图操作并保存mask的实例
- Yii2框架加载css和js文件的方法分析
- php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式