Skip to content

Instantly share code, notes, and snippets.

View xiqe's full-sized avatar

Jerry Liang xiqe

  • Ctrip/LU/Glodon/Linktivity
  • Shanghai/Osaka/Tokyo
View GitHub Profile

前端响应式布局解决方案

移动端页面布局的问题,在当今前端是比较常见的话题,因为不同终端设备的分辨率,dpr等不同,导致前端无法用单一的px值来将页面的元素固定,需要通过技术手段在不同的环境下进行适配,来保证页面最佳的可读性,这里将会总结一些常见的方案。

百分比布局

这是最早的布局解决方案,解决成本低,高效。

将页面元素的宽度以百分比来进行设置,高度不变。

Next.js ------ 从零快速搭建Next框架教程

写在前面

Next.js是提供基于React的SSR框架。解决SPA的一些缺点。下文会对SPA应用进行一些简单的介绍,并且会通过拆分本Demo的实现,让大家学会如何从零搭建Next框架。

SPA的本质以及优缺点

现今前端开发技术,spa(single page application)单页应用的普及度越来越高,react以及vue这类的前端UI框架为spa提供的很好的实现。单页应用的本质其实就是浏览器首先加载必须的HTML、CSS和Javascript,所有的操作都在这张页面上完成,都由JavaScript来控制。

优点:

  • 分离前后端关注点,前端负责view,后端负责model,各司其职;

引言

前端是一个快速发展的领域,而在前端的技术栈当中,前端请求又是最见的一个领域,通过请求接口数据,才能将一个静态的页面动态化。本文将以前端发展的时间轴来逐一分析前端请求的技术演变及其优劣,针对这一课题,作者查阅了相关资料加以自己的理解,如有错误,烦请指出。

XMLHttpRequest

XMLHttpRequest是最早出现的与服务器交换数据的方案,有了XMLHttpRequest,开发者终于可以在不重新加载页面的情况下更新网页,可以在页面加载后请求接受以及发送数据。而所有浏览器均可以获取XMLHttpRequest对象:

var xhr = new XMLHttpRequest(); //获取xhr对象

但是XMLHttpRequest是个比较粗燥的底层对象,各个浏览器对其的创建方法也不同,以下是兼容方法: