首页 > 其他分享 >js sdk介绍和使用

js sdk介绍和使用

时间:2023-03-31 11:22:49浏览次数:47  
标签:url 介绍 js api 使用 var sdk

sdk是什么

sdk一般是指提供给第三方人员使用的一段js,通过这个js实现一些平台化产品提供的服务,比如微博人jssdk,整个jssdk的设计和一些核心问题:

  • 代码如何使用页面接入
  • 如何实现跨域通信
  • 如何实现优雅api的设计
  • 公共资源的使用
  • 代码组件化

代码如何被使用页面接入

这个问题涉及到几个小问题需要讨论:

  • 命名空间
  • 样式冲突
  • 版本维护
  • appid等参数的传入

命名空间

在命名空间部分,需要做到不污染环境,保护好自己,即不要对本来的页面造成命名的破坏,只是用一个命名空间,又要考虑第三方页面的复杂性,防止跟错综复杂的命名空间冲突。

要做到这点,需要我们在命名空间命名的时候多注意下,尽量不要使用业内通用的命名方法,比如驼峰,名字尽量起的怪一些,偏一些,一般,要么使用_开头(甚至多个),要么使用项目代号这些不太被别人想到的名字。
还有一种方式是动态的命名空间,在url中带上namespace=xxx,这个后面在说

样式冲突

除了js命名空间问题,如果jssdk带有UI组件,那么还需要考虑CSS的样式冲突问题,这里不用多说,记住以下几点即可:

  • 一些复杂的widget可以使用iframe方式引入
  • 不使用id
  • 使用带前缀的class命名,前面用一个class最好包裹
  • 自己做reset!
  • 跟js相关的class要有特殊的约定(比如_J-xxx)或者使用data-id代替

其实利用sass、less这些预编译语言很容易实现

例如下面的代码:

#name: avUI;

.#{$name}__dialog {
	@include reset();
	.#{$name}_dialog_header{
		color:white;
	}
}

版本维护

版本维护的目的是保证代码最新,功能最全,而不用每次做了升级,通知所有使用的第三方开发者把自己页面的代码挨个更换。所以这里版本维护不应该暴漏给使用者,比如在url使用版本号,到了2.0版本,通知使用方替换,这是不合理的,总有些公司或者人不配合的。最好的方法是设计的时候就要考虑这个问题。

一般有两种比较好的方式:

  • 小拖大,动拖静:即第三方引入的js是一个动态的,或者没有缓存没有cdn的,然后由它带出后面的cdn
  • 隔段时间动态创建script

推荐使用【小拖大,动拖静】,后面介绍组件化也要使用这个方式来按需加载代码

小拖大,动拖静

核心代码示例

(function() {
	-----
	var url = '最新版本cdn的地址';
	
	load(url);
}())

隔段时间动态创建script

代码示例:

(function () {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    var t = +new Date;
    t -= %864E5;
    s.src = 'http://xxx.com/sdk.js?t='+t;
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  })();

appid等参数的传入

一般在引入sdkjs代码的时候需要加参数或者版本号,比如开始平台需要配置appid,所以url写法是:
sdk.js?appid=xxxx&namespace=xxx.jssdk需要拿到url中的这些参数,方法有以下两种比较通用的:

  • 给script标签增加特殊属性,例如<scriptsrc="path/sdk.js?appid=123" id="_jssdk">
  • 使用查找script标签方式
//get url args function
function parserUrl(){
  var scripts = document.getElementsByTagName("script"),
      len = scripts.length,
      url;
  if (len > 0) {
      for (var i = 0; i < len; i++) {
          if (scripts[i].src.indexOf("path/to/sdk.js") !== -1) {
              return scripts[i].src.split("?").pop();
          }
      }
  }
}

所以appid,nameSpace这些都可以解析出来

如果实现跨域通信

对于不在一个域名下的第三方页面引入的jssdk少不了的是跨域请求,这块移动上可以直接使用postMessage方法,将来可以使用xhr2+CORS,兼容IE,可以参考http://js8.in/tags/%E8%B7%A8%E5%9F%9F/, 这里不做过多介绍

如何实现优雅api的设计

这里的api指的是开放平台提供的http接口,一般都会有一些标准的规范,比如:

我们设计这个函数接口的时候,应该充分考虑到将来server接口的增加,所以应该做成通用的服务,比如我们设计个sdkjs.api方法,接受四个参数:url\data\callback\method,默认如果data是函数就后面参数自动前提。

api: function(url, data, callback, method) {
    var _args = $.toArray(arguments),
        _callback = _args[2] || $.emptyFn;

    if (_args.length < 3) {
        throw Error("api arguments length wrong");
    }

    if (!$.isString(_args[0]) || !$.isObject(_args[1]) || !$.isFunction(_callback)) {
        throw Error("api arguments format error");
    }

    var _cbid = 0;

    if ($.isFunction(_callback)) {
        _cbid = _CallbackManager.add(_callback);
    }
    //跨域发起请求
    xDomain.send("api", {
        url: _args[0],
        data: _args[1],
        method: _args[3] || "get",
        _cbid: _cbid
    });
    return back;
}

公共资源的使用

公共资源的使用,指的是一些跟宿主环境共享的资源,比如,cookie,localstorage这些,使用的时候应该做前缀处理,尽量不污染宿主页面环境,同时保证不被轻易的删除。

代码组件化

代码的组织在一些带有UI的jssdk中使用较多,比如按需加载某个UI模块。这时候就充分利用到了第一节提到的【小拖大,动拖静】的引入方式,一开始小文件我们叫seed,里面有UI组件和sdk主代码的url,seed.js加载后,先加载sdk的核心js文件,然后如果使用某个UI组件,就按需加载。

var MAP = {
    core: ['sdk-core.js'],
    ui: {
        loginDialog: ['path/loginDialog.css', 'path/loginDialog.js']
    }
}
load(MAP.core);

//使用
SDKJS.ready(function($){
    //$实际是SDKJS
    $.use('loginDialog', function(loginDialog){
        loginDialog(xxxxx);
    })
});

标签:url,介绍,js,api,使用,var,sdk
From: https://www.cnblogs.com/guozhiqiang/p/17275715.html

相关文章

  • 全网最详细中英文ChatGPT-GPT-4示例文档-自然语言智能获取颜色从0到1快速入门——官网
    目录Introduce简介setting设置Prompt提示Sampleresponse回复样本APIrequest接口请求python接口请求示例node.js接口请求示例curl命令示例json格式示例其它资料下载ChatGPT是目前最先进的AI聊天机器人,它能够理解图片和文字,生成流畅和有趣的回答。如果你想跟上AI时代的潮流......
  • CSS总复习(二)一些属性介绍
    CSS字体、文本样式指定字体不能指望用户的机器上一定安装了你想使用的字体。解决这个问题的方法是使用Web字体,我们可以直接下载Web字体并使用在自己的页面上,而不需要用户做什么。使用@font-face指定Web字体,如:@font-face{font-family:'MyFont';font-style:normal;......
  • 简单介绍python列表元素拼接成字符串的4种方法
    本文主要介绍了python列表元素拼接成字符串的4种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧前言我们在分析列表数据时,常常需要对列表数据进行输出或多列表关联拼接。直接使用列表,列表中的各元素以逗......
  • linux设备树-基础介绍
    一、介绍1.1为什么引入设备树我们首先回顾一下我们之前学习过的驱动程序。比如:linux驱动移植-lcd驱动基础;在arch/arm/plat-samsung/devs.c文件中定义了platform设备s3c_device_lcd,在arch/arm/mach-s3c24xx/mach-smdk2440.c文件定义了platform数据smdk2440_fb_info。linux驱动......
  • js入门
             ......
  • Mapboxgl draw 自定义标绘:圆、矩形、自由多边形、上传读取geojson
    还没做文字标绘,累了,以后有需要有机会再说自定义标绘方法Mapboxgl标绘相关库我当前使用的版本是:"@mapbox/mapbox-gl-draw":"^1.4.1","@mapbox/mapbox-gl-draw-static-mode":"^1.0.1","mapbox-gl-draw-circle":"^1.1.2",&quo......
  • threejs中渲染html
    背景最近中看threejs的时候发现一个好玩的事情,可以在threejs中渲染普通的html。threejs本身可以做各种炫酷的界面,但是与用户交互的时候写起来没有用dom实现方便,但是如果可以将已有的dom渲染到threejs中,那么就可以实现非常炫酷的界面,也能提高用户的体验。依赖介绍这里使用react......
  • js学习笔记
    Js语法基础== >=<= - 默认把字符型隐式转换为数值型+为字符拼接逻辑短路:(与运算):表达式1结果为真,返回表达式2表达式1为假,返回表达式1(或运算):表达式1为真,返回表......
  • SAP ABAP MIME Repository 和 API 介绍
    本教程之前介绍过在SAPABAP系统创建数据库表的步骤:14.如何创建最简单的ABAP数据库表,以及编码从数据库表中读取数据(上)15.如何创建最简单的ABAP数据库表,以......
  • Linux系统下exec函数族简单介绍
    exec()函数的简单介绍exec函数族的作用是根据指定的文件名找到可执行的文件,并用它来取代调用进程的内容,话句话说,就是在调用进程内部执行一个可执行文件。exec函数族的函......