Rumah hujung hadapan web Tutorial H5 2015-2016前端架构体系技术精简版

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

May 17, 2016 am 09:06 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)

Cara Menjalankan Projek H5 Cara Menjalankan Projek H5 Apr 06, 2025 pm 12:21 PM

Menjalankan projek H5 memerlukan langkah -langkah berikut: memasang alat yang diperlukan seperti pelayan web, node.js, alat pembangunan, dan lain -lain. Membina persekitaran pembangunan, membuat folder projek, memulakan projek, dan menulis kod. Mulakan pelayan pembangunan dan jalankan arahan menggunakan baris arahan. Pratonton projek dalam penyemak imbas anda dan masukkan URL Server Pembangunan. Menerbitkan projek, mengoptimumkan kod, menggunakan projek, dan menyediakan konfigurasi pelayan web.

Apa sebenarnya maksud pengeluaran halaman H5? Apa sebenarnya maksud pengeluaran halaman H5? Apr 06, 2025 am 07:18 AM

Pengeluaran halaman H5 merujuk kepada penciptaan laman web yang serasi dengan platform menggunakan teknologi seperti HTML5, CSS3 dan JavaScript. Intinya terletak pada kod parsing penyemak imbas, struktur rendering, gaya dan fungsi interaktif. Teknologi umum termasuk kesan animasi, reka bentuk responsif, dan interaksi data. Untuk mengelakkan kesilapan, pemaju harus disahpepijat; Pengoptimuman prestasi dan amalan terbaik termasuk pengoptimuman format imej, pengurangan permintaan dan spesifikasi kod, dan lain -lain untuk meningkatkan kelajuan pemuatan dan kualiti kod.

Cara membuat ikon klik h5 Cara membuat ikon klik h5 Apr 06, 2025 pm 12:15 PM

Langkah -langkah untuk membuat ikon klik H5 termasuk: menyediakan imej sumber persegi dalam perisian penyuntingan imej. Tambah interaktiviti dalam editor H5 dan tetapkan acara klik. Buat hotspot yang meliputi keseluruhan ikon. Tetapkan tindakan peristiwa klik, seperti melompat ke halaman atau mencetuskan animasi. Eksport dokumen H5 sebagai fail HTML, CSS, dan JavaScript. Menyebarkan fail yang dieksport ke laman web atau platform lain.

Adakah pengeluaran halaman H5 adalah pembangunan front-end? Adakah pengeluaran halaman H5 adalah pembangunan front-end? Apr 05, 2025 pm 11:42 PM

Ya, pengeluaran halaman H5 adalah kaedah pelaksanaan penting untuk pembangunan front-end, yang melibatkan teknologi teras seperti HTML, CSS dan JavaScript. Pemaju membina halaman H5 yang dinamik dan berkuasa dengan bijak menggabungkan teknologi ini, seperti menggunakan & lt; kanvas & gt; Tag untuk menarik grafik atau menggunakan JavaScript untuk mengawal tingkah laku interaksi.

Senario aplikasi apa yang sesuai untuk pengeluaran halaman H5 Senario aplikasi apa yang sesuai untuk pengeluaran halaman H5 Apr 05, 2025 pm 11:36 PM

H5 (HTML5) sesuai untuk aplikasi ringan, seperti halaman kempen pemasaran, halaman paparan produk dan promosi korporat mikro. Kelebihannya terletak pada platformiti silang dan interaktiviti yang kaya, tetapi batasannya terletak pada interaksi dan animasi yang kompleks, akses sumber tempatan dan keupayaan luar talian.

Apakah bahasa pengaturcaraan H5? Apakah bahasa pengaturcaraan H5? Apr 03, 2025 am 12:16 AM

H5 bukan bahasa pengaturcaraan yang mandiri, tetapi koleksi HTML5, CSS3 dan JavaScript untuk membina aplikasi web moden. 1. HTML5 mentakrifkan struktur dan kandungan laman web, dan menyediakan tag dan API baru. 2. CSS3 mengawal gaya dan susun atur, dan memperkenalkan ciri -ciri baru seperti animasi. 3. JavaScript melaksanakan interaksi dinamik dan meningkatkan fungsi melalui operasi DOM dan permintaan tak segerak.

Apa yang dirujuk oleh H5? Meneroka konteks Apa yang dirujuk oleh H5? Meneroka konteks Apr 12, 2025 am 12:03 AM

H5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo

Cara membuat tingkap pop timbul dengan H5 Cara membuat tingkap pop timbul dengan H5 Apr 06, 2025 pm 12:12 PM

H5 POPU-UP Window Penciptaan Langkah: 1. Tentukan kaedah pencetus (klik, masa, keluar, tatal); 2. Kandungan reka bentuk (tajuk, teks, butang tindakan); 3. Set gaya (saiz, warna, fon, latar belakang); 4. Melaksanakan Kod (HTML, CSS, JavaScript); 5. Ujian dan penempatan.

See all articles