Giter Club home page Giter Club logo

spa-custom-hooks's Introduction

spa-custom-hooks

license license license license license

简体中文 | English

spa-custom-hooks 是什么?

  • 一个可以定制页面钩子的东西,你可以注册全局的异步任务,自己定义钩子的触发条件,满足条件时即可自动执行页面里相关的钩子。
  • 支持和vue的原生钩子created,mounted等随意搭配使用。
  • 支持vue架构(包括uni-app、wepy、mpvue等)以及各种小程序。

它有什么用?

用简单优雅的方式解决页面逻辑依赖全局异步数据的问题

常见应用场景

export default {
    name: 'Home',
    onCreatedLogin(){
        //登录成功(拿到token) && 页面初始化完成
        //Tips:适用于某页面发送的请求依赖token的场景
    },
    onCreatedUserInfo(){
        //页面初始化完成 && 获取用户信息完成
        //Tips:适用于页面初始化时需要用到用户信息去做判断再走页面逻辑的场景
    },
    onMountedUserInfo(){
        //dom渲染完成 && 获取用户信息完成
        //Tips:适用于首次进入页面需要在canvas上渲染头像的类似场景
    },
    onReadyShow(){
        //小程序内页面渲染完成 && 页面显示
        //Tips:适用于需要获取小程序组件或者dom,并且每次页面显示都会执行的场景
    },
}

使用示例

//第一步,安装插件:
npm install spa-custom-hooks

//第二步,入口文件里注册插件:
import CustomHook from 'spa-custom-hooks';
const diyHooks = {
     'UserInfo':{
        name:'UserInfo',
        watchKey: 'userinfo',
        deep: true,
        onUpdate(val){
            //userinfo里的nickName非空则表示命中此钩子
            return !!val.nickName;
        }
    }
}
//1.vue架构的注册方式
import store from  './store'
Vue.use(CustomHook ,diyHooks,store)
//2.原生小程序的注册方式
//提前定义globalData
const globalData = {
    userInfo: {
        nickName: ''
    }
}
CustomHook.install(diyHooks,globalData)

//第三步,业务页面里使用插件(任何页面都可以使用,耦合度低,重复性代码少):
onLoadUserInfo(){
    //可以渲染canvas了
    renderCanvas();
}

注册参数说明

注册CustomHook

//vue架构-main.js
import store from './store'
import CustomHook from 'spa-custom-hooks';
Vue.use(CustomHook,diyHooks,store)
//原生小程序架构-app.js
import CustomHook from 'spa-custom-hooks';
CustomHook.install(diyHooks,globalData)

diyHooks对象说明

{
    //1.注册属性监听钩子
    //UserInfo,钩子单名,首字母大写
    'UserInfo':{
        //name,钩子全称,监听属性的话可以和上面的key一致,必填
        name:'UserInfo',
        //watchKey要监听的store里的属性名(相当于$store.state.userinfo),属性监听钩子模式必填
        watchKey: 'userinfo',
        //是否默认命中,非必填
        hit: false,
        //deep是否深度监听,非必填
        deep: true,
        //onUpdate属性改变时执行的callback,用来决定是否要命中此钩子,非必填,缺省值相当于返回了!!val
        onUpdate(val){
            //这里表示userinfo里含有nickName则命中此钩子。注意不可以异步return
            return !!val.nickName;
        }
    },
    
    //2.注册事件监听钩子
    //BeforeMount,钩子单名,首字母大写
    'BeforeMount':{
        //name,原生钩子名,用来命中此钩子,必填
        name:'beforeMount',
        //destroy,相反的钩子名,用来取消命中,事件监听钩子必填
        destroy:'destroyed',
        //是否默认命中,非必填
        hit: false
    }
}

钩子使用规则

`on{UserInfo}{BeforeMount}{Login}{Position}...` //所有注册好的钩子都可以随意搭配,排列顺序不影响钩子执行,都是 && 的关系

已经注册好的生命周期钩子

Launch、Created、Load、Attached、Show、Mounted、Ready
//↓↓↓如需其他的钩子可自行注册↓↓↓(如果当前框架的某钩子和其对应的相反钩子跟如下配置不一致也需要手动注册,比如wepy有created但没有destroyed)

Demo二维码

left image description here

进群交流

left image description here

如果有什么好的建议欢迎提issues或者提pr

喜欢的话点个star

spa-custom-hooks's People

Contributors

1977474741 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.