mvc 自己封装一个框架

博客分类: php&&MVC 阅读次数: comments

mvc 自己封装一个框架

mvc 自己封装一个框架

MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式。

MVC把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)。

PHP中MVC模式也称Web MVC,从上世纪70年代进化而来。

MVC的目的是实现一种动态的程序设计,便于后续对程序的修改和扩展简化,并且使程序某一部分的重复利用成为可能。

除此之外,此模式通过对复杂度的简化,使程序结构更加直观。

MVC各部分的职能:

模型Model – 管理大部分的业务逻辑和所有的数据库逻辑。模型提供了连接和操作数据库的抽象层。

控制器Controller – 负责响应用户请求、准备数据,以及决定如何展示数据。

视图View – 负责渲染数据,通过HTML方式呈现给用户。

一个典型的Web MVC流程:

Controller截获用户发出的请求;

Controller调用Model完成状态的读写操作;

Controller把数据传递给View;

View渲染最终结果并呈献给用户。

在开始开发前,让我们先来把项目建立好。

假设我们建立的项目为 mvc,MVC的框架命名为 mvc,那么接下来,第一步要把目录结构设置好。

├─application 应用目录

│ ├─controllers 控制器目录

│ ├─models 模块目录

│ ├─views 视图目录

├─config 配置文件目录

├─vendor 框架核心目录

├─static 静态文件目录

├─index.php 入口文件

代码规范

在目录设置好以后,我们接下来规定代码的规范:

MySQL的表名需小写或小写加下划线,如:item,car_orders。
模块名(Models)需用大驼峰命名法,即首字母大写,并在名称后添加Model,如:ItemModel,CarModel。
控制器(Controllers)需用大驼峰命名法,即首字母大写,并在名称后添加Controller,如:ItemController,CarController。
方法名(Action)需用小驼峰命名法,即首字母小写,如:index,indexPost。
视图(Views)部署结构为控制器名/行为名,如:item/view.php,car/buy.php。

上述规则是为了程序能更好地相互调用。

重定向

重定向的目的有两个:设置根目录为project所在位置,以及将所有请求都发送给 index.php 文件。

如果是Apache服务器,在 project 目录下新建一个 .htaccess 文件,内容为:

# 打开Rerite功能 RewriteEngine On # 如果请求的是真实存在的文件或目录,直接访问 RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d # 如果访问的文件或目录不是真事存在,分发请求至 index.php RewriteRule . index.php

如果是Nginx服务器,修改配置文件,在server块中加入如下的重定向:

location / {

# 重新向所有非真是存在的请求到index.php

try_files $uri $uri/ /index.php$args;

}

这样做的主要原因是:

(1)静态文件能直接访问。

如果文件或者目录真实存在,则直接访问存在的文件/目录。

比如,静态文件static/css/main.css真实存在,就可以直接访问它。

(2)程序有单一的入口。

这种情况是请求地址不是真实存在的文件或目录,这样请求就会传到 index.php 上。

例如,访问地址:localhost/item/view/1,在文件系统中并不存在这样的文件或目录。

那么,Apache或Nginx服务器会把请求发给index.php,并且把域名之后的字符串赋值给REQUEST_URI变量。

这样在PHP中用$_SERVER[‘REQUEST_URI’]就能拿到/item/view/1;

(3)可以用来生成美化的URL,利于SEO。

3.4 入口文件

接下来,在 project 目录下新建 index.php 入口文件,文件内容为:

run(); 注意,上面的PHP代码中,并没有添加PHP结束符号?>

这么做的主要原因是:

对于只有 PHP 代码的文件,最好没有结束标志?>,

PHP自身并不需要结束符号,不加结束符让程序更加安全,很大程度防止了末尾被注入额外的内容。

3.5 配置文件

在入口文件中,我们加载了config.php文件的内容,那它有何作用呢?

从名称不难看出,它的作用是保存一些常用配置。

config.php 文件内容如下,作用是定义数据库连接参数参数,以及配置默认控制器名和操作名:

_config = $config; } // 运行程序 public function run() { spl_autoload_register(array($this, ‘loadClass’)); $this->setReporting(); $this->removeMagicQuotes(); $this->unregisterGlobals(); $this->setDbConfig(); $this->route(); } // 路由处理 public function route() { $controllerName = $this->_config[‘defaultController’]; $actionName = $this->_config[‘defaultAction’]; $param = array(); $url = $_SERVER[‘REQUEST_URI’]; // 清除?之后的内容 $position = strpos($url, ‘?’); $url = $position === false ? $url : substr($url, 0, $position); // 删除前后的“/” $url = trim($url, ‘/’); if ($url) { // 使用“/”分割字符串,并保存在数组中 $urlArray = explode(‘/’, $url); // 删除空的数组元素 $urlArray = array_filter($urlArray); // 获取控制器名 $controllerName = ucfirst($urlArray[0]); // 获取动作名 array_shift($urlArray); $actionName = $urlArray ? $urlArray[0] : $actionName; // 获取URL参数 array_shift($urlArray); $param = $urlArray ? $urlArray : array(); } // 判断控制器和操作是否存在 $controller = $controllerName . ‘Controller’; if (!class_exists($controller)) { exit($controller . ‘控制器不存在‘); } if (!method_exists($controller, $actionName)) { exit($actionName . ‘方法不存在‘); } // 如果控制器和操作名存在,则实例化控制器,因为控制器对象里面 // 还会用到控制器名和操作名,所以实例化的时候把他们俩的名称也 // 传进去。结合Controller基类一起看 $dispatch = new $controller($controllerName, $actionName); // $dispatch保存控制器实例化后的对象,我们就可以调用它的方法, // 也可以像方法中传入参数,以下等同于:$dispatch->$actionName($param) call_user_func_array(array($dispatch, $actionName), $param); } // 检测开发环境 public function setReporting() { if (APP_DEBUG === true) { error_reporting(E_ALL); ini_set(‘display_errors’,’On’); } else { error_reporting(E_ALL); ini_set(‘display_errors’,’Off’); ini_set(‘log_errors’, ‘On’); } } // 删除敏感字符 public function stripSlashesDeep($value) { $value = is_array($value) ? array_map(array($this, ‘stripSlashesDeep’), $value) : stripslashes($value); return $value; } // 检测敏感字符并删除 public function removeMagicQuotes() { if (get_magic_quotes_gpc()) { $_GET = isset($_GET) ? $this->stripSlashesDeep($_GET ) : ”; $_POST = isset($_POST) ? $this->stripSlashesDeep($_POST ) : ”; $_COOKIE = isset($_COOKIE) ? $this->stripSlashesDeep($_COOKIE) : ”; $_SESSION = isset($_SESSION) ? $this->stripSlashesDeep($_SESSION) : ”; } } // 检测自定义全局变量并移除。因为 register_globals 已经弃用,如果 // 已经弃用的 register_globals 指令被设置为 on,那么局部变量也将 // 在脚本的全局作用域中可用。 例如, $_POST[‘foo’] 也将以 $foo 的 // 形式存在,这样写是不好的实现,会影响代码中的其他变量。 相关信息, // 参考: http://php.net/manual/zh/faq.using.php#faq.register-globals public function unregisterGlobals() { if (ini_get(‘register_globals’)) { $array = array(‘_SESSION’, ‘_POST’, ‘_GET’, ‘_COOKIE’, ‘_REQUEST’, ‘_SERVER’, ‘_ENV’, ‘_FILES’); foreach ($array as $value) { foreach ($GLOBALS[$value] as $key => $var) { if ($var === $GLOBALS[$key]) { unset($GLOBALS[$key]); } } } } } // 配置数据库信息 public function setDbConfig() { if ($this->_config[‘db’]) { Model::$dbConfig = $this->_config[‘db’]; } } // 自动加载控制器和模型类 public static function loadClass($class) { $frameworks = __DIR__ . ‘/’ . $class . ‘.php’; $controllers = APP_PATH . ‘application/controllers/’ . $class . ‘.php’; $models = APP_PATH . ‘application/models/’ . $class . ‘.php’; if (file_exists($frameworks)) { // 加载框架核心类 include $frameworks; } elseif (file_exists($controllers)) { // 加载应用控制器类 include $controllers; } elseif (file_exists($models)) { //加载应用模型类 include $models;4 } else { // 错误代码 } } } 下面重点讲解主请求方法 route(),它也称路由方法,作用是:截取URL,并解析出控制器名、方法名和URL参数。 假设我们的 URL 是这样: yoursite.com/controllerName/actionName/queryString 当浏览器访问上面的URL,route()从全局变量 $_SERVER[‘REQUEST_URI’]中获取到字符串/controllerName/actionName/queryString。 然后,会将这个字符串分割成三部分:controller、action 和 queryString。 例如,URL链接为:yoursite.com/item/view/1/hello,那么route()分割之后, Controller名就是:item action名就是:view URL参数就是:array(1, hello) 分割完成后,再实例化控制器:itemController,并调用其中的view方法 。 3.7 Controller基类 接下来,就是在 fastphp 中创建MVC基类,包括控制器、模型和视图三个基类。 新建控制器基类,文件名 Controller.class.php,功能就是总调度,内容如下: _controller = $controller; $this->_action = $action; $this->_view = new View($controller, $action); } // 分配变量 public function assign($name, $value) { $this->_view->assign($name, $value); } // 渲染视图 public function render() { $this->_view->render(); } } Controller 类用assign()方法实现把变量保存到View对象中。 这样,在调用$this-> render() 后视图文件就能显示这些变量。 3.8 Model基类 新建模型基类,继承自数据库操作类Sql类(因为数据库操作比较复杂)。 模型基类文件名为 Model.class.php,代码如下: connect(self::$dbConfig[‘host’], self::$dbConfig[‘username’], self::$dbConfig[‘password’], self::$dbConfig[‘dbname’]); // 获取数据库表名 if (!$this->_table) { // 获取模型类名称 $this->_model = get_class($this); // 删除类名最后的 Model 字符 $this->_model = substr($this->_model, 0, -5); // 数据库表名与类名一致 $this->_table = strtolower($this->_model); } } } 建立一个数据库基类 Sql.class.php,代码如下: PDO::FETCH_ASSOC); $this->_dbHandle = new PDO($dsn, $username, $password, $option); } catch (PDOException $e) { exit(‘错误: ‘ . $e->getMessage()); } } // 查询条件 public function where($where = array()) { if (isset($where)) { $this->filter .= ‘ WHERE ‘; $this->filter .= implode(‘ ‘, $where); } return $this; } // 排序条件 public function order($order = array()) { if(isset($order)) { $this->filter .= ‘ ORDER BY ‘; $this->filter .= implode(‘,’, $order); } return $this; } // 查询所有 public function selectAll() { $sql = sprintf(“select * from `%s` %s”, $this->_table, $this->filter); $sth = $this->_dbHandle->prepare($sql); $sth->execute(); return $sth->fetchAll(); } // 根据条件 (id) 查询 public function select($id) { $sql = sprintf(“select * from `%s` where `id` = ‘%s'”, $this->_table, $id); $sth = $this->_dbHandle->prepare($sql); $sth->execute(); return $sth->fetch(); } // 根据条件 (id) 删除 public function delete($id) { $sql = sprintf(“delete from `%s` where `id` = ‘%s'”, $this->_table, $id); $sth = $this->_dbHandle->prepare($sql); $sth->execute(); return $sth->rowCount(); } // 自定义SQL查询,返回影响的行数 public function query($sql) { $sth = $this->_dbHandle->prepare($sql); $sth->execute(); return $sth->rowCount(); } // 新增数据 public function add($data) { $sql = sprintf(“insert into `%s` %s”, $this->_table, $this->formatInsert($data)); return $this->query($sql); } // 修改数据 public function update($id, $data) { $sql = sprintf(“update `%s` set %s where `id` = ‘%s'”, $this->_table, $this->formatUpdate($data), $id); return $this->query($sql); } // 将数组转换成插入格式的sql语句 private function formatInsert($data) { $fields = array(); $values = array(); foreach ($data as $key => $value) { $fields[] = sprintf(“`%s`”, $key); $values[] = sprintf(“‘%s'”, $value); } $field = implode(‘,’, $fields); $value = implode(‘,’, $values); return sprintf(“(%s) values (%s)”, $field, $value); } // 将数组转换成更新格式的sql语句 private function formatUpdate($data) { $fields = array(); foreach ($data as $key => $value) { $fields[] = sprintf(“`%s` = ‘%s'”, $key, $value); } return implode(‘,’, $fields); } } 应该说,Sql.class.php 是框架的核心部分。为什么? 因为通过它,我们创建了一个 SQL 抽象层,可以大大减少了数据库的编程工作。 虽然 PDO 接口本来已经很简洁,但是抽象之后框架的可灵活性更高。 这里的数据库句柄$this->_dbHandle还能用单例模式返回,让数据读写更高效,这部分可自行实现。 3.9 View基类 视图基类 View.class.php 内容如下: _controller = strtolower($controller); $this->_action = strtolower($action); } // 分配变量 public function assign($name, $value) { $this->variables[$name] = $value; } // 渲染显示 public function render() { extract($this->variables); $defaultHeader = APP_PATH . ‘application/views/header.php’; $defaultFooter = APP_PATH . ‘application/views/footer.php’; $controllerHeader = APP_PATH . ‘application/views/’ . $this->_controller . ‘/header.php’; $controllerFooter = APP_PATH . ‘application/views/’ . $this->_controller . ‘/footer.php’; $controllerLayout = APP_PATH . ‘application/views/’ . $this->_controller . ‘/’ . $this->_action . ‘.php’; // 页头文件 if (file_exists($controllerHeader)) { include ($controllerHeader); } else { include ($defaultHeader); } include ($controllerLayout); // 页脚文件 if (file_exists($controllerFooter)) { include ($controllerFooter); } else { include ($defaultFooter); } } } 这样,核心的PHP MVC框架核心就完成了。 下面我们编写应用来测试框架功能。 4 应用 4.1 数据库部署 在 SQL 中新建一个 project 数据库,增加一个item 表、并插入两条记录,命令如下: CREATE DATABASE `project` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; USE `project`; CREATE TABLE `item` ( `id` int(11) NOT NULL auto_increment, `item_name` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; INSERT INTO `item` VALUES(1, ‘Hello World.’); INSERT INTO `item` VALUES(2, ‘Lets go!’); 4.2 部署模型 然后,我们还需要在 models 目录中创建一个 ItemModel.php 模型,内容如下: _table` where `item_name` like ‘%$keyword%'”; $sth = $this->_dbHandle->prepare($sql); $sth->execute(); return $sth->fetchAll(); } } 因为 Item 模型继承了 Model基类,所以它拥有 Model 类的所有功能。 4.3 部署控制器 在 controllers 目录下创建一个 ItemController.php 控制器,内容如下: search($keyword); } else { $items = (new ItemModel)->selectAll(); } $this->assign(‘title’, ‘全部条目‘); $this->assign(‘keyword’, $keyword); $this->assign(‘items’, $items); $this->render(); } // 添加记录,测试框架DB记录创建(Create) public function add() { $data[‘item_name’] = $_POST[‘value’]; $count = (new ItemModel)->add($data); $this->assign(‘title’, ‘添加成功‘); $this->assign(‘count’, $count); $this->render(); } // 操作管理 public function manage($id = 0) { $item = array(); $postUrl = ‘/item/add’; if ($id) { $item = (new ItemModel)->select($id); $postUrl = ‘/item/update’; } $this->assign(‘title’, ‘管理条目‘); $this->assign(‘item’, $item); $this->assign(‘postUrl’, $postUrl); $this->render(); } // 更新记录,测试框架DB记录更新(Update) public function update() { $data = array(‘id’ => $_POST[‘id’], ‘item_name’ => $_POST[‘value’]); $count = (new ItemModel)->update($data[‘id’], $data); $this->assign(‘title’, ‘修改成功‘); $this->assign(‘count’, $count); $this->render(); } // 删除记录,测试框架DB记录删除(Delete) public function delete($id = null) { $count = (new ItemModel)->delete($id); $this->assign(‘title’, ‘删除成功‘); $this->assign(‘count’, $count); $this->render(); } } 4.4 部署视图 在 views 目录下新建 header.php 和 footer.php 两个页头页脚模板,如下。 header.php 内容: <?php echo $title ?> <p></title></p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel=”stylesheet” href=”/static/css/main.css” type=”text/css” /> </code></pre></div></div> <p></head></p> <body> <h1><?php echo $title ?></h1> footer.php 内容: </body> <p></html></p> <p>页头文件用到了main.css样式文件,内容:</p> <p>html, body {</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>margin: 0; padding: 10px; font-size: 20px; </code></pre></div></div> <p>}</p> <p>input {</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>font-family:georgia,times; font-size:24px; line-height:1.2em; </code></pre></div></div> <p>}</p> <p>a {</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>color:blue; font-family:georgia,times; line-height:1.2em; text-decoration:none; </code></pre></div></div> <p>}</p> <p>a:hover {</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>text-decoration:underline; </code></pre></div></div> <p>}</p> <p>h1 {</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>color:#000000; font-size:41px; border-bottom:1px dotted #cccccc; </code></pre></div></div> <p>}</p> <p>td {padding: 1px 30px 1px 0;}</p> <p>然后,在 views/item 创建以下几个视图文件。</p> <p>index.php,浏览数据库内 item 表的所有记录,内容:</p> <p><form action=”” method=”get”></p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><input type=”text” value=”<?php echo $keyword ?>” name=”keyword”> <input type=”submit” value=”搜索“> </code></pre></div></div> <p></form></p> <p><a href=”/item/manage”>新建</a></p> <table> <tr> <th>ID</th> <th>内容</th> <th>操作</th> </tr> <?php foreach ($items as $item): ?> <tr> <td><?php echo $item[‘id’] ?></td> <td><?php echo $item[‘item_name’] ?></td> <td> <a href=”/item/manage/<?php echo $item[‘id’] ?>”>编辑</a> <a href=”/item/delete/<?php echo $item[‘id’] ?>”>删除</a> </td> </tr> <?php endforeach ?> </table> <p>add.php,添加记录后的提示,内容:</p> <p><a class=”big” href=”/item/index”>成功添加<?php echo $count ?>条记录,点击返回</a></p> <p>manage.php,管理记录,内容:</p> <p><form action=”<?php echo $postUrl; ?>” method=”post”></p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><?php if (isset($item[‘id’])): ?> <input type=”hidden” name=”id” value=”<?php echo $item[‘id’] ?>”> <?php endif; ?> <input type=”text” name=”value” value=”<?php echo isset($item[‘item_name’]) ? $item[‘item_name’] : ” ?>”> <input type=”submit” value=”提交“> </code></pre></div></div> <p></form></p> <p><a class=”big” href=”/item/index”>返回</a></p> <p>update.php,更改记录后的提示,内容:</p> <p><a class=”big” href=”/item/index”>成功修改<?php echo $count ?>项,点击返回</a></p> <p>delete.php,删除记录后的提示,内容:</p> <p><a href=”/item/index”>成功删除<?php echo $count ?>项,点击返回</a></p> <p>4.5 应用测试</p> <p>这样,在浏览器中访问 project程序:http://localhost/item/index/,就可以看到效果了。</p> <p class="post-info"> 本文由 <a href="/">MeiLe</a> 创作,采用 <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="external nofollow">知识共享署名4.0</a> 国际许可协议进行许可<br>本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名<br>最后编辑时间为:2018-01-13 20:06:42</p> </div> </article> <!-- <div class="related-post-lists"> <div class="post-lists"> <div class="post-lists-body"> <div class="post-list-item"> <div class="post-list-item-container"> <div class="item-label"> <div class="item-title"><a href="induction.html">归纳的随想</a></div> <div class="item-meta clearfix"> <div class="item-meta-ico bg-ico-image" style="background: url('../usr/themes/pinghsu/images/bg-ico.png') no-repeat;background-size: 40px auto;"></div> <div class="item-meta-cat"><a href="../category/thoughts/index.html">Thoughts</a></div> </div> </div> </div> </div> </div> </div> </div> --> <footer class="footer bg-white"> <div class="footer-social"> <div class="footer-container clearfix"> <div class="social-list"> <a class="social segmentfault" target="blank" href="https://segmentfault.com/u/liberxue" title="访问 LiberXue_Twitter" data-hover="Segmentfault">Segmentfault</a> <a class="social github" target="blank" href="https://github.com/liberxue" title="访问 LiberXue_Twitter" data-hover="GitHub">GitHub</a> <a class="social twitter" target="blank" href="http://twitter.com/liberxue" title="访问 LiberXue_Twitter" data-hover="Twitter">Twitter</a> <a class="social stackoverflow" target="blank" href="https://stackoverflow.com/users/6902190/liberxue" title="访问 LiberXue_stackoverflow" data-hover="StackOverflow">StackOverflow</a> <a class="social oschina" target="blank" href="https://my.oschina.net/bolanzw" title="访问 LiberXue_Oschina" data-hover="Oschina">Oschina</a> <a class="social rss" target="blank" href="/feed.xml"title="访问 LiberXue_RSS" data-hover="RSS">RSS</a> </div> </div> </div> <div class="footer-meta"> <div class="footer-container"> <div class="meta-item meta-copyright"> <div class="meta-copyright-info"> <a href="/" class="info-logo"> <img src="https://Yii18.github.io" title="访问 MeiLe_blog" data-hover="MeiLe_blog" alt="MeiLe_blog" /> </a> <div class="info-text"> <p>Theme is <a href="http://www.liberxue.com/2017/08/03/Jekyllthemes.html" title="访问 Jekyll MeiLe主题" data-hover="Jekyll MeiLe"target="_blank">Jekyll MeiLe</a> by <a href="http://www.liberxue.com/about" target="_blank">MeiLe</a></p> <p>Powered by <a href="https://Yii18.github.io/tags/#Jekyll" title="Jekyll" data-hover="Jekyll" target="_blank" rel="nofollow">Jekyll</a></p> <p>© 2017 <a href="#" title="访问 MeiLe blog RSS" data-hover="MeiLe blog RSS">MeiLe blog RSS</a></p> <p>总计文章:篇</p> <p>本blog已开源点击Fork</p><iframe src="http://ghbtns.com/github-btn.html?user=liberxue&repo=liberxue.github.io&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe> </div> </div> </div> <div class="meta-item meta-posts"> <h3 class="meta-title">置顶文章</h3> <!--置顶--> <li><a href="/2018/03/23/centos%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%88%86%E5%8C%BA%E6%8C%82%E8%BD%BD%E7%AC%AC%E4%BA%8C%E5%9D%97%E7%A3%81%E7%9B%98.html" title="访问 centos服务器分区挂载第二块磁盘 " data-hover="centos服务器分区挂载第二块磁盘 ">centos服务器分区挂载第二块磁盘 </a></li> <li><a href="/2018/03/04/mysql%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95.html" title="访问 Mysql存储过程基本语法" data-hover="Mysql存储过程基本语法">Mysql存储过程基本语法</a></li> <!--置顶--> </div> <div class="meta-item meta-comments"> <h3 class="meta-title">最新文章</h3> </div> </div> </div> </footer> <script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script> <script src="/search/js/cb-search.js"></script> <script> $(function () { setTimeout(function () { $('code').removeClass('hljs'); $('code').removeClass('language'); }, 90); }); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <!--liberxueconnnet-menu--> <div id="directory-content" class="directory-content"> <div id="directory"></div> </div> <!--liberxueconnnet-menu--> <script> var postDirectoryBuild = function() { var postChildren = function children(childNodes, reg) { var result = [], isReg = typeof reg === 'object', isStr = typeof reg === 'string', node, i, len; for (i = 0, len = childNodes.length; i < len; i++) { node = childNodes[i]; if ((node.nodeType === 1 || node.nodeType === 9) && (!reg || isReg && reg.test(node.tagName.toLowerCase()) || isStr && node.tagName.toLowerCase() === reg)) { result.push(node); } } return result; }, createPostDirectory = function(article, directory, isDirNum) { var contentArr = [], titleId = [], levelArr, root, level, currentList, list, li, link, i, len; levelArr = (function(article, contentArr, titleId) { var titleElem = postChildren(article.childNodes, /^h\d$/), levelArr = [], lastNum = 1, lastRevNum = 1, count = 0, guid = 1, id = 'directory' + (Math.random() + '').replace(/\D/, ''), lastRevNum, num, elem; while (titleElem.length) { elem = titleElem.shift(); contentArr.push(elem.innerHTML); num = +elem.tagName.match(/\d/)[0]; if (num > lastNum) { levelArr.push(1); lastRevNum += 1; } else if (num === lastRevNum || num > lastRevNum && num <= lastNum) { levelArr.push(0); lastRevNum = lastRevNum; } else if (num < lastRevNum) { levelArr.push(num - lastRevNum); lastRevNum = num; } count += levelArr[levelArr.length - 1]; lastNum = num; elem.id = elem.id || (id + guid++); titleId.push(elem.id); } if (count !== 0 && levelArr[0] === 1) levelArr[0] = 0; return levelArr; })(article, contentArr, titleId); currentList = root = document.createElement('ul'); dirNum = [0]; for (i = 0, len = levelArr.length; i < len; i++) { level = levelArr[i]; if (level === 1) { list = document.createElement('ul'); if (!currentList.lastElementChild) { currentList.appendChild(document.createElement('li')); } currentList.lastElementChild.appendChild(list); currentList = list; dirNum.push(0); } else if (level < 0) { level *= 2; while (level++) { if (level % 2) dirNum.pop(); currentList = currentList.parentNode; } } dirNum[dirNum.length - 1]++; li = document.createElement('li'); link = document.createElement('a'); link.href = '#' + titleId[i]; link.title = '访问' + titleId[i]; link.title = '访问' + titleId[i]; link.innerHTML = !isDirNum ? contentArr[i] : dirNum.join('.') + ' ' + contentArr[i] ; li.appendChild(link); currentList.appendChild(li); } directory.appendChild(root); }; createPostDirectory(document.getElementById('post-content'),document.getElementById('directory'), true); }; postDirectoryBuild(); </script> <script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script> <script >lang=hljs.initHighlightingOnLoad();</script> </body> </html>