文档翻译至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}}
范化
AngularJS规范化(Normalization
)元素的标签和属性名称,以确定哪些元素与哪些指令相匹配。我们通常通过其区分大小写的camelCase规范化名称(例如,ngModel)来定义指令。然而,由于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指令在匹配时应该如何表现。
当$compile第一次匹配指令时,工厂函数仅被调用一次。你可以在这里指令任意的初始化工作。该(工厂)函数使用 $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 有一个全面的指令清单选项以供参考。
最后 如有任何问题和建议欢迎发送至邮箱讨论: 翻译不易,若您觉得对您有帮助,欢迎打赏
微信:
支付宝:
你可能感兴趣的:(javascript,angularjs,directive)
推荐开源项目:json-rpc-2.0 - 灵活强大的JSON-RPC 2.0框架
秦贝仁Lincoln
推荐开源项目:json-rpc-2.0-灵活强大的JSON-RPC2.0框架项目地址:https://gitcode.com/gh_mirrors/js/json-rpc-2.01、项目介绍json-rpc-2.0是一个轻量级的JavaScript库,它让你的客户端和服务器能够通过符合JSON-RPC2.0规范的功能调用进行通信。无论你是基于HTTP、WebSocket,甚至是TCP或UDP,这个
LeetCode热题100(Hot100) 每日题目记录)_JavaScript实现_2022-4-24 周末总结
Papper_Shark
力扣热题100 javascript leetcode
2022-4-24周末总结方法:模拟LeetCode思路出现1的时候就记录1的索引,然后和之前出现1的索引位置进行比较,遍历完的最大值就是要找的值。代码实现/***@param{number}n*@return{number}*/constbinaryGap=function(n){lettemp=n.toString(2)letres=0for(leti=0,preIndex=0;in则说明末尾
前端性能优化全面指南:从基础到进阶
尤山海
前端 性能优化
前端性能优化全面指南:从基础到进阶欢迎来到前端性能优化的全面指南!本文将带你深入了解从基础到进阶的各种优化策略,帮助你全面提升网页的加载速度和用户体验。1.关键渲染路径(CriticalRenderingPath)优化最小化关键资源:确保页面加载的初始请求尽可能少,合并CSS和JavaScript文件,使用内联CSS和JavaScript(对于非常小的脚本和样式)。异步/延迟加载非关键资源:使用a
如何使用Jsoup获取动态加载的内容
小爬虫程序猿
java 爬虫 开发语言
Jsoup是一个强大的Java库,用于解析HTML文档。然而,它主要用于解析静态HTML内容。对于动态加载的内容(如通过JavaScript生成的内容),Jsoup本身无法直接处理。不过,可以通过以下几种方法来解决这个问题:一、分析网络请求对于动态加载的内容,通常可以通过浏览器的开发者工具(如ChromeDevTools)来分析网络请求。找到加载动态内容的API接口后,可以直接使用Jsoup或Ht
JavaScript 资源大全中文版
蜜獾互联网
前端设计 javascript 开发语言 ecmascript
包管理器管理着JavaScript库,并提供读取和打包它们的工具。npm:npm是JavaScript的包管理器。官网Bower:一个web应用的包管理器。官网component:能构建更好web应用的客户端包管理器。官网spm:全新的静态包管理器。官网jam:一个专注于浏览器端和兼容RequireJS的包管理器。官网jspm:流畅的浏览器包管理器。官网Ender:没有库文件的程序库。官网volo
区分h5页面和原生页面
Jenna的海塘
前端
现在为了方便开发很多app中都会嵌入H5页面,H5页面和原生页面还是有一些差异的。下面是这两个的概念和区别一、技术基础与实现方式H5页面:基于HTML5、CSS和JavaScript等Web技术开发。本质上是一个网页应用,可以通过移动设备的浏览器访问,也可以被封装成一个类似原生应用的形式(通过一些工具如Cordova、PhoneGap等),在设备上安装和运行。原生页面:为特定操作系统(如iOS使用
2024实测验证可用的股票数据接口集合:python、JavaScript 、JAVA等实例代码演示教你如何免费获取股票实时、历史、指标等数据
Eumenides_max
python javascript java 股票数据接口
最近一两年,股票量化分析越来越受欢迎了。想要入行,首先得搞定股票数据。毕竟,所有量化分析都是建立在数据之上的,实时交易、历史交易、财务、基本面,这些数据咱们都得有。咱们的目标就是挖掘这些数据中的价值,来指导咱们的投资策略。为了找数据,我可是尝试了各种方法,自己动手写过网易、申万行业的爬虫,还试过同花顺问财的,连聚宽的免费API都用过。但爬虫这东西,数据总是不稳定,给量化分析带来不少困扰。在量化分析
国内软件成分分析SCA产品评测
.概述SCA理论上来说是一种通用的分析方法,可以对任何开发语言对象进行分析,Java、C/C++、Golang、Python、JavaScript等等,它对关注的对象是从文件层面的文件内容,以及文件与文件之间的关联关系以及彼此组合成目标的过程细节。从SCA分析的目标程序形式上分,既可以是源代码也可以是编译出来的各种类型的二进制文件,分析的数据对象对程序架构,编译方式都是不敏感的,比如:类名称、方法
JavaScript 在 VSCode 中的优势与应用
lly202406
开发语言
JavaScript在VSCode中的优势与应用引言随着前端技术的发展,JavaScript已经成为了网页开发中最流行的编程语言之一。VisualStudioCode(简称VSCode)作为一款轻量级、可扩展的代码编辑器,因其强大的功能和良好的用户体验,深受广大开发者的喜爱。本文将探讨JavaScript在VSCode中的优势与应用,帮助开发者更好地掌握这门编程语言。一、VSCode的优势1.跨平
【架构设计笔记】抽象接口、抽象类和实现类
Luxine.
笔记
前言最近学习数据结构与算法,打算写一个用来拓展JavaScript基础数据结构的npm包,例如栈/队列/链表之类的,从中有了不少收获,主要是关于工程架构角度,写个笔记,总结一下,将从架构设计的角度写写抽象接口、抽象类和实现类的内容及其应用。1.抽象接口(Interface)定义:接口定义了一组方法和属性的集合,是一种契约,规定了实现类必须提供的功能。接口本身不包含任何实现,只定义方法签名。特点:强
【JavaScript爬虫记录】记录一下使用JavaScript爬取m4s流视频过程(内含ffmpeg合并)
Luxine.
前端分享 javascript 爬虫 音视频
前言前段时间发现了一个很喜欢的视频,可惜网站不让下载,简单看了一下视频是被切片成m4s格式的流文件,初步想法是将所有的流文件下载下来然后使用ffmpeg合并成一个完整的mp4,于是写了一段脚本来实现一下,电脑没有配python环境,所以使用JavaScript实现,合并功能需要安装ffmpeg,没有的小伙伴自行安装哦前置知识m4s文件(复制百度)M4S文件是使用MPEG-DASH流技术通过Inte
React 全家桶含自定义hook的方法
AI画手小王
react.js javascript 前端
React入门React简介React为何物React:用于构建用户界面的JavaScript库。由Facebook开发且开源。为何学习React原生JavaScript的痛点:操作DOM繁琐、效率低使用JavaScript直接操作DOM,浏览器进行大量重绘重排原生JavaScript没有组件化编码方案,代码复用率低React的特点:采用组件化模式、声明式编码,提高开发效率和组件复用率在React
Vue3.0+vite vite.config.ts配置与env
WebCsDn_TDCode
vue.js
目录摘要在项目中新项目前期可能需要配置各种来运行项目,以Vue3.0+vite来说明主要配置正文1.import.meta的理解JavaScript中的一个特殊对象,它提供了有关当前模块的元数据信息。2.env配置访问evn命令要获取环境变量,可以通过import.meta.env来访问。下面是一个示例:3.package.json配置项目启动命令4.vite.config.ts配置摘要在项目中新
React 中的类和函数组件 选择哪一个?
程序小圆圆
react.js javascript 前端
在深入比较之前,让我们回顾一下react组件是什么什么是React组件每个React组件作为JavaScript本身都支持允许将一些可重用的代码片段插入到更大的代码片段中的功能。因此,它是一种应用程序的构建块。以这种方式,React组件将UI划分为可重用的部分并返回html。所以它们是UI的一种子功能综上所述,什么是React组件就很清楚了。它们是JS代码与返回HTML片段的独立混合。这里JS的主
JSX语法规则
开发小途
react.js 前端 JSX
JSX(JavaScriptXML)是一种JavaScript的语法扩展,常用于React等库中描述用户界面。以下是JSX的主要语法规则:1.标签闭合JSX标签必须闭合,无论是自闭合标签还是包含子元素的标签。例如,需要对应的来闭合,而像或这样的自闭合标签则以斜杠/结尾。2.根标签JSX中只能有一个根元素。如果需要渲染多个元素,可以将它们包裹在一个父元素中,如。3.表达式插值在JSX中,可以将Jav
React中定义和使用函数式组件
开发小途
react.js 前端
在React中,函数式组件是一种通过普通JavaScript函数定义的组件。它们接收props作为参数,并返回React元素。从React16.8开始,函数式组件还可以利用Hooks来增加状态和其他React特性。1.简单的函数式组件importReactfrom'react';constHelloWorld=(props)=>{return(Hello,{props.name}!);};expo
使用 bcryptjs 对用户密码进行加密
开发小途
bcrypt
bcryptjs是一个在Node.js环境中用于密码哈希的库,它是对bcrypt算法的纯JavaScript实现。使用bcryptjs可以有效地对用户密码进行加密存储,以及后续进行验证。以下是如何使用bcryptjs对用户密码进行加密和验证的基本步骤:安装bcryptjs首先,你需要安装bcryptjs。在你的Node.js项目中,通过npm或yarn来安装它:npminstallbcryptjs
Vue.js 响应式原理与数据绑定
前端_学习之路
Vue.js vue.js 前端 javascript
在Vue.js中,响应式系统是其核心特性之一,它使得数据的变化能够自动更新到DOM上,实现了数据和视图的双向绑定。下面详细介绍Vue.js响应式系统的原理以及它是如何实现数据绑定的。原理概述Vue.js的响应式系统主要基于JavaScript的Object.defineProperty()方法(Vue2.x)和ES6的Proxy对象(Vue3.x)来实现。其核心思想是通过拦截数据对象的属性访问和修
vue.js之虚拟 DOM
前端_学习之路
Vue.js vue.js javascript 前端框架
在Vue.js中,虚拟DOM(VirtualDOM)是一个核心概念,它在提升应用性能和开发效率方面发挥着关键作用。下面将从定义、工作原理、优势以及在Vue.js中的具体应用等方面详细介绍Vue.js虚拟DOM。定义虚拟DOM是一种轻量级的JavaScript对象,它是真实DOM的抽象表示。简单来说,虚拟DOM就是用JavaScript对象来模拟真实的DOM树结构,每个虚拟DOM节点对应一个真实的D
常用数据格式:json、bson、msgpack
ChiLi_Lin
json
JSON(JavaScriptObjectNotation)常用文件格式,可读性高一般用于远端配置,客户端基础配置等。BSON(BinaryJSON)二进制的Json,一般用于服务器MongoDB存储。类型定义:https://bsonspec.org/spec.html{"hello":"world"}→\x16\x00\x00\x00//totaldocumentsize\x02//0x02=
探索 JavaScript 中的“影子世界”:引用(Reference)的奥秘
Vitalia
Javascript 程序语言 javascript 开发语言 ecmascript 引用 引用传递
文章目录什么是引用?基本类型vs引用类型按值传递vs按引用传递引用的常见问题如何避免引用带来的问题1.使用浅拷贝或深拷贝2.使用不可变数据结构3.使用函数式编程风格总结在JavaScript中,引用(Reference)是一个非常重要的概念,尤其是在处理对象和数组时。理解引用的工作原理可以帮助你避免一些常见的错误,并编写出更高效、更可靠的代码。本文将深入探讨JavaScript中的引用机制,并通过
javascript网页设计案例
咚微灯
javascript
案例:动态任务列表(To-DoList)用户可以添加任务、标记任务为完成状态,并删除任务。1.HTML结构任务列表我的任务列表添加任务2.CSS样式(styles.css)body{font-family:Arial,sans-serif;background-color:#f4f4f4;margin:0;padding:0;display:flex;justify-content:center;
Vue.js 与低代码开发:如何实现快速应用构建
虚无火星车
vue.js 低代码 前端
在当今数字化高速发展的时代,企业对应用开发的速度和效率有着迫切的需求。传统开发模式往往周期长、成本高,难以满足市场的快速变化。而低代码开发的兴起,为这一困境带来了转机。Vue.js作为一款流行的JavaScript前端框架,以其简洁高效、灵活易用的特点,与低代码开发相结合,更是为快速应用构建提供了强大的技术支撑。今天,我们就来探讨一下Vue.js与低代码开发如何携手实现快速应用构建,同时了解一下在
Vue.js组件开发:深入理解与代码实现
专业WP网站开发-Joyous
学习 前端 vue vue.js
Vue.js是一个用于构建用户界面的渐进式JavaScript框架,具有简单易用、灵活性强的特点,是目前最流行的前端框架之一。Vue.js的核心概念之一就是组件化开发,通过组件开发,开发者可以更好地复用代码和管理复杂的UI结构。本篇文章将深入探讨Vue.js组件开发的概念、实践以及具体的代码实现,帮助读者掌握如何使用Vue.js进行高效的组件化开发。1.Vue.js组件基础1.1什么是组件组件(C
Web前端三大主流框架:Angular、React与Vue的对比与解析
生活的方式简单点
前端框架 前端 angular.js react.js vue.js
在快速发展的Web前端领域,框架的选择对于项目的成功至关重要。Angular、React和Vue作为三大主流前端框架,各自拥有独特的特点和优势,为开发者提供了强大的工具集和灵活的解决方案。本文将对这三大框架进行详细的对比与解析,帮助读者更好地了解它们的特点和适用场景。一、AngularAngular是Google开发的一款开源JavaScript框架,它提供了一套完整的开发解决方案,包括数据绑定、
React 前端框架搭建与解析
咚微灯
前端框架
React前端框架搭建与解析一、概述React是Facebook开源的用于构建用户界面的JavaScript库,以其组件化、声明式编程范式以及高效的虚拟DOM渲染机制,成为当今最流行的前端框架之一。本文将带领你从零开始搭建一个React开发环境,并深入解析其核心概念。二、环境搭建1.安装Node.js和npmReact依赖于Node.js和npm(Node.js包管理器)。前往Node.js官网下
NodeJS 简介
qichengzong_right
VS Code 软件架构 node.js vscode
NodeJS简介Node.js简介Node.js示例程序链接Node.js简介Node.js是一款开源的跨平台JavaScript运行时环境,可以说是各类项目的热门之选!具备如下的特点:Node.js借助谷歌浏览器的核心——V8JavaScript引擎1(V8引擎独立于浏览器),从而具备卓越的性能。Node.js应用程序以单进程模式运行,不会为每个请求额外创建新线程。其标准库提供了一系列异步I/O
工作流程设计 php,php工程狮感知的前端工作流程
三符
工作流程设计 php
这个时代不懂点前端知识,真的没有办法生存。就算不会写,也得了解它的原理吧!最近做了一些总结,之前都是迷迷糊糊,搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。本文主要说的是JavaScript工作流程目前前端真的该叫大前端,其越来越细化,越来越复杂。在这种背景下,诞生了很多工具很多前端工作流程。比如热门的:reactvuewebpackbabelgulpnode.jsnpmnvma
前端经典的JavaScript面试知识总结
weixin_33982670
面试 前端 javascript ViewUI
1、使用typeofbar==="object"来确定bar是否是一个对象时有什么潜在的缺陷?这个陷阱如何避免?尽管typeofbar===“object”是检查bar是否是对象的可靠方法,但JavaScript中令人惊讶的问题null也被认为是一个对象!因此,对于大多数开发人员来说,下面的代码会将true(而不是false)打印到控制台:varbar=null;console.log(typeo
03 手把手教你理解Vue Router核心原理(附实战代码)
泯泷
Vue2 快速入门 ui html5 css3 前端 前端框架 Vue vue.js
一、前端路由的魔法原理想象你在一本魔法书中翻页,页面内容会变化但书本本身不会重新印刷。前端路由就是这样的魔法,当我们在单页应用(SPA)中切换页面时:不会触发真正的页面刷新页面内容通过JavaScript动态更新URL会同步变化反映当前状态二、三种路由模式大比拼1.Hash模式(默认模式)工作原理:利用URL中的#符号(锚点)实现路由切换//创建路由实例import{createRouter,cr
SQL的各种连接查询
xieke90
UNION ALL UNION 外连接 内连接 JOIN
一、内连接
概念:内连接就是使用比较运算符根据每个表共有的列的值匹配两个表中的行。
内连接(join 或者inner join )
SQL语法:
select * fron
java编程思想--复用类
百合不是茶
java 继承 代理 组合 final类
复用类看着标题都不知道是什么,再加上java编程思想翻译的比价难懂,所以知道现在才看这本软件界的奇书
一:组合语法:就是将对象的引用放到新类中即可
代码:
package com.wj.reuse;
/**
*
* @author Administrator 组
[开源与生态系统]国产CPU的生态系统
comsci
cpu
计算机要从娃娃抓起...而孩子最喜欢玩游戏....
要让国产CPU在国内市场形成自己的生态系统和产业链,国家和企业就不能够忘记游戏这个非常关键的环节....
投入一些资金和资源,人力和政策,让游
JVM内存区域划分Eden Space、Survivor Space、Tenured Gen,Perm Gen解释
商人shang
jvm内存
jvm区域总体分两类,heap区和非heap区。heap区又分:Eden Space(伊甸园)、Survivor Space(幸存者区)、Tenured Gen(老年代-养老区)。 非heap区又分:Code Cache(代码缓存区)、Perm Gen(永久代)、Jvm Stack(java虚拟机栈)、Local Method Statck(本地方法栈)。
HotSpot虚拟机GC算法采用分代收
页面上调用 QQ
oloz
qq
<A href="tencent://message/?uin=707321921&Site=有事Q我&Menu=yes">
<img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1></a>
一些问题
文强chu
问题
1.eclipse 导出 doc 出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 .....
SQL:3.mysql * 必须得放前面 否则 select&nbs
生活没有安全感
小桔子
生活 孤独 安全感
圈子好小,身边朋友没几个,交心的更是少之又少。在深圳,除了男朋友,没几个亲密的人。不知不觉男朋友成了唯一的依靠,毫不夸张的说,业余生活的全部。现在感情好,也很幸福的。但是说不准难免人心会变嘛,不发生什么大家都乐融融,发生什么很难处理。我想说如果不幸被分手(无论原因如何),生活难免变化很大,在深圳,我没交心的朋友。明
php 基础语法
aichenglong
php 基本语法
1 .1 php变量必须以$开头
<?php
$a=” b”;
echo
?>
1 .2 php基本数据库类型 Integer float/double Boolean string
1 .3 复合数据类型 数组array和对象 object
1 .4 特殊数据类型 null 资源类型(resource) $co
mybatis tools 配置详解
AILIKES
mybatis
MyBatis Generator中文文档
MyBatis Generator中文文档地址:
http://generator.sturgeon.mopaas.com/
该中文文档由于尽可能和原文内容一致,所以有些地方如果不熟悉,看中文版的文档的也会有一定的障碍,所以本章根据该中文文档以及实际应用,使用通俗的语言来讲解详细的配置。
本文使用Markdown进行编辑,但是博客显示效
继承与多态的探讨
百合不是茶
JAVA面向对象 继承 对象
继承 extends 多态
继承是面向对象最经常使用的特征之一:继承语法是通过继承发、基类的域和方法 //继承就是从现有的类中生成一个新的类,这个新类拥有现有类的所有extends是使用继承的关键字:
在A类中定义属性和方法;
class A{
//定义属性
int age;
//定义方法
public void go
JS的undefined与null的实例
bijian1013
JavaScript JavaScript
<form name="theform" id="theform">
</form>
<script language="javascript">
var a
alert(typeof(b)); //这里提示undefined
if(theform.datas
TDD实践(一)
bijian1013
java 敏捷 TDD
一.TDD概述
TDD:测试驱动开发,它的基本思想就是在开发功能代码之前,先编写测试代码。也就是说在明确要开发某个功能后,首先思考如何对这个功能进行测试,并完成测试代码的编写,然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能,直到完全部功能的开发。
[Maven学习笔记十]Maven Profile与资源文件过滤器
bit1129
maven
什么是Maven Profile
Maven Profile的含义是针对编译打包环境和编译打包目的配置定制,可以在不同的环境上选择相应的配置,例如DB信息,可以根据是为开发环境编译打包,还是为生产环境编译打包,动态的选择正确的DB配置信息
Profile的激活机制
1.Profile可以手工激活,比如在Intellij Idea的Maven Project视图中可以选择一个P
【Hive八】Hive用户自定义生成表函数(UDTF)
bit1129
hive
1. 什么是UDTF
UDTF,是User Defined Table-Generating Functions,一眼看上去,貌似是用户自定义生成表函数,这个生成表不应该理解为生成了一个HQL Table, 貌似更应该理解为生成了类似关系表的二维行数据集
2. 如何实现UDTF
继承org.apache.hadoop.hive.ql.udf.generic
tfs restful api 加auth 2.0认计
ronin47
目前思考如何给tfs的ngx-tfs api增加安全性。有如下两点:
一是基于客户端的ip设置。这个比较容易实现。
二是基于OAuth2.0认证,这个需要lua,实现起来相对于一来说,有些难度。
现在重点介绍第二种方法实现思路。
前言:我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算,阅读下面的文档,实现自动化并获得收益。SeatGe
jdk环境变量配置
byalias
java jdk
进行java开发,首先要安装jdk,安装了jdk后还要进行环境变量配置:
1、下载jdk(http://java.sun.com/javase/downloads/index.jsp),我下载的版本是:jdk-7u79-windows-x64.exe
2、安装jdk-7u79-windows-x64.exe
3、配置环境变量:右击"计算机"-->&quo
《代码大全》表驱动法-Table Driven Approach-2
bylijinnan
java
package com.ljn.base;
import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.Collections;
import java.uti
SQL 数值四舍五入 小数点后保留2位
chicony
四舍五入
1.round() 函数是四舍五入用,第一个参数是我们要被操作的数据,第二个参数是设置我们四舍五入之后小数点后显示几位。
2.numeric 函数的2个参数,第一个表示数据长度,第二个参数表示小数点后位数。
例如:
select cast(round(12.5,2) as numeric(5,2))
c++运算符重载
CrazyMizzz
C++
一、加+,减-,乘*,除/ 的运算符重载
Rational operator*(const Rational &x) const{
return Rational(x.a * this->a);
}
在这里只写乘法的,加减除的写法类似
二、<<输出,>>输入的运算符重载
&nb
hive DDL语法汇总
daizj
hive 修改列 DDL 修改表
hive DDL语法汇总
1、对表重命名
hive> ALTER TABLE table_name RENAME TO new_table_name;
2、修改表备注
hive> ALTER TABLE table_name SET TBLPROPERTIES ('comment' = new_comm
jbox使用说明
dcj3sjt126com
Web
参考网址:http://www.kudystudio.com/jbox/jbox-demo.html jBox v2.3 beta [
点击下载]
技术交流QQGroup:172543951 100521167
[2011-11-11] jBox v2.3 正式版
- [调整&修复] IE6下有iframe或页面有active、applet控件
UISegmentedControl 开发笔记
dcj3sjt126com
// typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {
// UISegmentedControlStylePlain, // large plain
&
Slick生成表映射文件
ekian
scala
Scala添加SLICK进行数据库操作,需在sbt文件上添加slick-codegen包
"com.typesafe.slick" %% "slick-codegen" % slickVersion
因为我是连接SQL Server数据库,还需添加slick-extensions,jtds包
"com.typesa
ES-TEST
gengzg
test
package com.MarkNum;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation
为何外键不再推荐使用
hugh.wang
mysql DB
表的关联,是一种逻辑关系,并不需要进行物理上的“硬关联”,而且你所期望的关联,其实只是其数据上存在一定的联系而已,而这种联系实际上是在设计之初就定义好的固有逻辑。
在业务代码中实现的时候,只要按照设计之初的这种固有关联逻辑来处理数据即可,并不需要在数据库层面进行“硬关联”,因为在数据库层面通过使用外键的方式进行“硬关联”,会带来很多额外的资源消耗来进行一致性和完整性校验,即使很多时候我们并不
领域驱动设计
julyflame
VO DAO 设计模式 DTO po
概念:
VO(View Object):视图对象,用于展示层,它的作用是把某个指定页面(或组件)的所有数据封装起来。
DTO(Data Transfer Object):数据传输对象,这个概念来源于J2EE的设计模式,原来的目的是为了EJB的分布式应用提供粗粒度的数据实体,以减少分布式调用的次数,从而提高分布式调用的性能和降低网络负载,但在这里,我泛指用于展示层与服务层之间的数据传输对
单例设计模式
hm4123660
java Singleton 单例设计模式 懒汉式 饿汉式
单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统源。如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。
&nb
logback
zhb8015
log logback
一、logback的介绍
Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块:logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-class
整合Kafka到Spark Streaming——代码示例和挑战
Stark_Summer
spark storm zookeeper PARALLELISM processing
作者Michael G. Noll是瑞士的一位工程师和研究员,效力于Verisign,是Verisign实验室的大规模数据分析基础设施(基础Hadoop)的技术主管。本文,Michael详细的演示了如何将Kafka整合到Spark Streaming中。 期间, Michael还提到了将Kafka整合到 Spark Streaming中的一些现状,非常值得阅读,虽然有一些信息在Spark 1.2版
spring-master-slave-commondao
王新春
DAO spring dataSource slave master
互联网的web项目,都有个特点:请求的并发量高,其中请求最耗时的db操作,又是系统优化的重中之重。
为此,往往搭建 db的 一主多从库的 数据库架构。作为web的DAO层,要保证针对主库进行写操作,对多个从库进行读操作。当然在一些请求中,为了避免主从复制的延迟导致的数据不一致性,部分的读操作也要到主库上。(这种需求一般通过业务垂直分开,比如下单业务的代码所部署的机器,读去应该也要从主库读取数