整理2

时间 2019-11-15

标签整理繁體版

原文原文链接

一： ES6篇css

1: 箭头函数
箭头函数就是一种函数的简写形式，
用 => 符号来定义，而且没有本身的this，arguments，super或 new.target。
这些函数表达式更适用于那些原本须要匿名函数的地方，而且它们不能用做构造函数。html

2：异步Promise
好比有若干个任务要执行，先作任务一，成功后再作任务二，任何任务失败则不继续，执行错误处理函数。
要串联执行这样的异步任务。不用promise须要写一层一层的嵌套代码。前端

(1) 有了promise后，咱们只须要简单的写：vue

job1.then(job2).then(job3).catch(handleError);
// 其中，job一、job2和job3都是Promise对象。
//串行执行若干异步任务

(2) 在咱们包装好的函数最后，会return出Promise对象，也就是说，执行这个函数咱们获得了一个Promise对象。还记得Promise对象上有then、catch方法吧？这就是强大之处了，看下面的代码：node

function runAsync(){
    var p = new Promise(function(resolve, reject){
        //作一些异步操做
        setTimeout(function(){
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return p;            
}   
runAsync().then(function(data){
console.log(data);
    //后面能够用传过来的数据作些其余操做
    //......
});

//会在2秒后输出“执行完成”，紧接着输出“随便什么数据”。

(3) 而Promise的优点在于，能够在then方法中继续写Promise对象并返回，而后继续调用then来进行回调操做。webpack

//例子2：
 //异步方法一
function getone(resolve,reject){
    setTimeout(function(){
        resolve("getone");
    },3000)
}
//异步方法二
function gettwo(resolve,reject){
    setTimeout(function(){
        resolve("gettwo");
    },3000)
}
//异步方法三
function getthree(resolve,reject){
    setTimeout(function(){
        resolve("getthree");
    },3000)
}

var result = new Promise(getone)
    .then(function(resultone){
        console.log('----------one------------');
        console.log(resultone);
        return new Promise(gettwo);
    })
    .then(function(resulttwo){
        console.log('----------two------------');
        console.log(resulttwo);
        return new Promise(getthree);
    })
    .then(function(resultthree){
        console.log('-----------three---------');
        console.log(resultthree);
    })
    .catch(function(err){
        console.log(err);
    })

(4) Promise.all()
Promise.all方法用于请求多个并发接口数据。该方法的做用是将多个Promise对象实例包装，生成并返回一个新的Promise实例。ios

var p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    console.log(results);  // [1, 2, 3]
});

3：
二：移动篇web

1：移动端rem
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
因此这里总结一句，所谓依赖根元素来计算的方式，就是先给予html元素一个font-size，而后咱们全部的rem就根据这个font-size来计算
例如：vuex

html{ font-size:16px;}

那么咱们这里的1rem就应该这么来计算：1x16=16px=1rem；浏览器默认为16px可能形成rem计算上的麻烦和多位小数，因此，咱们也能够进行这种方式的初始化根元素：gulp

html{
   font-size=62.5% //这里就是10/16x100%=62.5% 也就是默认10px的字号
}

这样初始化以后，咱们来进行rem计算的时候，就会减小许多的麻烦。

或者：

当咱们指定一个元素的font-size为2rem的时候，也就说这个元素的字体大小为根元素<html>字体大小的两倍，若是html的font-size为12px，那么这个2rem的元素font-size就是24px。同理当该元素为3rem时，那么其实际font-size就是36px。

html {font-size: 12px;}
h1 { font-size: 2rem; } /* 2 × 12px = 24px */
p { font-size: 1.5rem;} /* 1.5 × 12px = 18px */
div {width: 20rem;} /* 20 * 12px = 240px*/


html {font-size: 16px;}
h1 { font-size: 2rem; } /* 2 × 16px = 32px */
p { font-size: 1.5rem;} /* 1.5 × 16px = 24px */
div {width: 20rem;} /* 20 * 16px = 320px*/

看到这里你应该就会发现，只要咱们根据不一样屏幕设定好根元素<html>的font-size，其余已经使用了rem单位的元素就会自适应显示相应的尺寸了。

单位定义特色
rem font size of the root element 以根元素字体大小为基准
em font size of the element 以父元素字体大小为基准

rem的计算：

细心的同窗就会发现了，咱们使用rem单位事先须要作的一件事情就是设置根元素<html>的font-size，一般有两种作法。

JS计算

经过JavaScript读取屏幕宽度，而后根据宽度计算出对应的尺寸并设置根元素的font-size。

const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

这样iphone8（375px）下html的font-size 就是14.0625px，iphone8p下font-size就是15.525px。

若是在iphone8（375px）下设置元素font-size为 1.7066rem，效果跟设置其font-size为 24px 是同样的(24 / 14.0625 = 1.7066)。

上面的示例是个很简单的例子，感兴趣的同窗能够在本身的页面上试一下或者开发者工具下打开淘宝触屏版，使用rem设置元素的样式，并经过开发者工具切换模拟机型观察页面效果。

也能够用媒体查询：

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}

px转rem能够经过工具：

fis3: fis3-postprocessor-px2rem
gulp stylus-px2rem
webpack px-to-rem-loader

2：移动端适配的技术方案：

(1) 经过媒体查询的方式即CSS3的meida queries

经过查询设备的宽度来执行不一样的 css 代码，最终达到界面的配置。核心语法是：
    @media screen and (max-width: 600px) {
     /*当屏幕尺寸小于600px时，应用下面的CSS    样式*/
      /*你的css代码*/
    }
缺点：代码量比较大，维护不方便

(2) Flex弹性布局

以天猫的实现方式进行说明：
它的viewport是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

高度定死，宽度自适应，元素都采用px作单位。

(3) rem + viewport 缩放

3: h5兼容安卓和iOS的键盘弹出影响布局的坑

H5输入框在弹起键盘后被遮挡

(1) IOS下，点击输入框，得到焦点，键盘会弹起。失去焦点，键盘会关闭是没有问题的。
在安卓下，关闭软键盘时，输入框的焦点并不会失去。要使用resize。
ios使用focus、blur处理所有软键盘事件，安卓部分可处理，但可加上window的resize事件监听软键盘的打开与关闭。
当调整浏览器窗口大小时，发生 resize 事件。

代码理解：
if判断 (当键盘弹起的时候，固定容器高度。)

4：移动微信端调整字体，样式乱掉的问题。
(1) 能够借助WeixinJSBridge对象来阻止字体大小调整

/ 设置网页字体为默认大小
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });

(2) 设置禁止网页字体被放大.

iOS下
对网页的 body 元素设置 -webkit-text-size-adjust: 100% !important;能够覆盖掉微信的    样式。
body {
    -webkit-text-size-adjust: 100% ;
}

三： vue篇

1：经过路由传值：

this.$router.push(`/home/${item.id}`);

2： created和mounted区别？

created：在模板渲染成html或者模板编译进路由前调用created。
即一般初始化某些属性值，而后再渲染成视图。

mounted：在模板渲染成html后调用。
一般是初始化页面完成后，再对html的dom节点进行一些须要的操做。

一般created使用的次数多，而mounted一般是在一些插件的使用或者组件的使用中进行操做，
好比插件chart.js的使用: var ctx = document.getElementById(ID);一般会有这一步，
而若是你写入组件中，你会发如今created中没法对chart进行一些初始化配置，
必定要等这个html渲染完后才能够进行，那么mounted就是不二之选。

3：兄弟组件之间传值。

(1)经过eventBus

通常建立一个evenBus.js

import Vue from 'vue'
   export default new Vue()
   //新建vue实例

$emit自定义事件

<input type="text" v-model="todoList">
       <button class="add" @click='addList'>增长</button>
       import eventBus from '../assets/evenBus'
       data(){
           return {
               todoList:''
           }
       },
       methods:{
           addList:function(){
               eventBus.$emit('add',this.todoList)
           }
       }

$on接收事件

import eventBus from '../assets/evenBus'   
   created:function(){
       this.acceptList()
   },
   methods:{
       acceptList:function(){
           eventBus.$on('add',(message)=>{
               this.lists.push({ name:message,isFinish:false })
           })
       }
   }

(2) vuex

建立store对象。

import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   var store=new Vuex.Store({
       //存储状态
       state:{
           lists:[
               { name:'数学做业',isFinish:false },
               { name:'语文做业',isFinish:false },
               { name:'化学做业',isFinish:false },
               { name:'物理做业',isFinish:false }
           ]
       },
       //显示的更改state
       mutation:{},
       //过滤state中的数据
       getters:{},
       //异步操做
       actions:{}
   });
   
   export default store;

2 在组建中引入并使用
在组件A中

<input type="text" v-model="todoList">
<button class="add" @click='addList'>增长</button>
 data(){
    return {
        todoList:''
    }
},
store:store,
methods:{
    addList:function(){
        this.$store.state.lists.push({name:this.todoList,isFinish:false})
    }
}

3 在组件B中

computed:{
    lists:function(){
        return this.$store.state.lists
    }
},

4 Vue实现数据双向绑定的原理：Object.defineProperty（）

view指的是页面的html和css构成的视图。

model指的是从后端取到的数据模型。

viewmodel 指的是前端开发人员组织生成和维护的视图数据层。这一层包含的是视图行为和数据。

vue经过 Object.defineProperty()来实现数据劫持。
它能够来控制一个对象属性的一些特有操做，好比读写权、是否能够枚举。
这里咱们主要先来研究下它对应的两个描述属性get和set

实现mvvm主要包含两个方面，数据变化更新视图，视图变化更新数据：

view更新data其实能够经过事件监听便可，好比input标签监听 'input' 事件就能够实现了。
因此咱们着重来分析下，当数据改变，如何更新视图？

数据更新视图的重点是如何知道数据变了，只要知道数据变了，那么接下去的事都好处理。
如何知道数据变了，其实上文咱们已经给出答案了，
就是经过Object.defineProperty( )对属性设置一个set函数，
当数据改变了就会来触发这个函数，因此咱们只要将一些须要更新的方法放在这里面就能够实现data更新view了。

5:Weex是什么？
(1) Weex是阿里开源的一套构建跨平台的移动框架。
Weex 主要解决了频繁发版和多端研发两大痛点

(2) 如何使用Weex？

第1步: 安装node.js
第2步: 安装weex-toolkit
第2步: 建立.we文件.Weex 程序的文件后缀（扩展名）是.we。

https://blog.csdn.net/yangyan...

四： JS篇
1，JS继承有几种方式？

(1) 构造函数绑定
例子：如今有两个类构造函数

//动物类
function Animal() {　　　　
    this.species = "动物";　　
}
//猫类
function Cat(name, color) {　　　　
    this.name = name;　　　　
    this.color = color;　　
}

怎样才能使"猫"继承"动物"的特性呢？
使用call或apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

function Cat(name, color) {　　　　
    Animal.apply(this, arguments);　　　　
    this.name = name;　　　　
    this.color = color;　　
}　　
var cat1 = new Cat("大毛", "黄色");　　
alert(cat1.species); // 动物

(2) 原型链继承
即子构造函数.prototype = new 父构造函数()

function Show(){
    this.name="run";
}

function Run(){
    this.age="20"; //Run继承了Show,经过原型，造成链条
}
Run.prototype=new Show();
var show=new Run();
console.log('结果', show.name)//结果：run

https://www.jianshu.com/p/b76...

1. log4j 2整理
2. 整理2
3. 笔试整理2
4. 附加整理2
5. 2-4. Numpy 整理笔记（完整）
6. Python学习（2）待整理
7. OpenStack整体理解(2)
8. 2. HDFS CLINT WRITE整理版
9. Unity复习整理（2）
10. perl学习整理2
更多相关文章...
• Thymeleaf扩展2(Say Hello) - Thymeleaf 教程
• 错误处理 - RUST 教程
• Docker 清理命令
• ☆技术问答集锦（13）Java Instrument原理