2017年3月

PHP的页面控制器和前端控制器

读过《企业应用架构模式》(一本归纳总结了企业应用开发中的架构和模式的书)的读者都会知道书中提到过两种对立的模式,页面控制器和前端控制器模式,那么这两种模式有什么区别呢?

页面控制器和前端控制器模式的区别在于前端请求的地址不同,前端控制器是只有一个请求地址,而页面控制器是请求多个地址。而这造成了两种模式的本质区别,那就是需不需要路由。

在PHP中,我们初学这门语言的时候,大多是从页面脚本入门,这时候使用的就是PHP的页面控制器模式。而在框架中,我们需要切换到前端控制器模式,理解路由的概念。

在前端控制器模式中,路径参数有url字符串,url参数,request method。
而在页面控制器中,不同文件本身就是一种路径参数,当然除此之外可以叠加上诉的url字符串等其他参数。

所以,前端控制器模式中,路由分发实现是由一个路由分发器来进行dispatch。
而在页面控制器中,路由分发实现不仅通过用户请求不同文件,而且需要在文件中进行进一步的分发来实现。

后面,我会改造Slimphp框架成为页面控制器模式的版本,未完待续。

React入门思路

首先我们来看一段代码:

var element1 = React.DOM.h1({id: "myH1"}, 'content');
ReactDOM.render(
  element1,
  document.getElementById('test1')
);

上面这段代码相信大家都看得懂吧!React有一个关键在于把所有DOM Element都用Virtual Element进行声明,然后就可以把Virtual Element用ReactDOM渲染出来。然后我们来看渲染嵌套的Virtual Element的方法:

var element2 = React.DOM.h1({id: "myH1"}, 
    React.DOM.span({id:"mySpan"}, 'span content'),
    'content');
ReactDOM.render(
  element2,
  document.getElementById('test2')
);

Virtual Element嵌套Virtual Element应该不是很难理解,毕竟DOM Element也是这样一环嵌一环的嵌套的。
这边通过嵌套Virtual Element产生了一个组合Element,但是如果我多处需要这个组合Element的话,每次都得写一遍创建代码,岂不是麻烦死了。
React里面因此诞生了Component的概念,Component和组合Elemnent的关系类似OOP中类和对象的关系。
不过首先!我们换一种新的方式来取代React.DOM.*来产生Element,来看下面代码:

var element2 = React.createElement("h1",{id: "myH1"}, 
    React.createElement("span", {id:"mySpan"}, 'span content'),
    'content');
ReactDOM.render(
  element2,
  document.getElementById('test2')
);

上面的代码仅仅是替换了React.DOM.为React.createElemnet(),但是这种方式更具有适普性,如果我们自定义了component,那么也可以通过这种方式产生Element。
行,那么我们就可以尝试搭建Component了,见如下代码:

var element2 = React.createElement("h1",{id: "myH1"}, 
    React.createElement("span", {id:"mySpan"}, 'span content'),
    'content');
var component3 = React.createClass({
    render: function() {
        return React.createElement("h1",{id: "myH1"}, 
            React.createElement("span", {id:"mySpan"}, 'span content'),
            'content');
    }
});
var element3 = React.createElement(component3);
ReactDOM.render(
  element2,
  document.getElementById('test2')
);

看了上面的代码,关于为什么要有React.createElement和React.createClass的由来想必都有所思路了吧。