utiltsplugin v0.1.0

我封装的常用的方法，包括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 初始化