文档翻译至angularjs.org. 文档解释了您何时想在AngularJS应用程序中创建自己的指令，以及如何实现它们。 | 建议搭配原文食用 |

什么是指令？

在高层次上，指令时DOM元素上的标记（作为属性，元素名，注释和CSS类）用来告诉Angularjs的HTML Compiler（$compile）附加特定的行为在此DOM元素上（例如，通过事件监听），或者甚至去转换DOM元素和他的子元素。

Angularjs附加了一系列内建的执行，像ngBind, ngModel, and ngClass. 和你创建的控制器和服务一样，你可以创建你自己的指令来供Angularjs使用. 当Angularjs 启动（bootstraps）你的应用时，HTML compiler遍历DOM匹配DOM元素对应的指令。

What does it mean to "compile" an HTML template? For AngularJS, "compilation" means attaching directives to the HTML to make it interactive. The reason we use the term "compile" is that the recursive process of attaching directives mirrors the process of compiling source code in compiled programming languages.

指令匹配
在我们开始写指令之前，我们需要知道当使用一个给定的指令, Angularjs的 HTML Compiler是如何判断的

与元素匹配选择器（element matches a selector）时使用的术语类似，当指令是其声明的一部分时，我们说元素匹配指令。

在下面的例子中，我们说元素匹配ngModel指令

以下元素也匹配ngModel：

以下元素与person指示相匹配：

{{name}}

Normalization (暂译规范化)

AngularJS规范化元素的标签和属性名称，以确定哪些元素与哪些指令相匹配。我们通常通过其区分大小写的camelCase规范化名称（例如，ngModel）来定义（refer to）指令。然而，由于HTML是大小写不敏感的，我们通过小写形式在DOM中引用指令，通常使用dash（-）分割符分割不同的单词（例如ng-model）

规范化过程如下：
1.剔除元素/属性开头的 x- ， data- ；
2.将 - ， _ ，: 分隔符转换为小驼峰式 camelCas
例如，以下形式都是等同的，并且与ngBind指令相匹配：


  Hello

指令类型

A - attributes     
C - class name     
E - element name   
M - comments

Best Practice: Prefer using directives via tag name and attributes over comment and class names.Doing so generally makes it easier to determine what directives a given element matches.

Best Practice: Comment directives were commonly used in places where the DOM API limits the ability to create directives that spanned multiple elements (e.g. inside

elements). AngularJS 1.2 introduces ng-repeat-start and ng-repeat-end as a better solution to this problem. Developers are encouraged to use this over custom comment directives when possible..

创建指令

首先让我们讨论下注册指令的API（API for registering directives）. 和控制器一样，指令也是注册在模块之上的。为了注册一个指令，你需要使用 module.directive API。module.directive接受标准化的指令名称，后跟一个工厂函数。这个工厂函数应该返回一个具有不同选项的对象来告诉$compile指令在匹配时应该如何表现。

当$conpile第一次匹配指令时，工厂函数仅被调用一次。你可以在这里指令任意的初始化工作。该（工厂）函数使用 $injector.invoke 来调用这使得它可以像控制器一样是可注射。

我们将通过一些常见的指令示例，然后深入探讨不同的选项和编译过程。

Best Practice: In order to avoid collisions with some future standard, it's best to prefix your own directive names. For instance, if you created a directive, it would be problematic if HTML7 introduced the same element. A two or three letter prefix (e.g. btfCarousel) works well. Similarly, do not prefix your own directives with ng or they might conflict with directives included in a future version of AngularJS.

作为后续示例，我们将使用my前缀（例如 myCustomer）。

Template-expanding 指令

假设您有一大块代表客户信息的模板。这个模板在您的代码中重复多次。当你在一个地方改变它时，你必须在其他几个地方改变它。这是使用指令简化模板的好机会。

让我们创建一个指令，用一个静态模板简单地替换它的内容：
https://jsfiddle.net/TommyLee...

注意我们在这个指令中有bindings。在$compile编译和链接

后，它将会尝试在元素的子元素上匹配指令。这意味着你可以组建指令的指令（嵌套指令）。我们将在后续看到如何编写 an example 。

在上面的例子中，我们列出了模板选项（template attribute of return object in factory function），但随着模板大小的增长，这将变得令人讨厌。

Best Practice: Unless your template is very small, it's typically better to break it apart into its own HTML file and load it with the templateUrl option.

如果你熟悉ngInclude，templateUrl就像它一样工作。下面是使用templateUrl代替的相同示例：
https://plnkr.co/edit/idFOZ8Q...

templateUrl也可以是一个函数，它返回要加载和用于指令的HTML模板的URL。AngularJS将使用两个参数调用templateUrl函数：指令被调用的元素以及与该元素相关联的attr对象。

Note: You do not currently have the ability to access scope variables from the templateUrl function, since the template is requested before the scope is initialized
注：(要访问socpe上的值，应该在post-link阶段).

https://plnkr.co/edit/gaSYwnp...

restrict 选项通常设置为：

When should I use an attribute versus an element? Use an element when you are creating a component that is in control of the template.The common case for this is when you are creating a Domain-Specific Language for parts of your template. Use an attribute when you are decorating an existing element with new functionality.

用元素来使用myCustomer指令时明智的选择，因为你不用一些“customer”行为修饰一个元素，你定义一个元素核心行为作为一个costomer组建。

隔离指令的Scope

我们以上的myCustomer指令很好，但是它有一个致命缺陷。我们只有在一个给定的scope下使用。

在其目前的实现上，我们应该需要去创建一些不同点控制器用来重用这个指令。
https://plnkr.co/edit/CKEgb1e...

这明显不是一个好的解决方案。

我们说项的是把指令内部的scope与外部scope（controller scope）分离，并且映射外部scope到指令内部scope。我们可以通过创建一个isolate scope来做。为此，我们可以使用指令的scope选项。

https://plnkr.co/edit/E6dTrgm...
看index.html文件，第一个元素绑定info属性值为naomi，它是我们已经暴露在我们的控制器上的scope。第二个绑定info为igor。

让我们仔细看看scope选项

//... 
scope: { customerInfo: '=info' },
//...

除了可以将不同的数据绑定到指令中的作用域外，使用isolated scope还有其他作用。

我们可以通过添加另一个属性vojta来展示，到我们的scope并尝试从我们的指令模板中访问它：
https://plnkr.co/edit/xLVqnzt...

请注意{{vojta.name}}和{{vojta.address}}为空，意味着它们未定义（undefined）。虽然我们在控制器中定义了vojta，但它在指令中不可用。

顾名思义，该指令的 isolate scope隔离了除显式添加到作用域的模型之外的所有内容：scope: {}散列对象. 这在构建可重用组件时很有用，因为它可以防止组件改变模型状态，除了显式传入。

Note: Normally, a scope prototypically inherits from its parent. An isolated scope does not. See the "Directive Definition Object - scope"section for more information about isolate scopes.

Best Practice: Use the scope option to create isolate scopes when making components that you want to reuse throughout your app.

创建一个操纵DOM的指令

在这个例子中，我们将建立一个显示当前时间的指令。每秒一次，它会更新DOM以反映当前时间。

想要修改DOM的指令通常使用link选项来注册DOM监听器以及更新DOM。它在模板被克隆之后执行，并且是放置指令逻辑的地方。

link接受一个带有一下签名的函数function link(scope, element, attrs, controller, transcludeFn) { ... }, 其中：

scope是一个Angularjs scope 对象
element 是一个此指令匹配的jqLite包装元素
attrs是一个具有标准化属性名称及其对应属性值的键值对的散列对象。
controller是指令所需的控制器实例或其自己的控制器（如果有的话）。确切的值取决于指令的 require属性。
transcludeFn是预先绑定到正确的包含范围的transclude链接函数。

For more details on the link option refer to the $compile API page.

在我们的link函数中，我们想每秒钟更新显示时间，或者一个用户改变了我们指令绑定的时间格式字符串。我们将会使用$interval服务定期调用处理程序。这比使用$ timeout更容易，但对于端到端测试也更好，我们希望确保在完成测试之前完成所有$timeout。如果指令被删除，我们也想删除$ interval，所以我们不会引入内存泄漏
https://plnkr.co/edit/vIhhmNp...

这里有几件事需要注意。就像module.controller API一样，module.directive中的函数参数是依赖注入的。因此，我们可以在指令的链接函数中使用$ interval和dateFilter。

我们注册一个事件element.on（'$ destroy'，...）。什么引发了这个$ destroy事件？

AngularJS发布了一些特殊事件。当用AngularJS的编译器编译的DOM节点被销毁时，它会发起$ destroy事件。同样，当Angularjs scope被销毁，他会广播（broadcasts）一个$destory事件监听scopes。

通过监听此事件，可以删除可能导致内存泄漏的事件侦听器。注册到scope和element的监听事件在销毁DOM时会自动清理，但是如果您在服务上注册了侦听器，或者在未被删除的DOM节点上注册了侦听器，你必须自己清理它，否则你有冒险引入内存泄漏的风险。

Best Practice: Directives should clean up after themselves. You can use element.on('$destroy', ...) or scope.$on('$destroy', ...) to run a clean-up function when the directive is removed.

创建包装其他元素的指令

我们已经看到，您可以使用isolate scope将模型传递给指令，但是有时候想要能传入一整个模板而不是一个字符串或者对象。我们说我们想要创建一个“dialog box”组建。dialog box应该有能力包装任意的内容（any arbitrary content）。

为此，我们需要使用transclude选项。
https://plnkr.co/edit/empMwVW...

transclude选项到底做了什么呢？transclude使指令的内容通过此选项拥有可访问外部指令的scope不是内部的scope。

为了说明了这一点，请看下面的例子。注意，我们在script.js中添加了一个link函数，将名称重新定义为Jeff。您认为{{name}}绑定将会得到什么结果？
https://plnkr.co/edit/OEdkXY4...

照常，我们以为{{name}}应该是Jeff。但是，我们看见的是Tobias。

transclude选项改变了scope的嵌套方式。它使得一个transcluded指令的内容具有在指令之外的任何scope内容，而不是任何内部的scope。这样做，它可以让内容访问外部scope。

请注意，如果指令没有创建自己的独立作用域，那么scope.name ='Jeff'中的作用域将引用外部作用域，我们会在输出中看到Jeff。

这种行为对于封装某些内容的指令是有意义的，因为否则，您必须分别传入每个您想要使用的模型。如果你必须传入每一个你想要的model，那么你不能真正的使用任意的内容，对吗？

Best Practice: only use transclude: true when you want to create a directive that wraps arbitrary content.

接下来，我们要在此对话框中添加按钮，并允许使用该指令的用户将自己的行为绑定到该对话框。
https://plnkr.co/edit/Bo5lona...

我们希望通过从指令的作用域调用它来运行我们传递的函数，但是它会在注册作用域的上下文中运行。

我们在之前已经看到在scope选项中如何使用 =attr，但是在上面的例子中，我们使用了&attr代替。 &绑定允许一个指令去触发一个原始范围内的表达式的评估，在一个特定时间点上。任何合法的表达式都是允许的，包括一个含有函数调用的表达式。如此，& 绑定是理想的将回调函数绑定到指令行为。

当用户点击dialog中的 x，指令的close函数被调用，多亏于ng-click。这个close调用在isolated scope之上，实际上会在原始scope的上下文中评估表达式 hideDialog（message），导致运行Controller中的hideDialog function。

通常期望通过一个表达式从isolate scope传入数据到父scope，这可以通过将局部变量名称和值的映射传递到表达式包装函数来完成。例如，hideDialkog函数接受一个message来显示当dialog被隐藏是。这被指令调用 close({message: 'closing for now'})指明。接着局部变量message将在on-close表达式内被访问(is available).

Best Practice: use &attr in the scope option when you want your directive to expose an API for binding to behaviors.

创建一个添加事件监听器的指令

以前，我们使用链接函数来创建操纵其DOM元素的指令。在这个例子的基础上，让我们制定一个对其元素事件做出反应的指令。

例如，如果我们想创建一个允许用户拖拽元素的指令呢？
https://plnkr.co/edit/hcUyuBY...

创建一个通信的指令

你可以组建任何指令通过模板使用他们。

有时，你需要一个由指令组合构建的组件。

想象你想要有一个容器，其中容器的内容对应于哪个选项卡处于活动状态的选项卡。
https://plnkr.co/edit/kqLjcwG...

myPane指令有require选项值为^^myTabs. 当指令使用此选项，&compile将抛出一个错误除非特定的controller被找到。 ^^前缀表示该指令在其父元素上搜索控制器。（^前缀将使指令在自身元素或她的父元素上寻找控制器；又没任何前缀，指令将值操作自身）

所以这个myTabs contoller从哪里来的？指令可以特定一个controllers通过使用 controller选项。如你所见，myTabs指令使用了此选项。就像ngController，此选项附加一个控制器到指令的模板上。

如果需要从模板中引用控制器或绑定到控制器的任何功能，则可以使用选项controllerAs将控制器的名称指定为别名。该指令需要定义要使用的此配置的范围。这在指令被用作组件的情况下特别有用。

回头看myPane的定义，注意到link函数的最后一个参数：tabCtrl。当指令需要控制器时，它将接收该控制器作为其link函数的第四个参数。利用这一点，myPane可以调用myTabs的addPane函数。

如果需要多个控制器，则指令的require选项可以采用数组参数。发送给链接函数的相应参数也将是一个数组。


angular.module('docsTabsExample', [])
.directive('myPane', function() {
  return {
    require: ['^^myTabs', 'ngModel'],
    restrict: 'E',
    transclude: true,
    scope: {
      title: '@'
    },
    link: function(scope, element, attrs, controllers) {
      var tabsCtrl = controllers[0],
          modelCtrl = controllers[1];

      tabsCtrl.addPane(scope);
    },
    templateUrl: 'my-pane.html'
  };
});

明的读者可能想知道链接和控制器之间的区别。基本的区别是控制器可以暴露一个API，并且链接函数可以使用require与控制器交互。

Best Practice: use controller when you want to expose an API to other directives. Otherwise use link.

总结

到此我们已经看了大多数指令的用法，每一个样例演示了一个创建你自己指令的好的起始点。

你可能深入感兴趣于编译过程的解释可以在这里获得compiler guide.

$compile API 有一个全面的指令清单选项以供参考。

最后

如有任何问题和建议欢迎发送至邮箱讨论：
翻译不易，若您觉得对您有帮助，欢迎打赏

微信：

支付宝：

你可能感兴趣的:(创建自定义指令)

day15｜前端框架学习和算法 universe_01 前端算法笔记
T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
Git 与 GitHub 的对比与使用指南一念& 其它 git github
Git与GitHub的对比与使用指南在软件开发中，Git和GitHub是两个密切相关但本质不同的工具。下面我将逐步解释它们的定义、区别、核心概念以及如何协同使用，确保内容真实可靠，基于广泛的技术实践。1.什么是Git？Git是一个分布式版本控制系统，由LinusTorvalds于2005年创建。它的核心功能是跟踪代码文件的变化，帮助开发者管理项目历史记录、协作和回滚错误。Git是开源的，可以在本地
【C++算法】76.优先级队列_前 K 个高频单词流星白龙优选算法C++c++算法开发语言
文章目录题目链接：题目描述：解法C++算法代码：题目链接：692.前K个高频单词题目描述：解法利用堆来解决TopK问题预处理一下原始的字符串数组，用一个哈希表统计一下每一个单词出现的频次。创建一个大小为k的堆频次：小根堆字典序（频次相同的时候）：大根堆循环让元素依次进堆判断提取结果C++算法代码：classSolution{//定义类型别名，PSI表示对typedefpairPSI;//自定义比较
Java | 多线程经典问题 - 售票 Ada54
一、售票需求1）同一个票池2）多个窗口卖票，不能出售同一张票二、售票问题代码实现（线程与进程小总结，请戳：Java|线程和进程，创建线程）step1：定义SaleWindow类实现Runnable接口，覆盖run方法step2：实例化SaleWindow对象，创建Thread对象，将SaleWindow作为参数传给Thread类的构造函数，然后通过Thread.start()方法启动线程step3
2018-09-27 aop相关蒋超_58dc
1.静态织入，需要使用aspectj专用的compilermaven工程可以采用：https://www.mojohaus.org/aspectj-maven-plugin/2.动态织入，配合spring，创建代理来执行3.
Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五) bug菌¹ Java实战(进阶版)java Java零基础入门 Java并发线程池多线程篇
本文收录于「Java进阶实战」专栏，专业攻坚指数级提升，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！环境说明：Windows10+IntelliJIDEA2021.3.2+Jdk1.8本文目录前言摘要正文何为线程池？为什么需要线程池？线程池的好处线程池使用场景如何创建线程池？线程池的常见配置源码解析案例分享案例代码演示案例运行
JVM 内存分配与回收策略：从对象创建到内存释放的全流程
在JVM的运行机制中，内存分配与回收策略是连接对象生命周期与垃圾收集器的桥梁。它决定了对象在堆内存中的创建位置、存活过程中的区域迁移，以及最终被回收的时机。合理的内存分配策略能减少GC频率、降低停顿时间，是优化Java应用性能的核心环节。本文将系统解析JVM的内存分配规则、对象晋升机制，以及实战中的内存优化技巧。一、对象优先在Eden区分配：新生代的“临时缓冲区”大多数情况下，Java对象在新生代
C++编程基础与面向对象概念解析侯昂面向对象编程 C++语法函数类与对象继承与多态性
C++编程基础与面向对象概念解析背景简介C++是一种广泛使用的面向对象编程语言，它允许开发者创建高效、灵活且功能强大的程序。本文基于《C++Primer》一书的章节内容，深入解析C++的核心概念和面向对象编程原则，旨在帮助读者构建扎实的C++编程基础。面向对象编程的原则软件危机与进化介绍了软件危机的产生和软件进化的必要性，强调了面向对象编程（OOP）在应对这些问题中的优势。面向对象编程范式讨论了面
手把手教你用C语言实现顺序表
hello，大家好，本篇文章旨在为大家讲解如何使用C语言实现顺序表，还有就是小编自己复习一下相关知识，OK，那我们现在开始。在通讯录中，有增删查改等功能，那么顺序表我们也会对以上功能进行实现。一、创建并初始化顺序表1.创建typedefintSLDataType;#defineINIT_CAPACITY4//动态顺序表--按需申请typedefstructSeqList{SLDataType*a;
MySQL复习题
一.填空题1.关系数据库的标准语言是SQL。2.数据库发展的3个阶段中，数据独立性最高的是阶段数据库系统。3.概念模型中的3种基本联系分别是一对一、一对多和多对多。4.MySQL配置文件的文件名是my.ini或my.cnf。5.在MySQL配置文件中，datadir用于指定数据库文件的保存目录。6.添加IFNOTEXISTS可在创建的数据库已存在时防止程序报错。7.MySQL提供的SHOWCREA
Android GreenDao介绍和Generator生成表对象代码
目录(?)[-]介绍创建工程转载请注明：http://blog.csdn.net/sinat_30276961/article/details/50052109最近无意中发现了GreenDao，然后查看了一些资料后，发现这个数据库框架很适合用，于是乎，查看了官网的api，并自己写了一个小应用总结一下它的使用方法。介绍按照国际惯例，在开篇，总要先介绍一下什么是GreenDao吧。首先需要说明的是Gr
Unity学习笔记1 zy_777
通过一个星期的简单学习，初步了解了下unity，unity的使用，以及场景的布局，UI，以及用C#做一些简单的逻辑。好记性不如烂笔头，一些关键帧还是记起来比较好，哈哈，不然可能转瞬即逝了，（PS:纯小白观点，unity大神可以直接忽略了）一：MonoBehaviour类的初始化1，Instantiate()创建GameObject2，通过Awake()和Start()来做初始化3，Update、L
K8S 常用命令全解析：高效管理容器化集群恩爸编程 docker kubernetes 容器 k8s常用命令 k8s有哪些常用命令 k8s命令有哪些 K8S常用命令有哪些
K8S常用命令全解析：高效管理容器化集群一、引言Kubernetes（K8S）作为强大的容器编排平台，其丰富的命令行工具（kubectl）为用户提供了便捷的方式来管理集群中的各种资源。熟练掌握K8S常用命令对于开发人员和运维人员至关重要，能够有效提高容器化应用的部署、监控与维护效率。本文将详细介绍一些K8S常用命令及其使用案例。二、基础资源操作命令（一）kubectlcreate功能：用于创建K8
C#中的设计模式：构建更加优雅的代码 Envyᥫᩣᩚ c#开发语言
C#在面向对象编程（OOP）方面的强大支持，我们可以探讨“C#中的设计模式”。这不仅有助于理解如何更好地组织代码，还能提高代码的可维护性和可扩展性。引言设计模式是软件工程中经过实践验证的解决方案模板，它们提供了一种标准化的方法来解决常见的开发问题。对于使用C#进行开发的程序员来说，理解和应用这些模式可以帮助创建结构良好、易于维护和扩展的应用程序。本文将介绍几种常用的设计模式，并展示如何用C#实现它
Jupyter Notebook：数据科学的“瑞士军刀” a小胡哦机器学习基础人工智能机器学习
在数据科学的世界里，JupyterNotebook是一个不可或缺的工具，它就像是数据科学家手中的“瑞士军刀”，功能强大且灵活多变。今天，就让我们一起深入了解这个神奇的工具。一、JupyterNotebook是什么？JupyterNotebook是一个开源的Web应用程序，它允许你创建和共享包含实时代码、方程、可视化和解释性文本的文档。它支持多种编程语言，其中Python是最常用的语言之一。Jupy
selenium 特殊场景处理
文章目录前言一、windows的弹窗二、内嵌网页frame三、页签切换四、截图五、弹窗六、JS执行总结前言selenium处理web操作师，有很多特殊的情况需要处理，例如弹窗、内嵌网页，页签切换，js执行等，下面介绍一些可能会遇到的特殊场景一、windows的弹窗importwin32com.client'''创建了一个WScript.ShellCOM(ComponentObjectModel)对
大数据技术笔记—spring入门卿卿老祖
篇一spring介绍spring.io官网快速开始Aop面向切面编程，可以任何位置，并且可以细致到方法上连接框架与框架Spring就是IOCAOP思想有效的组织中间层对象一般都是切入service层spring组成前后端分离已学方式，前后台未分离：Spring的远程通信：明日更新创建第一个spring项目来源：科多大数据
qemu virt-manager 创建虚拟机设置虚拟机桥接网络三希网络 php 开发语言
在virt-manager中设置虚拟机桥接网络的步骤如下：确认主机网络桥接已配置打开终端，执行brctlshow命令查看是否已有桥接接口（通常名为br0或类似名称）如果没有桥接接口，需先创建：sudonano/etc/netplan/01-netcfg.yaml添加类似以下配置（根据实际网卡调整）：yamlnetwork:version:2renderer:networkdethernets:en
SVG 在线编辑器 lly202406 开发语言
SVG在线编辑器引言随着互联网技术的发展，矢量图形在网页设计和数据可视化中扮演着越来越重要的角色。SVG（可缩放矢量图形）因其文件小、无限缩放不模糊的特性，成为了网页设计中常用的图形格式。SVG在线编辑器的出现，为设计师和开发者提供了极大的便利，使得图形的创建和修改变得更加高效。本文将详细介绍SVG在线编辑器的功能、应用场景以及发展趋势。SVG在线编辑器概述SVG在线编辑器是一种基于网页的图形编辑
前端数据库：IndexedDB从基础到高级使用指南
文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
使用Python和Gradio构建实时数据可视化工具 PythonAI编程架构实战家信息可视化 python 开发语言 ai
使用Python和Gradio构建实时数据可视化工具关键词：Python、Gradio、数据可视化、实时数据、Web应用、交互式界面、数据科学摘要：本文将详细介绍如何使用Python和Gradio框架构建一个实时数据可视化工具。我们将从基础概念开始，逐步深入到核心算法实现，包括数据处理、可视化技术以及Gradio的交互式界面设计。通过实际项目案例，读者将学习如何创建一个功能完整、响应迅速的实时数据
pdf文件的属性值怎么修改？修改PDF内部的属性创建时间和修改时间这辈子谁会真的心疼你 pdf 修改PDF属性文件属性修改
部分PDF生成时会自动嵌入一些隐藏属性，比如创建软件版本、电脑用户名、修改记录等，这些信息可能涉及隐私或商业机密。例如，用个人电脑编辑的公司文件，属性中若包含个人用户名，可能泄露信息归属；通过修改或清除这些属性，可以避免不必要的信息暴露，降低隐私泄露风险。pdf文件的属性值怎么修改？要修改PDF文件的属性值（如标题、作者、主题等元数据），可以使用不同的工具或编程语言。以下是几种常见的方法：方法一：
修改gitlab默认的语言 Victor刘 gitlab
文章目录网上的方法1.采用数据库触发器的方法2.登录pg库2.1查看表2.2创建function2.3创建触发器2.4修改历史数据网上的方法网上修改/opt/gitlab/embedded/service/gitlab-rails/config/application.rb的方法，我试了，没生效，没进一步研究1.采用数据库触发器的方法2.登录pg库su-gitlab-psqlpsql-h/var/
负载均衡-加权随机算法 BP白朴 Nginx 负载均衡 java 算法服务器
负载均衡-加权随机算法由于访问概率大致相同，所以如果部分服务器性能不一致的话，容易导致性能差的服务器压力过大，所以要根据服务器性能不一致的情况，给性能好的服务器多处理请求，给差的少分配请求（能者多劳）所以就需要在随机算法的基础上给每台服务器设置权重，延伸为加权随机算法1、将应用服务器集群的IP存到Map里,每个IP对应有一个权重2、创建一个List,来将所有权重下的IP存到list里面如：192.
Spring Boot 2整合Druid的两种方式玩代码 spring boot 后端 java Druid
一、自定义整合Druid（非Starter方式）适用于需要完全手动控制配置的场景添加依赖（pom.xml）com.alibabadruid1.2.8org.springframework.bootspring-boot-starter-jdbc创建配置类@ConfigurationpublicclassDruidConfig{@Bean@ConfigurationProperties(prefix
webSocket双向通信 @泽栖 websocket 网络协议网络
webSocket基础使用webSocket小说明：作用浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。WebSocket与HTTP最大的区别HTTP通信是单向的，基于请求响应模式WebSocket支持双向通信。实现长连接适用场景：消息通信，视频弹幕，实时信息，等双向通信的使用需求使用：引入maven依赖org.springfram
Ubuntu Docker 安装Redis LLLL96 Ubuntu docker docker redis ubuntu
目录介绍1.数据结构丰富2.高性能3.持久化1.拉取Redis镜像2.创建挂载目录(可选)3.配置Redis持久化(可选)4.使用配置文件运行容器5.查看redis日志介绍1.数据结构丰富Redis支持多种数据结构，包括：字符串（String）:可以用来存储任何类型的数据，例如文本、数字或二进制数据。哈希（Hash）:存储字段和值的映射，适合用于表示对象。列表（List）:有序的字符串列表，可以用
Java：数据结构-ArrayList和顺序表（2） blammmp java 数据结构开发语言
一ArrayList的使用1.ArrayList的构造方法第一种（指定容量的构造方法）创建一个空的ArrayList，指定容量为initialCapacity。publicArrayList(intinitialCapacity){if(initialCapacity>0){this.elementData=newObject[initialCapacity];}elseif(initialCap
mysql创建线程处理链接请求斜不靠谱
mysqld通过RUN_HOOK(server_state,before_handle_connection,(NULL));调用/**Threadhandlerforaconnection@paramargConnectionobject(Channel_info)Thisfunction(normally)doesthefollowing:-Initializethread//初始化线程-In
使用Java和Spring WebFlux构建响应式微服务微赚淘客系统开发者@聚娃科技 java spring 开发语言
使用Java和SpringWebFlux构建响应式微服务大家好，我是微赚淘客系统3.0的小编，是个冬天不穿秋裤，天冷也要风度的程序猿！今天我们将探讨如何使用Java和SpringWebFlux构建响应式微服务。SpringWebFlux是Spring框架的一部分，专为创建响应式应用程序而设计。在这篇文章中，我们将介绍如何使用SpringWebFlux构建响应式微服务，包括基本概念、代码示例以及如何
书其实只有三类西蜀石兰类
一个人一辈子其实只读三种书，知识类、技能类、修心类。知识类的书可以让我们活得更明白。类似十万个为什么这种书籍，我一直不太乐意去读，因为单纯的知识是没法做事的，就像知道地球转速是多少一样（我肯定不知道），这种所谓的知识，除非用到，普通人掌握了完全是一种负担，维基百科能找到的东西，为什么去记忆？知识类的书，每个方面都涉及些，让自己显得不那么没文化，仅此而已。社会认为的学识渊博，肯定不是站在
《TCP/IP 详解，卷1：协议》学习笔记、吐槽及其他 bylijinnan tcp
《TCP/IP 详解，卷1：协议》是经典，但不适合初学者。它更像是一本字典，适合学过网络的人温习和查阅一些记不清的概念。这本书，我看的版本是机械工业出版社、范建华等译的。这本书在我看来，翻译得一般，甚至有明显的错误。如果英文熟练，看原版更好： http://pcvr.nl/tcpip/ 下面是我的一些笔记，包括我看书时有疑问的地方，也有对该书的吐槽，有不对的地方请指正： 1.
Linux—— 静态IP跟动态IP设置 eksliang linux IP
一.在终端输入 vi /etc/sysconfig/network-scripts/ifcfg-eth0 静态ip模板如下： DEVICE="eth0" #网卡名称 BOOTPROTO="static" #静态IP（必须） HWADDR="00:0C:29:B5:65:CA" #网卡mac地址 IPV6INIT=&q
Informatica update strategy transformation 18289753290
更新策略组件：标记你的数据进入target里面做什么操作，一般会和lookup配合使用，有时候用0,1,1代表 forward rejected rows被选中，rejected row是输出在错误文件里，不想看到reject输出，将错误输出到文件，因为有时候数据库原因导致某些column不能update，reject就会output到错误文件里面供查看，在workflow的
使用Scrapy时出现虽然队列里有很多Request但是却不下载，造成假死状态酷的飞上天空 request
现象就是：程序运行一段时间，可能是几十分钟或者几个小时，然后后台日志里面就不出现下载页面的信息，一直显示上一分钟抓取了0个网页的信息。刚开始已经猜到是某些下载线程没有正常执行回调方法引起程序一直以为线程还未下载完成，但是水平有限研究源码未果。经过不停的google终于发现一个有价值的信息，是给twisted提出的一个bugfix 连接地址如下http://twistedmatrix.
利用预测分析技术来进行辅助医疗蓝儿唯美医疗
2014年，克利夫兰诊所（Cleveland Clinic）想要更有效地控制其手术中心做膝关节置换手术的费用。整个系统每年大约进行2600例此类手术，所以，即使降低很少一部分成本，都可以为诊所和病人节约大量的资金。为了找到适合的解决方案，供应商将视野投向了预测分析技术和工具，但其分析团队还必须花时间向医生解释基于数据的治疗方案意味着什么。克利夫兰诊所负责企业信息管理和分析的医疗
java 线程(一)：基础篇 DavidIsOK java 多线程线程
&nbs
Tomcat服务器框架之Servlet开发分析 aijuans servlet
最近使用Tomcat做web服务器，使用Servlet技术做开发时，对Tomcat的框架的简易分析：疑问：为什么我们在继承HttpServlet类之后，覆盖doGet(HttpServletRequest req, HttpServetResponse rep)方法后，该方法会自动被Tomcat服务器调用，doGet方法的参数有谁传递过来？怎样传递？分析之我见： doGet方法的
揭秘玖富的粉丝营销之谜与小米粉丝社区类似 aoyouzi 揭秘玖富的粉丝营销之谜
玖富旗下悟空理财凭借着一个微信公众号上线当天成交量即破百万，第七天成交量单日破了1000万;第23天时，累计成交量超1个亿……至今成立不到10个月，粉丝已经超过500万，月交易额突破10亿，而玖富平台目前的总用户数也已经超过了1800万，位居P2P平台第一位。很多互联网金融创业者慕名前来学习效仿，但是却鲜有成功者，玖富的粉丝营销对外至今仍然是个谜。　　近日，一直坚持微信粉丝营销
Java web的会话跟踪技术百合不是茶 url会话 Cookie会话 Seession会话 Java Web 隐藏域会话
会话跟踪主要是用在用户页面点击不同的页面时,需要用到的技术点会话:多次请求与响应的过程 1,url地址传递参数,实现页面跟踪技术格式:传一个参数的 url?名=值传两个参数的 url?名=值 &名=值关键代码
web.xml之Servlet配置 bijian1013 java web.xml Servlet配置
定义： <servlet> <servlet-name>myservlet</servlet-name> <servlet-class>com.myapp.controller.MyFirstServlet</servlet-class> <init-param> <param-name>
利用svnsync实现SVN同步备份 sunjing SVN 同步 E000022 svnsync 镜像
1. 在备份SVN服务器上建立版本库 svnadmin create test 2. 创建pre-revprop-change文件 cd test/hooks/ cp pre-revprop-change.tmpl pre-revprop-change 3. 修改pre-revprop-
【分布式数据一致性三】MongoDB读写一致性 bit1129 mongodb
本系列文章结合MongoDB，探讨分布式数据库的数据一致性，这个系列文章包括：数据一致性概述与CAP 最终一致性(Eventually Consistency) 网络分裂(Network Partition)问题多数据中心(Multi Data Center) 多个写者(Multi Writer)最终一致性一致性图表(Consistency Chart) 数据
Anychart图表组件-Flash图转IMG普通图的方法白糖_ Flash
问题背景：项目使用的是Anychart图表组件，渲染出来的图是Flash的，往往一个页面有时候会有多个flash图，而需求是让我们做一个打印预览和打印功能，让多个Flash图在一个页面上打印出来。那么我们打印预览的思路是获取页面的body元素，然后在打印预览界面通过$("body").append(html)的形式显示预览效果，结果让人大跌眼镜：Flash是
Window 80端口被占用 WHY? bozch 端口占用 window
平时在启动一些可能使用80端口软件的时候，会提示80端口已经被其他软件占用，那一般又会有那些软件占用这些端口呢？下面坐下总结： 1、web服务器是最经常见的占用80端口的，例如：tomcat , apache , IIS , Php等等； 2
编程之美-数组的最大值和最小值-分治法（两种形式） bylijinnan 编程之美
import java.util.Arrays; public class MinMaxInArray { /** * 编程之美数组的最大值和最小值分治法 * 两种形式 */ public static void main(String[] args) { int[] t={11,23,34,4,6,7,8,1,2,23}; int[]
Perl正则表达式 chenbowen00 正则表达式 perl
首先我们应该知道 Perl 程序中，正则表达式有三种存在形式，他们分别是：匹配：m/<regexp>;/ （还可以简写为 /<regexp>;/ ，略去 m）替换：s/<pattern>;/<replacement>;/ 转化：tr/<pattern>;/<replacemnt>;
[宇宙与天文]行星议会是否具有本行星大气层以外的权力呢? comsci
举个例子: 地球,地球上由200多个国家选举出一个代表地球联合体的议会,那么现在地球联合体遇到一个问题,地球这颗星球上面的矿产资源快要采掘完了....那么地球议会全体投票,一致通过一项带有法律性质的议案,既批准地球上的国家用各种技术手段在地球以外开采矿产资源和其它资源........ &
Oracle Profile 使用详解 daizj oracle profile 资源限制
Oracle Profile 使用详解转一、目的： Oracle系统中的profile可以用来对用户所能使用的数据库资源进行限制，使用Create Profile命令创建一个Profile，用它来实现对数据库资源的限制使用，如果把该profile分配给用户，则该用户所能使用的数据库资源都在该profile的限制之内。二、条件：创建profile必须要有CREATE PROFIL
How HipChat Stores And Indexes Billions Of Messages Using ElasticSearch & Redis dengkane elasticsearch Lucene
This article is from an interview with Zuhaib Siddique, a production engineer at HipChat, makers of group chat and IM for teams. HipChat started in an unusual space, one you might not
循环小示例，菲波拉契序列，循环解一元二次方程以及switch示例程序 dcj3sjt126com c 算法
# include <stdio.h> int main(void) { int n; int i; int f1, f2, f3; f1 = 1; f2 = 1; printf("请输入您需要求的想的序列："); scanf("%d", &n); for (i=3; i<n; i
macbook的lamp环境 dcj3sjt126com lamp
sudo vim /etc/apache2/httpd.conf /Library/WebServer/Documents 是默认的网站根目录重启Mac上的Apache服务这个命令很早以前就查过了，但是每次使用的时候还是要在网上查：停止服务：sudo /usr/sbin/apachectl stop 开启服务：s
java ArrayList源码下 shuizhaosi888 ArrayList源码
版本 jdk-7u71-windows-x64 JavaSE7 ArrayList源码上：http://flyouwith.iteye.com/blog/2166890 /** * 从这个列表中移除所有c中包含元素 */ public boolean removeAll(Collection<?> c) {
Spring Security（08）——intercept-url配置 234390216 Spring Security intercept-url 访问权限访问协议请求方法
intercept-url配置目录 1.1 指定拦截的url 1.2 指定访问权限 1.3 指定访问协议 1.4 指定请求方法 1.1 &n
Linux环境下的oracle安装 jayung oracle
linux系统下的oracle安装本文档是Linux(redhat6.x、centos6.x、redhat7.x) 64位操作系统安装Oracle 11g(Oracle Database 11g Enterprise Edition Release 11.2.0.4.0 - 64bit Production)，本文基于各种网络资料精心整理而成，共享给有需要的朋友。如有问题可联系：QQ：52-7
hotspot虚拟机 leichenlei java HotSpot jvm 虚拟机文档
JVM参数 http://docs.oracle.com/javase/6/docs/technotes/guides/vm/index.html JVM工具 http://docs.oracle.com/javase/6/docs/technotes/tools/index.html JVM垃圾回收 http://www.oracle.com
读《Node.js项目实践：构建可扩展的Web应用》 ——引编程慢慢变成系统化的“砌砖活” noaighost Web node.js
读《Node.js项目实践：构建可扩展的Web应用》 ——引编程慢慢变成系统化的“砌砖活” 眼里的Node.JS 初初接触node是一年前的事，那时候年少不更事。还在纠结什么语言可以编写出牛逼的程序，想必每个码农都会经历这个月经性的问题：微信用什么语言写的？facebook为什么推荐系统这么智能，用什么语言写的？dota2的外挂这么牛逼，用什么语言写的？……用什么语言写这句话，困扰人也是阻碍
快速开发Android应用 rensanning android
Android应用开发过程中，经常会遇到很多常见的类似问题，解决这些问题需要花时间，其实很多问题已经有了成熟的解决方案，比如很多第三方的开源lib，参考 Android Libraries 和 Android UI/UX Libraries。编码越少，Bug越少，效率自然会高。但可能由于根本没听说过、听说过但没用过、特殊原因不能用、自己已经有了解决方案等等原因，这些成熟的解决
理解Java中的弱引用 tomcat_oracle java 工作面试
　不久之前，我面试了一些求职Java高级开发工程师的应聘者。我常常会面试他们说，“你能给我介绍一些Java中得弱引用吗？”，如果面试者这样说，“嗯，是不是垃圾回收有关的？”，我就会基本满意了，我并不期待回答是一篇诘究本末的论文描述。　　然而事与愿违，我很吃惊的发现，在将近20多个有着平均5年开发经验和高学历背景的应聘者中，居然只有两个人知道弱引用的存在，但是在这两个人之中只有一个人真正了
标签输出html标签" target="_blank">关于标签输出html标签 xshdch jsp
http://back-888888.iteye.com/blog/1181202 关于<c:out value=""/>标签的使用，其中有一个属性是escapeXml默认是true(将html标签当做转移字符，直接显示不在浏览器上面进行解析)，当设置escapeXml属性值为false的时候就是不过滤xml，这样就能在浏览器上解析html标签， &nb

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

创建自定义指令