首页新闻找找看学习计划

把javascript从html完全抽出到底好不好?

0
悬赏园豆:10 [已解决问题] 解决于 2013-08-28 09:25

在项目实施中经常会遇到这种现象:

<ul><li><a id="btnClick" class="btn">确定</a></li></ul>

仅通过html根本没法看出事件是在哪绑定的。

在项目维护阶段,修改bug会先从html找起,来确定响应事件的dom元素,然后找到其触发的事件。但是上面的示例代码无法体现出事件是如何绑定的。有可能是通过id,也有可能是标签,还可能是jquery多层选择实现的。仅仅通过dom的id、class来搜索可能会搜索的多项结果。

如果在标签内部嵌入onclick="onBtnClick();"事件,就会很容易看出事件的绑定。但这不符合html与javascript分离的原则。

请各位大牛给予指点。

梦想mc的主页 梦想mc | 初学一级 | 园豆:193
提问于:2013-08-27 09:57
< >
分享
最佳答案
0

HTML是内容,JS是行为,HTML与JS分离可以带来的好处是便于开发和维护:

1、写HTML&CSS的人与写JS的人可以分工合作

2、当设备不支持JS时分开写不会报错

3、使网页源码看起来更简洁清晰

...

至于你说的看到事件是如何绑定的,是因为编码不规范导致的。

一般如果一个DOM元素上面有JS事件,都会在元素的ID或Class的命名中作特殊处理,常用的有以“J_”开头等,这就是传说中的JS钩子。这样做的好处是,看到ID或Class以“J_”开头的,就知道这个元素在JS中用到了,然后去查这个名字就OK了。

另外,现在很多开发者工具(如chrome developer tools)都提供了查看DOM元素上绑定的事件的能力:http://stackoverflow.com/questions/15928950/how-to-set-event-listener-breakpoints-in-chromes-elements-tab

收获园豆:8
artwl | 专家六级 |园豆:16526 | 2013-08-27 10:34

感谢 artwl 的建议,如您所说,把ID或Class以“J_”开头的确可以区分是否在js中用到,这是一个好方法

梦想mc | 园豆:193 (初学一级) | 2013-08-27 14:37

以前看到淘宝的首页里有不少以J打头的id,不知道是什么原因,也怀疑过是javascript的缩写,现在知道了是js钩子的意思。

让周飞 | 园豆:209 (菜鸟二级) | 2013-08-27 16:24
其他回答(4)
0

各有优缺点,就看楼主具体应用环境和取舍了。

个人拙见:易变化的部分用分开的方法比较灵活,不易变化的用标签内部嵌入方法易调试和查找bug.

收获园豆:1
Albert Fei | 园豆:2102 (老鸟四级) | 2013-08-27 11:27

感谢 Albert Fei 的建议,这是个好方法,因地制宜。有些表格内的确不适合每个td都绑定事件。

支持(0) 反对(0) 梦想mc | 园豆:193 (初学一级) | 2013-08-28 09:21
0

当然是抽出比较好,

好的原因上面的人说了几点,再补充一点是:

搜索爬虫不认js, 分离出来外链引入便于被搜索引擎抓取

 

但现实项目中往往很难实现,

这涉及到代码规范,项目管理,开发者的水平和责任心

收获园豆:1
田林九村 | 园豆:2367 (老鸟四级) | 2013-08-27 12:29
0

一般来说,是抽出来更好,至于事件的跟踪问题,这个只要按照一定的约定去写,还是比较好跟踪了。

这样也符合非侵入式脚本的思想~

幻天芒 | 园豆:36522 (高人七级) | 2013-08-27 13:02
0

通常来说是分离的。能不绑定就不绑定在页面上。

不知道你是不是用vs来开发,如果是的话vs有个插件可以就看js而已。

一个页面不会有太多的js代码吧。代码多的话都会写外部了

|WinKi| | 园豆:669 (小虾三级) | 2013-08-27 18:07
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册