状态管理重构;全局变量wkitd优化

master 1.1.0
yutent 2023-08-15 14:43:53 +08:00
parent e782d9cf96
commit 8519bfd4ef
9 changed files with 77 additions and 36 deletions

View File

@ -12,6 +12,7 @@
- 提供迷你的单页应用开发环境 - 提供迷你的单页应用开发环境
- 无需`node.js`编译, 即写即用。 - 无需`node.js`编译, 即写即用。
- 本项目适合开发一些快速迭代简单页面、app内嵌的`webview`页面(无须搭建复杂的前端开发环境)
### 一些注意事项 ### 一些注意事项
@ -20,7 +21,7 @@
- `$router`对象, 只注入到使用`wkit`创建的组件, 其他地方可以使用`getRouter()`获取`$router`对象。 - `$router`对象, 只注入到使用`wkit`创建的组件, 其他地方可以使用`getRouter()`获取`$router`对象。
- 所有路由页面和组件, 均可使用`getCurrentPage()`获取当前的页面的信息; 也可以用`$router.route`获取。 - 所有路由页面和组件, 均可使用`getCurrentPage()`获取当前的页面的信息; 也可以用`$router.route`获取。
- `$store`对象, 只注入到使用`wkit`创建的组件, 其他组件可使用`getStore()`获取。 - `$store`对象, 只注入到使用`wkit`创建的组件, 其他组件可使用`getStore()`获取。
- `$store`对象为非响应式, 后续可能会支持(时间无限期延后)。
### 示例 ### 示例

View File

@ -1,6 +1,6 @@
{ {
"name": "wkitd", "name": "wkitd",
"version": "1.0.0", "version": "1.1.0",
"type": "module", "type": "module",
"main": "dist/index.js", "main": "dist/index.js",
"files": [ "files": [

10
src/constants.js Normal file
View File

@ -0,0 +1,10 @@
/**
* {框架常量}
* @author yutent<yutent.io@gmail.com>
* @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()

View File

@ -7,6 +7,7 @@
import './init.js' import './init.js'
import { html, css, Component } from 'wkit' import { html, css, Component } from 'wkit'
import { noop } from './utils.js' import { noop } from './utils.js'
import { __ROUTER__, __STORE__, __ROUTER_VIEW__ } from './constants.js'
export * from './router/index.js' export * from './router/index.js'
export { createStore } from './store.js' export { createStore } from './store.js'
@ -26,11 +27,11 @@ export function createApp({
Object.assign(App.prototype, methods, { mounted }) Object.assign(App.prototype, methods, { mounted })
this.use = function (plugin = noop, ...args) { this.use = function (plugin = noop, ...args) {
plugin.apply(this, args) plugin.apply(App.prototype, args)
return this return this
} }
this.mount = function () { this.mount = function () {
let $router = window.__wkitd__.get('$router') let $router = window.wkitd.get(__ROUTER__)
if (render) { if (render) {
App.prototype.render = render App.prototype.render = render
} else { } else {
@ -70,7 +71,7 @@ export function createApp({
} }
if ($router) { if ($router) {
App.prototype.mounted = function (...args) { App.prototype.mounted = function (...args) {
let $view = window.__wkitd__.get('ROUTER_VIEW') let $view = window.wkitd.get(__ROUTER_VIEW__)
if ($view) { if ($view) {
$view.sync($router.views) $view.sync($router.views)
$router.init() // mounted 时正式初始化路由 $router.init() // mounted 时正式初始化路由
@ -88,13 +89,13 @@ export function createApp({
} }
export function getStore() { export function getStore() {
return window.__wkitd__.get('$store') return window.wkitd.get(__STORE__)
} }
export function getRouter() { export function getRouter() {
return window.__wkitd__.get('$router') return window.wkitd.get(__ROUTER__)
} }
export function getCurrentPage() { export function getCurrentPage() {
return window.__wkitd__.get('$router')?.route return window.wkitd.get(__ROUTER__)?.route
} }

View File

@ -4,15 +4,40 @@
* @date 2023/08/10 10:19:12 * @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() { get() {
return __WKITD__ return __WKITD__
}, },
set(val) { 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 enumerable: false
}) })

View File

@ -6,6 +6,7 @@
import { Component } from 'wkit' import { Component } from 'wkit'
import { createWebHashHistory, createWebHistory } from './router-engine.js' import { createWebHashHistory, createWebHistory } from './router-engine.js'
import './router-components.js' import './router-components.js'
import { __ROUTER__ } from '../constants.js'
export { createWebHashHistory, createWebHistory } export { createWebHashHistory, createWebHistory }
@ -15,13 +16,13 @@ export function createRouter({
} = {}) { } = {}) {
let $router = history() let $router = history()
window.__wkitd__.set('$router', $router) window.wkitd.set(__ROUTER__, $router)
$router.addRoute(routes) $router.addRoute(routes)
function wrapper() { function wrapper() {
Object.defineProperty(Component.prototype, '$router', { Object.defineProperty(Component.prototype, '$router', {
get() { get() {
return window.__wkitd__.get('$router') return window.wkitd.get(__ROUTER__)
}, },
set(val) { set(val) {
console.error('Can not set readonly property $router of Component') console.error('Can not set readonly property $router of Component')
@ -32,11 +33,3 @@ export function createRouter({
wrapper.beforeEach = $router.beforeEach.bind($router) wrapper.beforeEach = $router.beforeEach.bind($router)
return wrapper return wrapper
} }
export function getRouter() {
return window.__wkitd__.get('$router')
}
export function getCurrentPage() {
return getRouter().route
}

View File

@ -1,6 +1,7 @@
// //
import { Component, html, css, raw } from 'wkit' import { Component, html, css, raw } from 'wkit'
import { object2query } from '../utils.js' import { object2query } from '../utils.js'
import { __ROUTER_VIEW__ } from '../constants.js'
class RouterView extends Component { class RouterView extends Component {
static props = { static props = {
@ -26,7 +27,7 @@ class RouterView extends Component {
#views = [] #views = []
created() { created() {
window.__wkitd__.set('ROUTER_VIEW', this) window.wkitd.set(__ROUTER_VIEW__, this)
} }
sync(views) { sync(views) {

View File

@ -6,6 +6,7 @@
*/ */
import { bind, fire } from 'wkit' import { bind, fire } from 'wkit'
import { noop, query2object, object2query } from '../utils.js' import { noop, query2object, object2query } from '../utils.js'
import { __ROUTER_VIEW__ } from '../constants.js'
//hash前缀正则 //hash前缀正则
const PREFIX_REGEXP = /^(#!|#)[\/]+?/ const PREFIX_REGEXP = /^(#!|#)[\/]+?/
@ -95,7 +96,7 @@ class Router {
// 路由检测 // 路由检测
#check() { #check() {
let isHash = this.type === MODE_HASH 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 hash = location.hash
let path = isHash let path = isHash
? location.hash ? location.hash
@ -141,7 +142,7 @@ class Router {
} }
#exec(route) { #exec(route) {
let $view = window.__wkitd__.get('ROUTER_VIEW') let $view = window.wkitd.get(__ROUTER_VIEW__)
$view.current = route.name $view.current = route.name
this.#route = route this.#route = route
this.#rsync() this.#rsync()

View File

@ -5,27 +5,36 @@
*/ */
import { Component } from 'wkit' import { Component } from 'wkit'
import { __STORE__ } from './constants.js'
export function createStore(obj = {}) { export function createStore(obj = {}) {
window.__wkitd__.set( let defined = false
'$store',
new Proxy(obj, {
set(target, prop, value) {
target[prop] = value
return true
}
})
)
return function () { return function () {
Object.defineProperty(Component.prototype, '$store', { Object.defineProperty(Component.prototype, '$store', {
get() { get() {
return window.__wkitd__.get('$store') return window.wkitd.get(__STORE__)
}, },
set(val) { 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 enumerable: false
}) })
Component.prototype.$store = obj
} }
} }