VickyWu

css揭秘

Tue, 21 Nov 2017 00:00:00 +0000

css揭秘

1、CSS编码技巧

尽量减少代码重复在某些值相互依赖时，应把他们的相互关系用代码表示出来。如:行高是字号的2倍，font-size:20px(可使用百分比和em);line-height:2;
代码易维护和代码量少不可兼得如:border-width:10px 10px 10px 5px,(代码量少); 如:border-width:10px; border-left-width:5px;(易维护);
响应式网页设计实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应尺寸。如:
- 使用百分比取代固定宽度、长度;
- 当图片以行列式布局时，display:inline-block或display:flex可以实现;
- 为替换元素(浏览器根据元素的标签和属性决定元素具体显示内容,如img、video)设max-width:100%;

2、用户体验

选用合适的鼠标光标如:
- 表单提交后设置cursor:not-allowed;
- 视频播放器cursor:none;
扩大可点击区域 border:10px solid transparent;background-clip:padding-box 若还需设置border时不适用。此时可利用伪类position:absolute覆盖。
自定义复选框
- 1.隐藏原样式position:absolute;clip:rect(0 0 0 0);rect demo 2.相邻label伪类覆盖原位置 ps : left >= right或者bottom <= top，则元素会被完全裁掉而不可见，即“隐藏”。通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的.

3、结构与布局

自适应内部元素 width: min-content;
垂直居中
- 1.父元素：display:flex;align-items:center;justify-content:center;
- 2.父元素：display:flex;子元素：margin:auto;
- 3.padding: 100px calc(50% - 50px);
- 4.视口居中子元素margin: 50vh auto 0;transform: translateY(-50%);
根据数量设置样式
- 1.一个li:only-child;
- 2.n个 ```css li:first-child:nth-last-child(n), li:first-child:nth-last-child(n)~li{
}
```
- 3.小于n个
```css
li:first-child:nth-last-child(-a+n),
li:first-child:nth-last-child(-a+n)~li{
    
}
```
- 4.大于n个 ```css li:first-child:nth-last-child(a+n), li:first-child:nth-last-child(a+n)~li{
} ```

iphoneX适配

Fri, 10 Nov 2017 00:00:00 +0000

iphoneX适配

使用安全区域

iPhone X的Safari浏览器中页面显示都具有边缘。内容自动设置在显示的安全区域内，不会被圆角或设备的传感器外壳遮挡住（俗称iPhone X的刘海）。如图：

使用整个屏幕

<meta name='viewport' viewport-fit='cover'>

viewport-fit 默认为auto，效果为上图。

使用整个屏幕的同时，需要应用内距

iOS 11中的WebKit包含了一个新的CSS函数constant()，以及一组四个预定义的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom。当合并一起使用时，允许样式引用每个方面的安全区域的大小。不支持constant()的浏览器，会自动忽略。

.post { 
    padding: 12px; 
    padding-left: constant(safe-area-inset-left); 
    padding-right: constant(safe-area-inset-right); 
}

但在竖屏时，左右的安全区域变成了0px。因此需要min()或max().两个函数都采用任意数量的参数，并返回最小值或最大值。它们可以在calc()中使用，或者嵌套在一起，这两个函数都允许像calc()一样的数学计算

终极版css

@supports(padding: max(0px)) { 
    .post { 
        padding-left: max(12px, constant(safe-area-inset-left));          
        padding-right: max(12px, constant(safe-area-inset-right));
    }
}

vue钩子函数

Wed, 01 Nov 2017 00:00:00 +0000

vue钩子函数

vue生命周期简介

vue1.x与2.x生命周期对比

ps:

1.<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，因此当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行，而没有 beforeDestroy和destroyed这两个生命周期钩子函数。 2、beforeCreate：el和data还没有初始化，可用于loading。 3、created：完成了data初始化，el还没有，请求接口数据。 4、beforeMount：完成了el、data初始化。 5、mounted挂载完成，可通过$refs获取dom，data值渲染到了对应的dom位置。mounted前先以的形式占住dom，在mounted时进行数据渲染。 6、data、store里的值发生改变，都会触发beforeUpdate、updated。

详见

关于redux

Thu, 10 Aug 2017 00:00:00 +0000

关于redux

设计原则

1.唯一数据源 2.状态只读 3.数据改变只能通过纯函数完成（即reducer为纯函数）

基本概念

1.store Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。 Redux 提供createStore这个函数，用来生成 Store。

import { createStore } from 'redux';
const store = createStore(fn);

2.state Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。当前时刻的 State，可以通过store.getState()拿到。

import { createStore } from 'redux';
const store = createStore(fn);

const state = store.getState();

Redux 规定，一个 State 对应一个 View。只要 State 相同，View 就相同。 3.action Action 是一个对象。用于view发出通知，表示state要发生变化。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置。

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

基本操作

注意

1.按照功能组织代码 2.保持state范式化 3.保持state扁平化 4.用selector读state 5.分离容器组件和傻瓜组件 6.使用react-redux

7.标准化action 8.使用creator创建action creator

export const createActionCreator = (type, payload) => {
    return (...args) => ({
        payload: (typeof payload === 'function') ? payload(...args) : payload,
        type: type,
    });
};

9.使用函数创造reducer 10.使用redux-immutable-addons 11.使用合适的异步处理方式

关于富文本编辑器

Sat, 03 Jun 2017 00:00:00 +0000

原理：

1.嵌入一个iframe 2.对iframe中的body设置designMode=’on’或contentEditable=’on’ 3.对操作的click事件设置document.execCommand(命令名[,交互方式,动态参数])方法

可视化编辑

可以使用contentEditable或designMode ###designMode 只能将document整体设为编辑模式 ###contentEditable 可讲任何HTML元素转为可编辑状态

IE兼容问题

1.在IE使用designMode，调用document.domain时报错（没有权限）解决（使用contentEditable） 2.在IE使用designMode，右键菜单没有粘贴复制功能解决（使用contentEditable） 3.IE6/IE7使用contentEditable，编辑区会自动获取焦点

execCommand

execCommand()是执行一个对当前文档，当前选择或者给出范围的命令。处理Html数据时常用如下格式：document.execCommand(sCommand[,交互方式, 动态参数])，其中：sCommand为指令参数，交互方式参数如果是true的话将显示对话框，如果为false的话，则不显示对话框（下例中的”false”即表示不显示对话框），动态参数一般为一可用值或属性值

好用的富文本编辑器

kindEditor ckeditor

判断变量类型

Thu, 20 Apr 2017 00:00:00 +0000

利用typeof

语法	类型
typeof(‘111’)	string
typeof(111)	number
typeof([111])	object
typeof({1:1})	object
typeof(function(){})	function
typeof(/w/)	object
typeof(null)	object

利用instance of 和利用原型链

A instance of B

A在B的原型链上

同利用原型链

function _instanceof(A, B) {
    var O = B.prototype;// 取B的显示原型
    A = A.__proto__;// 取A的隐式原型
    while (true) {
        //Object.prototype.__proto__ === null
        if (A === null)
            return false;
        if (O === A)// 这里重点：当 O 严格等于 A 时，返回 true
            return true;
        A = A.__proto__;
    }
}

通用方法

isArray:function (a) {
    return Object.prototype.toString.call(a) === '[object Array]';
},
isString:function (a) {
    return Object.prototype.toString.call(a) === '[object String]';
},
isNumber:function (a) {
    return Object.prototype.toString.call(a) === '[object Number]';
},
isFunction:function (a) {
    return Object.prototype.toString.call(a) === '[object Function]';
},
isNull:function (a) {
    return Object.prototype.toString.call(a) === '[object Null]';
},
isRegExp:function (a) {
    return Object.prototype.toString.call(a) === '[object RegExp]';
},
has:function (a,b) {          
    if(Object.prototype.toString.call(a)==='[object Array]'){
        for(var i in a){
            if(i==b){
                return true;
            }
        }
        return false;
    }

    if(Object.prototype.toString.call(a)==='[object Object]'){
        return b in a;
    }
},

字符串编码

Sat, 15 Apr 2017 00:00:00 +0000

JavaScript中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent 。

函数名	用法	参数	返回值	说明
escape(string)	编码字符串	字符串	编码的string副本	不会对 ASCII 字母、标点符号（ - _ . ! ~ * ‘ ( ) ）和数字进行编码
enCodeURI(URIstring)	把字符串作为URI编码	含有 URI 或其他要编码的字符串	编码的URIstring副本	不会对 ASCII 字母、标点符号（ - _ . ! ~ * ‘ ( );/?:@&=+$,# ）和数字进行编码
enCodeURIComponent(URIstring)	把字符串作为URI编码	含有 URI 或其他要编码的字符串	编码的URIstring副本	不会对 ASCII 字母、标点符号（ - _ . ! ~ * ‘ ( )）和数字进行编码

区别： |函数|区别| |:—:|:—:| |escape(string)|除了 ASCII 字母、数字和特定的符号外，对传进来的字符串全部进行转义编码，因此如果想对URL编码，最好不要使用此方法| |enCodeURI|用于编码整个URI,URI中的合法字符都不会被编码转换| |enCodeURIComponent|用于编码单个URIComponent（指请求参数。可以将参数中的中文、特殊字符进行转义，而不会影响整个URL|

事例

encodeURI('https://item.taobao.com/item.htm?spm=5148.8342959.694504.25.FysMb6&id=12945236853')
结果：https://item.taobao.com/item.htm?spm=5148.8342959.694504.25.FysMb6&id=12945236853

encodeURIComponent('https://item.taobao.com/item.htm?spm=5148.8342959.694504.25.FysMb6&id=12945236853')
结果： https%3A%2F%2Fitem.taobao.com%2Fitem.htm%3Fspm%3D5148.8342959.694504.25.FysMb6%26id%3D12945236853

escape('https://item.taobao.com/item.htm?spm=5148.8342959.694504.25.FysMb6&id=12945236853')
结果：https%3A//item.taobao.com/item.htm%3Fspm%3D5148.8342959.694504.25.FysMb6%26id%3D12945236853

H5文件操作API

Tue, 04 Apr 2017 00:00:00 +0000

关于文件操作的几个重要JS对象

1.Blob对象

Blob是原始数据对象，提供了slice方法（获取某块数据），size（数据大小）、type（数据MIME类型）属性。

2.FileList对象

File对象的集合。

<input type="file" id="File">

var file=$("#File").files;

变量file即为FileList对象。

3.File对象

继承自Blob对象，指向一个具体的文件。比Blob对象多了name（名称）、lastModifiedData（最后修改时间）属性。即为FileList数组中的每一项实例。

4.FileRender对象

用来读取文件里的数据。 4.1 readAsBinaryString(Blob) 传入一个Blob对象，然后读取数据的结果作为二进制字符串的形式放到FileReader的result属性中。 4.2 readAsText(Blob, optional DOMString encoding) 第一个参数传入Blog对象，然后第二个参数传入编码格式，异步将数据读取成功后放到result属性中，读取的内容是普通的文本字符串的形式 4.3 readAsDataURL(Blob blob) 传入一个Blob对象，读取内容可以做为URL属性，也就是说可以将一个图片的结果指向给一个img的src属性。

h5文件操作API

Mon, 13 Mar 2017 00:00:00 +0000

关于文件操作的几个重要JS对象

1.Blob对象

Blob是原始数据对象，提供了slice方法（获取某块数据），size（数据大小）、type（数据MIME类型）属性。

2.FileList对象

File对象的集合。

<input type="file" id="File">

var fileList=$("#File").files;

变量fileList即为FileList对象。

3.File对象

继承自Blob对象，指向一个具体的文件。比Blob对象多了name（名称）、lastModifiedData（最后修改时间）属性。即为FileList数组中的每一项实例。

4.FileRender对象

用来读取文件里的数据。

4.1 readAsBinaryString(Blob) 传入一个Blob对象，然后读取数据的结果作为二进制字符串的形式放到FileReader的result属性中。

4.2 readAsText(Blob, optional DOMString encoding) 第一个参数传入Blog对象，然后第二个参数传入编码格式，异步将数据读取成功后放到result属性中，读取的内容是普通的文本字符串的形式。

4.3 readAsDataURL(Blob blob) 传入一个Blob对象，读取内容可以做为URL属性，也就是说可以将一个图片的结果指向给一个img的src属性。

画布与图片

Wed, 08 Mar 2017 00:00:00 +0000

将图片填充至画布

drawImage()

将画布生成图片

canvas.toDataURL()

function drawCanvas(image) {
    var canvas=document.createElement('canvas');
    canvas.width=image.width;
    canvas.height=image.height;
    canvas.getContext('2d').drawImage(image,0,0);
    return canvas
}
function canvasToImg(canvas) {
    var image=new Image();
    image.src=canvas.toDataURL('image/png');
    return image;
}

VickyWu

css揭秘

css揭秘

1、CSS编码技巧

2、用户体验

3、结构与布局

iphoneX适配

iphoneX适配

使用安全区域

使用整个屏幕

使用整个屏幕的同时，需要应用内距

vue钩子函数

vue钩子函数

vue生命周期简介

ps:

关于redux

关于redux

设计原则

基本概念

基本操作

注意

关于富文本编辑器

原理：

可视化编辑

IE兼容问题

execCommand

好用的富文本编辑器

判断变量类型

利用typeof

利用instance of 和 利用原型链

通用方法

字符串编码

事例

H5文件操作API

关于文件操作的几个重要JS对象

1.Blob对象

2.FileList对象

3.File对象

4.FileRender对象

h5文件操作API

关于文件操作的几个重要JS对象

1.Blob对象

2.FileList对象

3.File对象

4.FileRender对象

画布与图片

将图片填充至画布

将画布生成图片

利用instance of 和利用原型链