@ued2345/octopus-util

一、技术选型

• typescript
• babel
• webpack

二、 项目结构介绍

├── build
│   ├── build.js                // 执行打包 npm run build
│   └── webpack.conf.js         // webpack配置文件
├── dist                       
│   ├── octopus.min.js          // 打包后的文件,也是被其它项目引入的文件
├── src
│   ├── device
│   │   │── getBrowser.ts       // 获取操作系统类型
│   ├── jsbrige
│   │   │── init                // 二级目录(放ts文件不会暴露)
│   │   │   │── bridge.js       // 定义类型
│   │   │   └── brigeInit.ts    // 创建bridge对象
│   │   └── jsBrige.ts          // export jsbridge方法
│   └── index.ts                // webpack打包入口文件 
├── .babelrc                    // babel配置文件
├── octopus.d.ts                // 方便typescript项目引入
├── tsconfig.config.js          // ts配置文件
├── README.md                   // 项目说明文档

三、开发步骤

1. 看webpack打包入口文件index.ts。
2. octopus.d.ts添加方法格式。
3. src目录创建放方法的文件夹。
4. 文件夹里编写methodName.ts方法。

四、构建与部署

第一步：npm run build
第二步：npm发包

五、API文档

octopus = {
    // 获取操作系统类型
    getBrowser: () => {
        android: boolean,
        gecko: boolean,
        iPad: boolean,
        iPad: boolean,
        iPhone: boolean,
        ios: boolean,
        mobile: boolean,
        presto: boolean,
        qq: boolean,
        trident: boolean,
        webApp: boolean,
        webKit: boolean,
        weixin: boolean,
        wpApp: boolean,
    },
    jsBridge: {
        // js调用webview事件
        callHandle: ({method, params}, callback) => {},
        // webView调用JS事件
        registerHandle: (method, callback) => {},
    }
}

六、安装使用

UMD的实现：

1. 先判断是否支持Node.js模块格式（exports是否存在），存在则使用Node.js模块格式。
2. 再判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。
3. 前两个都不存在，则将模块公开到全局（window或global）。

浏览器

<script src="octopus.min.js"></script>
<script>
  var octopus = octopus.getBrowser()
</script>

npm

npm install --save-dev @ued2345/octopus

// webpack中使用
const octopus = require('@ued2345/octopus')
const browser = octopus.getBrowser()