xframelib
Version:
The accumulated front-end development foundation library originates from projects and serves projects.
249 lines (146 loc) • 6.37 kB
Markdown
# xframelib
<p>
<a href="https://www.npmjs.com/package/xframelib" target="_blank">
<img src="https://img.shields.io/npm/v/xframelib?color=orange&logo=npm" />
</a>
<a href="https://www.npmjs.com/package/xframelib" target="_blank">
<img src="https://img.shields.io/npm/dt/xframelib?logo=npm" />
</a>
</p>
## XFramelib Front-End Basic Library
> The core implementation is an enterprise-level micro-front-end architecture based on a Widget mechanism. It accumulates basic functions and components independent of UI interface libraries, improves the stability and high reusability of the basic code, and adheres to the philosophy of originating from and serving projects.
[README中文.md](https://share.note.youdao.com/s/bnDqvnDw) | [更新日志-中文](https://share.note.youdao.com/s/MrahKIVA)
## Main Functions:
- System configuration Sysconfig.js, corresponding Global.Config object
- LayoutManager: Implements the Widget scheduling mechanism
- Global.EventBus: Public event bus
- UI Components:
- LayoutContainer (Layout container)
- ScaleContainer (Scale container)
- XWindow (Window-like component)
- SplitPanes (Page area splitting panel)
- Popover (Floating panel)
- RouterTransition related components
- Backend Service Calls:
- HTTP Web Requests: Axios encapsulation implementation Global.Axios, AxiosHelper{get, post, requestPost, requestGet, getData, requestPostBody}
- Hprose Service: Hprose Proxy method to call the backend hprose service
- Common Basic Functions:
- H5Tool ：General functions
- IsTool ：type detection tool (number, string, object, array, function, etc.)
- ValidateTool： verification tool (ID card, mobile phone number, IP address, email, password strength judgment, URL, license plate number, etc.)
- jQuery：jquery tools (hasClass, addClass, removeClass, toggleClass, setCssProperty)
- Compression and decompression tools: ZipTool and GzipTool
- Caching functions: StorageHelper for operating local cache objects, WebCacheTool for front-end caching
- XXTEA encryption and decryption algorithm
- Commands: (Register and load commands using setupDirectives)
- v-wow tiled scrolling display
- v-media adaptive style
- v-drag draggable
- v-repeatClick to avoid repeated clicks
- v-dc double-click command
- File upload and download:
- BigFileDownload: large file download
- FileUpload: large file upload
- FileDownload Encapsulated for regular file downloads, including { Download, SaveAs, JsonDownload, HttpDownload, DownloadByUrl }
- WebWorkers:
- iconvWorker: Text encoding/decoding
- webCacheWorker: Front-end caching layer
- xmathWorker: General mathematical calculations, large front-end images, tiled loading
- NavigatorPlugin ：Browser plugin(provides general browser global method encapsulation)
## Usage
`pnpm add xframelib`
or
`npm i xframelib`
Globally import library styles:
import 'xframelib/dist/index.css';
- Open source application example: **Front-end development template vue-widget-template**
https://github.com/zorrowm/vue-widget-template
A development template fully based on XFramelib and Widget concepts
- **main.ts file**
In Typescript:
```ts
import { createApp } from 'vue';
import App from './App.vue';
//added by template
import { setupRouter } from './router/index';
import {setupGlobDirectives} from './directives/index';
import { init, Global } from 'xframelib';
import 'xframelib/dist/index.css';
import { getSystemPKG, getSystemID } from '@/utils/sysTool';
import { createPinia } from 'pinia';
import { message } from 'ant-design-vue';
import {Icon} from '@iconify/vue';
//dev phase opens, build logs out
import 'ant-design-vue/dist/antd.css';
message.config({
top: `100px`,
duration: 1, maxCount: 3
});
// Bind messages and initialize xframe
// System ID, unique identifier
const sysID = getSystemID();
// Group name, project name
const sysGroup = getSystemPKG().name;
init(message, sysID, sysGroup);
// Create a pinia instance
const pinia = createPinia();
const app = createApp(App);
// Mount to the Vue root instance
app.use(pinia);
// Define v-drag commands
setupGlobDirectives(app);
setupRouter(app);
// Register global components
app.component('Icon', Icon);
app.mount('#app');
```
- **Quasar boot usage example**
```ts
import { boot } from 'quasar/wrappers';
import { addAPIProvider, Icon } from '@iconify/vue';
import { Dropdown } from 'floating-vue';
import { EmitLoadingInfo } from 'src/events/index';
import { autoRefresh } from 'src/utils/autoUpdate';
import { message } from 'src/utils/MessageNotify';
// Encapsulated message notification
import { getSystemID, getSystemPKG } from 'src/utils/sysTool';
import { Global, init } from 'xframelib';
function preInit() {
// System ID, unique identifier
const sysID = getSystemID();
// Group name, project name
const sysGroup = getSystemPKG().name;
init(message, sysID, sysGroup);
// Mounting progress notification method
Global.Loading = EmitLoadingInfo;
// Register your own IconAPIProvider
if (Global.Config?.ServiceURL.IconServiceURL)
addAPIProvider('', {
resources: [Global.Config?.ServiceURL.IconServiceURL]
});
else {
//Offline icon usage: Enabled, IconServiceURL configuration is empty
import('../components/IconOffline').then((it) => {
it.default();
});
}
}
export default boot(({ app }) => {
EmitLoadingInfo('XFramelib library');
//Initialize Xframelib
preInit();
//Start hot update monitoring
if (import.meta.env.DEV) autoRefresh();
// Create pinia instance — 20240221 is not needed here, it is attached in src/stores/index.ts
// Register global component
app.component('Icon', Icon); app.component('VDropdown', Dropdown);
// app.component('VTooltip', Tooltip);
// app.component('VMenu', Menu);
console.log('Environment Variables',process.env);
// Save the website root address
app.config.globalProperties.$AppURL=process.env.APP_URL;
});
```
## Application Examples
