Web开发的一点儿心得

因为工作需要，最近做了一点Web开发，类似XX管理系统的东西。后台用PHP和同事开发的MVC框架。前端就是Html/Javscript/CSS和jQuery、Bootstrap两大常用前端库。以前也折腾过这些东西，算是有点儿经验，不过并没有深入，更谈不上实战经验。这里作为一个菜鸟总结一下碰到的问题和学到的东西。

PHP和后台

PHP世界上最好的语言！

PHP开发还是比较容易上手的。语法比较直接，有点编程经验的人都不难理解，而且内置了丰富的函数库，Web开发常用的功能应有尽有。另外，Web后台开发相比常驻Server要简单不少。从浏览器访问一次页面，就调用一次对应的PHP脚本，顺序执行其中的操作，完成后退出。既不需要考虑多线程之类的问题，也没有内存泄漏这样的风险。

开发过程中遇到的一个印象比较深刻的坑是在遍历数组的时候。通常都是这样写：

foreach ($some_array as $some_element) {
    // do something
}

这样遍历数组其实是只读的，因为遍历过程中PHP会把$some_array每个元素的值拷贝到$some_element，对$some_element的修改不会影响到$some_array。如果需要修改$some_array中元素的值，需要想下面这样写。这时$some_element就不在是一个拷贝，而是一个引用了。

foreach ($some_array as &$some_element) {
    // do something
}

jQuery

jQuery是前端开发的一大神器，它可以做的事情很多，不过我主要用来实现AJAX。印象中AJAX也是曾经被追捧上天的一项Web开发技术。虽然并不复杂，但是相比以前提交表单的方式，确实大大提升了用户体验。简单讲，AJAX就是在网页上用Javscript通过HTTP请求从后台获取数据，然后通过DOM操作部分更新页面内容。要实现AJAX，主要需要两块功能，一个是向后台发送XMLHttpRequest获取数据，另一个是操作DOM节点修改页面。

对于前者，jQuery提供了ajax()函数。用法如下：

$.ajax({
    type: "GET",           // 请求方法，支持GET和POST
    url: "test.php",       // 请求地址
    data: {             // 请求参数，这里是一个javascript的对象，
        param1: "val1", // jQuery会自动将其转换成
        param2: "val2", // &param1=val1&param2=val2 这种形式
    },
    dataType: "json",     // 返回数据格式，用json便于前端处理
    success: function(data) {
        // 请求成功的回调函数
    },
    error: function(data) {
        // 请求失败的回调函数
    },
    complete: function(data) {
        // 请求完成的回调函数，不论成功与否都会执行
    }
});

这里只列出了最主要的几个参数，更详细的说明可以参考W3School的教程。这里有一个坑是，当指定dataType为json的时候，jQuery会尝试解析响应并转换成对象传递给success回调函数。如果解析成功，那么success回调的参数data就是一个对象。但是实际使用中却出现了后台返回了合法的json字符串，但是jQuery却解析失败的情况。这时就要去掉dataType参数，让jQuery把后台响应文本直接传递给success回调函数，然后自己对json串进行解析。解析的方法如下：

eval("obj = " + data);

或者

obj = eval("(" + data + ")");

对于DOM操作，jQuery提供了CSS风格的DOM选择器，主要是下面三种形式：

1. $('tag_name')，选择某一标签类型的所有DOM节点，比如$('div')就是选择所有div标签；
2. $('.class_name')，选择某一class的所有DOM节点；
3. $('#id')，选择指定ID的DOM节点。

不同选择方式可以配合使用，比如$('div.some_class')就是选择所有class为some_class的div标签。$()选择器返回的结果是一个DOM对象的数组，然后可以对这些节点进行操作。常用的操作有：

1. attr()，获取或设置节点属性，比如class、style等；
2. html()，text()，获得或设置节点的内容；
3. val()，获得或设置节点的value属性，比如文本输入框的value就是其中填写的内容。

这些操作只对选择器返回结果数组的第一项有效，如果结果超过一个，就要通过下标取出其中的DOM节点，直接修改innerHTML、innerText、style等属性。其实不用jQuery，也是可以操作DOM节点的，如果你愿意多敲几下键盘，使用getElementById()和getElementsByClassName()等函数，也可以达到同样的效果。

Bootstrap

之前完全没有接触过Bootstrap，这次是赶鸭子上架，硬着头皮去折腾，到现在也知之甚少。目前只用到了它的网格系统进行页面布局。这里我就不再献丑了。推荐看一下这里的教程。

前端调试

Firefox和Chrome是前端开发和调试的两大利器，两者都自带强大的开发者工具，比IE不知道高到哪里去了。个人更习惯用Firefox，用快捷键Ctrl + Alt + I打开开发者工具，里面有很多标签页，这里简单说几个我觉得对初学者特别有用的。

查看器（Inspector）用来查看页面上的元素，包括对应的HTML源码和CSS属性。我觉得这个对于初学者特别有用。学习阶段总少不了要去模仿，这个工具可以帮你快速定位到页面上的元素，查看对应的源码，便于学习。点一下左上角的箭头图标，还可以直接用鼠标选取元素，方便快捷。查看器里面还可以直接修改元素的style，用来试验风格和布局再好不过。

控制台（Console）是一个javascript的REPL，用来执行和调试javascript代码。平常调试C/C++代码，最简单粗暴的方式就是printf。在javascript里，也可以用console.log()直接打日志到控制台来调试。控制台共享了当前页面的上下文信息（包括页面引用的js库，比如jQuery），在这里执行javascript跟在页面上是完全一样的。所以在进行AJAX开发时，如果遇到某些不确定的用法，可以现在这里进行一下试验。控制台还有一个很有用的地方是，可以通过javascript的DOM操作修改页面元素的属性，在修改页面之前，可以用这种方式先预览一下效果。

网络（Network）面板用于监控浏览器的网络请求，这里可以看到每个HTTP请求和响应的详细信息，在调试AJAX的前后台交互的时候非常有用，可以直接看到请求的完整响应，不需要再用打日志这种笨办法。另外，还可以用这里的“编辑重发”功能，通过调整参数重发请求，来辅助后台问题的定位。

一些资源

关于Web开发的资源，首推Ｗ3School，其丰富的文档涵盖了Web开发的方方面面，有教程也有参考手册，还提供了自己动手实验的环境，堪称初学者的福音。另外我最近发现的菜鸟教程也很不错，上面的内容甚至比W3School还要丰富得多，连Go语言和Docker这些比较新的后台技术也有。Bootstrap方面，除了菜鸟教程，Bootstrap中文网也是很好的资源。