分类归档: Programming

编程编程编程。。。

JavaScript中类的定义[3]

5.较好的自定义类的方式

前面已经介绍了如何定义一个类，如何初始化一个类的实例，且类可以在function定义的函数体中添加成员，又可以用prototype定义类的成员，编程的代码显得混乱。

如何以一种清晰的方式来定义类呢？下面给出了一种类的实现模式。 　　

在JavaScript中，由于对象灵活的性质，在构造函数中也可以为类添加成员，在增加灵活性的同时，也增加了代码的复杂度。

为了提高代码的可读性和开发效率，可以采用这种定义成员的方式，而使用prototype对象来替代，这样function的定义就是类的构造函数，符合传统意义类的实现：类名和构造函数名是相同的。

例如：

cls.prototype，不仅代码体积变大，而且易读性还不够。为了进一步改进，可以使用无类型对象的构造方法来指定prototype对象，从而实现类的成员定义：

function cls(){
　//构造函数
}
//成员定义
cls.prototype.someProperty=”sample”;
cls.prototype.someMethod=function(){ 　//方法实现代码 } 　

虽然上面的代码对于类的定义已经清晰了很多，但每定义一个属性或方法，都需要使用一次

cls，构造函数直接用类名来实现，而成员使用无类型对象来定义，以列表的方式实现了所有属性和方法，并且可以在定义的同时初始化属性的值。这也更象传统意义面向对象语言中类的实现。只是构造函数和类的成员定义被分为了两个部分，这可看成JavaScript中定义类的一种固定模式，这样在使用时会更加容易理解。 　　

//定义一个类cls
function cls(){ 　//构造函数 }
//通过指定prototype对象来实现类的成员定义
class1.prototype={ 　someProperty:”sample”, someMethod:function(){ 　　//方法代码 　}, 　
…//其他属性和方法.
} 　　

上面的代码用一种很清晰的方式定义了

注意：在一个类的成员之间互相引用，必须通过this指针来进行，例如在上面例子中的someMethod方法中，如果要使用属性someProperty，必须通过this.someProperty的形式，因为在JavaScript中每个属性和方法都是独立的，它们通过this指针联系在一个对象上。

Read: 879

JavaScript中类的定义

      1.类的定义机制 　

1>用function关键字定义“类“。

2>function内部通过this指针定义“类“的成员。

3>function类似于其他语言中的构造函数(constructor)。

demo1：

function cls()
{ 　
     this.txt = “111”; 　
     this.display = function(){ alert(“this is a test method”); }
}
var obj=new cls(); 　

2.理解用new创建对象的过程

通过new cls()获得对象obj，对象obj便自动获得了属性txt和方法display。 　

new 创建对象过程：　　

1>当解释器遇到new操作符时便创建一个空对象； 　　

2>开始运行cls这个构造函数，并将其中的this指针都指向这个新建的对象； 　　

3>当给对象不存在的属性赋值时，解释器就会为对象创建该属性。

例如在cls中，当执行到this.txt=”111″这条语句时，就会添加一个属性txt，并把字符串“111”赋给它，这样函数执行就是初始化这个对象的过程，即实现构造函数的作用； 　　

4>当函数执行完后，new操作符就返回初始化后的对象。 　

3.demo1中定义“类”的缺点

在JavaScript中，function的定义实际上就是实现一个对象的构造器，是通过函数来完成的。这种方式的缺点是： 　　

·将所有的初始化语句、成员定义都放到一起，代码逻辑不够清晰，不易实现复杂的功能。 　　

·每创建一个类的实例，都要执行一次构造函数。构造函数中定义的属性和方法总被重复的创建，例如： this.display=function(){ 　alert(“this is a test method”); } 　　

每创建一个cls的实例，display都会被创建一次，造成了内存的浪费。　　

Read: 754

[原创]JOOMLA模板一例

body {
margin: 0px;
background:#666666 url(../images/bg.jpg) repeat-y scroll center;
color:#cccc99;
font-size:12px;
font-family: Arial, PMingLiU, Sans-Serif;
}
a:link, a:visited {
color:#cccc33;
text-decoration: none;
font-weight: normal;
}
a:hover{color:#ff6600;text-decoration: underline;}
#wrap{
margin:0 auto;
}
#header{
min-height:90px;
}
#headercnt{
position: relactive;
top:10px;
height:70px;
overflow:hidden;
}
#mainbox{
margin:0 auto;
width:700px;
}
#logo {
position: relactive;
left: 0;
top: 0;
float: left;
width: 200px;
height: 75px;
background: url(../images/jeek-logo.gif) 0 0 no-repeat;
margin-left: 15px;
margin-top: 5px;
}
#tabarea{
margin:0 auto;
width:100%;
min-height:24px;
background:url(../images/heading.gif);
background-repeat:repeat-x;
text-align: center;
}
#tabarea ul {
margin: 0;
padding: 0;
list-style:none;
}#tabarea li {
float: left;
padding:0;
margin: 4px 0px 0px 15px;
font-size:14px;
}
#tabarea li a{
color:#ffff00;
font-weight:bold;
}
#patharea{
margin:0 auto;
width:100%;
min-height:22px;
background-color:#333300;
text-align: left;
}
#patharea .breadcrumbs{
float:left;
width:72%;
margin-left:15px;
}
#pathRight{
margin:0 auto;
float:left;
width:25%;
background-color:#333300;
text-align: left;
}
#pathRight #mod_search_searchword{
font-size:12px;
padding:0;
margin:2px;
color:#999999;
background:#333300;
width:140px;
height:14px;
border-top:solid 1px #666666;
border-left:solid 1px #666666;
border-right:solid 1px #cccccc;
border-bottom:solid 1px #cccccc;
}
#pathRight .button{
font-size:12px;
padding:0;
height:16px;
margin:0px;
color:#999999;
background:#333300;
border-top:solid 1px #cccccc;
border-left:solid 1px #cccccc;
border-right:solid 1px #666666;
border-bottom:solid 1px #666666;
}
#bodybox{
clear:both;
}

#leftcol{
float:left;
text-align:left;
margin:0px;
width:25%;
}
#leftcol table{
margin:0 0 10px 10px;
width:100%;
text-align:left;
}

#mod_login_username,#mod_login_password{
width:85%;
height:14px;
color:gray;
border:dotted 1px;
background:#663333;
}

#leftcol .poll{
margin:0 0 10px 5px;
width:100%;
text-align:left;
}
#leftcol ul{
margin:0;
padding:0 0 10px 10px;
list-style-position:inside;
}
#leftcol li{
width:90%;
height:14px;
overflow:hidden;
}

#maincol{
float:left;
margin:0px;
width:73%;
min-height:600px;
text-align:left;
border-left:dashed 1px #999999;
}
#system-message{
border:solid 4px #660000;
background:yellow;
color:red;
font-weight:bold;
padding-left:10px;
}
#bigbox{
width:98%;
margin-left:3px;
float:left;
}
#boxtop{
border-bottom:dashed 1px #999999;
float:left;
width:100%;
}
#boxtop ul{
list-style-position:inside;
margin:5px 0 5px 5px;
padding:0 0 0 5px;
}
#boxtop li{
width:90%;
height:14px;
overflow:hidden;
}
#boxtop_l{
width:50%;
padding-top:5px;
float:left;
}
#boxtop_r{
width:49%;
padding-top:5px;
float:left;
border-left:dashed 1px #999999;
}
#boxmiddle{
float:left;
}
.pagination span{
margin-left:4px;
}
.pagination a{
margin-left:4px;
}
#footer{
color:gray;
clear:both;
border-top:solid 1px black;
}
#footer #line{
width:100%;
clear:both;
height:15px;
border-top:solid 1px #999999;
}

<?php
/**
* @copyright    Copyright (C) 2005 – 2007 Open Source Matters. All rights reserved.
* @license        GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” >
<head>
<jdoc:include type=”head” />
<link href=”templates/<?php echo $this->template ?>//static.hessian.cn/css/test.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div id=”top”></div>    <!– 页面边框头部 –>
<div id=”wrap” align=”center”>
<div id=”mainbox”>
<div id=”header”>
<div id=”logo”></div>
<div id=”headcnt”>
<jdoc:include type=”modules” name=”headerContent” />
</div>
</div>
<div id=”tabarea” align=”center”>
<div id=”navbar”>
<jdoc:include type=”modules” name=”tabArea” />
</div>
</div>
<div id=”patharea”>
<jdoc:include type=”modules” name=”pathArea” />
<div id=”pathRight”>
<jdoc:include type=”modules” name=”pathRight” />
</div>
</div>
<div id=”bodybox”>
<div id=”framehead”></div> <!– 正文部分边框头 –>
<div id=”leftcol”>
<jdoc:include type=”modules” name=”leftColum” />
</div>
<div id=”maincol”>
<div id=”bigbox”>
<jdoc:include type=”message” />
<?php if($this->countModules(‘boxTopLeft or boxTopRight’)): ?>
<div id=”boxtop”>
<?php if($this->countModules(‘boxTopLeft’)): ?>
<div id=”boxtop_l”><jdoc:include type=”modules” name=”boxTopLeft” /></div>
<?php endif; ?>
<?php if($this->countModules(‘boxTopRight’)): ?>
<div id=”boxtop_r”><jdoc:include type=”modules” name=”boxTopRight” /></div>
<?php endif; ?>
</div>
<?php endif; ?>
<div id=”boxmiddle”>
<jdoc:include type=”modules” name=”boxMiddle” />
<jdoc:include type=”component” />
</div>
<div id=”boxbottom”><jdoc:include type=”modules” name=”boxBottom” /></div>
</div>
</div>
<div id=”framefoot”></div> <!– 正文部分边框底部 –>
</div>
<div id=”footer”>
<div id=”line”></div>
<jdoc:include type=”modules” name=”footer” />
</div><!– 底部 通常放版权信息的位置 –>
</div>
</div>
<div id=”bottom”></div>    <!– 页面边框底部 –>

</body>
</html>

Read: 799

[转] 关于到底什么是 WEB标准

看来基本上得到大家的认可，关于分歧的部分和没有讲到的部分我们在深入探讨，

CSS的并发连接和服务器负载问题处理，也应该是web标准认识关心的。

到底SEO，IA，交互设计，用户体验算不算是Web标准的范畴，我明确一点

“用正确的方法去做正确的网页”

正确的网页是什么
1。优秀的信息架构
2。良好的交互设计

1和2最终达到了良好的用户体验

正确的方法是什么
1。标准的语言规范，XHTML，CSS，ECMAScript （标准的Javascript），DOM，XML，XMLHTTPRequest，甚至XSL等W3C的标准化规范语言
2。浏览器设备的支持情况的权衡以及解决方法
3。海量用户访问是的服务器负载

最终用户得到了良好的用户体验，搜索引擎得到了你想Open的数据，结果很完美！！

关于web标准，我建议大家不要停留在老外们的思维角度，要去消化他而不是模仿他，要站在巨人的肩膀上看得更远，不管什么技术，什么口号，什么方法，我的目的只有一个——我们要做到网页的最优化

Read: 685

[原创] PDO 的简单使用

<?php
$hostname    =    "localhost";    //指定主机名
$database    =    "db_book";        //指定数据库名称
$usernmae    =    "root";            //指定用户名
$password    =    "44444";    //指定密码
$dsn = "mysql:dbname=" . $database . ";host=" . $hostname;
//数据源描述
try {
    $conn    =    new PDO($dsn,$usernmae,$password);   
    //创建PDO对象 参数 : 数据源,用户名,密码
}
catch (PDOException $e) {
    echo "Connecting failed: " . $e->getMessage();
    //抛出异常
}

$sql = "select * from tb_books";
//查询字符串

echo "<pre>"; //使用文本格式输出

$conn->setAttribute(PDO::ATTR_CASE, PDO::CASE_LOWER); //使用小写键名 UPPER就是大写
$rs = $conn->prepare($sql);
//这个函数我理解应该是个用来建立类似持久连接的函数吧
$rs->execute();   
//这是一个可以带参数的函数,可使用变量替换查询时语句的特定标识
//如果不带参数则直接执行语句
//可以提高查询效率 具体看参考手册的介绍 PDO Functions 章节
while ($row = $rs->fetch(PDO::FETCH_ASSOC)) {
    //FETCH_ASSOC 是限定返回的结果只有 关联字段名 否则会同时返回 字段序号和关联字段名
    //浪费资源,使用关联字段名易于操作,同 mysql_fetch_assoc
    print_r($row);
};
echo "</pre>";
?>

Read: 734