將RxJS融入React項目

frontoldman 發布于2019-08-26 11:37 / 2665人閱讀

摘要：技術積累經過社區的努力學習資料還是很多的，官方中文文檔就已經很不錯，不過我們先從天精通初步感受一下然后配合一些中文文檔來補充知識點，最后再根據官方文檔來校驗整個知識體系。資料學習操作符的時候可以對照彈珠圖的交互彈珠圖的中文版中文文檔

前言

最近準備畢設，技術選型的時候因為功能的一些需求準備將RxJs融入到項目中，考慮RxJs的時候因為之前的技術棧還猶豫了一下，查了一些資料以及粗略瀏覽了一些文檔。感覺對于畢設項目RxJs的加入是有幫助的，因此打算系統的學習然后摘抄知識點以及實踐一些demo做技術積累。

RxJS技術積累

RxJs經過社區的努力學習資料還是很多的，官方中文文檔就已經很不錯，不過我們先從30 天精通 RxJS初步感受一下RxJS.然后配合一些中文文檔來補充知識點，最后再根據官方文檔來校驗整個知識體系。

RxJS 基本介紹

RxJS是一套由Observable sequences來組合異步行為和事件基礎程序的Library

RxJS 是Functional Programming 跟Reactive Programming 的結合

把每個運算包成一個個不同的function，并用這些function 組合出我們要的結果，這就是最簡單的Functional Programming

Functional Programming 強調沒有Side Effect，也就是function 要保持純粹，只做運算并返回一個值，沒有其他額外的行為。

Side Effect

Side Effect是指一個function做了跟本身運算返回值沒有關系的事，比如說修改某個全域變數，或是修改傳入參數的值，甚至是執行console.log都算是Side Effect。

前端常見的Side Effect:

發送http request

在畫面輸出值或是log

獲得用戶的input

Query DOM

Reactive Programming簡單來說就是當變數或資源發生變動時，由變數或資源自動告訴我發生變動了

Observable Observer Pattern（觀察者模式）

Observer Pattern 其實很常遇到，許多API 的設計上都用了Observer Pattern，最簡單的例子就是DOM 物件的事件監聽:

function clickHandler(event) {
    console.log("user click!");
}

document.body.addEventListener("click", clickHandler)

觀察者模式:我們可以對某件事注冊監聽，并在事件發生時，自動執行我們注冊的監聽者(listener)。

Es5版本:

function Producer() {
    
    // 這個 if 只是避免使用者不小心把 Producer 當做函數調用
    if(!(this instanceof Producer)) {
      throw new Error("請用 new Producer()!");
    }
    
    this.listeners = [];
}

// 加入監聽的方法
Producer.prototype.addListener = function(listener) {
    if(typeof listener === "function") {
        this.listeners.push(listener)
    } else {
        throw new Error("listener 必須是 function")
    }
}

// 移除監聽的方法
Producer.prototype.removeListener = function(listener) {
    this.listeners.splice(this.listeners.indexOf(listener), 1)
}

// 發送通知的方法
Producer.prototype.notify = function(message) {
    this.listeners.forEach(listener => {
        listener(message);
    })
}

es6 版本

class Producer {
    constructor() {
        this.listeners = [];
    }
    addListener(listener) {
        if(typeof listener === "function") {
            this.listeners.push(listener)
        } else {
            throw new Error("listener 必須是 function")
        }
    }
    removeListener(listener) {
        this.listeners.splice(this.listeners.indexOf(listener), 1)
    }
    notify(message) {
        this.listeners.forEach(listener => {
            listener(message);
        })
    }
}

調用例子:

var egghead = new Producer(); 

function listener1(message) {
    console.log(message + "from listener1");
}

function listener2(message) {
    console.log(message + "from listener2");
}

egghead.addListener(listener1);egghead.addListener(listener2);

egghead.notify("A new course!!")

輸出:

a new course!! from listener1
a new course!! from listener2

Iterator Pattern （迭代器模式）

JavaScript 到了ES6 才有原生的Iterator

在ECMAScript中Iterator最早其實是要采用類似Python的Iterator規范，就是Iterator在沒有元素之后，執行next會直接拋出錯誤；但后來經過一段時間討論后，決定采更functional的做法，改成在取得最后一個元素之后執行next永遠都回傳{ done: true, value: undefined }

var arr = [1, 2, 3];

var iterator = arr[Symbol.iterator]();

iterator.next();
// { value: 1, done: false }
iterator.next();
// { value: 2, done: false }
iterator.next();
// { value: 3, done: false }
iterator.next();
// { value: undefined, done: true }

簡單實現:

es5:

function IteratorFromArray(arr) {
    if(!(this instanceof IteratorFromArray)) {
        throw new Error("請用 new IteratorFromArray()!");
    }
    this._array = arr;
    this._cursor = 0;    
}

IteratorFromArray.prototype.next = function() {
    return this._cursor < this._array.length ?
        { value: this._array[this._cursor++], done: false } :
        { done: true };
}

es6:

class IteratorFromArray {
    constructor(arr) {
        this._array = arr;
        this._cursor = 0;
    }
  
    next() {
        return this._cursor < this._array.length ?
        { value: this._array[this._cursor++], done: false } :
        { done: true };
    }
}

優勢

Iterator的特性可以拿來做延遲運算(Lazy evaluation)，讓我們能用它來處理大數組。

第二因為iterator 本身是序列，所以可以第調用方法像map, filter... 等！

延遲運算(Lazy evaluation)

function* getNumbers(words) {
        for (let word of words) {
            if (/^[0-9]+$/.test(word)) {
                yield parseInt(word, 10);
            }
        }
    }
    
    const iterator = getNumbers("30 天精通 RxJS (04)");
    
    iterator.next();
    // { value: 3, done: false }
    iterator.next();
    // { value: 0, done: false }
    iterator.next();
    // { value: 0, done: false }
    iterator.next();
    // { value: 4, done: false }
    iterator.next();
    // { value: undefined, done: true }

把一個字串丟進getNumbersh函數時，并沒有馬上運算出字串中的所有數字，必須等到我們執行next()時，才會真的做運算，這就是所謂的延遲運算(evaluation strategy)

Observable簡介

Observer跟Iterator有個共通的特性，就是他們都是漸進式 (progressive)的取得資料，差別只在于Observer是生產者(Producer)推送資料(push )，而Iterator是消費者(Consumer)請求資料(pull)!

Observable其實就是這兩個Pattern思想的結合，Observable具備生產者推送資料的特性，同時能像序列，擁有序列處理資料的方法 (map, filter...)！

RxJS說白了就是一個核心三個重點。

一個核心是Observable 再加上相關的Operators(map, filter...)，這個部份是最重要的，其他三個重點本質上也是圍繞著這個核心在轉，所以我們會花將近20 天的篇數講這個部份的觀念及使用案例。

另外三個重點分別是

Observer

Subject

Schedulers

Observable 實踐

Observable 同時可以處理同步與異步的行為！

同步操作

var observable = Rx.Observable
    .create(function(observer) {
        observer.next("Jerry"); 
        observer.next("Anna");
    })
    
// 訂閱 observable    
observable.subscribe(function(value) {
    console.log(value);
})

> Jerry
> Anna

異步操作:

var observable = Rx.Observable
    .create(function(observer) {
        observer.next("Jerry"); // RxJS 4.x 以前的版本用 onNext
        observer.next("Anna");
        
        setTimeout(() => {
            observer.next("RxJS 30 days!");
        }, 30)
    })
    
console.log("start");
observable.subscribe(function(value) {
    console.log(value);
});
console.log("end");

>
start
Jerry
Anna
end
RxJS 30 days!

觀察者Observer

Observable 可以被訂閱(subscribe)，或說可以被觀察，而訂閱Observable的又稱為觀察者(Observer)。
觀察者是一個具有三個方法(method)的對象，每當Observable 發生事件時，便會呼叫觀察者相對應的方法。

next：每當Observable 發送出新的值，next 方法就會被呼叫。

complete：在Observable 沒有其他的資料可以取得時，complete 方法就會被呼叫，在complete 被呼叫之后，next 方法就不會再起作用。

error：每當Observable 內發生錯誤時，error 方法就會被呼叫。

var observable = Rx.Observable
    .create(function(observer) {
            observer.next("Jerry");
            observer.next("Anna");
            observer.complete();
            observer.next("not work");
    })
    
// 定義一個觀察者
var observer = {
    next: function(value) {
        console.log(value);
    },
    error: function(error) {
        console.log(error)
    },
    complete: function() {
        console.log("complete")
    }
}

//  訂閱 observable    
observable.subscribe(observer)

>
Jerry
Anna
complete


// complete執行后，next就會自動失效，所以沒有印出not work。

捕獲錯誤實例：

var observable = Rx.Observable
  .create(function(observer) {
    try {
      observer.next("Jerry");
      observer.next("Anna");
      throw "some exception";
    } catch(e) {
      observer.error(e)
    }
  });

var observer = {
    next: function(value) {
        console.log(value);
    },
    error: function(error) {
        console.log("Error: ", error)
    },
    complete: function() {
        console.log("complete")
    }
}

observable    
observable.subscribe(observer)

>
Jerry
Anna
Error:  some exception

觀察者可以是不完整的，他可以只具有一個next 方法

訂閱一個Observable 就像是執行一個function

Operator操作符

Operators 就是一個個被附加到Observable 型別的函數，例如像是map, filter, contactAll... 等等

每個operator都會回傳一個新的observable，而我們可以透過create的方法建立各種operator

Observable 有許多創建實例的方法，稱為creation operator。下面我們列出RxJS 常用的creation operator:

create
of
from
fromEvent
fromPromise
never
empty
throw
interval
timer

當我們想要同步的傳遞幾個值時，就可以用of這個operator來簡潔的表達!

var source = Rx.Observable.of("Jerry", "Anna");

source.subscribe({
    next: function(value) {
        console.log(value)
    },
    complete: function() {
        console.log("complete!");
    },
    error: function(error) {
        console.log(error)
    }
});

// Jerry
// Anna
// complete!

用from來接收任何可枚舉的參數（Set, WeakSet, Iterator 等都可）

var arr = ["Jerry", "Anna", 2016, 2017, "30 days"] 
var source = Rx.Observable.from(arr);

source.subscribe({
    next: function(value) {
        console.log(value)
    },
    complete: function() {
        console.log("complete!");
    },
    error: function(error) {
        console.log(error)
    }
});

// Jerry
// Anna
// 2016
// 2017
// 30 days
// complete!


var source = Rx.Observable.from("123");

source.subscribe({
    next: function(value) {
        console.log(value)
    },
    complete: function() {
        console.log("complete!");
    },
    error: function(error) {
        console.log(error)
    }
});
// 1
// 2
// 3
// complete!


var source = Rx.Observable
  .from(new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Hello RxJS!");
    },3000)
  }))
  
source.subscribe({
    next: function(value) {
        console.log(value)
    },
    complete: function() {
        console.log("complete!");
    },
    error: function(error) {
    console.log(error)
    }
});

// Hello RxJS!
// complete!

可以用Event建立Observable，通過fromEvent的方法

var source = Rx.Observable.fromEvent(document.body, "click");

source.subscribe({
    next: function(value) {
        console.log(value)
    },
    complete: function() {
        console.log("complete!");
    },
    error: function(error) {
        console.log(error)
    }
});

fromEvent的第一個參數要傳入DOM ，第二個參數傳入要監聽的事件名稱。上面的代碼會針對body 的click 事件做監聽，每當點擊body 就會印出event。

獲取 DOM 的常用方法：
document.getElementById()
document.querySelector()
document.getElementsByTagName()
document.getElementsByClassName()

Event來建立Observable實例還有另一個方法fromEventPattern，這個方法是給類事件使用

所謂的類事件就是指其行為跟事件相像，同時具有注冊監聽及移除監聽兩種行為，就像DOM Event有addEventListener及removeEventListener一樣

class Producer {
    constructor() {
        this.listeners = [];
    }
    addListener(listener) {
        if(typeof listener === "function") {
            this.listeners.push(listener)
        } else {
            throw new Error("listener 必須是 function")
        }
    }
    removeListener(listener) {
        this.listeners.splice(this.listeners.indexOf(listener), 1)
    }
    notify(message) {
        this.listeners.forEach(listener => {
            listener(message);
        })
    }
}

var egghead = new Producer(); 


var source = Rx.Observable
    .fromEventPattern(
        (handler) => egghead.addListener(handler), 
        (handler) => egghead.removeListener(handler)
    );
  
source.subscribe({
    next: function(value) {
        console.log(value)
    },
    complete: function() {
        console.log("complete!");
    },
    error: function(error) {
        console.log(error)
    }
})

egghead.notify("Hello! Can you hear me?");

字數受限，可以去博客看完整版

Subject簡介

Subject 可以拿去訂閱Observable(source) 代表他是一個Observer，同時Subject 又可以被Observer(observerA, observerB) 訂閱，代表他是一個Observable。

Subject 同時是Observable 又是Observer

Subject 會對內部的observers 清單進行組播(multicast)

Subject應用

Subject 在內部管理一份observer 的清單，并在接收到值時遍歷這份清單并送出值

var subject = new Rx.Subject();

var observerA = {
    next: value => console.log("A next: " + value),
    error: error => console.log("A error: " + error),
    complete: () => console.log("A complete!")
}

var observerB = {
    next: value => console.log("B next: " + value),
    error: error => console.log("B error: " + error),
    complete: () => console.log("B complete!")
}

subject.subscribe(observerA);
subject.subscribe(observerB);

subject.next(1);
// "A next: 1"
// "B next: 1"
subject.next(2);
// "A next: 2"
// "B next: 2"

這里我們可以直接用subject 的next 方法傳送值，所有訂閱的observer 就會接收到，又因為Subject 本身是Observable，所以這樣的使用方式很適合用在某些無法直接使用Observable 的前端框架中，例如在React 想對DOM 的事件做監聽

class MyButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
        this.subject = new Rx.Subject();
        
        this.subject
            .mapTo(1)
            .scan((origin, next) => origin + next)
            .subscribe(x => {
                this.setState({ count: x })
            })
    }
    render() {
        return 
    }
}

BehaviorSubject

BehaviorSubject 是用來呈現當前的值，而不是單純的發送事件。BehaviorSubject 會記住最新一次發送的元素，并把該元素當作目前的值，在使用上BehaviorSubject 建構式需要傳入一個參數來代表起始的狀態

// BehaviorSubject 在建立時就需要給定一個狀態，并在之后任何一次訂閱，就會先送出最新的狀態。其實這種行為就是一種狀態的表達而非單存的事件，就像是年齡跟生日一樣，年齡是一種狀態而生日就是事件；所以當我們想要用一個stream 來表達年齡時，就應該用BehaviorSubject 。

var subject = new Rx.BehaviorSubject(0); // 0
var observerA = {
    next: value => console.log("A next: " + value),
    error: error => console.log("A error: " + error),
    complete: () => console.log("A complete!")
}

var observerB = {
    next: value => console.log("B next: " + value),
    error: error => console.log("B error: " + error),
    complete: () => console.log("B complete!")
}

subject.subscribe(observerA);
// "A next: 0"
subject.next(1);
// "A next: 1"
subject.next(2);
// "A next: 2"
subject.next(3);
// "A next: 3"

setTimeout(() => {
    subject.subscribe(observerB); 
    // "B next: 3"
},3000)

ReplaySubject

在新訂閱時重新發送最后的幾個元素，這時我們就可以用ReplaySubject

var subject = new Rx.ReplaySubject(2); // 重復發送最后倆個元素
var observerA = {
    next: value => console.log("A next: " + value),
    error: error => console.log("A error: " + error),
    complete: () => console.log("A complete!")
}

var observerB = {
    next: value => console.log("B next: " + value),
    error: error => console.log("B error: " + error),
    complete: () => console.log("B complete!")
}

subject.subscribe(observerA);
subject.next(1);
// "A next: 1"
subject.next(2);
// "A next: 2"
subject.next(3);
// "A next: 3"

setTimeout(() => {
    subject.subscribe(observerB);
    // "B next: 2"
    // "B next: 3"
},3000)

AsyncSubject

在subject結束后送出最后一個值

var subject = new Rx.AsyncSubject();
var observerA = {
    next: value => console.log("A next: " + value),
    error: error => console.log("A error: " + error),
    complete: () => console.log("A complete!")
}

var observerB = {
    next: value => console.log("B next: " + value),
    error: error => console.log("B error: " + error),
    complete: () => console.log("B complete!")
}

subject.subscribe(observerA);
subject.next(1);
subject.next(2);
subject.next(3);
subject.complete();
// "A next: 3"
// "A complete!"

setTimeout(() => {
    subject.subscribe(observerB);
    // "B next: 3"
    // "B complete!"
},3000)

Observable and Subject

multicast

multicast 可以用來掛載subject 并回傳一個可連結(connectable)的observable

var source = Rx.Observable.interval(1000)
             .take(3)
             .multicast(new Rx.Subject());

var observerA = {
    next: value => console.log("A next: " + value),
    error: error => console.log("A error: " + error),
    complete: () => console.log("A complete!")
}

var observerB = {
    next: value => console.log("B next: " + value),
    error: error => console.log("B error: " + error),
    complete: () => console.log("B complete!")
}

source.subscribe(observerA); // subject.subscribe(observerA)

source.connect(); // source.subscribe(subject)

setTimeout(() => {
    source.subscribe(observerB); // subject.subscribe(observerB)
}, 1000);

必須真的等到執行connect()后才會真的用subject訂閱source，并開始送出元素，如果沒有執行connect()observable是不會真正執行的。


var source = Rx.Observable.interval(1000)
             .do(x => console.log("send: " + x))
             .multicast(new Rx.Subject()); // 無限的 observable 

var observerA = {
    next: value => console.log("A next: " + value),
    error: error => console.log("A error: " + error),
    complete: () => console.log("A complete!")
}

var observerB = {
    next: value => console.log("B next: " + value),
    error: error => console.log("B error: " + error),
    complete: () => console.log("B complete!")
}

var subscriptionA = source.subscribe(observerA);

var realSubscription = source.connect();

var subscriptionB;
setTimeout(() => {
    subscriptionB = source.subscribe(observerB);
}, 1000);

setTimeout(() => {
    subscriptionA.unsubscribe();
    subscriptionB.unsubscribe(); 
    // 雖然A,B退訂，但是時間流還是繼續執行
}, 5000);

setTimeout(() => {
    realSubscription.unsubscribe();
    // 這里才會真正的退訂
}, 7000);

refCount

建立一個只要有訂閱就會自動connect 的observable

var source = Rx.Observable.interval(1000)
             .do(x => console.log("send: " + x))
             .multicast(new Rx.Subject())
             .refCount();

var observerA = {
    next: value => console.log("A next: " + value),
    error: error => console.log("A error: " + error),
    complete: () => console.log("A complete!")
}

var observerB = {
    next: value => console.log("B next: " + value),
    error: error => console.log("B error: " + error),
    complete: () => console.log("B complete!")
}

var subscriptionA = source.subscribe(observerA); // 當source 一被observerA 訂閱時(訂閱數從0 變成1)，就會立即執行并發送元素


var subscriptionB;
setTimeout(() => {
    subscriptionB = source.subscribe(observerB);

}, 1000);

setTimeout(() => {
    subscriptionA.unsubscribe(); // 訂閱減一    subscriptionB.unsubscribe(); // 訂閱為0，停止發送
}, 5000);

publish

等價于 multicast(new Rx.Subject())

var source = Rx.Observable.interval(1000)
             .publish() 
             .refCount();
             
// var source = Rx.Observable.interval(1000)
//             .multicast(new Rx.Subject()) 
//             .refCount();

var source = Rx.Observable.interval(1000)
             .publishReplay(1) 
             .refCount();
             
// var source = Rx.Observable.interval(1000)
//             .multicast(new Rx.ReplaySubject(1)) 
//             .refCount();


var source = Rx.Observable.interval(1000)
             .publishBehavior(0) 
             .refCount();
             
// var source = Rx.Observable.interval(1000)
//             .multicast(new Rx.BehaviorSubject(0)) 
//             .refCount();

var source = Rx.Observable.interval(1000)
             .publishLast() 
             .refCount();
             
// var source = Rx.Observable.interval(1000)
//             .multicast(new Rx.AsyncSubject(1)) 
//             .refCount();

share

等價于  publish + refCount

var source = Rx.Observable.interval(1000)
             .share();
             
// var source = Rx.Observable.interval(1000)
//             .publish() 
//             .refCount();

// var source = Rx.Observable.interval(1000)
//             .multicast(new Rx.Subject()) 
//             .refCount();

Scheduler Scheduler簡介

Scheduler 控制一個observable 的訂閱什么時候開始，以及發送元素什么時候送達，主要由以下三個元素所組成

Scheduler 是一個對象結構。它知道如何根據優先級或其他標準來儲存并執行任務。
Scheduler 是一個執行環境。它意味著任務何時何地被執行，比如像是立即執行、在回調(callback)中執行、setTimeout 中執行、animation frame 中執行
Scheduler是一個虛擬時鐘。它透過now()這個方法提供了時間的概念，我們可以讓任務在特定的時間點被執行。

// Scheduler 會影響Observable 開始執行及元素送達的時機

var observable = Rx.Observable.create(function (observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    observer.complete();
});

console.log("before subscribe");
observable.observeOn(Rx.Scheduler.async) // 設為 async
.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log("Error: " + err); },
    complete: () => { console.log("complete"); }
});
console.log("after subscribe");

項目中的RxJs

在項目中RxJs可以通過庫的形式引用，也可以引用結合了框架的組合。

通過之前的學習，對RxJs有了一定的了解。對我而言RxJS最好的應用場景就是復雜的UI交互。

而且在學習RxJS的資料中，很多典型的Demo都是:

拖拽交互

Auto Complete

等等

利用RxJS能把我們以前需要寫很多判斷，很多邏輯的UI交互都簡化了，通過它自帶的一套Stream的用法，可以利用更少的代碼完成以前的復雜的工作量，提供了開發效率。

RxJS同時能應用在組件狀態管理中，可以參考Reactive 視角審視 React 組件

在React中，內部通過setState管理狀態。狀態的變更可以依賴RxJS流,在需要的Response中setState即可。

其他方案可以自行根據項目需求加入，需要就引入，不需要就不要加，不要為RxJS而RxJS.

還要注意的是RxJS的操作符非常強大，但是數量極多，因此一開始開發入門的時候先設計好邏輯再去查文檔。

官方的example有很多例子可以參考應用。

認識一下 redux-observable

redux-observable，則是通過創建epics中間件，為每一個dispatch添加相應的附加效果。相較于thunk中間件，使用redux-observable來處理異步action，有以下兩個優點：

不需要修改reducer，我們的reducer可以依然保持簡單的純函數形態。
epics中間件會將action封裝成Observable對象，可以使用RxJs的相應api來控制異步流程。

比起redux-thunk,redux-observable能夠強有力的支持更為復雜的異步邏輯。用更少的代碼來實現需求。

總結

通過幾天的學習，對RxJS有了一定的了解，之后就是將其應用到實際項目中。

資料

學習操作符的時候可以對照彈珠圖

Rx Observables 的交互彈珠圖

Learn RxJS 的中文版

redux-observable中文文檔

云服務器 GPU云服務器怎么部署react項目將項目部署至云服務器將項目部署到云服務器將項目上傳到騰訊云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107246.html

使用RxJS管理React應用狀態的實踐分享

摘要：隨著前端應用的復雜度越來越高，如何管理應用的數據已經是一個不可回避的問題。應用的數據不是只有狀態的，還有事件異步常量等等。出于以上兩點原因，最終決定基于來設計一套管理應用的狀態的解決方案。隨著前端應用的復雜度越來越高，如何管理應用的數據已經是一個不可回避的問題。當你面對的是業務場景復雜、需求變動頻繁、各種應用數據互相關聯依賴的大型前端應用時，你會如何去管理應用的狀態數據呢？我們認為...

KunMinX 2019-08-26 13:41 評論0 收藏0
用RxJS和react開發mac地址輸入框

摘要：項目簡介本次使用了和開發了一個地址輸入框，主要實現的功能有限制輸入符合條件的字符并每隔兩位可以自動添加用于分割的冒號。項目屏蔽了的事件處理，同時使用來手動控制光標。繼承于和因此同時具有和兩者的方法。后面的和都是需要利用最新的來進行判斷的。項目簡介本次使用了RxJS和react開發了一個mac地址輸入框，主要實現的功能有限制輸入符合條件的字符1-9,a-f,并每隔兩位可以自動添加用于...

CastlePeaK 2019-08-22 16:18 評論0 收藏0
1月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享視頻前端技術論壇融合不可錯過的迷你庫測試框架實例教程為你詳細解讀請求頭的具體含意解析的庫如果要用前端框架，開發流程是怎樣的與有什么區別正確使用的方法是什么流程圖插件小如何讓元素只能輸入純文本前端技術中更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfront...

solocoder 2019-08-20 14:37 評論0 收藏0
微前端 —— portal項目

摘要：前言微前端理論篇上一篇介紹了微前端的理念，本片將開始介紹項目。先實現公共依賴的引入吧。在上一步我們沒有引入的依賴包，是因為的依賴包是作為公共依賴導入的。里面全是我的公共依賴文件在下新建文件夾，新建文件，作為我們整個項目的頁面文件。前言微前端 —— 理論篇上一篇介紹了微前端的理念，本片將開始介紹portal項目。 portal項目介紹 ????????portal項目包括兩個...

shiguibiao 2019-08-26 10:32 評論0 收藏0