Giter VIP home page Giter VIP logo

page-bridge's Introduction

PageBridge

Make communication between browser pages as simple as a computer network, using localStorage to achieve communication.

Quick start

Add this to an existing Vue or React project:

# npm
npm install bridge-page
# pnpm
pnpm install bridge-page
# yarn
yarn add bridge-page

System protocol

  • @bridge/create Register page data
  • @bridge/update Update page data
  • @bridge/delete Delete specified page

Usage example

The following shows some commonly used methods

bridge page

  • PageA a.html
<h1>A</h1>
import { PageBridge } from 'bridge-page';

// Create bridge object
const bridge = new PageBridge({ name: 'A' });
  • PageB b.html
<h1>B</h1>
import { PageBridge } from 'bridge-page';

// Create bridge object
const bridge = new PageBridge({ name: 'B' });

Page information

// Get current page information
bridge.getId(); // Current page ID
bridge.getName(); // Current page Name
bridge.getData(); // Current page Data
bridge.getPage(); // Current page Object
// Get specified page information
bridge.getPage(); // Current page
bridge.getPage('LVXJ7I56-CAV9930MH3A'); // Specify ID page
bridge.getPage('Name'); // Specify Name page
bridge.getPage((vo) => vo.data.label === 'Good' && vo.name === 'A'); // Specify Condition page
// Get a list of specified pages
bridge.getPages(); // All pages
bridge.getPages('LVXJ7I56-CAV9930MH3A'); // Specify ID pages
bridge.getPages('Name'); // Specify Name pages
bridge.getPages((vo) => vo.data.label === 'Good' && vo.name === 'A'); // Specify Condition pages
// Set current page information
bridge.setName('A'); // Set current page name
bridge.setData({ label: 'Good' }); // Set current page data

Subscribe/Publish

  • Page ready
// Current page ready
bridge.ready(async () => {
    console.log('Ready');
});
  • Subscribe
// Subscribe to events (broadcast)
bridge.on('visit', async (vo: PageMessage) => {
    // vo.getData(); # Get request data
});

// Subscribe to events (request)
bridge.on('say', async (vo: PageMessage) => {
    // vo.getData(); # Get request data
    return 'My Name is Main';
});

// Unsubscribe from events
bridge.off('say');
  • Publish broadcast
bridge.send({
    method: 'visit', // Method name
    data: { from: 'Main' }, // Request data
    page?: 'LVXJ7I56-CAV9930MH3A', // Specify ID page
    page?: null, // All pages
    page?: 'Name', // Specify Name pages
    page?: (vo) => vo.data.label === 'Good' && vo.name === 'A', // Specify Condition pages
});
  • Request & Response
bridge.request({
    method: 'say', // Method name
    data: { from: 'Main' }, // Request data
    target?: 'LVXJ7I56-CAV9930MH3A', // Specify ID page
    target?: undefined, // Current page
}).then((vo: any) => {
    console.log('say.then', vo);
}).catch((error: Error) => {
    console.log('say.catch', vo);
});

page-bridge's People

Contributors

h6play avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.