美文网首页
前端基础技术&常用组件

前端基础技术&常用组件

作者: Jesse_001 | 来源:发表于2019-12-16 16:46 被阅读0次

HTML/CSS/Javascript三座大山是前端技术的核心,万变不离其宗,回归基础,夯实基础,加深理解,是成为高级前端工程师的必经之路。
基础知识学习请参考 MDN菜鸟教程


基础技术:

  • HTML 定义网页的内容
  • CSS 规定网页的布局
  • JavaScript 对网页行为进行编程

HTML&HTML5

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML5 是最新的 HTML 标准。
    HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件。
    HTML5 拥有新的语义、图形以及多媒体元素:canvas,video,audio。
    HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
    HTML5 是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。
    拖放:Drag,Drop
    视频音频:video,audio
    画布:canvas
    地理定位:geolocation
    web存储:localStorage - 没有时间限制的数据存储,sessionStorage - 针对一个 session 的数据存储

CSS&CSS3

  • CSS 指层叠样式表 (Cascading Style Sheets)。
    定义如何显示 HTML 元素,样式通常存储在样式表中,一般情况下分为三种样式:行内样式,内部样式,外联样式。

  • CSS3 是最新的 CSS 标准。
    选择器:属性选择器,伪类选择器,子元素选择器.etc.
    框模型:flex-box,grid-box
    背景和边框:background-size,border-radius,box-shadow,border-image
    文本效果:text-shadow,word-wrap
    2D/3D 转换:transform相关
    动画:@keyframes,animation
    多列布局:column-count,column-gap,column-rule
    用户界面:box-sizing,resize

  • Sass & Less

    1. Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。 Sass学习
    2. Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less学习

相关css属性浏览器支持情况请查询 https://www.caniuse.com/

Javascript

JavaScript 在 1995 年由 Brendan Eich 发明,并于 1997 年成为一部 ECMA 标准。
ECMA-262 是其官方名称。ECMAScript 2019(ES10)为最新版本,ECMAScript 6 (发布于 2015 年)是最熟知的 JavaScript 版本
Js学习 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

ES 历史版本

常用插件/组件

工欲善其事,必先利其器。 善用工具和框架能使我们开发事半功倍。当前用工具的同时我们也要明白其中的原理,这样才能知其然又知其所以然。官方API是最好的学习工具。

目前流行的三大框架

  • Vue


    Vue

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。
Vue全家桶:vue-cli + vue + vuex + vue-router + axios + element-ui
Vue学习 https://vuejs.org/

  • React


    React

React 是一个用于构建用户界面的 JavaScript 库。
React全家桶:react+react-dom+react-router+axios+redux
React学习 https://react.docschina.org/docs/getting-started.html

  • AngularJs


    AngularJs

JS&UI组件/插件

1. UI组件:

2. 图表插件:

3. 其他工具插件:

  • Node.js
    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时
  • Webpack-js
    本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
  • Lodash-js
    Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。
  • Babel
    Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
  • Axios
    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
    1. 从浏览器中创建 XMLHttpRequests
    2. 从 node.js 创建 http 请求
    3. 支持 Promise API
    4. 拦截请求和响应
    5. 转换请求数据和响应数据
    6. 取消请求
    7. 自动转换 JSON 数据

有关jQuery,easyUI之类的工具类和UI组件在此不在赘述,有需自查官方文档

相关文章

网友评论

      本文标题:前端基础技术&常用组件

      本文链接:https://www.haomeiwen.com/subject/ljbrnctx.html