Javascript面向对象编程（二） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript面向对象编程</title>
</head>
<body>
   <script>

     //函数的闭包
    (function(win) {
        var Person = function(name) {
            var _name = name; //局部变量外部不可访问,模拟私有变量

            if (!Person.prototype.setName) { //保证只执行一次
                Person.prototype.setName = function(name) {
                    _name = name;
                }

                Person.prototype.getName = function(name) {
                    return _name;
                }

                //字面量定义不能用在函数体内
                /*Person.prototype = {
                    constructor: Person, 
                    setName: function(name) {
                        _name = name;
                    },
                    getName: function() {
                        return _name;
                    }
                }*/

            }

        }


        win['Person']= Person;
     })(window)


     var p = new Person('hello');
     p.setName('world');
     alert(p.getName());

   </script> 
</body>
</html>

LESS语法学习（二）

1. 变量

styles.less

@charset "utf-8";
@test-width:100px;
@test-height:100px;

//变量以@开头，例如@变量:值
#box {
    width:@test-width;
    height:@test-height;
    background-color:red;
}

Alt text

2. 混合

@charset "utf-8";
@test-width:100px;
@test-height:100px;

//变量以@开头，例如@变量
#box {
    width:@test-width;
    height:@test-height;
    background-color:red;

    .border;
    .text(25px); //如果用默认值，必须带括号,如.text();
}

//混合
.border {
    border:5px solid blue;
}

//混合-可带参数,默认15px
.text(@font-size) {
    font-size:@font-size;
    color:yellow;
}

Alt text

3. 匹配模式

.triangle {
    .triangle(bottom,red);
}


//匹配模式
//公共的，@_是固定格式
.triangle(@_, @color:blue,@width:20px) {
    width:0;
    border-style:solid;
}

//上三角
.triangle(top, @color:blue,@width:20px) {
    border-width:@width;
    border-color:transparent transparent @color transparent;
}
//下三角
.triangle(bottom, @color:blue,@width:20px) {
    border-width:@width;
    border-color:@color transparent transparent transparent;
}

Alt text

4. 运算

@test-width:100px;
@test-height:100px;


#box {
    width:@test-width + 10*2; //运算操作
    height:@test-height;
    background-color:red;
}

5. 嵌套操作

html

 <ul class="list">
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
 </ul>

less

.list {
    width:600px;
    list-style:none;
    li {
        margin:5px;
        padding:5px;
        background-color:#ccc;
    }

    a {
      //&表示上一层元素
       &:hover {
        color:red;
       } 
    }

    span {
        float:right;
    }
}

Alt text

6. 更多用法http://lesscss.org/

LESS初体验（一）

less是什么

LESS是一种由Alexis Sellier设计的动态层叠样式表语言，受Sass所影响，同时也影响了Sass的新语法：SCSS。

LESS是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为JavaScript。受益于JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）。

在语法方面，LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制

Less之于Css相当于Jquery至于JavaScript

编译工具

  • koala
  • Nodejs库
  • 浏览器端使用

使用koala

下载地址：http://koala-app.com/index-zh.html
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Less demo01</title>
    <link rel="stylesheet" href="style/styles.css">
</head>
<body>
 hello less!!   
</body>
</html>

styles.less

@charset "utf-8";
@title-size:40px;

body {
    background-color:red;
    font-size:@title-size;
}

koala自动编译styles.css

ThinkPHP快速搭建MVC

分步骤：
1. 创建Model
2. 创建View
3. 创建Controller
4. 修改配置config.php

1. 创建Model

在目录Home\Model创建文件UserModel.class.php

<?php
namespace Home\Model;
use Think\Model;
class UserModel extends Model {
    protected $trueTableName = 'wp_users'; 
}

2. 创建View

在目录Home\View\Test创建文件test.html

this is template!!
<br>
param:{$name}
<br> 
<?php echo($name);?>
<?php
    //echo phpinfo();
//echo phpversion();
?>

3. 创建Controller

在目录Home\Controller创建文件TestController.class.php

<?php
namespace Home\Controller;
use Think\Controller;

class TestController extends Controller {


    public function test() {
        //$this->show("this is testhaha",'utf-8');
        //$this->success('新增成功22', 'test2');

        $User = new \Home\Model\UserModel('users','wp_','DB_CONFIG');
        $list = $User->select();


        //$name = 'ThinkPHP';
        $this->assign('name',$list[0]['user_login']);
        //$this->display();
        $this->display('test');
    }
}

4. 修改配置

在目录Home\Conf修改文件config.php

<?php
return array(
    //'配置项'=>'配置值'
    'DB_CONFIG' => array(
         'db_type'  => 'mysql',
         'db_user'  => 'root',
         'db_pwd'   => '******',
         'db_host'  => '121.42.151.190',
         'db_port'  => '3306',
         'db_name'  => 'wordpress'
    ),
);

访问地址：http://localhost:8080/cms/index.php/Home/Test/test

浏览器显示如下：

    this is template!! 
    param:Rick
    Rick

PHP面向对象编程

AB是两个平级目录，A目录下有个UserModel.php和Model.php,UserModel 继承自Model.php;B目录下有个调用者index.php

Model.php

<?php
class Model {

   public function getMsg() {
        return "this parent message";
   }
}

UserModel.php

<?php
require 'Model.php';
class UserModel extends Model {

    private $name;

    public function __construct($name) {
        echo parent::getMsg().'<br>'; //调用父类方法
        $this->name = $name;
    }

    public function setName($name) {
        $this->name = $name;
    }

     public function getName() {
        return $this->name;
    }

    public static function getStaticFun() {
        echo "hello static";
    }
}

index.php

<?php

require "../UserModel.php";

$User = new UserModel('Leno.Li');
echo $User->getName().'<br>';

$User->setName('Rick.Xu');

echo $User->getName()."<br>";

UserModel::getStaticFun(); //调用类的静态方法
echo "<br>";
$User->getStaticFun();  //通过实例调用静态方法
//UserModel.getStaticFun(); error

Output

this parent message
Leno.Li
Rick.Xu
hello static
hello static