Jadual Kandungan
2015-2016前端架构体系技术精简版
一、框架与组件
二、构建生态
三、开发技巧与调试
四、html、css与重构
五、native/hybrid/桌面开发
六、前端/H5优化(另一个图已给出)
七、全栈/全端开发
八、研究实验
九、数据分析与监控
十、其它软技能
十一、前端技术网站
Rumah hujung hadapan web html tutorial 2015-2016前端架构体系技术精简版_html/css_WEB-ITnose

2015-2016前端架构体系技术精简版_html/css_WEB-ITnose

Jun 21, 2016 am 08:58 AM

2015-2016前端架构体系技术精简版

点击查看github高清图

点击查看完整版

一、框架与组件

**bootstrap等UI框架设计与实现

  • 伸缩布局:grid网格布局
  • 基础UI样式:元素reset、按钮、图片、菜单、表单
  • 组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告
  • 响应式布局:布局、结构、样式、媒体、javascript响应式
  • 第三方插件:插件管理

**jQuery、zepto使用原理以及插件开发

  • 支持amd、cmd、全局变量的模块化封装
  • $.fn.method = function(){}

**mvc/mvvm框架原理设计,vue/angular/avalon等

  • directive设计:html、text、class、html、attr、repeat、ref,可扩展
  • filter设计:bool、upperCase、lowerCase,可扩展
  • 表达式设计:if-else等实现
  • viewmodel结构设计:例如数据,元素,方法的挂载与作用域
  • 数据更变检测:函数触发,脏数据检测、对象hijacking

**polymer/angular2思想与设计思路

  • import技术
  • template和script引入方式
  • css样式命名空间隔离
  • 简单复用第三方库

**reactjs原理与使用

  • virtual dom单向数据绑定
  • js执行语法方式
  • UI由状态控制

......

二、构建生态

**grunt/gulp开发环境任务编写

  • 文件处理插件:html、scss、js、image、font、其它
  • 优化插件:雪碧图、图片压缩、iconfont构建
  • 发布替换插件
  • 打包、压缩包插件:组件自动分析
  • 白名单配置
  • 自定义插件编写

......

三、开发技巧与调试

**fiddler加willow基础组合调试

  • 常见配置与分析
  • 结合浏览器调试

werien、vorlonjs远程调试,chrome inspect代码自动化检查fecs

......

四、html、css与重构

**jpeg、webp、apng、bpg图片

  • 编码原理
  • 特点与优劣势
  • 适用场景

**iconfont使用与实现原理

  • 自动打包构建方法
  • iconfont兼容性写法
  • fonthello、fontawesome、icomoon.io、iconfont.cn线上工具

**页面响应式设计

  • layout布局响应式
  • html结构响应式
  • css样式响应式
  • image媒体响应式
  • javascript响应式
  • media query与平台判断

**css重置

  • reset
  • nomalize
  • neat

**sass/compass/less/postcss常用语法与使用

  • 常用语法功能
  • 组件化UI设计管理
  • 构建工具实现方案
  • 雪碧图自动合成
  • iconfont自动接入等等

**media query与常见页面尺寸了解

  • 媒体类型引入和媒体特性引入
  • device-width适应
  • retina屏幕适应

**em,rem原理与实现

**code4ui、code4app、初页、maka等

  • 前端dom操作即使刷新前端页面
  • 根据dom操作生成组件config配置保存到db
  • 根据config配置使用r.js或webpack打包
  • 发布打包后输出文件

**css3动画

  • transform
  • animation
  • transiction
  • 3D加速与动画加速
  • 动画库
  • 缓动函数速查表: http://www.xuanfengge.com/easeing/easeing/
  • Ceaser: http://xuanfengge.com/easeing/ceaser/
  • cubic-bezier: http://cubic-bezier.com/

**css网格布局

  • susy
  • Responsive Grid System
  • Fluid 960 Grid(adaptjs)
  • Simple Grid

**搜索引擎与前端SEO

  • tdk优化
  • 页面内容优化
  • 唯一的H1标题
  • img设置alt属性
  • nofollow
  • url优化
  • 统一链接
  • 301跳转
  • canonical
  • robot优化
  • robots.txt
  • meta robots
  • sitemap
  • SEO工具
  • 各种站长工具等

**浏览器缓存种类,resources,webSQL,indexDB, localstorage,cookie,app cache,cache storage

  • store.js、cookie.js

**UI框架

  • bootstrap、jqwidgets、semantic ui、amaze ui
  • 微信手Q ui: frozenui、weui、blend ui
  • extjs、echart图表ui

......

五、native/hybrid/桌面开发

**ionic移动开发方案

  • 运行架构
  • hybrid混合开发
  • cordova交互
  • 离线包更新
  • 性能瓶颈

**nativescript移动开发方案

**react Native移动开发方案

  • 运行架构:js引擎
  • 性能缺陷与内存泄露
  • 更新机制
  • 使用场景

**android/ios原生开发与框架

  • java
  • oc、swift
  • web与native交互
  • 屏幕旋转
  • 摇一摇
  • 录像,拍照,选取本地图片
  • 打电话,发短信
  • 电池电量
  • 地理位置
  • 日期选择
  • 开启硬件加速

**桌面应用开发

  • nodewebkit
  • 网易Hex
  • pomelo(游戏服务器框架)
  • react desktop
  • appjs:appjs.com

......

六、前端/H5优化(另一个图已给出)

**yslow、pagespeed

**移动web性能优化

  • 单页面及路由实现
  • 业内著名站点案例分析

......

七、全栈/全端开发

**express/node club + mongodb、thinkjs等框架

**cdn与dns

  • 动态域名加速
  • cdn原理与cdn combo

......

八、研究实验

**WebAssembly、webTRC、typescript

**Material design规范的前端框架

  • 交互动效库

**AMP-HTML规范

  • 使用受限HTML以及缓存技术来提高移动网络中静态内容的性能
  • 添加自定义的元素代替禁用掉的元素:amp-audio, amp-img、amp-video等

......

九、数据分析与监控

**badjs数据上报

**点击热力图clickHeat、heatMap

**js加载失败优化方案

  • 失败重发机制
  • 加载源域名服务器文件
  • https反劫持

**百度alog数据上报

......

十、其它软技能

**axure 原型图设计

**xmind脑图管理

**效率管理

**can i use、github

**知识管理/总结分享

**产品思维与技能

......

十一、前端技术网站

**技术社区

  • alloyteam、html5基地
  • W3 help

**行业会议

  • segmentfault会议
  • 深js、杭js
  • GMIC(全球移动互联网大会)
  • D2、webrebuild
  • infoQ内容、Qcon、velocity

完整版地址 https://ouvens.github.io/frontend-resource/2016/01/26/front-end-learning-list.html

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Apr 04, 2025 pm 11:30 PM

Algoritma Adaptif Kedudukan Y-Axis untuk Fungsi Anotasi Web Artikel ini akan meneroka cara melaksanakan fungsi anotasi yang serupa dengan dokumen perkataan, terutama bagaimana menangani selang antara anotasi ...

GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? Apr 04, 2025 pm 11:54 PM

Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...

Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Apr 05, 2025 am 06:15 AM

Untuk mencapai kesan penyebaran dan membesarkan imej sekitarnya selepas mengklik pada imej, banyak reka bentuk web perlu mencapai kesan interaktif: klik pada imej tertentu untuk membuat sekitar ...

HTML, CSS, dan JavaScript: Alat penting untuk pemaju web HTML, CSS, dan JavaScript: Alat penting untuk pemaju web Apr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

See all articles