可维护的javascript

时间：2022-03-22 17:00:16

理论上我只能把序看完。。。。。。。

第一章：基本的格式化

　　1.1:JSLint,JSHint查找代码中潜在的错误。

　　1.2：缩进:空格(2,4,8没有兼容性)和tab（不同的编辑器展现不一样），在编辑器中配置tab键时插入4个空格。

　　1.3：分号的使用:结尾都使用，有懒于分析器的自动分号插入；

　　　　

function getData(){
   return
  {
       title:"hehehe",
       author:"hahaha"
    }
}//分析器会理解为return;{}所以{要跟return连在一起

　　1.4：一行的代码长度不要超过80个字符；

　　1.5：命名，小驼峰式（小写字母开头），变量(名词作前缀，count,myName),函数(动词做前缀getName，can,has,is,get,set开头),i,j,k通常在循环中使用，常量(大写字母和下划线 MAX_COUNT)，构造函数（以大驼峰式开头用大写（AthorName），前面要有new）；

　　1.6：字符串 var str="my name is \"yuyu\" ";var str='my name is "yuyu" ';双引号需要用转义字符\,推荐用单引号(java不能用双引号)，字符串连接用+;

第二章：注释

　　2.1：单行注释//，独占一行(前面有一行空行，//后有一个空格)，代码尾部注释(和代码尾部有一个缩进，//后有一个空格)，注释多行代码(多行文本用/**/);

if(flag){

    // 这是注释
    console.log("yuyu");    // 这是注释
}

　　2.2：多行注释/**/，java风格，每行以*开头，*后有一个空格，所有的*号左对齐,注释多行文本；

if(flag){

    /*
     * 这是注释
     * 这是注释
     */
    console.log("yuyu");
}

2.3：文档注释，/**  **/,@表示一个或多个属性　

/**
 @

 **/　

第三章：语句和表达式

　　3.1：if,for,while,do...while...,try...catch...finally括号不能省，｛｝要换行，（之前）之后都有一个空格；　

if (true) {
    console.log("yuyu");
}

　　3.2：switch,JSLint要求如下，switch和case缩进一致，中间没有空行；

switch (condition) {
case "first":
        // 代码
        break；
case "second":
        // 代码
        break；
default:
        // 代码
}

3.3：with禁止使用(干嘛的这是。。。。。)

3.4：for循环，break(跳出所有循环)，continue(跳出本次循环，继续执行下一次的循环)；

3.5:for-in循环，只能循环对象，不能循环数组，最好用hasOwnProperty;

var prop;

for (prop in object) {

   // 实例属性什么什么的
   if(object.hasOwnProperty(prop)){
       console.log("name:" + prop);
       console.log("value:" + object[prop]);
   }
} 

第四章：变量函数和运算符

4.1:在函数内任意地方定义变量和在函数顶部定义变量是一样的。一般要求将所有变量定义在顶部；

4.2：在函数内部申明的所有函数也会提至顶部；

4.3：函数名和（之间没有空格，和3.1区分开；

4.4：立即调用函数

// 将一个匿名函数赋值给book
var book=function(){
    return "haha";
}   

// 将匿名函数的执行结果返给book2
var book2=function(){
    return "haha";
} ();

// 和book2一个意思，加()只是为了区分，()没有实际意义
var book3=(function(){
    return "haha";
});

4.4：严格模式 --这货干嘛的。。。。。

function haha(){
     "use strict";
}

4.5:相等 ==(!=)和===(!==)

// ==和！=会进行强制类型转换，且JSLint会发出警告
console.log(5 == "5");    // true,数字和字符串比较，字符串会转换为数字,相当于Number函数
console.log(25 == "0x19");    // true
console.log(1 == true);    // true，bool值会转换为数字,true(1),false(0)
console.log(2 == true);    // false
console.log(null == undefined);    // true

// ===和！==不会进行强制转换，推荐使用,上面返回true的都返回false
console.log(null === undefined);    //false

4.6：eval() 用于执行js(不推荐使用)，解析JSON(推荐使用);　

第五章：UI层的松耦合

5.1:最好不要使用expression

5.2：将js从css抽离，即不要使用x.style.color="red";而使用x.className+=" red";定位x.style.left="9px"可以使用；

5.3：将js重html中抽离

// 不好的写法
    <a href="#" onclick="doSomething()" id="a1">Click me</a>

// 推荐使用
    <a href="#"  id="a1">Click me</a>
    function addListener(target,type,handler){
        if (target.addEventListener) {
            target.addEventListener(type,handler,false);
        } else if (target.attachEvent) {
            target.attachEvent("on" + type + handler);
        } else {
            target["on" + type]=handler;
        }
    }
    function doSomething(){
        // 代码
    }
    var a1=document.getElementById('a1');
    addListener(a1, "click", doSomething);

　　5.4: 将html从js中抽离,像这种div.innerHTML="<li>1</li>";

5.4.1:从服务器加载

　　　　　　　　

function loadDialog(name, oncomplete){

    // 相当于dlg-holder.innerHTML=js/dialog返回的值,
    $('#dlg-holder').load("js/dialog" + name, oncomplete);
}

　　　　5.4.2：简单的客户端模板　　　

<script type="text/x-my-template" id="list-item">
    <li>1</li>
    <li>2</li>
</script>

var scriptText=document.getElementById("list-item").text;

第六章：避免使用全局变量

　　6.1:全局变量就是没有用var申明，和window.$=jQuery的window申明的；

　　6.2：YUI定义了唯一一个YUI全局对象；jQuery定义了两个jQuery和$;Dojo定义了一个dojo全局对象，Closure定义了一个goog全局对象；

第七章：事件处理

第八章：避免"空比较"

　　8.1：检测原始值,原始类型包括字符串,数字，布尔值，null，undefined;用typeof； typeof X===("string" | "number" | "boolean" | "undefined" )；

　　8.2：检测引用值（即对象object，除了原始值）;Object,Array,Date,Error,RegExp,自定义的类型,若用typeof判断全部返回"object",应该用instanceof;if(x instanceof Date) {};若用instance检测上面5种，都回返回"object";

　　8.3：检测函数；js中的函数是引用类型，console.log(typeof myFun==="function");但是有一种情况，IE8和以下版本中,(typeof document.getElementById 返回的是"object")，为了兼容，检测DOM方法统一使用in

　　

// 检测Dom方法
if ("querySelectorAll" in document) {
    images=document.querySelectorAll("img");
}

　　8.4：检测数组　

// IE9+,ff4+,sa5+,opera10.5+,chome实现了Array.isArray()方法
function isArray(value) {
    if (typeof Array.isArray === "function") {
        return Array.isArray(value);
    } else {
        return Object.prototype.toString.call(value) === "[object Array]";
    }
}

　　8.5：检测属性；　　

 
// 以下三种不是检测属性是否存在，而是检测属性值是否存在，如果属性值为0 false null 则会出错
if (object[x]) {}
if (object[x] != null ) {}
if (object[x] != undefined) {}

// 判断属性最好用in，可以检测出属性存在，包括原型继承的属性都回返回true
var x={
    count: 0;
    related: null;
}
if ("count" in x) {}

// 如果检测实例属性(不包括原型继承的)，则要用 object的hasOwnProperty(),如果对象是dom(IE8以下Dom对象并非继承自object)则
// 确订为非dom对象
if (x.hasOwnProperty("related")) {}

//不确定是否为dom对象
if ("hasOwnProperty" in object  && object.hasOwnProperty("related")) {}

第九章：将配置数据从代码中分离出来

第十章：抛出自定义错误

第十一章：不是你的对象不要动

第十二章：浏览器嗅探

第十三章：文件和目录结构

第十四章：Ant

第十五章：校验

第十六章：文件合并和加工

第十七章：文件精简和压缩

第十八章：文档化

第十九章：自动化测试

第二十章：组装到一起

相关文章