资讯专栏INFORMATION COLUMN

js编码中的一些细节

zorpan / 1300人阅读

摘要:当再次发生错误时,这将有助于更容易地解决问题如果正在编写代码,思考一下我不希望代码抛出某种错误。

我们认为,JavaScript的正确运行不应该依赖CSS-在缺少CSS情况下也要能够正确运行,尽管两者之间可能会有互动。

一、松耦合的一些建议

当你能够做到修改一个组件而不需要更改其它组件的时候,你就做到了松耦合。

1、将JavaScript从CSS中抽出来(现在基本不会有如下的写法)

.box{width: expression(document.body.offsetWidth + "px")} //不好的写法

2、将CSS从JavaScript中抽离,利用增减class类名来控制样式

element.style.color = "red"; //不好的写法

3、将JavaScript从HTML抽离


上面的写法在两个UI层的深耦合,可能会出现用户点击的时候函数不存在的情形。或者,修改了doSomething之后,可能需要同时修改JavaScriptHTML代码。利用DOM二级事件绑定时是更好的处理方法。

最好将所有的JavaScript代码都放入外置文件中,以确保HTML代码中不会有内联的JavaScript代码

4、将HTML从JavaScript中抽离
通常代码中会出现这样的写法:

//不好的写法
var div = document.getElementById("my-div");
div.innerHTML = "

Error

invalid e-mail address

";

解决方法:

通过ajax,从服务器加载

利用客户端模板

二、关于变量的一些建议

全局变量所带来的问题:

命名冲突

任何函数不经意间会修改全局变量,从而造成某处代码出错

难以测试

关于全局变量的一些解决tip:

所有变量都用var来定义,防止js不小心生成全局变量

避免意外的全局变量,利用jsLint来报警。推荐编辑器Bracket

使用严格模式来检验

使用单全局变量方式(单例模式)

三、事件处理的松耦合处理

1、隔离应用层逻辑

//不好的写法
function handleClick(event){
    var popup = document.getElementById("popup");
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
} 

addEventListener(element, "click", handleClick);

上面的一段代码看上去没有任何的问题,但是逻辑层跟应用层耦合了。如果说其他的事件处理程序执行了同样的程序。这样多个事件的处理程序执行了同样的逻辑,而你的代码却被不小心复制了多份。

修改之后:

//拆分应用层逻辑
var MyApplication = {
    handleClick:function(event){
        this.showPopup(event);
    },
    
    showPopup:function(event){
        var popup = document.getElementById("popup");
        popup.style.left = event.clientX + "px";
        popup.style.top = event.clientY + "px";
    }
}

addEventListener(element, "click", function(){
    MyApplication.handleClick(event);
});

看似多写了几行代码,但更加好维护

2、不要分发事件对象e

上面代码中定义的方法showPopup,每次调用需要传入event对象,但是它只是用到了event其中的两个属性,其实可以通过值给其两个明确的参数来改进代码

//好的写法
var MyApplication = {
    handleClick:function(event){
        this.showPopup(event.clientX,event.clientY);
    },
    
    showPopup:function(x, y){
        var popup = document.getElementById("popup");
        popup.style.left = x + "px";
        popup.style.top = y + "px";
    }
}

addEventListener(element, "click", function(){
    MyApplication.handleClick(event);
});

上面的代码其实还有一个点可以优化:事件处理程序应当在进入应用逻辑之前针对event对象执行任何必要的操作,包括阻止默认事件或阻止事件冒泡都应当直接包含在事件处理程序中。如下:

var MyApplication = {
    
    handleClick:function(event){
    
        //假设事件支持DOM level2
        event.preventDefault();
        event.stopPropagation();
        
        //传入应用层逻辑
        this.showPopup(event.clientX,event.clientY);
    },
    
    showPopup:function(x, y){
        var popup = document.getElementById("popup");
        popup.style.left = x + "px";
        popup.style.top = y + "px";
    }
}

addEventListener(element, "click", function(){
    MyApplication.handleClick(event);
});
四、判断语句中注意避免空比较

复习一下知识,检测各类值的操作

1、检测原始值(字符串、数字、布尔值、undefined):用typeof
2、检测null:用===!==来进行判断(typeof null = "object")
3、检测引用值:instanceof运算符

//检测日期
if(value instanceof Date){
    console.log("1")
}

4、检测函数:console.log(typeof myFunc === "function")
5、检测数组:

鸭式辩型(具体解释可以见犀牛书)

function isArray(value){
    return typeof value.sort === "function"
}

Kangax解决方法

function isArray(value){
    return Object.prototype.toString.call(value) === "[object Array]";
}

ES5方法:Array.isArray

6、检测属性
我曾经写过

//检测假值
if(a[b]){...}

//与null相比较
if(a[b] != null){...}

//与undefined相比较
if(a[b] != undefined){...}

但是上面的写法都不够明确,都是通过给定的名字来检查属性的值,而非给定的名字所指的属性是否存在,因此当属性值为0,false,null,undefined会出错

推荐下面的写法:in运算符+hasOwnProperty

五、配置数据分离

配置数据:应用中写死的值

URL

需要展现给用户的字符串

重复的值

设置(比如每页的配置项)

任何可能发生变化的值

处理方式:
1、抽离配置数据,用多带带的变量存放,方便修改
2、保存配置数据:值得尝试,将配置数据存放在非JavaScript文件中

JSON

JSONP

纯JavaScript

六、错误抛出的方法

1、抛出错误的方法:throw new Error("Something has happened")
2、抛出错误的经验法则:

一旦修复了一个很难调试的错误,尝试增加一个两个自定义错误。当再次发生错误时,这将有助于更容易地解决问题

如果正在编写代码,思考一下:“我不希望代码抛出某种错误”。这时,如果“某种错误发生”,就抛出一个错误

如果正在编写的代码别人也会使用,思考一下他们使用的方式,在特定的情况下抛出错误

3、try···catch语句
4、处理具体的错误类型

try {
    //有些代码引发了错误
} catch (ex) {
    if(ex instanceof TypeError) {
        //处理TypeError错误
    } else if(ex instanceof ReferenceError){
        //处理Reference错误
    } else {
        //其它处理
    }
}
七、针对对象的处理

1、基于对象的继承

var person = {
    name:"a",
    sayName:function(){
        alert(this.name);
    }
}

var myPerson = Object.create(person);
myPerson.sayName(); //弹出a

如果重新定义sayName方法,会自动切断对person.sayName()的方法

myPerson.sayName = function(){
    alert("b");
}
myPerson.sayName();//弹出b
person.sayName();//弹出a

Object.create()方法可以指定第二个参数,该参数对象中的属性和方法将添加到新的对象中

var myPerson = Object.create(person,{
    name:{
        value:"Ge"
    }
});

myPerson.sayName();//弹出Ge
person.sayName();//弹出a

3、基于类型的继承(两步)

原型继承

构造器继承

function Person(name){
    this.name;//属性name实际上是由Person类管理
}

function Author(name){
    //继承构造器
    Person.call(this,name);//允许Person构造器继续定义该属性。Person构造器是在this上执行的,this指向一个Author对象,所以最终的name定义在这个Author对象上面
}

Author.prototype = new Person();
八、浏览器嗅探

1、user-Agent检测

//不好的做法但是是通常的做法
if(navigator.userAgent.indexOf("MSIE") > -1) {
    //是Internet Explorer
} else {
    //不是Internet Explorer
}

浏览器的发展使得字符串检测的用户体验越来越差,最佳的方法是只检测旧的浏览器,比如IE8和之前的版本而不要试图检测IE9和更高版本

if( isInternetExplorer8OrEalier ){
    //处理IE8以及更早版本
} else {
    //处理其它浏览器
}

参考资料:《编写可维护的JavaScript》

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78735.html

相关文章

  • Ajax技术细节

    摘要:状态码,未发送,创建对象,默认值为执行当前请求已经发送,并且已经接收到服务器端返回的相应头信息响应主体内容正在返回相应主体内容已经返回到客户端网络状态码网络状态码,记录当前服务器返回信息的状态标识成功状态以开头也表示成功,但服务器端做了特殊 Ajax状态码,xhr.readyState 0:UNSENT 未发送,创建Ajax对象,默认值为01:OPENED 执行xhr.open2:HE...

    trigkit4 评论0 收藏0
  • 精读《深入浅出Node.js

    摘要:从社区和过往的经验而言异步编程的难题已经基本解决无论是通过事件还是通过模式或者流程控制库。本章主要介绍了主流的几种异步编程解决方案这是目前中主要使用的方案。最后因为人们总是习惯性地以线性的方式进行思考以致异步编程相对较为难以掌握。 前言 如果你想要深入学习Node,那你不能错过《深入浅出Node.js》这本书,它从不同的视角介绍了 Node 内在的特点和结构。由首章Node 介绍为索引...

    codergarden 评论0 收藏0
  • JavaScript中几个重要的知识点(3) ---- Ajax

    摘要:与响应不同的是,身份验证并不能提供任何帮助,而且这个请求也不应该被重复提交。 JavaScript中几个最重要的大知识点 面向对象 DOM事件 异步交互ajax AJAX AJAX是异步的javascript和xml(Asynchronous Javascript And XML)的缩写,用于网页局部刷新,提升用户浏览体验 通常前端程序员关于AJAX的掌握仅仅停留在会用AJAX发送...

    starsfun 评论0 收藏0
  • XSS分析及预防

    摘要:分析及预防,又称跨站脚本,的重点不在于跨站点,而是在于脚本的执行。在这里需要强调一点的是,默认会禁止代码块的执行禁止内联事件处理函数禁止内联样式禁止和。 XSS分析及预防 XSS(Cross Site Scripting),又称跨站脚本,XSS的重点不在于跨站点,而是在于脚本的执行。在WEB前端应用日益发展的今天,XSS漏洞尤其容易被开发人员忽视,最终可能造成对个人信息的泄漏。如今,...

    smartlion 评论0 收藏0

发表评论

0条评论

zorpan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<