主要是针对vue做过的项目

vue

懒加载

vue-lazyload

1
2
3
4
5
6
7

import VueLazyLoad from 'vue-lazyload';
import defaultImg from '默认图片';
Vue.use(VueLazyLoad,{
  error: defaultImg,
  loading: defaultImg,
  listenEvents: [ 'scroll' ]
});

最后将使用:src的改为v-lazy

记录一下web页面在移动端出现的bug以及解决方法。

ios

发现其实好多问题都出现在ios呢。

1. position:fixed
   极为严重的bug，现在看到fixed我都不敢用了。
   问题如下（找了个百度的bug，反馈过，但到现在还没改，醉了）：
   
   使用fixed布局的元素再弹出虚拟键盘或者页面滑动时，位置会发生移动。

一直想写一下vue与react在写法上有哪些差异，打算跟着vue官网写一遍，然后再看对应的react是怎么实现的，所以现在开始吧。

安装

我直接使用工具来做这个例子了。

vue-cli

1
2
3
4
5

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

create-react-app

1
2
3
4
5

npm install -g create-react-app
create-react-app my-project
cd my-project
npm install
npm start

如果需要自己配置的话，自己去摸索。

我们经常需要使用到文字过长超出范围时使用省略号代替，而文本溢出有分为两种情况：单行和多行。

单行文本

具体实现

1
2
3
4

width: 具体宽度;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行文本

具体实现

1
2
3
4
5

width: 具体宽度;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 行数;
overflow: hidden;

在测试这一部分内容时，我发现如果文本内容中不是全部是中文的话，会出现问题。
举个例子

1

<div id="one">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

1
2
3
4
5
6
7

#one{
    width: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

效果

如果换成中文，则没有问题

1

<div id="one">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>

效果

暂时不知道怎么解决，之后找到方法再说。

前言

做移动端适配用的比较多的就是使用rem作为单位了吧。本来在做web的时候使用的是px，然后又有em作为单位（这个单位我都不怎么用，太麻烦了），现在移动端的话，基本都是rem了。

em

em是一个相对的单位。这里的相对便是基于父元素的font-size来改变的。

之前一直搞不懂Vuex怎么用，但学了Redux之后，发现Vuex简单好多啊。

安装

1

npm install vuex --save

前提是已经搭建好了其他vue的项目环境，开始！

使用

目录结构

效果

一直觉得直接使用前端技术来构建桌面应用或手机应用挺好玩的，因为做手机应用要装很多东西太麻烦，以后再学，现在就先学一下Electron吧。

安装

之前看到网上很多都是npm install electron-prebuilt -g，然后发现自己装的时候出错了，不知是不是教程太旧了。现在的是

1

cnpm install electron -g

（cnpm 淘宝镜像）

最近一周都没什么事干，就认真的看了一下js的原型，感觉自己终于有点理解了。

原型

对于原型，有两个概念要知道：__proto__和prototype。

__proto__

实例对象有__proto__属性

prototype

函数对象有prototype属性。哪些是函数对象呢？

1
2
3

function A(){}
var a = function(){}
new Function(){}

这些便是了。

constructor

原型对象上有一个constructor属性，用来指向它的函数对象。

例子

在javascript中，一切接对象！所以函数也是对象。当我们定义了一个对象时，该对象会自带一些属性。如果你只是一个普通对象，那你就会有__proto__属性，而如果你是一个函数的话，那你不只有__proto__，还有prototype。
举个栗子

1
2
3
4
5
6

let Person = function(){};
let boy = new Person();
console.log('instance __proto__', boy.__proto__);
console.log('instance prototype', boy.prototype);
console.log('function __proto__', Person.__proto__);
console.log('function prototype', Person.prototype);

得到的结果如下：

1
2

Person.prototype.constructor === Person
//true

其实就是一种循环引用，Person通过prototyop属性指向Person.prototypo这个原型对象，而这个原型对象又通过constructor这个属性指向回Person。

当js在创建对象时，它就会不知通过什么方式自动为这个对象创建__proto__这个属性，它相当于一个指针，指向该对象的构造函数的prototype属性，用上个例子来说就是

1

boy.__proto__ == Person.prototype

是时候献上神图了

原型链

一个实例的__proto__指向它的构造函数的原型对象，而它的构造函数的原型对象也有__proto__，继续指向它自己的原型对象，如此重复下去，知道最后一个Object.prototype，可以说它是一切对象的始祖，一切对象都是继承它来的，Object.prototype.__proto__为null，不在指向其它对象。这样便构成了一条原型链。

前言

公司app的新闻详情页是使用webview的，所以自然是我们web前端的事了。大概的需求如下：在继续阅读里，点击之后，颜色变灰，表示已经阅读；退出webview，再从原生进入，颜色变回原样。具体效果如下：

问题

星期五的时候遇到一个问题，就是在做移动端适配时，一些小图标在安卓手机下会出现变形的问题，如下图

注意看红色的小圆圈，本来应该都是圆形，但有些变成了椭圆。

因为使用的是rem作为长度单位，在网上查找资料之后发现，rem在安卓机上会出现渲染精度问题，不能准确的渲染，当然ios没什么问题。

解决办法

主要解决办法是提高精度。
下面我随便举个例子：

1

<div id="main"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#main{
    width: xxxrem;
    height: xxxrem;
    position: relative;
}
#main:after{
    content: '';
    position: absolute;
    background: url('图片路径') no-repeat center;
    /**假设图片宽为.24rem，高为.12rem**/
    width: 24rem;
    height: 24rem;
    background-size: 24rem 12rem;
    transform-origi: 0 0;
    transfrom: scale(0.01);
}

可以看出，提高精度的方法是先扩大100倍之后在进行缩小的变换。

经过上述方法能够解决变形问题。如有更好的方法，以后会作记录。