一次移动端重构

接近年末，有一些空余时间，开始考虑对一个 vue1.x 版本的老项目进行重构

3个问题

  1. 现存的移动端适配方案很草率，是根据媒体查询做了一个简单的适配
  2. 打包构建非常速度慢，每次都是全局构建
  3. 没有做代码风格检测和测试

3个解法

  1. 选用 rem 或 vm 方案进行移动端适配
  2. 采用webpack打包，后续优化打包速度
  3. 统一使用es6语法，用babel转义，加入eslint检查（在standard标准配置上修改），加入测试

待续

展开全文 >>

移动端适配方案之rem适配

这篇博文不讲概念，基本上是学习了网上文章后的最佳实践

问题

  1. 设计师给你一张视觉稿，要怎么样做到移动端设备适配呢？

准备材料

  1. 淘宝无线前端 lib-flexible
  2. 让设计师准备两份切图@2x @3x

步骤

  • 删除常规的移动端 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
    2
    3
    4
    <head>
    ...
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
    </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
    2
    3
    640px/100=6.4px                              1个单位a为6.4px
    1rem = 10a                                   1rem单位被认定为10a
    1rem = 1(a)*10*6.4(px) = 64px

因此，对于视觉稿上的元素的尺寸换算，只需要原始px值除以rem基准px值(此例子中为64px)即可。例如240px 120px的元素，最后转换为3.75rem 1.875rem。

  • 内容字体不要使用 rem
    工作中做完一个触屏版的页面后，我们会拿iPhone5s、iPhone6、iPhone6s等手机进行测试，他们都是Retina屏，我们当然希望在这些手机型号上看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本（例如iPhone7、iPhone7Plus）。另外，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，都是偶数，所以我们不希望出现13px和15px这样的奇葩尺寸。
    如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    div {
        width: 1rem;
        height: 0.4rem;
        font-size: 12px; // 默认写上dpr为1的fontSize
    }
    [data-dpr="2"] div {
        font-size: 24px;
    }
    [data-dpr="3"] div {
        font-size: 36px;
    }

为了能更好的利于开发，在实际开发中，我们可以定制一个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);

  • Retina 屏幕下图片模糊处理
    准备两份切图
    1）在devicePixelRatio<=2时，图片统一使用750设计稿的切图
    2）在devicePixelRatio>=2时，图片统一使用750*1.5=1125，也就是所谓@3x设计稿的切图。
    借助html元素的data-dpr属性，可以轻松实现另一种媒介查询，以便在devicePixelRatio>=2的时候启用@3x下的图片：
    1
    2
    3
    4
    5
    6
    .avatar {
      background-image: url("../img/@2x/merzoo.png?v=@@version");
      [data-dpr="3"] & {
        background-image: url("../img/@3x/merzoo.png?v=@@version");
      }
    }

当然，也可以使用一些插件进行自动替换

  • 解决 retina 屏下 border: 1px 问题
    设计师想要的retina下border: 1px;，其实就是1物理像素宽。而对于css而言，可以认为是border: 0.5px;，这是retina下(dpr=2)下能显示的最小单位。然而，无奈并不是所有手机浏览器都能识别border: 0.5px;，ios7以下，android等其他系统里，0.5px会被当成为0px处理，那么如何实现这0.5px呢？最简单的一个做法就是这样(元素scale)：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .scale{
        position: relative;
    }
    .scale:after{
        content:"";
        position: absolute;
        bottom:0px;
        left:0px;
        right:0px;
        border-bottom:1px solid #ddd;
        -webkit-transform:scaleY(.5);
        -webkit-transform-origin:0 0;
    }

展开全文 >>

由闭包到模块化——一起来实现一个模块加载器吧！

今天看《你不知道的JavaScript》中模块化这一章，作者由闭包的特性引申到现代模块加载器的核心原理。为加深理解，小小的记录一下吧。

作用域和闭包

作用域和闭包联手，可以制造出极大的威力。模块，就是其中的一种：

1
2
3
4
5
6
7
8
9
10
function foo() {
    var something = "cool";
    var another = [1, 2, 3];
    function doSomething() {
        console.log( something );
    }
    function doAnother() {
        console.log( another.join( " ! " ) );
    }
}

正如在这段代码中所看到的，这里并没有明显的闭包，只有两个私有数据变量something和another，以及doSomething() 和doAnother() 两个内部函数，它们的词法作用域（而这就是闭包）也就是foo() 的内部作用域。

现在我们来做一些修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];
    function doSomething() {
        console.log( something );
    }
    function doAnother() {
        console.log( another.join( " ! " ) );
    }
    return {
        doSomething: doSomething,
        doAnother: doAnother
    };
}
var foo = CoolModule();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

很明显，foo就是一个模块的实例，而return的对象就是这个模块暴露出来的对象。但是这里有一个让人不爽的地方就是，每次生成一个模块都需要执行一次CoolModule这个函数。

加个IIFE试试

我们通过IIFE（立即执行函数）将这个模块改造一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var foo = (function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];
    function doSomething() {
       console.log( something );
    }
    function doAnother() {
       console.log( another.join( " ! " ) );
    }
    return {
       doSomething: doSomething,
       doAnother: doAnother
    };
})();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

是不是感觉顺眼多了？利用了IIFE的特性形成了一个很常见的单例模式，使我们想暴露出来的公共API可以很方便的调用和修改模块内部的函数和变量。

实现一个模块加载器

大多数模块依赖加载器/ 管理器本质上都是将这种模块定义封装进一个友好的API。核心代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var MyModules = (function Manager() {
    var modules = {};
    function define(name, deps, impl) {
    for (var i=0; i<deps.length; i++) {
        deps[i] = modules[deps[i]];
    }
        modules[name] = impl.apply( impl, deps );
    }
    function get(name) {
        return modules[name];
    }
    return {
        define: define,
        get: get
    };
})();

这段代码的核心是modules[name] = impl.apply(impl, deps)。为了模块的定义引入了包装函数（可以传入任何依赖），并且将返回值，也就是模块的API，储存在一个根据名字来管理的模块列表中。下面展示了如何使用它来定义模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
MyModules.define( "bar", [], function() {
    function hello(who) {
        return "Let me introduce: " + who;
    }
    return {
        hello: hello
    };
});
MyModules.define( "foo", ["bar"], function(bar) {
    var hungry = "hippo";
    function awesome() {
        console.log( bar.hello( hungry ).toUpperCase() );
    }
    return {
        awesome: awesome
    };
});
var bar = MyModules.get( "bar" );
var foo = MyModules.get( "foo" );
console.log(
    bar.hello( "hippo" )
); // Let me introduce: hippo
foo.awesome(); // LET ME INTRODUCE: HIPPO

由于闭包的特性，modules这个对象永远不会销毁，模块就可以达到垒增的效果。到目前为止，一个模块加载器就完成啦！

展开全文 >>

css3硬件加速小记

今天做新版的PC页面的时候，用了一些css3的变形动画（主要是一些hover效果），但是发现会出现一些掉帧卡顿的现象。最后通过transform3d开启硬件加速解决了该问题。

默认不会开启GPU加速

一般来说，CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则。
现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。其原理是创建一个新的层，对该层进行硬件加速。

1）用translate: transform3d(0,0,0)开启加速

1
2
3
4
.test-box {
   -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

2）用transform: translateZ(0)开启加速

适合不需要用到3d变换的场景，用此法可达到欺骗浏览器的效果。

1
2
3
4
5
6
7
.test-box {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}

硬件加速的注意点

  • GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。
  • 不能让每个元素都启用硬件加速，这样会暂用很大的内存，使页面会有很强的卡顿感。
  • 避免嵌套太深，会导致父级元素不必要的重绘。

展开全文 >>

flex布局小记

最近一直在做移动端h5的页面，用的了大量的flex布局。遂整理整理几个常见的用法作为一篇笔记博文发出。

image

什么是flex布局

  • flex布局由w3c组织于2009年提出，旨在解决传统盒子模型布局中的多种局限性，提高布局的简洁性和便利性。
  • flex布局可以十分便利的构建响应式的页面。
  • 目前绝大部分现代浏览器已经可以支持，移动端浏览器全面支持。

怎么使用flex布局

1
2
3
4
5
<div id="parent">
    <p class="child1">1</p>
    <div class="child2">2</div>
    <h3 class="child3">3</h3>
</div>

以示例结构为例，我们分别来实现以下5种常见布局（注释纯属偷懒）：

  • 水平排列
1
2
3
#parent{
    display: flex; //关键代码
}
  • 水平居中排列
1
2
3
4
#parent{
    display: flex; //关键代码
    justify-content: center; //水平居中代码
}
  • 垂直排列
1
2
3
4
#parent{
    display: flex; //关键代码
    flex-direction: column; //纵向排布
}
  • 垂直居中排列
1
2
3
4
5
#parent{
    display: flex; //关键代码
    flex-direction: column; //纵向排布
    align-items: center; //垂直居中代码
}
  • 垂直水平居中排列
1
2
3
4
5
#parent{
    display: flex; //关键代码
    justify-content: center; //水平居中代码
    align-items: center; //垂直居中代码
}
  • 两端固定宽度，中间自适应（圣杯布局）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#parent{
    display: flex; //关键代码
}
.child1{
    width:30px;
    height:50px;
}
.child2{
    flex: 1;    // 等同于flex:1 1 0%;
    height:50px;
}
.child3{
    width:40px;
    height:50px;
}

未完待续…

展开全文 >>

tag:

    缺失模块。
    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

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家