整理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 事件。
clipboard.png

代碼理解：
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：兄弟組件 之間 傳值。

clipboard.png

(1)經過eventBus

  1. 通常建立一個evenBus.js

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

  2. $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)
           }
       }

  3. $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

  1. 建立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主要包含兩個方面，數據變化更新視圖，視圖變化更新數據：

clipboard.png

view更新data其實能夠經過事件監聽便可，好比input標籤監聽 'input' 事件就能夠實現了。
因此咱們着重來分析下，當數據改變，如何更新視圖？

數據更新視圖的重點是如何知道數據變了，只要知道數據變了，那麼接下去的事都好處理。
如何知道數據變了，其實上文咱們已經給出答案了，
就是經過Object.defineProperty( )對屬性設置一個set函數，
當數據改變了就會來觸發這個函數，因此咱們只要將一些須要更新的方法放在這裏面就能夠實現data更新view了。

clipboard.png

5:Weex是什麼？
(1) Weex是阿里開源的一套構建跨平臺的移動框架。
Weex 主要解決了頻繁發版和多端研發兩大痛點

(2) 如何使用Weex？

  1. 第1步: 安裝node.js
  2. 第2步: 安裝weex-toolkit
  3. 第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...

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程