JavaScript的 - 使用函数调用HTML - 好还是坏？ [英] javascript - using function calls in html - bad or good?
问题描述
采用了棱角分明带来很多code的怪异风格。比如我一直以为这
Using angular brings lot of weird style of code. For example I always thought that this
<button onclick="myFunction()">Click me</button>
我不应该永远使用，除非我想偷懒，想快速和肮脏code风格。我从来没有在项目中使用这种风格，也是我甚鑫卡特，这是不好的。
style I should not ever use, except when I would be lazy and want quick and dirty code. And I never used such style in projects and also I even thinked that this is bad.
现在，当我看到的角
这里是例子：
<div enter="loadMoreTweets()">Roll over to load more tweets</div>
这是从那里
的http://www.thinkster.io/pick/IgQdYAAt9V/angularjs-directives-talking-to-controllers
这是很好的风格深受教程。我不明白这一点。于是这意味着要与前面的onclick例子也非常好？那么，为什么没有人使用它至少这些天，当人们使用大量的jQuery例如？
which is good style by the tutorial. I dont get it. So then it means earlier example with onclick is also perfectly good? Then why nobody uses it at least these days when people use lot of jquery for example?
推荐答案
让我从一本书举角，布拉德·格林和放大器;希亚姆Seshardi
Let me cite from a book Angular, by Brad Green & Shyam Seshardi
非侵入式JavaScript的想法已经跨preTED的方法很多，但基本原理
这种风格的编码是大意如下的内容：
The idea of unobtrusive JavaScript has been interpreted many ways, but the rationale for this style of coding is something along the following lines:
- 不是每个人的浏览器支持JavaScript。让大家看到您的所有内容，并使用你的应用程序，而无需在执行code
浏览器。 - 有些人使用的工作方式不同的浏览器。视障人谁使用屏幕阅读器和一些手机用户将无法使用
网站使用JavaScript。 - JavaScript的作品不同在不同的平台。 IE通常是这里的罪魁祸首。你需要把不同的事件处理
code取决于浏览器。 - 这些事件处理程序引用全局命名空间功能。它会导致你头疼，当你试图整合其他库
具有相同名称的功能。 - 这些事件处理相结合的结构和行为。这使得你的code更难维护，扩展和理解。</ li>
- Not everyone’s browser supports JavaScript. Let everyone see all of your content and use your app without needing to execute code in the browser.
- Some folks use browsers that work differently. Visually impaired folks who use screen-readers and some mobile phone users can’t use sites with JavaScript.
- Javascript works differently across different platforms. IE is usually the culprit here. You need to put in different event-handling code depending on the browser.
- These event handlers reference functions in the global namespace. It will cause you headaches when you try to integrate other libraries with functions of the same names.
- These event handlers combine structure and behavior. This makes your code more difficult to maintain, extend, and understand.
在很多方面，生活得更好，当你用这种方式写的JavaScript。
那是不是更好的一件事，然而，code的复杂性和
可读性。相反的声明事件处理程序操作
他们的行为上的元素，你通常不得不ID指派给这些元素，
获取到元素的引用，并成立了事件处理程序与
回调...
In most ways, life was better when you wrote JavaScript in this style. One thing that was not better, however, was code complexity and readability. Instead of declaring your event handler actions with the element they act on, you usually had to assign IDs to these elements, get a reference to the element, and set up event handlers with callbacks...
...
在折角，我们决定重新审视这个问题。
世界已经改变，因为这些概念出生 ...
......对于大多数内联事件处理程序的角在形式等效
NG-事件处理程序=前pression其中，事件处理程序将被替换
点击，鼠标按下，变更，等等。如果你想获得通知时
一个元素用户点击，只需使用NG-点击指令
像这样的：
... for most inline event handlers Angular has an equivalent in the form of ng-eventhandler="expression" where eventhandler would be replaced by click, mousedown, change, and so on. If you want to get notified when a user clicks on an element, you simply use the ng-click directive like this:
<div ng-click="doSomething()">...</div>
时你的大脑说：不，不，不！坏，坏，坏了！？好消息是，
你可以放松。
Is your brain saying "No, no, no! Bad, bad, bad!"? The good news is that you can relax.
这些指令来自他们的事件处理程序predecessors不同
他们：
These directives differ from their event handler predecessors in that they:
- 规矩在每个浏览器一样。角照顾的差异给你。
- 请在全局命名空间不操作即可。您指定ex pressions能
- Behave the same in every browser. Angular takes care of the differences for you.
- Do not operate on the global namespace. The expressions you specify can
要获得更多的细节，读的书： http://www.amazon.com/AngularJS -Brad绿/ DP / 1449344852
To get more details, read the book: http://www.amazon.com/AngularJS-Brad-Green/dp/1449344852
扩展
继意见的讨论中，我想补充一个更多的解释。
Following the discussion in comments, I would like to add a more explanation.
由于这里所说：维基百科 - AngularJS 的：
角是一个框架，它的目标是加强与模型 - 视图 - 控制器 （MVC）的的能力，在基于浏览器的应用为了使开发和测试更容易
Angular is a framework, which goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier
借助模型 - 视图 - 控制器从维基百科的一个片段：
The Model–view–controller, a short extract from wikipedia:
- 控制器可以发送命令到模型来更新模型的状态（例如，编辑文档）。它也可以发送命令到它的相关联的视图改变模型的视图的presentation（例如，通过一个文档滚动）。
- 系统模型通知及其相关的意见和控制器时，出现了其状态的变化。这个通知让视图来更新自己的presentation和控制器来改变现有的命令集。在某些情况下，一个MVC实现可能反而会被动，让其他组件必须轮询更新模型，而不是被通知。
- 视图由控制器告诉所有它需要重新生成presentation输出给用户的信息。 它还可以提供通用的机制来通知用户输入的控制器。
- A controller can send commands to the model to update the model's state (e.g., editing a document). It can also send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document).
- A model notifies its associated views and controllers when there has been a change in its state. This notification allows views to update their presentation, and the controllers to change the available set of commands. In some cases an MVC implementation might instead be "passive," so that other components must poll the model for updates rather than being notified.
- A view is told by the controller all the information it needs for generating an output representation to the user. It can also provide generic mechanisms to inform the controller of user input.
摘要：
这里最重要的组成部分，是一个事实，即查看可以发布控制器的操作给用户即可。而这正是HTML中的函数调用重新做present。
The most important part here, is the fact, that View can publish the Controllers actions to the user. And this is exactly what the Function calls in HTML do represent.
这篇关于JavaScript的 - 使用函数调用HTML - 好还是坏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
