关于js脚本放在一个文件里的疑问?


对于一个小型网站,大多只有几个js文件(1~3),在各个页面引用这些js文件来完成各页面的交互,而不会(或者很少)在某个网页单独的写上js代码。这样,每个页面在dom加载完成后,需要执行的js脚本是怎么样调用的? 是在某个js文件里中有一个统一的调用接口,在这个接口里,执行所有的js事件绑定,以完成UI交互? 如果是这样,那么对于某个页面,必然存在绑定很多事件在一些不存在的dom节点上,这就产生了浪费,做了很多无用功。简略代码如下:


 <!-- 页面1 -->
    <html>
        <head> ... </head>
        <body>
            '''
            <div class="test1">...</div>
            ...
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="test1.js"></script>
            <script type="text/javascript" src="test2.js"></script>
        </body>
    </html>

    <!-- 页面2 -->
    <html>
        <head> ... </head>
        <body>
            ...
            <div class="test2">...</div>
            ...
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="test1.js"></script>
            <script type="text/javascript" src="test2.js"></script>
        </body>
    </html>


 // test1.js 
    $(document).ready(function(){
        // 调用各页面封装的接口和执行事件绑定已完成页面交互
        $('.test1').click(function(){
            // do something
            ...
        });
        $('.test2').click(function(){
            // do something
            ...
        });
        ...
    });

对于页面1 $('test2')的绑定就是多余的。
对于这种多余是可接受的吗? 就像对于css一样,把全站的样式放在几个css文件中。
如果不可介绍,是如何避免无效事件绑定(dom节点不存在的情况下)?

对于这种浪费,我现在能想到的是在js文件中编写各个页面的接口,然后在各个页面调用相应接口来避免这样的无效事件绑定,以提高性能(如果可以)。

jquery web前端开发 JavaScript

22336 10 years, 4 months ago

ls是对的,如果感性上还是不能接受,可以用seajs,这样写页面:


 <!-- 页面1 -->
    <html>
        <head> ... </head>
        <body>
            '''
            <div class="test1">...</div>
            ...

            <script type="text/javascript" src="sea.js"></script>
            <script type="text/javascript" src="config.js"></script>
            <script>
                    seajs.use('test1', function () {
                        $('.test1').click(function(){
                            // do something
                            ...
                        });
                    })
            </script>
        </body>
    </html>

test1做test1的事情,test2的绑定放到test2中去,做好代码的解藕。

昵称又被抢了 answered 10 years, 4 months ago

按你说的,如果页面 1 没有 #test2 ,jQuery 根本就不会返回任何有效的对象,于是后面对于 click 事件的回调也就等于不存在了,怎么会出现无效的事件绑定?

花祭karin answered 10 years, 4 months ago

Your Answer