关于前端:前端主流布局系统进阶与实战完结

1次阅读

共计 2922 个字符，预计需要花费 8 分钟才能阅读完成。

发展过程
批改语音
前端技能的发展是互联网本身发展变动的一个缩影。前端技能指通过阅读器到用户端计算机的总称，存贮于服务器端的总称为后端技能。前端开发首要性能便是把网站的界面更好地呈现给用户。
以前会 Photoshop 和 Dreamweaver 就可能制作网页，跟着网站开发难度加大、开发方式多样，网页制作更靠近传统的网站后盾开发，网页制作更多被称为 Web 前端开发。前端技能蕴含 4 个局部：前端美工、阅读器兼容、CSS、HTML“传统”技能与 Adobe AIR、Google Gears, 以及概念性较强的交互式设计，艺术性较强的视觉设计等。
在 Web1.0 年代，因为网速和终端能力的限度，大部分网站只能呈现简略的图文信息，并不能满足用户在界面上的需要，对界面技能的要求也不高。跟着硬件的欠缺、高性能阅读器的呈现和宽带的遍布，技能可能在用户领会方面完结更多种可能，前端技能领域迸发出旺盛的生命力。
2005 年今后，互联网进入 Web2.0 年代，各种相似桌面软件的 Web 利用很多涌现，前端由此产生了天翻地覆的变动。网页不再只是承载繁多的文字和图片，各种富媒体让网页的内容更加活泼，网页上软件化的交互模式为用户供应了更好的使用领会，这些都是依据前端技能完结的。
跟着手机成为人们生存中不可或缺的一部分，成为人们身材的延长，人们迎来了领会为王的年代。挪动端的前端技能开发近景宽敞。此外，前端技能还能利用于智能电视、智能手表乃至人工智能领域。[1]

外围技能
批改语音

HTML
把握 HTML 是网页的外围，是一种制作万维网页面的规范语言，是万维网阅读器使用的一种语言，它打消了不同计算机之间信息交换的阻碍。因而，它是网络上利用最为宽泛的语言，也是形成网页文档的首要语言，学好 HTML 是成为 Web 开发人员的根本条件。
HTML 是一种符号语言，可能完结 Web 页面并在阅读器中浮现。HTML5 作为 HTML 的最新版别，引入了多项新技能，大大加强了对于利用的撑持能力，使得 Web 技能不再局限于呈现网页内容。
跟着 CSS、JavaScript、Flash 等技能的发展，Web 对于利用的解决能力逐步加强，用户浏览网页的领会曾经有了较大的改良。不过 HTML5 中的几项新技能完结了质的冲破，使得 Web 技能首次被认为可能靠近于本地原生利用技能，开发 Web 利用真正成为开发者的一个筛选。
HTML5 可能使开发者的工作大大简化，实践上单次开发就可能在不同渠道借助阅读器运行，降落开发的老本，这也是产业界普遍认为 HTML5 技能的首要短处之一。AppMobi、摩托罗拉、Sencha、Appcelerator 等公司均已推出了较为成熟的开发工具，撑持 HTML5 利用的发展。[3]

CSS
学好 CSS 是网页外观的重要一点，CSS 可能帮助把网页外观做得更加好看。

JavaScript
学习 JavaScript 的根本语法，以及怎么使用 JavaScript 编程将会提高开发人员的集体技能。

操作体系
理解 Unix 和 Linux 的基本知识，对于开发人员有益无害。

网络服务器
理解 Web 服务器，蕴含对 Apache 的根本配备，htaccess 配备技巧的把握等。

性能优化
批改语音
尽量削减 HTTP 请求 (Make Fewer HTTP Requests)
削减 DNS 查找 (Reduce DNS Lookups)
避免重定向 (Avoid Redirects)
使得 Ajax 可缓存 (Make Ajax Cacheable)
推延载入组件 (Post-load Components)
预载入组件 (Preload Components)
削减 DOM 元素数量 (Reduce the Number of DOM Elements)
切分组件到多个域 (Split Components Across Domains)
最小化 iframe 的数量 (Minimize the Number of iframes)
杜绝 http404 谬误 (No 404s)
以上 10 条涵盖了 Web 前端开发中遇到的各种页面解决技能，让前端开发人员可能精确和疾速地把握整个网页的架构，从而达到削减开发成本和页面丑化用意。

前端构造
批改语音
学好 Web 构造，理解把握 HTML、服务器端脚本语言、CSS 和 JavaScript 之后，学习 Web 构造可能放慢 Web 开发速度，节省时间。PHP 程序员可选的构造蕴含 CakePHP、CodeIgniter、Zend 等，Python 程序员青睐使用 Django 和 webpy，Ruby 程序员罕用 RoR。
跟着 Web 越来越规范和规范的对立，Web 组件化技能一直变革，挪动端开发一直进步，以下是一些常见开源前端构造：
Bootstrap
支流构造之一，Bootstrap 是依据 HTML、CSS、JavaScript 的，它简练灵活，使得 Web 开发更加快捷。
html5-boilerplate
该构造可能疾速构建健壮，且适应力强的 web app 或网站。
Meteor
Meteor 是新一代的开发即时 web 利用的开源构造，它能在较短时间内完结开发。
Semantic UI
依据天然语言有用准则的 UI 组件构造
Foundation
优异的响应式前端构造
Materialize
依据材料设计的现代化响应式前端构造。可供应默认的样式，自定义组件。此外，Materialize 还改良动画和过渡，为开发人员供应流通的领会。
Pure
简直可能在每一个 web 我的项目中使用的一组小的和响应式的 CSS 模块。
Vue
Vue.js 是用于构建交互式的 Web 界面的库。它供应了 MVVM 数据绑定和一个可组合的组件体系，具备简略、灵活的 API。
Skeleton
Skeleton 是一个小的 JS 和 CSS 文件的汇合, 可疾速开发漂亮的网站, 适宜各种屏幕设施蕴含手机。Skeleton 依据 960 grid 开发。它是一个 UI 构造。
Amaze UI
国内首个开源 HTML5 跨屏前端构造产品系列，中文排版撑持更优、本土化组件丰富。该产品系列中有专门针对挪动端的 HTML5 混合利用开发构造 Amaze UI Touch 以及针对跨屏 HTML5 网页开发的 Amaze UI Web。其间，Amaze UI Touch 可能帮助开发者通过丰富的组件，疾速构建出与原生 APP 相媲美的专属挪动端的 HTML5 利用。
UIkit
一个轻量级的和模块化的前端构造, 用于疾速开发和功能强大的 web 接口。
Yui
Yahoo! UI Library (YUI) 是一个凋谢源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采纳了 AJAX, DHTML 和 DOM 等程式码技能。它也蕴含了许多 CSS 资源。使用受权为 BSD 许可证。
kissy
一款跨终端、模块化、高性能、使用简略的 JavaScript 构造。
MUI
最靠近原生 App 领会的前端构造的构造。
Arale
一个凋谢、简略、易用的前端基础类库。
JX
JX 是模块化的非侵入式 Web 前端构造，特地适宜构建和组织大规模、工业级的 Web App。
GMU
GMU 是依据 zepto 的 mobile UI 组件库，供应 webapp、pad 端简略易用的 UI 组件! Web App。
ZUI
开源 HTML5 前端构造
Clouda Touch.js
Touch.js 是挪动设施上的手势识别与事件库, 也是在百度外部宽泛使用的开发。