这是多么糟糕 - 使用外部处理程序定义的内联 js 调用 VS 完全外部 js

发布于 2024-11-07 15:16:25 字数 628 浏览 5 评论 0原文

我在我的项目中遇到以下代码:

html:

<input type="button" id="addmore" value="Add more" onclick="add_table(this)"/>

js:

function add_table(elem){
    var current_id = jQuery("table.t1:last").attr("id");

首先我认为这段代码是错误的,我必须将其重写为外部代码,即

jQuery('#addmore)'.click(function add_table(elem){
    var current_id = jQuery("table.t1:last").attr("id");

但是后来我再次查看它,发现这个 html 更具可读性 - 我看到了哪个函数绑定到html中已有的元素,我不需要在js中搜索它。

当然它没有封装在里面,

jQuery(document).ready( 

所以在某些情况下它不会工作

所以问题:这段代码有多糟糕?

I run into following code in my project:

html:

<input type="button" id="addmore" value="Add more" onclick="add_table(this)"/>

js:

function add_table(elem){
    var current_id = jQuery("table.t1:last").attr("id");

First I thought that this code is wrong and I must rewrite it to external code, i.e.

jQuery('#addmore)'.click(function add_table(elem){
    var current_id = jQuery("table.t1:last").attr("id");

But then I looked at it again and found that this html is more readable - I see which functions binds to which elements already in html, and I don't need to search it in js.

Of course it not encapsulated inside

jQuery(document).ready( 

so it will not work under some circumstances

So question: how bad this code is?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

初熏 2024-11-14 15:16:25

这是可重用性和个人品味的问题。对于非常简单的事情(例如您的示例),内联代码更具可读性,但当然您依赖于 add_table() 作为全局函数 - 如果您有数百个具有不同点击处理程序的元素,您最终可能会数百个函数/变量污染了全局命名空间。那很糟糕! :)

在可重用性方面,我发现最好在抽象功能的不同组件中进行编码,并且可以在需要时调用 - 所有这些都在定义的(非全局)命名空间内。

jQuery('#addmore)'.click(function add_table(elem) {
    var current_id = jQuery("table.t1:last").attr("id");
}

上面的代码提供了一个很好的关注点分离 - 这意味着语义信息(HTML)忽略了行为信息 (Javascript),这再次有助于创建更清晰、更易于管理的代码。

It's a question re-usability and personal taste. Inline code is more readable for very simple things like your example, but of course you are relying on add_table() being a global function - if you have hundreds of elements with different click handlers, you could end up with hundreds of functions/variables polluting the global namespace. And that's bad! :)

In terms of re-usability, I find it better to code in distinct components that abstract functionality and can be called upon whenever needed - all within a defined (non-global) namespace.

jQuery('#addmore)'.click(function add_table(elem) {
    var current_id = jQuery("table.t1:last").attr("id");
}

The code above gives a good separation of concerns - meaning the semantic information (HTML) is oblivious to the behavioural information (Javascript), which again helps create cleaner, more manageable code.

沫离伤花 2024-11-14 15:16:25

根据站点的大小(和流量水平),可能会出现带宽问题。即 onclick="add_table(this)" 向下载添加 24 字节数据。这可以放入缓存的 JavaScript 页面中,该页面仅下载一次,而不是针对每个请求下载。如果您有很多包含额外代码的页面,并且您有大量流量,则可能会产生明显的带宽差异。

Depending on the size of your site (and level of traffic) there might be a bandwidth issue. i.e. onclick="add_table(this)" adds 24 bytes of data to a download. This could be put in a cached JavaScript page which only gets downloaded once, rather than for each request. If you have lots of pages with extra code in them an you have a lot of traffic it may make a noticeable bandwidth difference.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文