From 8519bfd4ef0921af2d5f1947999433178121d0ae Mon Sep 17 00:00:00 2001 From: yutent Date: Tue, 15 Aug 2023 14:43:53 +0800 Subject: [PATCH] =?UTF-8?q?=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86=E9=87=8D?= =?UTF-8?q?=E6=9E=84;=E5=85=A8=E5=B1=80=E5=8F=98=E9=87=8Fwkitd=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 3 ++- package.json | 2 +- src/constants.js | 10 ++++++++++ src/index.js | 13 +++++++------ src/init.js | 33 +++++++++++++++++++++++++++++---- src/router/index.js | 13 +++---------- src/router/router-components.js | 3 ++- src/router/router-engine.js | 5 +++-- src/store.js | 31 ++++++++++++++++++++----------- 9 files changed, 77 insertions(+), 36 deletions(-) create mode 100644 src/constants.js diff --git a/Readme.md b/Readme.md index 23cfb6a..47af132 100644 --- a/Readme.md +++ b/Readme.md @@ -12,6 +12,7 @@ - 提供迷你的单页应用开发环境 - 无需`node.js`编译, 即写即用。 +- 本项目适合开发一些快速迭代简单页面、app内嵌的`webview`页面(无须搭建复杂的前端开发环境) ### 一些注意事项 @@ -20,7 +21,7 @@ - `$router`对象, 只注入到使用`wkit`创建的组件, 其他地方可以使用`getRouter()`获取`$router`对象。 - 所有路由页面和组件, 均可使用`getCurrentPage()`获取当前的页面的信息; 也可以用`$router.route`获取。 - `$store`对象, 只注入到使用`wkit`创建的组件, 其他组件可使用`getStore()`获取。 -- `$store`对象为非响应式, 后续可能会支持(时间无限期延后)。 + ### 示例 diff --git a/package.json b/package.json index 2594e3b..f62a276 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wkitd", - "version": "1.0.0", + "version": "1.1.0", "type": "module", "main": "dist/index.js", "files": [ diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..c953ce3 --- /dev/null +++ b/src/constants.js @@ -0,0 +1,10 @@ +/** + * {框架常量} + * @author yutent + * @date 2023/08/15 10:15:54 + */ + +export const __ROUTER__ = Symbol('router') +export const __ROUTER_VIEW__ = Symbol('router-view') +export const __STORE__ = Symbol('store') +export const WKITD_COMPONENTS = new Set() diff --git a/src/index.js b/src/index.js index beb81dc..bb14074 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ import './init.js' import { html, css, Component } from 'wkit' import { noop } from './utils.js' +import { __ROUTER__, __STORE__, __ROUTER_VIEW__ } from './constants.js' export * from './router/index.js' export { createStore } from './store.js' @@ -26,11 +27,11 @@ export function createApp({ Object.assign(App.prototype, methods, { mounted }) this.use = function (plugin = noop, ...args) { - plugin.apply(this, args) + plugin.apply(App.prototype, args) return this } this.mount = function () { - let $router = window.__wkitd__.get('$router') + let $router = window.wkitd.get(__ROUTER__) if (render) { App.prototype.render = render } else { @@ -70,7 +71,7 @@ export function createApp({ } if ($router) { App.prototype.mounted = function (...args) { - let $view = window.__wkitd__.get('ROUTER_VIEW') + let $view = window.wkitd.get(__ROUTER_VIEW__) if ($view) { $view.sync($router.views) $router.init() // mounted 时正式初始化路由 @@ -88,13 +89,13 @@ export function createApp({ } export function getStore() { - return window.__wkitd__.get('$store') + return window.wkitd.get(__STORE__) } export function getRouter() { - return window.__wkitd__.get('$router') + return window.wkitd.get(__ROUTER__) } export function getCurrentPage() { - return window.__wkitd__.get('$router')?.route + return window.wkitd.get(__ROUTER__)?.route } diff --git a/src/init.js b/src/init.js index c1771de..4500dbd 100644 --- a/src/init.js +++ b/src/init.js @@ -4,15 +4,40 @@ * @date 2023/08/10 10:19:12 */ -const __WKITD__ = new Map() +import { Component } from 'wkit' +import { WKITD_COMPONENTS } from './constants.js' -Object.defineProperty(window, '__wkitd__', { +class Wkitd extends WeakMap { + /** + * 广播式推送更新 + */ + broadcast() { + for (let it of WKITD_COMPONENTS) { + it.$requestUpdate() + } + } + /** + * 注册缓存组件 + */ + assign(target) { + WKITD_COMPONENTS.add(target) + } + /** + * 取消注册 + */ + deassign(target) { + WKITD_COMPONENTS.add(target) + } +} + +const __WKITD__ = new Wkitd() + +Object.defineProperty(window, 'wkitd', { get() { return __WKITD__ }, set(val) { - console.error('Can not set readonly property __wkitd__ of window') + console.error('Can not set readonly property wkitd of window') }, - writable: false, enumerable: false }) diff --git a/src/router/index.js b/src/router/index.js index 9cfbbf9..17575b1 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -6,6 +6,7 @@ import { Component } from 'wkit' import { createWebHashHistory, createWebHistory } from './router-engine.js' import './router-components.js' +import { __ROUTER__ } from '../constants.js' export { createWebHashHistory, createWebHistory } @@ -15,13 +16,13 @@ export function createRouter({ } = {}) { let $router = history() - window.__wkitd__.set('$router', $router) + window.wkitd.set(__ROUTER__, $router) $router.addRoute(routes) function wrapper() { Object.defineProperty(Component.prototype, '$router', { get() { - return window.__wkitd__.get('$router') + return window.wkitd.get(__ROUTER__) }, set(val) { console.error('Can not set readonly property $router of Component') @@ -32,11 +33,3 @@ export function createRouter({ wrapper.beforeEach = $router.beforeEach.bind($router) return wrapper } - -export function getRouter() { - return window.__wkitd__.get('$router') -} - -export function getCurrentPage() { - return getRouter().route -} diff --git a/src/router/router-components.js b/src/router/router-components.js index df63f42..2601b1a 100644 --- a/src/router/router-components.js +++ b/src/router/router-components.js @@ -1,6 +1,7 @@ // import { Component, html, css, raw } from 'wkit' import { object2query } from '../utils.js' +import { __ROUTER_VIEW__ } from '../constants.js' class RouterView extends Component { static props = { @@ -26,7 +27,7 @@ class RouterView extends Component { #views = [] created() { - window.__wkitd__.set('ROUTER_VIEW', this) + window.wkitd.set(__ROUTER_VIEW__, this) } sync(views) { diff --git a/src/router/router-engine.js b/src/router/router-engine.js index 16046c6..57a5207 100644 --- a/src/router/router-engine.js +++ b/src/router/router-engine.js @@ -6,6 +6,7 @@ */ import { bind, fire } from 'wkit' import { noop, query2object, object2query } from '../utils.js' +import { __ROUTER_VIEW__ } from '../constants.js' //hash前缀正则 const PREFIX_REGEXP = /^(#!|#)[\/]+?/ @@ -95,7 +96,7 @@ class Router { // 路由检测 #check() { let isHash = this.type === MODE_HASH - let $view = window.__wkitd__.get('ROUTER_VIEW') + let $view = window.wkitd.get(__ROUTER_VIEW__) let hash = location.hash let path = isHash ? location.hash @@ -141,7 +142,7 @@ class Router { } #exec(route) { - let $view = window.__wkitd__.get('ROUTER_VIEW') + let $view = window.wkitd.get(__ROUTER_VIEW__) $view.current = route.name this.#route = route this.#rsync() diff --git a/src/store.js b/src/store.js index 576f874..3c4630e 100644 --- a/src/store.js +++ b/src/store.js @@ -5,27 +5,36 @@ */ import { Component } from 'wkit' +import { __STORE__ } from './constants.js' export function createStore(obj = {}) { - window.__wkitd__.set( - '$store', - new Proxy(obj, { - set(target, prop, value) { - target[prop] = value - return true - } - }) - ) + let defined = false return function () { Object.defineProperty(Component.prototype, '$store', { get() { - return window.__wkitd__.get('$store') + return window.wkitd.get(__STORE__) }, set(val) { - console.error('Can not set readonly property $store of Component') + if (defined) { + return console.error( + 'Can not set readonly property $store of Component' + ) + } + window.wkitd.set( + __STORE__, + new Proxy(val, { + set(target, prop, value) { + target[prop] = value + window.wkitd.broadcast() + return true + } + }) + ) + defined = true }, enumerable: false }) + Component.prototype.$store = obj } }