Transformers 是一套基于 Javascript(JS) 的已彻底组件化与模块化的开发框架，与 Web Components 理念一致。框架主要关注组件路由、组件消息传递和组件异步加载等，其中要解决的核心问题是组件间的解耦。
快速开始
引入 jQuery
<script src="http://javascript.u.qiniudn.com/jquery/1110.js"></script>
引入 Transformers 框架
<script src="http://javascript.u.qiniudn.com/jquery/transformers.js"></script>
开始使用
1. 编写组件容器
<!doctype html> <html> <head> <title>Hello World</title> <meta charset="utf-8" /> <script src="http://javascript.u.qiniudn.com/jquery/1110.js"></script> <script src="http://javascript.u.qiniudn.com/jquery/transformers.js"></script> </head> <body> <div id="content" class="TFComponent"> <div> <!-- 指定 tf-action-click 属性会给此元素绑定 click 事件 事件处理器是组件的 testAction 方法 --> <button type="button" tf-action-click="test">测试</button> </div> <!-- content 模板的目标渲染节点 --> <div class="TFTarget-content"></div> <!-- 名为 content 的模板 --> <script type="text/html" class="TFTemplate-content"> 你好！世界！ </script> </div> </body> </html>
2. 创建应用程序
// 创建应用程序
TF.Core.Application.create({
baseUrl: "./"
});
3. 创建组件 Home
// 定义名为 Home 的组件
TF.define('Home', {
// 组件 DOM 准备完毕回调函数
DomReady: function() {
console.log('ready!');
},
// Action 是组件对外的接口
testAction: function(args) {
console.log('test!');
// 渲染静态模板
this.sys.renderStaticTemplate('content');
this.renderOk();
},
// 组件私有方法，外部无法访问
renderOk: function() {
console.log('render OK!');
}
});
4. 注册组件
// 添加名为 Home 的组件到组件管理器中
TF.Core.ComponentMgr.add([{
name: 'Home',
appendRender: false,
lazyRender: false,
hide: false,
applyTo: '#content'
}]);
5. 启动应用程序
// 等待 DOM Ready
TF.ready = function(){
// 启动应用程序
TF.Core.Application.bootstrap();
};
实例
<!doctype html>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8" />
<script src="http://javascript.u.qiniudn.com/jquery/1110.js"></script>
<script src="http://javascript.u.qiniudn.com/jquery/transformers.js"></script>
</head>
<body>
<div id="content" class="TFComponent">
<div>
<!--
指定 tf-action-click 属性会给此元素绑定 click 事件
事件处理器是组件的 testAction 方法
-->
<button type="button" tf-action-click="test">测试</button>
</div>
<!-- content 模板的目标渲染节点 -->
<div class="TFTarget-content"></div>
<!-- 名为 content 的模板 -->
<script type="text/html" class="TFTemplate-content">
你好！世界！
</script>
</div>
<script type="text/javascript">
// 创建应用程序
TF.Core.Application.create({
baseUrl: "./"
});
// 定义名为 Home 的组件
TF.define('Home', {
// 组件 DOM 准备完毕回调函数
DomReady: function() {
console.log('ready!');
},
// Action 是组件对外的接口
testAction: function(args) {
console.log('test!');
// 渲染静态模板
this.sys.renderStaticTemplate('content');
this.renderOk();
},
// 组件私有方法，外部无法访问
renderOk: function() {
console.log('render OK!');
}
});
// 添加名为 Home 的组件到组件管理器中
TF.Core.ComponentMgr.add([{
name: 'Home',
appendRender: false,
lazyRender: false,
hide: false,
applyTo: '#content'
}]);
// 等待 DOM Ready
TF.ready = function(){
// 启动应用程序
TF.Core.Application.bootstrap();
};
</script>
</body>
</html>-
作者|huggingface 编译|VK 来源|Github 理念 Transformers是一个为NLP的研究人员寻求使用/研究/扩展大型Transformers模型的库。 该库的设计有两个强烈的目标: 尽可能简单和快速使用: 我们尽可能限制了要学习的面向对象抽象的类的数量，实际上几乎没有抽象，每个模型只需要使用三个标准类:配置、模型和tokenizer， 所有这些类都可以通过使用公共的from
-
点击此处可访问SBERT官方代码(GitHub) 在安装sentence-transformers之前需要确保以下条件： We recommend Python 3.6 or higher, PyTorch 1.6.0 or higher and transformers v4.6.0 or higher. The code does not work with Python 2.7. 一、安装P
-
本文向大家介绍详解开源的JavaScript插件化框架MinimaJS，包括了详解开源的JavaScript插件化框架MinimaJS的使用技巧和注意事项，需要的朋友参考一下 本文介绍我开发的一个JavaScript编写的插件化框架——MinimaJS，完全开源，源码下载地址：https://github.com/lorry2018/minimajs。该框架参考OSGi规范，将该规范定义的三大插件
-
本文向大家介绍JavaScript插件化开发教程（五），包括了JavaScript插件化开发教程（五）的使用技巧和注意事项，需要的朋友参考一下 一，开篇分析 Hi，大家好！前两篇文章我们主要讲述了以“jQuery的方式如何开发插件”，以及过程化设计与面向对象思想设计相结合的方式是如何设计一个插件的，两种方式各有利弊取长补短，嘿嘿嘿，废话少说，进入正题。直接上实际效果图： 大家看到了吧，这是一个
-
本文向大家介绍JavaScript插件化开发教程（六），包括了JavaScript插件化开发教程（六）的使用技巧和注意事项，需要的朋友参考一下 一，开篇分析 今天这篇文章我们说点什么那？嘿嘿嘿。我们接着上篇文章对不足的地方进行重构，以深入浅出的方式来逐步分析，让大家有一个循序渐进提高的过程。废话少说，进入正题。让我们先来回顾一下之前的 Js部分的代码，如下： 效果如下图所示： a)----
-
日期: 2020-12-25 创盛视联数码科技（北京）有限公司 概述 提供云课堂基础SDK功能，包括推流，拉流，排麦组件，聊天以及白板组件。为用户提供快速，简便的方法开展自己的实时互动课堂。 功能特性 安卓端SDK目前支持了音视频sdk、白板插件、聊天插件以及排麦插件 音视频SDK功能 功能特性 描述 备注 推流 支持推流到服务器 拉流 支持从服务器订阅流 获取流状态 支持获取流的状态(发报数、收
-
日期: 2020-12-25 创盛视联数码科技（北京）有限公司 概述 提供云课堂基础SDK功能，包括推流，拉流，排麦组件，聊天以及白板组件。为用户提供快速，简便的方法开展自己的实时互动课堂。 功能特性 iOS端SDK目前支持了音视频SDK、白板插件、聊天插件以及排麦插件； 音视频SDK功能 功能特性 描述 备注 推流 支持推流到服务器 拉流 支持从服务器订阅流 获取流状态 支持获取流的状态(发报数
-
本文向大家介绍JavaScript的模块化开发框架Sea.js上手指南，包括了JavaScript的模块化开发框架Sea.js上手指南的使用技巧和注意事项，需要的朋友参考一下 Sea.js所有源码都存放在 GitHub 上：https://github.com/seajs/examples，目录结构为： 引入seajs主文件 seajs主入口文件(main) seajs依赖文件(index) 文件