第159天:前端知识体系框架

简介: 1.布局框架:Bootstrap: http://getbootstrap.com/Foundation: http://foundation.zurb.com/Uikit: http://www.

1.布局框架:

Bootstrap: http://getbootstrap.com/

Foundation: http://foundation.zurb.com/

Uikit: http://www.getuikit.com/

Web Components:http://css-tricks.com/modular-future-web-components//

2. 构建工具及包管理器:

Grunt: http://gruntjs.com/

Yeoman: http://yeoman.io/

Bower: http://bower.io/

NPM: https://www.npmjs.org/

3. 代码优化:

Google Closure Compiler:

CSS Lint: http://csslint.net/

JSHint: http://www.jshint.com/

JSLint: http://www.jslint.com/

4. CSS预处理器

Less: http://lesscss.org/

Sass: http://sass-lang.com/

5. 调试工具:

Chrome:https://developers.google.com/chrome-developer-tools/

Firebug: https://getfirebug.com/

HTTPWatch: http://www.httpwatch.com/

Fiddler: http://www.telerik.com/fiddler

IE Developer Toolbar:

Weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

6. 文档工具:

JSDoc: https://github.com/jsdoc3/jsdoc

Jekyll: http://jekyllrb.com/

7. IDE/文本编辑器

WebStorm: http://www.jetbrains.com/webstorm/

8. 移动端 手势事件库:

GMU: http://gmu.baidu.com/

Hammer.js:< http://eightmedia.github.io/hammer.js/>

QuoJS: http://quojs.tapquo.com/

Zepto: http://zeptojs.com/

Swipe: http://swipejs.com/

jQuery Mobile: http://jquerymobile.com/

KendoUI:http://www.telerik.com/kendo-ui

Goratchet:http://goratchet.com/

9. 思维导图

XMind:http://www.xmind.net/

10.模块加载器:

ESL:< https://github.com/ecomfe/esl>

RequireJS: http://requirejs.org/

SeaJS:http://seajs.org/docs/

11. 项目管理:

Github: https://github.com/

GitLab: https://about.gitlab.com/

Redmine: http://www.redmine.org/

12. 原型设计:

Axure RP: http://www.axure.com/

13. 富互联网应用框架

AngularJs: http://www.angularjs.org

Backbone: http://backbonejs.org/

AmpersandJS:http://ampersandjs.com//

Knockout: http://knockoutjs.com/

Underscore: http://underscorejs.org/

14. 模板引擎

EJS: http://www.embeddedjs.com/

Handlebars: http://handlebarsjs.com/

Jade: http://jade-lang.com/

Velocity: http://velocity.apache.org/

15. 测试框架

Jasmine: http://pivotal.github.io/jasmine/

QUnit: http://qunitjs.com/

mocha: http://visionmedia.github.io/mocha/

16. 版本控制

Git: http://git-scm.com/

Subversion: http://subversion.apache.org/

Mercurial(Hg): http://mercurial.selenic.com/

17. WEB框架/服务器

Node: http://nodejs.org/

Express: http://expressjs.com/

Apache: http://httpd.apache.org/

Nginx: http://nginx.org/

18. CommonJS

Component: http://component.io/

19. WEB安全

XSS(跨站脚本攻击):

CSRF(跨站点伪造请求攻击):

跨iframe攻击:

Clickjacking安全漏洞:

20. 代码规范

Code Guide: http://alloyteam.github.io/code-guide/

编写可维护的CSS: http://segmentfault.com/a/1190000000388784/

GJS编码规范指南: http://alloyteam.github.io/JX/doc/specification/google-javascript.xml

jQueryJS规范: http://contribute.jquery.org/style-guide/js/

21. HTML模块化

html5boilerplate: http://html5boilerplate.com/

22. CSS模块化

Normalize.css: http://necolas.github.io/normalize.css/

LESS:http://www.lesscss.net/

OOCSS:http://www.oocss.cc/ http://oocss.org/

CssReset:http://www.cssreset.com/

23. HTML5 Canvas

D3:http://d3js.org/

KINETIC:http://kineticjs.com/

相关文章
|
5月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
528 1
|
6月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
417 70
|
6月前
|
JavaScript 前端开发 API
|
11月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
243 9
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
331 0
|
8月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
431 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
346 41
|
11月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
166 9
|
12月前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
661 8
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇(四):Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。
462 2

热门文章

最新文章

  • 1
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 4
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    前端如何禁止用户打开 F12 开发者工具
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 1
    前端如何禁止用户打开 F12 开发者工具
    120
  • 2
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    168
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    50
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    112
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    75
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    175
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    156
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    90
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    48
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    85