浅谈移动端单屏解决方案-横屏单屏

2023-03-08
阅读 7 分钟
1.4k
前文《浅谈移动端单屏解决方案》中,我介绍了移动端单屏场景下的一些常规解决方案。但是,这些方案主要针对的是竖屏的页面,对于一种特殊情况:横屏单屏页面,我们则需要进一步适配。

浅谈移动端单屏解决方案

2022-10-10
阅读 14 分钟
1.9k
文中我强调了移动端适配是对屏幕宽度进行缩放:对于普通的流式布局(长屏幕页面),页面内容是可以上下滚动的。屏幕小,一屏幕看到的东西虽然变少,但是用户可以通过手势滚动页面,继续浏览下一屏的内容。因此在常规情况下,对于屏幕宽度进行等比例缩放已经能解决大部分应用场景了

移动端常见适配方案

2022-05-12
阅读 6 分钟
5.5k
做移动端页面有一段时间了,总结下工作中常用的几种移动端适配方案。基础网上已经有非常多的基础知识总结,不再赘诉,详情可以见《关于移动端适配,你必须要知道的》《不要再问我移动适配的问题了》其中容易搞混的概念是视口 {代码...} meta标签中的viewport属性,就是视图的含义视口分为布局视口视觉视口理想视口布局视...
封面图

web视频基础教程

2021-01-04
阅读 7 分钟
8.3k
前言提到网页播放视频,大部分前端首先想到的肯定是: {代码...} 的确,一个简单的video标签就可以轻松实现视频播放功能但是,当视频的文件很大时,使用video的播放效果就不是很理想:播放不流畅(尤其在:首次初始化视频 场景时卡顿非常明显)浪费带宽,如果用户仅仅观看了一个视频的前几秒,可能已经被提前下载了几十兆流...

Ant Design Pro V2升级到V4 小结

2020-11-12
阅读 4 分钟
5.5k
前不久接手过一个历史悠久的项(shi)目(shan),技术栈之复杂(混乱)令我潸然泪下:你甚至可以在一个项目里使用前端三大框架(Angular1, Vue, React)。

SameSite小识

2020-03-31
阅读 3 分钟
7k
A cookie associated with a cross-site resource at [链接] was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure.

PixiJS基础教程

2019-12-09
阅读 10 分钟
7.2k
PixiJS是一个轻量级的2D渲染引擎,它能自动侦测使用WebGL还是Canvas来创建图形。这个库经常被用来制作HTML5游戏以及有复杂交互的H5活动页。

写给前端工程师看的Docker教程-实战篇

2019-10-08
阅读 7 分钟
4.1k
在上篇文章里,我们学习了Docker常用的命令和基本操作,现在可以开始实战了。 单页应用 前端工作中最常见的就是单页应用了。我们首先用create-react-app快速创建一个应用 {代码...} 可以看见正常启动的页面。 打包试一下 {代码...} 可以看到本地生成了一个build目录,这就是最后线上运行的代码。 <!-- more --> 我...

写给前端工程师看的Docker教程-基础篇

2019-10-08
阅读 5 分钟
1.4k
平时开发,我使用的是vscode编辑器,可以顺便安装docker插件。在插件商店搜索docker,安装完成后,我们可以很方便的管理Docker镜像和容器。

使用Web Worker优化代码

2019-09-10
阅读 4 分钟
3.1k
前段时间有个需求,需要前端导出excel。一般来说,对于导出大量数据的功能,最好还是交给后端来做,然而后端老哥并不想做(撕逼失败),只能自力更生。

lerna管理package

2019-07-09
阅读 3 分钟
7.1k
最近发现公司一个项目的目录组织挺奇怪的,所有的子项目都放在了packages目录里,还有这种骚操作?特意查了下资料,发现是一种比较流行的monorepo项目管理模式。近几年比较火的React,Vue,Babel都是用的这种模式:

傻傻分不清的Manifest

2019-06-05
阅读 14 分钟
25.4k
在前端,说到manifest,其实是有歧义的,就我了解的情况来说,manifest可以指代下列含义: html标签的manifest属性: 离线缓存(目前已被废弃) PWA: 将Web应用程序安装到设备的主屏幕 webpack中webpack-manifest-plugin插件打包出来的manifest.json文件,用来生成一份资源清单,为后端渲染服务 webpack中DLL打包时,输出...

重拾JSX

2019-03-20
阅读 5 分钟
2.2k
React的核心机制之一就是可以创建虚拟的DOM元素,利用虚拟DOM来减少对实际DOM的操作从而提升性能,JSX正是为了虚拟DOM而存在的语法糖

IntersectionObserve初试

2019-02-28
阅读 4 分钟
5k
IntersectionObserve这个API,可能知道的人并不多(我也是最近才知道...),这个API可以很方便的监听元素是否进入了可视区域。

JavaScript实现自定义的生命周期

2019-01-15
阅读 4 分钟
4.6k
听起来高大上的“生命周期”,其实也就是一些普通的方法,只是在不同的时期传参调用它们而已。我们可以照着React的生命周期,自己模拟一个简单的类,并让这个类拥有一些生命周期钩子

由一次重构代码所想到的

2018-09-09
阅读 3 分钟
3.4k
事件的起因源于我大三时写过的一个chrome插件:老司机的工具箱,当时因为某XX御所开启了老司机模式,导致资源下载链接被隐藏,再加上那时无意间看了一篇教程Chrome扩展及应用开发,于是性致勃勃的花了几天时间,写出了这个插件:用来显示被隐藏的下载地址和自动填写百度网盘密码。之后插件也陆陆续续迭代了几个版本,不...

Promise必知必会

2018-08-08
阅读 8 分钟
3.4k
前端开发中经常会进行一些异步操作,常见的异步有: 网络请求:ajax IO操作: readFile 定时器:setTimeout 博客地址 回调 最基础的异步解决方案莫过于回调函数了 前端经常会在成功时和失败时分别注册回调函数 {代码...} node的异步api,则通常只注册一个回调函数,通过约定的参数来判断到底是成功还是失败: {代码...} ...

简单易懂的现代魔法-递归

2018-07-31
阅读 2 分钟
3.4k
平时在前端开发中,好像也没啥用到递归的地方。不过这并不代表递归不重要,如果你看过一些框架的源码,就会经常见到它的影子:比如渲染虚拟DOM的render函数,webpack中require依赖分析,Koa2洋葱式的中间件模型,其实都运用到了递归算法。

JS实现监控微信小程序

2018-06-14
阅读 4 分钟
5.3k
之前也做过浏览器web端的SDK数据埋点上报,其实原理大同小异:通过劫持原始方法,获取需要上报的数据,最后再执行原始方法,这样就能实现无痕埋点。

使用模块化工具打包自己开发的JS库

2018-06-08
阅读 9 分钟
13.6k
小程序的模块化采用了Commonjs规范。也就是说,我需要提供一个monitor.js文件,并且该文件需要支持Commonjs,从而可以在小程序的入口文件app.js中导入:

JavaScript的面向对象

2018-03-26
阅读 2 分钟
1.6k
1.Person这个函数被定义后,会自带一个prototype属性,这个属性指向一个对象,既原型对象,这个对象同时有一个constructor属性,指向Person

RxJS基础教程

2018-03-19
阅读 11 分钟
8.4k
ReactiveX is a combination of the best ideas fromthe Observer pattern, the Iterator pattern, and functional programming

节流事件

2016-11-08
阅读 1 分钟
4.3k
有一些事件是会频繁触发的,比如scroll resize mousemove keyup如果在这些事件上绑定函数,并且这些函数要进行耗性能的计算,那么会导致页面忽急忽缓,反应迟钝,这时就需要使用节流事件来控制函数被触发的频率。