我正在尝试在 javscript/jquery 中创建一个 sdk，用于根据用户输入创建模板，例如模板类型 - 配置文件模板、对话框模板。这些模板需要来自 ajax 调用的数据才能创建。
用户输入应包括一些配置参数和模板类型。
由于我没有太多创建 sdk 的经验，我正在尝试创建一个可扩展且灵活的 sdk，它可以在未来采用更多的功能和属性。
我被困在创建 javascript/jquery sdk 的基本和最佳方法是什么的问题上？
var dialogTemplate , var = template2 我添加了示例模板。要求是当用户在 tmpConfig.config.type 中传递模板/模板名称时，通过同时为每个模板/模板获取数据来创建该特定模板/模板。假设，当调用“对话框模板”时创建对话框模板。当调用 'dialog template' 和 'template2' 时创建并附加它。这些模板名称可以在配置中以数组形式发送。
下面是我试过的:-
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="mySDK.js"></script>
</head>
<body>
// container for templates
<div id="tmpBox"></div>
</body>
<script type="text/javascript">
const tmpConfig = {
config: {
type: ['dialog','template2',...,...,....]
},
boxId: '#tmpBox'
};
var mySDK= new tmpSDK(tmpConfig );
mySDK.createtemplate(); // create template
</script>
</html>
mySDK.js
function tmpSDK(confg){
// implementation of sdk
this.config = confg;
}
tmpSDK.prototype.createtemplate= function(){
var idsToAppendTemplate = this.config.boxId;
var templateTypes = this.config.type;
// checking number of templates to create
for(var i=0 ; i < templateTypes.length; i++){
if(templateTypes === 'dialog'){
createDialog(idsToAppendTemplate )
}else if(templateTypes === 'template2'){
createTemplate2 (idsToAppendTemplate )
}
}
}
function getData(ajaxConfig){
$.ajax(){
return data;
}
}
// different templates html defined below:-
var dialogTemplate = function(data){
// play with data
var html = '<div class='dialog-template'>MY Dialog Template</div>';
return html;
}
var template2 = function(data){
// play with data
var html = '<div class='template2'>MY Template2</div>';
return html;
}
tmpSDK.prototype.createDialog = function(id){
var ajaxConfig = {
'url' : 'http://dialog endponts/',
....
}
var data = getData(ajaxConfig);
$(id).append(dialogTemplate(data)); // var dialogTemplate
}
tmpSDK.prototype.createTemplate2 = function(id){
var ajaxConfig = {
'url' : 'http://template2endponts/',
....
}
var data = getData(ajaxConfig);
$(id).append(template2(data) ); //// var template2
}
最佳答案
请考虑使用 Class 创建您的 sdk 作为 jQuery 模块。
(function ( $ ) {
$.fn.mySdk = function(options) {
const element = $(this);
const sdk = new MySdk(options, element);
element.data('plugin-my-sdk', sdk);
return $(this);
};
$.fn.getMySdk = function() {
const element = $(this);
return element.data('plugin-my-sdk');
};
class MySdk {
constructor(options, element) {
this.element = element;
this.settings = $.extend({
type: 'dialog',
}, options );
this.fetchTemplate().done(this.applyTemplate.bind(this));
}
fetchTemplate() {
return $.post({
url: `${document.location.origin}/your-endpoint-for-getting-template`,
data: {
'id': this.element.attr('id'),
'type': this.settings.type
}
});
}
applyTemplate(template) {
this.element.html(template);
}
apiMethod() {
const yourElement = this.element;
const yourElementId = this.element.attr('id');
const yourType = this.settings.type;
}
}
}( jQuery ));
// This snippet - is example of using your sdk
jQuery(function ($) {
const element = $('#tmpBox');
element.mySdk({
type: 'dialog'
});
const sdk = element.getMySdk();
sdk.apiMethod();
});
这段代码是做什么的？
包装 jQuery 函数以创建非全局作用域并避免 jQuery 与 $ 函数名称冲突
为元素使用 MySdk 类。
这适用于选择器获取的集合中只有一个 jquery 元素的情况。在这种情况下 -
const element = $('#tmpBox');只采用一个元素。
这段代码
this.settings = this.settings = $.extend({
type: 'dialog',
}, options );
将默认选项与您的选项合并。如果您的选项对象中没有选项 - 则将使用默认选项
如果需要使用jquery集合
例如，您的 sdk 元素是 $('.tmpBox') 那里有超过 1 个元素 - 请考虑在 mySdk 中使用 each 函数来初始化每个元素.
const elements = $(this);
element.each(function(){
// init for every element;
})
关于javascript - 用于使用 javascript/jquery 创建模板的模板 sdk，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54960534/