班会第 22 期

[ufologist]

• 技术

  • puer-mock

  一个简单易用 mock server, 为你提供可配置的接口和随机数据.

  为什么你需要一个 mock server

  • 聊一聊移动web分辨率的那些事儿

  苹果发布ios的时候，肯定会想到成千上万的PC网页，没法在自己的IOS系统上运行起来时间多么蛋疼的事情啊。但是呢，这些网页都是按照PC屏幕的大小写的呀。

  动不动就出现两个500多px的宽的div并列。这在当时640*960屏幕大小的iphone4上显示的话，简直是毁灭性的。(会各种折行，样式错乱)，那么细致如苹果肯定不允许这种事情发生。

  于是苹果公司的攻城狮们想出了一个歪招，那就是告诉浏览器，“你在一个980宽的大屏幕下在渲染呢”，浏览器就按照了980宽的方式，渲染出来页面图像。可是到了浏览器这边，其实是拿到了一张渲染好的、比屏幕大的网页图像。此时，苹果再把这张图像，缩放一下，缩为屏幕大小。(我们平时也经常这样干，把一张大图片用双指放大缩小)

  可以更改的布局宽度: viewport

  几次变迁: iphone6的普通扩大, iphone6 plus的扩大高清度

  

  • 移动端样式小技巧

  • line-height

    line-height的兼容问题不太好解决，容器高度越小，显示效果的差距越明显。稍微大一点的高度，最好把line-height设置为高度+1px，两个平台显示都还不错。

  • 多行省略

    .multiple-line-ellipsis {
      display: -webkit-box;    /* 1. -webkit-box 布局 */
      overflow: hidden;        /* 2. 设置元素超出隐藏 */
      text-overflow: ellipsis; /* 3. 设置超出样式为省略号 */
      -webkit-line-clamp: 2;   /* 4. 设置2行应用省略 */
      -webkit-box-orient: vertical;
      /* 酌情控制行高和字体大小 */
      /* line-height: 18px; */
      /* font-size: 14px; */
    }

  • 梯形角标的实现

  • 图文标题

    如果有图文对齐的需求的话，个人建议才用before伪元素来布局，before可以相对文案来定位

  • 左右宽度自适应

    我的方案是用box布局，左侧的容器设置box-flex:1，右侧不管它

  • display:inline-block

    行内元素在水平和垂直排列的时候会有间距

  • 模拟滚动

    模拟滚动也是在项目中遇到的常见布局。布局要求弹层出来后，弹层中的内容可以滚动，弹层背后的列表不能随弹层滚动而滚动。并且在弹层上滑动的时候，整个页面也不能随之滚动。

    页面内容、蒙层、蒙层中的内容互为兄弟节点，防止点击时页面穿透

  • gulp plugins 插件介绍

  gulp API 和一些常用的 gulp 插件

  • Stream手册

  src.pipe(dst)

  a.pipe(b).pipe(c).pipe(d)

  a.pipe(b); b.pipe(c); c.pipe(d);

  这和你通常在命令行或者终端中使用pipe一样: a | b | c | d

  • 移动前端—图片压缩上传实践

  在做移动端图片上传的时候，用户传的都是手机本地图片，而本地图片一般都相对比较大，拿iphone6来说，平时拍很多图片都是一两M的，如果直接这样上传，那图片就太大了，如果用户用的是移动流量，完全把图片上传显然不是一个好办法。

  直接在前端压缩图片，已经成了很多移动端图片上传的必备功能了

  在移动端压缩图片并且上传主要用到filereader、canvas 以及 formdata 这三个h5的api。逻辑并不难。整个过程就是：

  （1）用户使用input file上传图片的时候，用filereader读取用户上传的图片数据（base64格式）

  （2）把图片数据传入img对象，然后将img绘制到canvas上，再调用canvas.toDataURL对图片进行压缩

  （3）获取到压缩后的base64格式图片数据，转成二进制(Blob)塞入FormData，再通过XmlHttpRequest提交FormData。

  说起来好像挺简单，其实还是有些坑的。

  • localResizeIMG-前端本地客户端压缩图片，兼容IOS，Android，PC、自动按需加载文件
  • 移动端H5图片上传的那些坑
    • 当你竖着拿手机的时候，拍完照，上传图片时，会出现照片自动旋转的情况，而横着拍照并上传图片时不会出现这个问题。这个时候如果想纠正图片自动旋转的情况，将图片转化为二进制的数据(使用了binaryajax.js)，方便获取图片的exif信息，通过获取exif的信息来确定图片旋转的角度(使用了exif.js)，然后再进行图片相应的旋转处理。解决方法请戳我
    • 在IOS中，当图片的大小大于 2MB时，会出现图片压扁的情况，这个时候需要重置图片的比例。解决方法请戳我
  • 用中文编写javascript代码

  // 将下面的代码复制到 Chrome Console 中执行
  var 人 = {数量: 5, 腿: 2},
      大猫 = {数量: 5, 腿: 4},
      小猫 = {数量: 5, 腿: 4},
      鼠 = {数量: 5, 腿: 4};
  
  var 算腿 = function (谁, 带的那谁) {
      var 腿 = 0,
          谁的数量 = 谁.数量;
  
      while (谁的数量 >= 1) {
          腿 += 谁.腿;
  
          // 如果有[带的那谁],就递归
          if (带的那谁) {
              腿 += 算腿(带的那谁);
          }
  
          谁的数量 -= 1;
      }
  
      return 腿;
  };
  
  var 到底TM有多少条腿 = function (所有的东西) {
      var 腿 = 0;
  
      腿 += 算腿(所有的东西[0], 所有的东西[1]);
  
      // [谁]和[带的那谁]的计算完了,下一个
      所有的东西.shift();
  
      // 如果还有东西,就递归
      if (所有的东西.length >= 2) {
          腿 += 到底TM有多少条腿(所有的东西);
      }
  
      return 腿;
  };
  
  到底TM有多少条腿([人, 大猫, 小猫, 鼠]);

  • WEB前端 -“懒人”养成计划

  人类历史上曾诞生了琳琅满目的懒人科技，不断迁就着人性的弱点，有汽车、火车、飞机这种大型地、颠覆式发明，也有一些非常酷炫的小型创意，甚至还诞生了不错的服务，事实上，整个第三产业的市场就是来源于“懒人不想做的事情”。这些创意在改变人类生活的同时，也改变了懒汉的定义，在拥有了大量的新鲜玩意之后，他们的境界正大有提高，事实上，懒已经不是完全意义上的贬义词，在一定程度上，代表着高逼格。

  由于近几年前端的野蛮生长以及前端应用的多元化和复杂化，整个技术形态已经跟几年前纯做页面的时代完全迥异了。主要观念的变化总结来看在于一点，现在的前端开发面向的是web app而不是web page。前端如今已经脱离了茹毛饮血、刀耕火种的原始社会，开始步入了工业时代。 感谢这个快速发展的环境，给了页面狗，一个偷懒的机会：依靠新工具，新技术，极大的提高生产力。

  • 工欲善其事，必先利其器: EMMET：前端神器，页面仔必备啊！
  • 让CSS可编程，带你装逼带你飞
  • 快速创建前端静态网站 – http-server
  • 自动化构建工具GULP – 串起你的整个项目
  • 珍惜键盘，远离F5 – Browsersync
  • Api manage platform

  根据项目管理接口，开发人员新建项目后再新建接口，书写接口文档，统一进行管理

• 产品

  • 功能性动画UX设计——打造优秀的过渡转场效果

  功能性动画（functional animation）是有明确、合理目标的微动画。它能减少认知负荷，防止变化盲视，营造更好的空间关系。另外，动画让用户界面更贴近生活。 成功的动画设计具有以下六个特征：响应性, 关联性, 自然, 目的性, 清晰

  • 保持过渡动画简短，因为用户会频繁看到它们。控制动画持续时间在300ms或更短。
  • 过渡效果应当明确、简洁、连贯、清晰。记住，在动画方面，少即是多。我们应该只专注于动画能为用户带来的实际价值。
  • 动画不是随意为之。每个操作背后都有其目的。动画对用户起引导作用，突出重要内容。无论你的应用是欢乐幽默型还是严肃直接型，动画的运用原则都有助于你提供清晰、快速、连贯的用户体验。
  • 所谓的“微信OS”会掀起HTML5的二次革命吗？

  呼之欲出的应用号将会把微信变成一个“操作系统”，让一个个web应用在“微信OS”上运行，从而迈出微信商业化的最重要一步