utiltsplugin
v0.1.0
Published
关于ts个人封装的常用方法,支持按需引入和全量引入
Downloads
372
Readme
我封装的常用的方法,包括webpack打包示例,支持按需引入和全量引入
1.1 html原生
实例看 test/test.html,下面是示例.目前支持五种常用的方法.
提供两种引入
全量引入
<script src="https://cdn.jsdelivr.net/npm/utiltsplugin/dist/UtilPlugin.min.js"></script>
按需加载
<script src="https://cdn.jsdelivr.net/npm/utiltsplugin/dist/UtilPluginAsync.min.js"></script>
console.log(LoadingPlugin)
let temp =new UtilPlugin()
1.2 npm 安装
npm install utiltsplugin
import UtilPlugin from "utiltsplugin/dist/UtilPlugin.min.js"
let temp =new UtilPlugin(
)
let cache =temp.cacheFn()
cache.set("param",2)
cache.set("data",3)
console.log("cache",cache)
1.3 全量使用
let temp =new UtilPlugin()
1.3.1 eventbus
let eventbus = temp.eventbusFn()
eventbus.on("测试", (data) => {
console.log("触发了该死的事件:" + data)
})
function click1(){
eventbus.emit("测试",JSON.stringify({"ip":"127.0.0.1"}))
}
console.log("eventbus",eventbus)
1.3.2 cache
let cache = temp.cacheFn()
cache.set("param",2)
cache.set("data",3)
console.log("cache",cache)
1.3.3 error
let error = temp.errorFn()
error.errLogAdd({
id:1,
msg:"传值报错"
},)
error.errLogAdd({
id:2,
msg:"传值报错"
},)
console.log("error",error,error.errLogGet())
1.3.4 tdk
let tdk = temp.tdkFn()
new tdk({
title:"我的title",
description:"描述",
keywords:"hi hi,ei"
})
1.3.5 ajax
// 5.ajax 示例
let ajax = temp.ajaxFn()
const result = await ajax({
method: 'GET',
url: 'http:localhost:8086/get?id=2',
data: {
// redirectURI
}
});
console.log(result)
1.4 按需使用
注意返回的是一个promise对象,如果想用可以用await接受
let temp =new UtilPluginAsync()
1.4.1 eventbus
let eventbus =await temp.eventbusFn()
eventbus.on("测试", (data) => {
console.log("触发了该死的事件:" + data)
})
function click1(){
eventbus.emit("测试",JSON.stringify({"ip":"127.0.0.1"}))
}
console.log("eventbus",eventbus)
1.4.2 cache
let cache = await temp.cacheFn()
cache.set("param",2)
cache.set("data",3)
console.log("cache",cache)
1.4.3 error
let error =await temp.errorFn()
error.errLogAdd({
id:1,
msg:"传值报错"
},)
error.errLogAdd({
id:2,
msg:"传值报错"
},)
console.log("error",error,error.errLogGet())
1.4.4 tdk
let tdk =await temp.tdkFn()
new tdk({
title:"我的title",
description:"描述",
keywords:"hi hi,ei"
})
1.4.5 ajax
// 5.ajax 示例
let ajax =await temp.ajaxFn()
const result = await ajax({
method: 'GET',
url: 'http:localhost:8086/get?id=2',
data: {
// redirectURI
}
});
console.log(result)
1.4.6 webcomponent
let webComponentFn =await temp.webComponentFn()
1.5 一些解决的坑
1.webpack 打包的css 无法导出成stylesheet,全部都是module导致shadowdom attach不上去
solution:css-loader 设置 exporttype 格式为 string,然后 nw stylesheet ,然后把字符串换上去
2.webpack loader 加载问题(报错再vscode看不到)
solution:再console控制台中 npm run build >> text.txt
3.webpack loader css加载顺序问题和加载规则问题
如果我们想导出 css文件,我们剋有使用mini-css-extract-plugin 然后 // new MiniCssExtractPlugin({
// filename: "./css/[name].css",
// }),
先用css-loader加载css文件,再用style-loader 或者 是 MiniCssExtractPlugin加载到页面上,后面两个不能一起用。不然会失效
如果你想要输出stylesheet 那么我们只用一个css-loader就可以了
4.导出带了default 有点蠢
再webpack 打包配置中 output 加上 libraryExport 然后选项选择 default
5.多入口问题 和 异步 文件输出
entry:[name] 可以表示 output 中的输出 // 千万不要用id 可读性太低了
异步文件输出文职:outputchunkFilename: "./build/[name].min.js", // 异步加载的属性
1.6 目前功能
├─Api
│ ajax.ts # 需要跨域支持
│
├─Async
│ promise.ts # 延迟promise.all
│
├─Auth
│ control.ts # 控制组件显示隐藏
│ router.ts # 路由合并
│
├─Canvas
│ paint.ts #
├─Data
│ cache.ts
│ eventbus.ts # 发布者订阅者模式
│ handle.ts # 链式处理数据
│ memoize.ts # 函数记忆
│ proxy.js
│ UiProxy.js
│ UiProxy.ts
│
├─MiddleWare
│ chain.ts # 责任链模式
│ curry.ts # 柯里化
│ enhance.ts # 函数增强 | 函数劫持
│ overload.ts # 函数重载
│ singleton.ts # 单例模式
│ strategy.ts # 策略模式
│
├─Project
│ error.ts
│
└─Proto
index.ts
1.7 changelog
ver0.0.8 添加按需引入
ver0.0.1 初始化