底层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>
 
</script>
 
 
<script>
 
</script>
 
 
 
<script>
 
</script>

 

 

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

 

 

<script>
 
</script>
 
 
 
<script>
  (function(){
 
 
 
})();
</script>
 
 
 
<script>
(function(){
 
 
})();
</script>

 

 

 

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

 

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

 

 

<script>
 
</script>
 
<script>
 
 
 
 
 
 
</script>

 

 

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

<script>
 
 
 
 
 
 
 
 
 
</script>

 

 

 

 

 

 

 

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

 

给。。一个统一的入口,

function init(){
 
 
}

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

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的压缩相当于编译

文件压缩

目前流行的

YUI Compressor

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

 

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

 

 

 

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

 

 

 

 

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

 

function trim(ostr) {
 
}
 
function isNumber(s){
 
}
function isStrinf(s){
 
}
function isBoolean(s){
 
}
funciton isFunction(s){
 
}
function isNull(s){
 
}
fucntion isUnderfined(s){
 
}
function isEmpty(s){
 
}
function isArray(s){
 
}
 
 
 
$
 
function $(node){
 
 
}
 
function getElementByClassName(str, root, tag){
 
}

 

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

 

 

 

 

 

 

JS面向对象编程“

 

函数作为类

 

function Animal(name){
 
 
 
 
}
 
//实例化
var myDog = new Animal("wangcai");
 
//使用原型
Animal.property.name=   
 
 
function Animal(name){
 
 
 
 
 
 
}
 
//私有的 习惯 也用 _ 命名

 

对于简单的应用,使用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 关键字,这样显得更专业。