cdn-accessor v0.0.5

Feature

• 异步加载
• 按需引入
• 缓存
• 接口请求自动合并
• 可拓展（js、css、vue2、vue3、react、......）

Usage

实例化

accessor.js

import { createAccessor } from 'cdn-accessor'
const accessor = createAccessor({
	app_id: '',
	modules: [
		{
			id: 'testFunc',
			deps: ['https://code.jquery.com/jquery-3.6.0.min.js'],
			suffixes: ['chunk.umd.js']
		},
		{
			id: 'test-button',
			deps: [
				'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js',
				'https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css',
				'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
			],
			suffixes: ['chunk.umd.js', 'test-button.css']
		},
		{
			id: 'overflow-popover',
			deps: [
				'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js',
				'https://unpkg.com/element-ui/lib/index.js',
				'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
			],
			suffixes: ['chunk.umd.js', 'style.css']
		},
		{
			id: 'ReactPopup',
			deps: [
				'https://unpkg.com/react@17/umd/react.production.min.js',
				'https://unpkg.com/react-dom@17/umd/react-dom.production.min.js'
			],
			suffixes: ['chunk.umd.js']
		}
	]
})
export default accessor

modules | name | type | description | |----------|----------|---------------------------------------------------| | id | string | 模块唯一标识。必传。 | | deps | string[] | 模块依赖，没有时传空数组[]。考虑到各依赖之间可能有严格的引入顺序要求，将按数组顺序串行引入。 | | suffixes | string[] | 模块打包文件名，用来拼接 url。必传且可传多个，并行引入。 |

异步&按需 引入

get 函数入参为组件 id，返回一个 Promise 对象。

js 中引入 。

import accessor from 'xxx/accessor'
accessor.get('testFunc').then(testFunc => {
	console.log('testFunc: ', testFunc)
})

Vue 框架中引入异步组件。

组件内注册（推荐）。

<template>
	<OverflowPopover></OverflowPopover>
</template>
<script>
	import accessor from 'xxx/accessor'
	export default {
		components: {
			OverflowPopover: () => accessor.get('overflow-popover')
		}
	}
</script>

或全局注册。

import Vue from 'vue'
import accessor from 'xxx/accessor'
Vue.component('GoodsSelector', () => accessor.get('goods-selector'))

自定义数据接口

accessor.js

import { createAccessor } from 'cdn-accessor'
import axios from 'axios'
const accessor = createAccessor({
	app_id: 'xxxxx',
	fetcher(modules) {
		const params = {
			ids: modules.map(({ id }) => id).join(',')
		}
		return axios.get('http://xxxxxx/xxxxxx', { params }).then(({ data }) => {
			if (data.code === 0) {
				return data.data
			}
			return Promise.reject(data)
		})
	},
	modules: [
		{
			id: 'goods-selector',
			deps: [
				'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js',
				'https://unpkg.com/element-ui/lib/index.js',
				'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
			],
			suffixes: ['goods-selector.css', 'goods-selector.umd.js']
		}
	]
})