高质量的javascript

 

 

 

底层js库采用YUI2.8.0，

统一头部中只载入YUI load组件，其他组件都通过loader对象加载

js尽量避免使用全局变量，通过命名空间或匿名函数将变量封闭到闭包中，

正式发布前应进行压缩，压缩后文件的命名应添加"_min"后缀

 

css Reset用YUI的CSS Reset

css采用CSSReset + common.css + app.css的形式

 

模块组件化，组件中的class或id采用骆驼命名法和下划线 相结合的方式，

单词之间的分隔靠大写字母分开，从属关系靠下划线分隔。。

 

 

 

 

 

 

 

 

团队合作

避免js冲突

 

使用匿名函数 控制变量的作用域（最简单也是最有效的方法 ）：

<script>

(function(){

   var a = 123;

 }

)();

</script>

 

 

<script>

(function(){

   var a = 321;

 }

)();

</script>

 

 

 

 

 

每段脚本都 各自包含在 不同的 匿名函数库，可以避免冲突隐患，但如果不同脚本之间需要 通信 就不好办了。】

解决：

1.利用 全局作用域的变量在各匿名函数间搭起桥梁。

<script>

var str;

</script>

 

 

<script>

(function(){var a=123,str=b=334;})();

</script>

 

 

 

<script>

(function(){var b = str;})();

</script>

 

 

 

2.上面这个也不够灵活，用hash 对象作为全局变量。

 

 

<script>

var CLOBAL = {};

</script>

 

 

 

<script>

(function(){

var a=123, b="hello world.";

CLOBAL.str1 = a;

CLOBAL.str2 =  b;

})();

</script>

 

 

 

<script>

(function(){

var a=CLOBAL.str1, b=CLOBAL.str2;

 

})();

</script>

 

 

 

3.这样也会有冲突，最完美的解决方案是使用 命名 空间：

 

在不同的匿名函数中，我们根据功能声明一个不同的命名空间，当然也可以使用多级命名空间。

 

 

<script>

var GLOBAL = {};

</script>

 

<script>

()function(){

var a=123, b="hello world";

GLOBAL.A =  {};

GLOBAL.A.str2 = a;

GLOBAL.A.str = b;

}();

</script>

 

 

因为生成命名空间 是个非常常用的功能， 我们可以进一步生成命名空间的功能定义成一个函数，方便调用，如

<script>

var GLOBAL={};

GLOBAL.namespace = function(str){

var arr = str.split("."), o = GLOBAL;

for(i=(arr=(arr[0]="GLOBAL") ? 1 : 0 ; i < arr.length ; i++))

{

o[arr[i]] = o[arr[i]] || {} ;

o = o[arr[i]];

}

}

</script>

 

 

 

 

 

 

 

 

js从功能上，应该分为两大部分-----框架部分和应用部分。框架部分提供的是对js代码的组织作用，包括定义全局变量，定义命名空间方法等，它和具体应用无关，每个页面 都需要 包括相同的框架，所以框架部分的代码在每个页面都相同。

 

给。。一个统一的入口，

function init(){

//工程师1 

//工程师2

}

接下来，就在是适当的时候调用这个入口函数

window.onload = init ;

 

 

 

如jquery的ready功能，就是框架提供的DOMReady功能，

DOMready只判断页面内所有的DOM节点是否已经全部生成，至于节点的内容是否加载完成，它并不关心。

 

//jquery的DOMready

$(document).ready(init);

 

//YUI的DOMready

YAHOO.util.Event.onDOMReady(init);

 

 

 

也可以 在</body>标签之前 调用，可以模拟 DOMReady的效果。

<script>

if(init)

{

init ();

}

</script>

</body>

 

 

实际工作中，网站的头部和尾部 通常会 做成单独 的文件，用服务端语言include 到网页中。

 

 

CSS放在页头，js放在页尾

 

 

js的压缩相当于编译

文件压缩

目前流行的

Packer

YUI Compressor //也可以压缩css

js压缩通常的做法是 ，去掉空格和换行，去掉注释，将复杂的变量替换成简单的变量名。

 

jsbeautifire.org这个工具就是一个在线的反压缩工具，把压缩后的js文件重新格式化，但去掉的注释和已经改名的变量是没办法恢复的。

 

 

 

attachEvent 和 addEventListener 方法支持 监听 处理 函数 的 叠加 ， 而不是覆盖。。。

 

 

 

 

自定义 一些 方法 来弥补 原生 JS 的不足：

 

function trim(ostr) {

return ostr.replace(/^/s+|s+$g/,"");

}

 

function isNumber(s){

return !isNaN(s);

}

function isStrinf(s){

return typeof s==="string";

}

function isBoolean(s){

return typeof s==="boolean";

}

funciton isFunction(s){

return typeof s==="function";

}

function isNull(s){

return s===null;

}

fucntion isUnderfined(s){

return typeof s==="undefined";

}

function isEmpty(s){

return /^/s*$/.rest(s);

}

function isArray(s){

return s instanceof Array;

}

 

 

 

$

 

function $(node){

node = typeof node=="string" ? document.getElementById(node) : node;

return node;

}

 

function getElementByClassName(str, root, tag){

}

 

 

 

和css一样，可以把js分为三层，base ( 自定义 一些 方法 来弥补 原生 JS 的不足), common(公共功能模块) , page（）

 

 

 

 

 

 

JS面向对象编程“

 

函数作为类

 

function Animal(name){

this.name = name;

this.say = function(){

l

}

}

 

//实例化

var myDog = new Animal("wangcai");

 

//使用原型

Animal.property.name=   

 

 

function Animal(name){

//公有属性

this.name = name;

//私有属性   

var age = 20;

//私有方法

var move = funciton(){}

}

 

//私有的 习惯 也用 _ 命名

 

 

对于简单的应用，使用this. 来读写属性。

对于一些析复杂的应用，使用set get方法读写属性更合适

 

 

 

在js中，赋值语句 会 用 传值 和 传址 两种方式。

基本数据类型 用 传值 

对象 数组 用 传址

 

好像跟java 一样。。

 

继承

Bird.prototype = new Animal();

Bird.prototype.constructor = Bird;

 

 

 

 

 

改变DOM样式的方法

 

var node = document.getElementById("test");

node.style.color = "red" ;

..

 

 

node.className=  ;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

使用“new”关键字时就像是盲人瞎马。

　　Javascript肯定是你的初恋女友，因为你显得无所适从。如果你想像真人那样取悦Javascript，你需要去了解对象符号。除了在需要实例化一个对象，或罕见的需要延时加载数据的情况外，你基本上不需要使用new 关键字。在Javascript里分配大量的new 变量地址是一项很慢的操作，为了效率起见，你应该始终使用对象符号。

var rightway= [1, 2, 3];
var wrongway= new Array(1, 2, 3);

　　是否还记得我说过Javascript的变量范围是以函数为基础的？是否还记得有人说Javascript的对象像函数那样定义？如果你不使用new 关键字来声明一个对象，你将会使这个对象成为全局范围内的对象。所以，永远使用new 关键字来声明对象是一个好习惯。

var derp=”one”;
var Herp=function(){
this.derp=”two”;
}
var foo=Herp();
alert(derp);

　　如果你这样写，Javascript并不会在意，而你真正弹出的答案是“two”！有很多方法可以防止对象做出这样的行为，可以以使用instanceOf ，但更好的方法是正确的使用new 关键字，这样显得更专业。