接近年末,有一些空余时间,开始考虑对一个 vue1.x 版本的老项目进行重构
3个问题
- 现存的移动端适配方案很草率,是根据媒体查询做了一个简单的适配
- 打包构建非常速度慢,每次都是全局构建
- 没有做代码风格检测和测试
3个解法
- 选用 rem 或 vm 方案进行移动端适配
- 采用webpack打包,后续优化打包速度
- 统一使用es6语法,用babel转义,加入eslint检查(在standard标准配置上修改),加入测试
这篇博文不讲概念,基本上是学习了网上文章后的最佳实践
删除常规的移动端 meta 标签(重要)
1 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">著作权归作者所有。 |
加上 flexbible meta 标签(可选)
1 | <meta content="maximum-dpr=2" name="flexible" /> |
引用 cdn 地址,插入到 head 中
1 | <head> |
把视觉稿中的px转换成rem
工作中我们常见的视觉稿大小大至可为640、750、1125三种。不过flexible.js并没有限制只能用这三种,所以你还可以根据自身情况来调整,具体如何转换,我们以视觉稿为640px的宽来举例子,把640px分为100份,每一份称为一个单位a,那么每个a就是6.4px,而1rem单位被认定为10a,此时,1rem=1(a)X10X6.4(px)即64px。
1 | 640px/100=6.4px 1个单位a为6.4px |
因此,对于视觉稿上的元素的尺寸换算,只需要原始px值除以rem基准px值(此例子中为64px)即可。例如240px 120px的元素,最后转换为3.75rem 1.875rem。
1 | div { |
为了能更好的利于开发,在实际开发中,我们可以定制一个font-dpr()这样的Sass混合宏:1
2
3
4
5
6
7
8
9
10
11@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
有了这样的混合宏之后,在开发中可以直接这样使用:1
@include font-dpr(16px);
1 | .avatar { |
当然,也可以使用一些插件进行自动替换
1 | .scale{ |
今天看《你不知道的JavaScript》中模块化这一章,作者由闭包的特性引申到现代模块加载器的核心原理。为加深理解,小小的记录一下吧。
作用域和闭包联手,可以制造出极大的威力。模块,就是其中的一种:
1 | function foo() { |
正如在这段代码中所看到的,这里并没有明显的闭包,只有两个私有数据变量something和another,以及doSomething() 和doAnother() 两个内部函数,它们的词法作用域(而这就是闭包)也就是foo() 的内部作用域。
现在我们来做一些修改:
1 | function CoolModule() { |
很明显,foo就是一个模块的实例,而return
的对象就是这个模块暴露出来的对象。但是这里有一个让人不爽的地方就是,每次生成一个模块都需要执行一次CoolModule
这个函数。
我们通过IIFE(立即执行函数)将这个模块改造一下:
1 | var foo = (function CoolModule() { |
是不是感觉顺眼多了?利用了IIFE的特性形成了一个很常见的单例模式,使我们想暴露出来的公共API可以很方便的调用和修改模块内部的函数和变量。
大多数模块依赖加载器/ 管理器本质上都是将这种模块定义封装进一个友好的API。核心代码如下:
1 | var MyModules = (function Manager() { |
这段代码的核心是modules[name] = impl.apply(impl, deps)
。为了模块的定义引入了包装函数(可以传入任何依赖),并且将返回值,也就是模块的API,储存在一个根据名字来管理的模块列表中。下面展示了如何使用它来定义模块:
1 | MyModules.define( "bar", [], function() { |
由于闭包的特性,modules这个对象永远不会销毁,模块就可以达到垒增的效果。到目前为止,一个模块加载器就完成啦!
今天做新版的PC页面的时候,用了一些css3的变形动画(主要是一些hover效果),但是发现会出现一些掉帧卡顿的现象。最后通过transform3d开启硬件加速解决了该问题。
一般来说,CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢,很多浏览器提供了某些触发的CSS规则。
现在,像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速,当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启,最显著的特征的元素的3D变换。其原理是创建一个新的层,对该层进行硬件加速。
1 | .test-box { |
适合不需要用到3d变换的场景,用此法可达到欺骗浏览器的效果。
1 | .test-box { |
最近一直在做移动端h5的页面,用的了大量的flex布局。遂整理整理几个常见的用法作为一篇笔记博文发出。
1 | <div id="parent"> |
以示例结构为例,我们分别来实现以下5种常见布局(注释纯属偷懒):
1 | #parent{ |
1 | #parent{ |
1 | #parent{ |
1 | #parent{ |
1 | #parent{ |
1 | #parent{ |
未完待续…
缺失模块。
1、请确保node版本大于6.2
2、在博客根目录(注意不是yilia根目录)执行以下命令:
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置:
jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true