JavaScript初学者+CSS

最新推荐文章于 2024-06-07 11:13:04 发布

mike_caoyong

最新推荐文章于 2024-06-07 11:13:04 发布

阅读量760

点赞数

分类专栏： web 文章标签： javascript css function stylesheet 浏览器 numbers

web 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

JavaScript初学者应注意的七个细节

--转自:http://www.csdn.net/article/2011-01-13/290130

摘要：每种语言都有它特别的地方，对于JavaScript来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学

每种语言都有它特别的地方，对于JavaScript来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节，与大家分享。

一、简化代码

JavaScript定义对象和数组非常简单，我们想要创建一个对象，一般是这样写的：

var car = new Object();

car.colour = 'red';

car.wheels = 4;

car.hubcaps = 'spinning';

car.age = 4;

下面的写法可以达到同样的效果：

var car = {

colour:'red',

wheels:4,

hubcaps:'spinning',

age:4

}

后面的写法要短得多，而且你不需要重复写对象名称。

另外对于数组同样有简洁的写法，过去我们声明数组是这样写的：

var moviesThatNeedBetterWriters = new Array(

'Transformers','Transformers2','Avatar','Indiana Jones 4'

);

更简洁的写法是：

var moviesThatNeedBetterWriters = [

'Transformers','Transformers2','Avatar','Indiana Jones 4'

];

对于数组，还有关联数组这样一个特别的东西。你会发现很多代码是这样定义对象的：

var car = new Array();

car['colour'] = 'red';

car['wheels'] = 4;

car['hubcaps'] = 'spinning';

car['age'] = 4;

这太疯狂了，不要觉得困惑，“关联数组”只是对象的一个别名而已。

另外一个简化代码的方法是使用三元运算符，举个例子：

var direction;

if(x < 200){

direction = 1;

} else {

direction = -1;

}

我们可以使用如下的代码替换这种写法：

var direction = x < 200 ? 1 : -1;

二、使用JSON作为数据格式

伟大的Douglas Crockford发明了JSON数据格式来存储数据，你可以使用原生的javascript方法来存储复杂的数据而不需要进行任何额外的转换，例如：

var band = {

"name":"The Red Hot Chili Peppers",

"members":[

{

"name":"Anthony Kiedis",

"role":"lead vocals"

{

"name":"Michael 'Flea' Balzary",

"role":"bass guitar, trumpet, backing vocals"

{

"name":"Chad Smith",

"role":"drums,percussion"

{

"name":"John Frusciante",

"role":"Lead Guitar"

}

"year":"2009"

}

你可以使用在JavaScript中直接使用JSON，甚至作为API返回的一种格式，在许多的API中被应用，例如：

function delicious(o){

var out = '<ul>';

for(var i=0;i<o.length;i++){

out += '<li><a href="' + o[i].u + '">' +

o[i].d + '</a></li>';

}

out += '</ul>';

document.getElementById('delicious').innerHTML = out;

}

</script>

这里调用delicious 的Web服务获取最新书签，以JSON格式返回，然后将它们显示成无序列表的形式。

从本质上讲，JSON是用于描述复杂的数据最轻量级的方式，而且直接它运行在浏览器中。你甚至可以在PHP中调用 json_decode（）函数来使用它。

三、尽量使用JavaScript原生函数

要找一组数字中的最大数，我们可能会写一个循环，例如：

var numbers = [3,342,23,22,124];

var max = 0;

for(var i=0;i<numbers.length;i++){

if(numbers[i] > max){

max = numbers[i];

}

alert(max);

其实，不用循环可以实现同样的功能：

var numbers = [3,342,23,22,124];

numbers.sort(function(a,b){return b - a});

alert(numbers[0]);

而最简洁的写法是：

Math.max(12,123,3,2,433,4); // returns 433

你甚至可以使用Math.max来检测浏览器支持哪个属性：

var scrollTop= Math.max(

doc.documentElement.scrollTop,

doc.body.scrollTop

);

如果你想给一个元素增加class样式，可能原始的写法是这样的：

function addclass(elm,newclass){

var c = elm.className;

elm.className = (c === '') ? newclass : c+' '+newclass;

而更优雅的写法是：

function addclass(elm,newclass){

var classes = elm.className.split(' ');

classes.push(newclass);

elm.className = classes.join(' ');

}

四、事件委托

事件是JavaScript非常重要的一部分。我们想给一个列表中的链接绑定点击事件，一般的做法是写一个循环，给每个链接对象绑定事件，HTML代码如下：

<h2>Great Web resources</h2>

<li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>

<li><a href="http://sitepoint.com">Sitepoint</a></li>

<li><a href="http://alistapart.com">A List Apart</a></li>

<li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>

<li><a href="http://oddlyspecific.com">Oddly specific</a></li>

</ul>

脚本如下：

// Classic event handling example

(function(){

var resources = document.getElementById('resources');

var links = resources.getElementsByTagName('a');

var all = links.length;

for(var i=0;i<all;i++){

// Attach a listener to each link

links[i].addEventListener('click',handler,false);

};

function handler(e){

var x = e.target; // Get the link that was clicked

alert(x);

e.preventDefault();

};

})();

更合理的写法是只给列表的父对象绑定事件，代码如下：

(function(){

var resources = document.getElementById('resources');

resources.addEventListener('click',handler,false);

function handler(e){

var x = e.target; // get the link tha

if(x.nodeName.toLowerCase() === 'a'){

alert('Event delegation:' + x);

e.preventDefault();

}

};

})();

五、匿名函数

关于JavaScript的最头疼的事情之一是，它的变量没有特定的作用范围。一般情况下，任何变量，函数，数组或对象都是全局性，这意味着在同一页上的其他脚本可以访问并覆盖它们。解决方法是把变量封装在一个匿名函数中。例如，下面的定义将产生三个全局变量和和两个全局函数：

var name = 'Chris';

var age = '34';

var status = 'single';

function createMember(){

// [...]

}

function getMemberDetails(){

// [...]

}

封装后如下：

var myApplication = function(){

var name = 'Chris';

var age = '34';

var status = 'single';

return{

createMember:function(){

// [...]

getMemberDetails:function(){

// [...]

}

}();

// myApplication.createMember() and

// myApplication.getMemberDetails() now works.

这被称为单体模式，是JavaScript设计模式的一种，这种模式在YUI中用得非常多，改进的写法是：

var myApplication = function(){

var name = 'Chris';

var age = '34';

var status = 'single';

function createMember(){

// [...]

}

function getMemberDetails(){

// [...]

}

return{

create:createMember,

get:getMemberDetails

}

}();

//myApplication.get() and myApplication.create() now work.

六、代码可配置

你写的代码如果想让别人更容易进行使用或者修改，则需要可配置，解决方案是在你写的脚本中增加一个配置对象。要点如下：

1、在你的脚本中新增一个叫configuration的对象。

2、在配置对象中存放所有其它人可能想要去改变的东西，例如CSS的ID、class名称、语言等等。

3、返回这个对象，作为公共属性以便其它人可以进行重写。

七、代码兼容性

兼容性是初学者容易忽略的部分，通常学习Javascript的时候都是在某个固定的浏览器中进行测试，而这个浏览器很有可能就是IE，这是非常致命的，因为目前几大主流浏览器中偏偏IE对标准的支持是最差的。最终用户看到的结果也许就是，你写的代码在某个浏览器无法正确运行。你应该把你的代码在主流的浏览器中都测试一下，这也许很费时间，但是应该这样做。

CSS入门

参看链接：

译者：http://yulimin.javaeye.com/blog/71162

原版：http://www.china-pub.com/computers/common/info.asp?id=35381

什么是CSS

CSS = Cascading Style Sheets

CSS中文称为层叠式样式表

CSS可以做什么

CSS可以将画面的内容和格式分离，使HTML代码更清晰，更容易维护

示例解释

p { color: red; font-size: 1.5em; }

Internal CSS

<style type="text/css">
h1 {
    color: #FF7643;
    font-face: Arial;
}
p {
    color: red;
    font-size: 1.5em;
}
</style>

External CSS

HTML:
 <link rel="stylesheet" type="text/css" href="css/global.css">

XHTML:
 <link rel="stylesheet" type="text/css" href="css/global.css" />

CSS：

<style type="text/css">
 @import url(css/global.css);
</style>

Selector

Tag Selectors：Page-Wide Styling（页面范围内的格式）

     h2 {
         color: #FFC;
         margin-bottom: 0;
         padding: 5px 0px 3px 25px;
         background-color:#999;
    }

Class Selectors：Pinpoint Control（精确控制）

    .special {
      color:#FF0000;
      font-family:"Monotype Corsiva";
     }
    <p class="special">

ID Selectors: Specific Page Element(特定的Page对象)

    #banner {
      background: #CC0000;
      height: 300px;
      width: 720px;
     }
    <p id="copyright">

Descendent Selector：

    h1 strong { color: red; }
        Here any <strong> tag inside an h1 is red, but other instances of the <strong> tag on the page, aren't affected.

    p.intro a { color: yellow; }
        Apply this style to every link (a) that's a descendent of a paragraph (p) that has the intro class applied to it. Note that there's no space between p and .intro, which tells CSS that the intro class applies specifically to the <p> tag.
    p .intro a { color: yellow; }
an <a> tag inside of any tag styled with the .intro class, that's itself a descendent of a <p> tag.

    .intro a {color: yellow; }
This selector indicates any <a> tag inside of any other tag<div>, <h1>, <table>, and so onwith the .intro class applied to it.

Group Selectors:

h1, h2, h3, h4, h5, h6 { color: #F1CD33; }

Universal Selector:

 * { font-weight: bold; }

Pseudo-Class and Pseudo Element

a:link selects any link that your guest hasn't visited yet, while the mouse isn't hovering over or clicking it. This style is your regular, unused Web link.

a:visited is a link that your visitor has clicked before, according to the Web browser's history. You can style this type of link differently than a regular link to tell your visitor, "Hey, you've been there already!"

a:hover lets you change the look of a link as your visitor passes the mouse over it. The rollover effects you can create aren't just for funthey can provide useful visual feedback for buttons on a navigation bar.

a:active lets you determine how a link looks as your visitor clicks. In other words, it covers the brief nanosecond when someone's pressing the mouse button, before releasing it.

:before It lets you add content preceding a given element
    p.tip:before {content: "HOT TIP!" }

:after pseudo-element adds generated contentbut after the element
    p.tip:after {content: "HOT TIP!" }

:first-child pseudo-element lets you select and format just the first of however many children an element may have.
    li:first-child { font-weight: bold; }

:focus applies when the visitor does something to indicate her attention to a Web page elementusually by clicking or tabbing into it.

   input:focus { background-color: #FFFFCC; }

Advanced Selector:

Child Selector

与Descendent Selector不同的地方是，Child Selector可以定位到特定的元素

body > p

Adjacent Siblings

h2 + p

select every paragraph following each <h2> tag

Attribute Selectors
a[href="http://www.cosmofarmer.com"]{ color:red; font-weight:bold; }

CSS入门参考

CSDN 的改版似乎不是我喜欢的那一种。

虽然是CSDN的会员，但是好少来到这里，懒...

从现在起，我要把一些归档的东西放到这里方便查找 ^_^ 。

说起CSS，是网站开发和网站设计都应该了解和掌握的东西，现在说一说CSS的学习和资源。

CSS的学习，应该从踏实的掌握好HTML的标记开始，网上和书店的书已经非常多，我个人的经验是，如果你是初学者，最好还是买一本，从有质感的教材入门，感觉是真正的开始（个人感觉哈，不必学我）。现在网上的教程和电子书非常多，但很多是手册性质，比如CSS2.0.chm等，这种东西也是要有，随时备查。当然，最重要的，是有互联网。百度一下，真是最好的资源集散地啊。

很多人在网上推荐《网站重构：应用Web标准进行设计》，我直接链接到当当，这本书我也看过了，我是2004年看的，当时，采用div+css的网站的人还很少，这本书对于有一些CSS/HTML基础的人来说，可以算是对DIV+CSS的入门，不过仍然有些浅。书本的译者傅捷也说自已的翻译不是很完美。不过我仍然推荐，因为此书学习起来不会太累，用时髦的话来讲，阅读者“用户体验”较好。

另外一本，相当的经典，《HTML&XHTML权威指南（第六版）》，非常实用，同志们，看看第六版了，多的话我也不说了，此书最新的内容到达了XHTML/CSS3的程度，是一本与时俱进的书。

一些网站：
1. http://www.52css.com/css/   CSS在线手册 (厉害啊...)
2. http://www.cssplay.co.uk/index     英国的一个提供免费的CSS代码的网站，代码让人称奇，原来CSS可以这么炫
3.http://www.w3cn.org/      我CSS/DIV的启蒙网站(站长就是《网站重构》的译者阿捷
4. CSS社区/web开发社区.......

对于爱买书的程序员我很敬佩，不过以自已和同事的经验，最海量的资源，是在于人的思考，CSDN等社区就是有着这些海量智慧的人的集合之处，希望自已能在CSDN更多的得到帮助和帮助别人。

编写完美CSS代码的常用技巧

CSS是一种很容易掌握的语言，但是如果你在做一个大项目的时候，不按照一定的定义方法来编写CSS代码，那么

你将会发现，CSS变得很难控制。以下是几个技巧，将帮助你容易

的编写和管理的CSS代码。

1、尽量不要使用全局复位。

利用全局复位去回复默认边框以及填充所有的HTML元素，是绝对禁止的。这不仅仅是因为它是一种缓慢和低效率

的方法，还因为你必须确定填充每一条边所需要的元素。

不好的编写习惯：

*{ margin:0; padding:0; }

正确的编写方式：

*html, body, div, dl, dt, dd, ul, h1, h2, h3, pre, form, label, fieldset, *input, p, blockquote, th, td { margin:0; padding:0 }

*table { border-collapse:collapse; border-spacing:0 }

*fieldset, img { border:0 }

*ul { list-style:none }

2。不要使用IE浏览器技巧

虽然，CSS技巧可以保持旧版浏览器网站外观的一致性，但是一些新版本的IE浏览器，例如IE8，由于不支持这些

CSS标准，所以会破坏点网站的布局。你可以尝试使用条件语句，而

不去针对特定版本的

IE浏览器。例如，当浏览器的版本低于IE6.0的时候在你的<head>中使用下面的代码行的标签，就可以加载iestyles.css。

<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />

<![endif]-->

3。利用CSS继承。

如果你的网页使用父元素的多个子元素，让他们继承完成所有的工作，您就可以轻松更新您的代码后，它还将减少一部分的CSS文件。

不好的编写习惯：

#container li{ font-family:Georgia, serif; }

#container p{ font-family:Georgia, serif; }

#container h1{font-family:Georgia, serif; }

正确的编写方式：

#container{ font-family:Georgia, serif; }

4、合并多个Selectors

如果他们有共同的CSS样式定义，那么你可以合并多个Selectors，它可以帮你节省您的时间和空间。

不好的编写习惯：

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

正确的编写方式：

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

5、使用速记属性

利用CSS的速记属性，以快速编写速记CSS代码，减少文件大小。这些速记符号可用于margin, padding, border, font, background ， color values.

不好的编写习惯：：

li{

font-family:Arial, Helvetica, sans-serif;

font-size: 1.2em;

line-height: 1.4em;

padding-top:5px;

padding-bottom:10px;

padding-left:5px;
}

正确的编写方式：

li{

font: 1.2em/1.4em Arial, Helvetica, sans-serif;

padding:5px 0 10px 5px;

6、组织CSS代码。

在一个特定的模式组织你的CSS代码，会让你以后能方便的找到特定的样式定义，节省大量的时间。下面是一个示例：

*-------------------------
CSS Reset
-------------------------*/

7、设为可读的CSS

设为可读CSS将使其更易于查找，以后更新样式也会变得容易简单。

例如：

div{

background-color:#3399cc;

color:#666;

font: 1.2em/1.4em Arial, Helvetica, sans-serif;

height:300px;

margin:10px 5px;

padding:5px 0 10px 5px;

width:30%;

z-index:10;

div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-

index:10; }

8、添加适当的评论

注释可以用来分开不同路段的CSS代码

#header{ height:145px; position:relative; }

#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}

#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}

#content .posts{ overflow:hidden; }

#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}

#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

9、布置CSS属性字母顺序

这个CSS方法也许很难编写，但它会让您很容易找出任何属性。

div{

background-color:#3399cc;

color: #666;

font: 1.2em/1.4em Arial, Helvetica, sans-serif;

height: 300px;

margin: 10px 5px;

padding:5px 0 10px 5px;

width: 30%;

z-index:10;

10、使用外部样式表

不好的编写习惯：

<style type="text/css" >

#container{ .. }

#sidebar{ .. }

</style>

OR

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

正确的编写方式：

<link rel="stylesheet" type="text/css" href="css/styles.css" />

11、分割CSS成多个文件。

如果你正在进行一个大型的网络项目，这个项目有很多个模块，而模块之间具有不同的风格样式和外观设置，这时候，你就应该把你的CSS文件分割多个文件，应用到各个模块中

去，你可以按layout、

generic classes 和module specific styles. 来划分你的CSS样式。这样你就可以轻松的在这个大型项目里组织编写代码，但装载多个CSS文件意味着更多的HTTP请求和加载时间会变

慢，这就需要创

建一个单独的CSS文件，然后把其他的CSS文件导入到单独的CSS文件中，

例如：

@import "style/css/reset.css";

@import "style/css/typography.css";

@import "style/css/layout.css";

12、压缩你的CSS代码

一旦你做好网页设计项目的准备，接下来你就应该压缩你的CSS代码中使用的工具，比如用CSS压缩机减少文件数量，提高网页加载时间。

13、保持编写CSS时的一致性

当您在参与多个网站项目的开发工作时，对所有的项目您都应该选择一个特殊的方式组织和格式化你的CSS代码。

mike_caoyong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录