从has no method 'tmpl'谈起
最近做一个相对比较功能专业化的应用系统,其中今天Leader提出的功能修改需求有点smart table的意思,其中有个界面修改由于用Dom操作太麻烦了,于是想用用很久之前在学习jQuery API中看到的js模板,这个东东好像目前在一些JS MVC实现中很流行。
1、第一次看到"has no method 'tmpl'"这个提示,G了一下,结果第一个结果英文帖子说tmpl不属于jquery的核心内容,属于插件,需要另外下载jquery-tmpl插件,据说这是微软贡献的开源插件,host在github上,下载地址:https://github.com/jquery/jquery-tmpl
2、把上面那个插件的min.js加载上,仍然函数不存在的提示,开始的时候以为是函数的调用方式有问题,于是采用插件文档中的Demo写法,仍然提示函数不存在,后来动脑袋想了想,发现了其中问题:由于我目前开发的模块和网站整体的JS引用存在区别,所以目前模块的JS引用没有写在foot.jsp里,而是写在side.jsp里面,有些mainContent页面里面的JS代码存在对库的依赖问题,于是在mainContent前面部分,可能会重复地放某些JS库文件,比如此处的jQuery.min.js,而我的tmpl.min.js由于只在这个页面内用一下,于是放在mainContent.jsp中jquery.js引用的后面,而我的页面整体布局采用的固定布局方式,sidebar虽然在mainContent的左面,但是采用负值maring-left的布局方式,side.jsp文件代码实际页面中是在mainContent的后面,导致我的tmpl.js实际是在两个jquery.js的中间,tmpl给$对象添加的tmpl函数,在后面那个jQuery中又被重置了,所以找不到啊。Ok,这个提示的问题就此解决。同时稍微深入谈一下JS加载依赖这个问题,其实如果所有JS里面的函数都暴露在全局,不存在调用某个对象的函数属性问题的话,前前后后都无所谓,因为是平行的,而且执行都是加载完的事件引发,依赖的是那部分,依赖的其实是那些在函数外面的代码,也就是那部分在加载的时候就要执行的代码,这些代码之间才存在真正的依赖关系:也就是后面执行的代码要依靠前面代码的执行结果,这和静态语言比如C之类的include是有区别的,C的include解决的是语言编译时的引用依赖,而JS中的依赖实际是执行关系的依赖,说白了:后面的代码用到了前面代码的计算结果,而不是仅仅那么一个引用标记。
3、前面那个问题算是解决了,下面讲讲其他几个今天碰到的JS问题,先将讲dblclick事件的绑定问题,白天在单位做的,那个时间CSDN博客访问有问题,晚上回家写,代码也不在身边,可能细节上不太全,有兴趣的人凑活看吧,第一次实现的时候,用的就是最基本的方法,用元素on属性解决的,我在Chrome下做的测试,结果上线以后,IE下基本无效,G了一下,发现IE和其他浏览器在这事件上语法不一样,于是乎用jQuery的dblclick()方法绑定事件函数解决跨浏览器兼容问题,结果还发现另外一个问题,由于事件冒泡模型的区别,之前的事件处理函数在某些情况下会出现设定外的意外处理情况,于是乎用event.stopPropagation();解决了这个问题。
4、在后续的另外一个blur事件处理函数中,采用元素on属性方式下,在IE中,jQuery语法的的event对象好像无效,event.target是个null,由于这个事件函数的target是动态添加的,于是用jQuery的live函数做了事件绑定处理,解决了event无效的问题,后来想了想,可能jQuery的event跨浏览器兼容要想生效,可能必须得用它的函数做事件绑定,否则它的阔浏览器处理可能插不进来。具体估计得看它的代码才能确认。
5、button元素的Type属性的默认值问题,昨天碰到预设的普通button在点击之后,不但激发了click事件,在事件处理之后还自动提交了表单,好像之前碰到过这个问题,当时只是解决了,没有思考问题原因,昨天我觉得可能是前面说的问题,但是只是加了明文的type属性,没有做确认,今天写了段代码试了一下,果然是啊,button元素在IE里面的默认Type属性值是button,在Chrome和Firefox里面的默认属性值是submit。所以用这个元素的时候,最好还是写明其Type属性值。