高质量的javascript

    技术2025-04-11  28

     

     

     

    底层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 关键字,这样显得更专业。

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    最新回复(0)