昨天在做一个项目,楚欣的一个问题算是难住了我。
问题场景很简单:
a标签指定iframe打开。
问题就在于,为什么别的页面跳转正常就这一个角色页面不正常,我也很纳闷,于是就索性刨根问底解决它。
我试过多种方式:
1.css样式引起的。(虽然可能性很小)
2.其他的js冲突。(我取消了其页面的jQuery引用,当然页面js报错了,反而跳转正常。)事实证明,也不是各个js之间冲突了,各位看官请往下看。
3.iframe的名称被篡改或者a标签的target属性被更改。(我在每次点击都记录了其值,并没有发现问题)
最后,一篇文章提醒了我。(原文出处:http://www.cnblogs.com/xcmylrl/p/5383129.html)有可能就是因为这全局的name变量导致的这异常的错误。于是迅速的从页面中查询name变量,结果发现真的是因为这个name变量导致了target属性失效,经刘希哥一番指点,决定后续的js代码中减少全局变量的使用,更多的使用对象式的命名规则会更有效率的减少这些异常错误并提交开发效率。
(但为什么导致了target属性失效原因还不明,因为我在方式3中已经检查了其属性并没有被修改。可能是以为其匹配方式或匹配路径出现了问题,类似于覆盖掉了C语言中的地址)
下面科普下对象式的命名规则,其实老早都见过强哥这样写,但是没有留意,这次吃了这个亏之后,一定注意以后命名规范!
(原文:http://blog.youkuaiyun.com/itpinpai/article/details/18448879)
/**
* JavaScript开发规范如下:
* 对象定义首字母大写,第二个及后面的单词的首字母大写。 如:Book
* 方法定义首字母小写,第二个及后面的单词的首字母大写。如。getName、getBookName
* 数组类型的变量定义在变量名后紧跟“Arr”字符串。如:functionArr 方法数组
*/
/** 开发JS对象的步骤
* 第一步:定义构造函数和prototype的方法
* 第二步:验证构造器和prototype中的方法传递参数的据完整性(已定义、参数类型、字符串个数、数组个数)。
* 如除了必传参数名其它的参数为空或未定义建议赋于一个默认值
* 第三步:对内部数据进行保护
*
*
*
*/
// 下面这个Book对象是门户大开型对象也就是传统的JavaScript创建一个类的方式
var Book = function( isbn, author, price ) {
this.setIsbn( isbn );
this.setAuthor( author );
this.setPrice( price );
}
/**
* 下面的Book.prototype有二个方法被设为一个对象字面量,优点:这样定义多个方法的时候就不用为每个方法前面加一个Book.prototype了.
*
*/
Book.prototype = {
_checkIsbn : function(isbn) {
if ( isbn === undefined || typeof isbn !== "string") {
return false;
}
if ( isbn.length === 0 ) {
return false;
}
return true;
},
display : function() {
},
/**
* 一个程序员认识到一本书有有多个版本,每个版本都有自己的isbn。他设计了一个用来在不同版本之中选择的算法,并在实例化书籍对象之后直接用它修改其isbn属性.
* 这时即时对isbn进行了完整性验证,那么 其它程序员对isbn属性的修改也是毫无控制的,为了保护内部数据您 为每个属性提供一个取值器和赋值器
* 取值器方法的命名:getAttributeName
* 赋值器方法的命名:setAttributeName
* 在内部数据属性/方法前面加上一个下划线说明此属性是内部属性。表示它是私有属性/方法
*/
setIsbn : function ( isbn ) {
if ( !this._checkIsbn(isbn) ) throw new Error("Boook constructor requires an isbn");
this._isbn = isbn;
},
getIsbn : function () {
return this._isbn;
},
setAuthor : function ( author ) {
this._author = author || "";
},
getAuthor : function () {
return this._author;
},
setPrice : function( price ) {
this._price = price || "";
},
getPrice : function () {
return this._price;
}
}
var book = new Book("");