疾风式全栈教程(7)-网页与web之前端

让我们再一次回到网页上. 假设我们的html和css都写好了, 也正常引入了, 在浏览器里看的很不错了. 怎么样可以放在网上让大家都看到呢. 当然不会是用QQ传过去, 也不是发到群文件里. 我们需要一个网络上能访问到的服务器.

服务器有自己的IP地址, 也就是一串数字, 为了方便记忆也会有对应的域名, 就是那一串字母, 比如www.qq.com 我们在浏览器里输入服务器的域名, 浏览器就会帮我们查到对应的IP(这就是DNS), 根据IP找到那台服务器, 把我们放在上面的html和css文件下载回来(实际是先下载html, 遇到里面的link才去下载对应的css, 在自己电脑上也是这个过程), 我们就可以在浏览器里看到了.

额 可是我们没有服务器怎么办呢, 这个问题我们以后再说, 总之肯定会有办法, 无非是在是否花钱和是否麻烦之间平衡了. 现在我们要解决的问题是, 如果网页只是一些固定的内容, 看一两次就会腻了, 我们想让固定的页面添加一些活动的内容. 比如加一些类似if else或者循环之类的东东, 让网页也能变化起来.

当然了, 我们可以手动修改html, 完成之后再上传到服务器上, 把原来的替换掉, 就像我们在自己电脑上修改调试一样. 这是最基本的办法. 不过我们总想有一些更简单(更折腾)的办法. 让电脑帮我们去改.

这里也有两种方案, 一种用现成的软件完成, 比如CMS系统之类的, 我们只是操作软件, 另外一种就是自己写代码完成. 这两种方式都有公司在采用. 用现成软件的工作岗位叫运营, 而自己写代码的岗位叫开发.

我们现在重点关注开发, 运营的事以后有机会再说. 我们看到网页上, html是不会动的, css可以有一部分动的效果, 比如伪类啊, 动画啊. 但是毕竟css是专注于样式的. 要在网页上用代码写出真正的动态效果, 我们还是需要javascript. 现在的浏览器基本上都支持js, 也只支持js. 所以我们也省心, 不用想其他. 没有选择就是最好的选择.

在编辑器里新建一个扩展名为js的文件, 把我们以前写的js代码粘贴一段进来. 保存之后在html里加一个script标签, 属性src写上js文件的路径. 用浏览器打开html, 看到js运行了, 跟我们以前直接在console里输入一样. 就是这么简单.

DOM

之前我们讲了代码运行环境很重要. 在浏览器中运行的js代码, 实际上可以使用两个环境中的内容. 一个是标准的es环境. 另一个是浏览器提供的dom环境.(bom的意思感觉类似,而且我们关心使用,不关心理论上的细节区分) 实际上这是两个标准, 只是现在的浏览器都支持这两个标准, 各个浏览器还会提供一些自己特色的东西, 不过如果我们控制不了用户用什么浏览器的话, 还是尽可能用标准的, 一般都够用了.

了解环境中提供了哪些内容, 一方面可以看标准看文档, 另一方面可以直接在浏览器的console中尝试体验. 在console里输入window, 然后再输入一个点, 就会把window下面的所有对象都提示出来, 从顶级的window开始, 所有内容一个一个看一遍, 哪怕只是有个大概印象, 都可以出去冒充高手了. 记得我当年刚接触电脑的时候, 总是很好奇, 里面到底装了些什么东西啊, 看起来这么强大, 我就每天待在机房一台没网的电脑上, 挨个文件夹打开看, 找那些感觉有意思的就点开试试. 然后大家都很很好奇, 别人去机房都是上网, 这个人每天在一个没网的电脑上干啥呢. 这习惯到今天也还保留着, 每次安装一个新系统或软件, 总要打开安装目录看看, 有哪些文件夹, 有没有什么有意思的文件. 看的多了, 也就明白, 再厉害的软件, 也是由一堆文件组成的. 在修改某些配置或者环境出问题的时候, 直接从相关文件入手, 可能比看文档或者搜网络更直接.

window下最重要的对象就是docunment了, 基本上页面中我们关心的内容都在他里面. 所谓的dom, 其实就是把我们用html写的那堆标签, 用js的方式表现了一遍. 所以我们要修改页面, 就调用document的方法直接修改dom就好了. 浏览器会帮我们把修改的内容显示在页面上.

而我们所说的修改, 大致一分类, 无非就是增删改查四种. 都有对应的方法.

我觉得在外观上一眼扫过去, 这些方法有两个特点, 一个是很多以document开头(图片中省略了), 另一个是名字比较长. 所以很多时候人们为了方便, 会用jquery. jquery的方法也是两个特点, 多数以$开头, 名字比较短. 如果你扫一眼代码, 看到很多$, 基本上你就会在script那里看到一个jquery的引入.

当然, $不是jquery的专利, 很多其他js工具也用$, 甚至PHP里, jsp的el表达式里, 甚至es6和kotlin的模板字符串里, 都用$. 如果你想让什么东西显得高大上, 与众不同, 就可以加个$. 下回你在什么网站注册的时候, 如果提示用户名已被注册, 就可以试试加个$, 瞬间就会感觉高大上了. 哈哈 不过我也没有试过, 不知道有没有这样的用户名.

不过在当今的js世界里, 存活下来的, 最常见的$还是jquery. 很多时候你会发现, 你见$的次数比见document还要多, 因为用jquery确实是方便很多, 真的应该向强大的jquery致敬.

引入jquery当然可以在官网下载, 然后复制到自己的电脑或服务器上, 不过现在更流行的方法是使用cdn. 什么是cdn呢, 我也没理解清楚, 感觉自己上学那时候好像没接触到这个词, 现在感觉到处都是了. 反正我觉得就是当免费的网盘用就可以了.

增删改查, 改改属性, 似乎dom也就这样了. 换了jquery, 少打几个字母, 不过干的好像还是这些事. dom确实是一个无聊的东西. 唯一感觉比较重要(好玩)的就是事件了. 可以在网页上处理各种事件, 这是真正有意思的地方.

我们都可以处理一些什么事件呢, 我感觉无非是分为两类, 跟用户有关的事件, 和跟浏览器(页面)有关的事件. 用户事件具体来看就是鼠标和键盘事件, 今天这还是我们跟电脑交流的主要方式, 麦克风, 摄像头, 甚至意念控制, 都还没有在浏览器中应用起来. 不过简单点也好, 我们只要关注用户点了鼠标, 或是按了键盘就行.

跟页面有关的事件, 包括页面加载, 页面元素改变之类.

具体的事件列表可以自行搜索或在w3c网站查看.

处理事件, 首先需要绑定. 也就是这个事件跟哪个页面元素相关. 有些事件是和全局相关的, 就可以绑定在window或docunment上, 比如页面加载事件, 有些只是关注某个元素, 比如, 某个按钮点击了之后执行的操作, 就绑定在该按钮的点击事件里.

绑定的语法, 也可以用dom原生提供的, 不过写起来确实麻烦, 所以很多都是用jqeury. 其实主要是明白这种意思就好, 不管写法怎么变, 要做的事都是一样的. 实在不行就copy一份改改, 或者照着写就行了. 后面我们会讲vue和微信小程序的写法, 这应该是未来一段时间的主流.

绑定的事件处理函数中可以得到一个参数, 就是事件对象, 从这个对象可以获得事件和当前元素的信息.

事件处理还有一些要了解的机制, 就是常说的冒泡之类的. 而更多时候我们关注的是怎么阻止冒泡, 也就是不要让事件扩散, 波及到其他不相关的内容. 调用:

event.stopPropagation()

而阻止dom元素默认触发的事件用:

event.preventDefault()

如果实在搞不清的话, 就把这些方法都试试, 看看效果. 哈哈 其实意思还是可以理解的. 主要是为了限制影响的元素范围. preventDefault取消浏览器默认处理. vue的文档对这几个方法归纳的很好, 也提供了相应的简写. 具体这方面的细节可以搜索网络或者参考经典书籍:javascript权威指南.

AJAX

哇 我们现在可以用js进行运算, 也可以用事件处理交互, 在页面上显示结果了. 还差什么呢. 想想我们在最开始讲的, 计算机的四大部分, 处理(包括运算和控制, 控制可以理解为高阶运算), 交互(输入和输出), 存储和传输. 前两个我们基本都有了. 但是我们发现一个问题, 我们现在依然只能获得自己页面内的信息, 要么写在html里, 要么写在js里. 说的不好听一点, 只不过是把html里的内容用js的格式重写了一遍而已.

当然, 不要小瞧这种重写, 很多时候, 同样的内容, 换一种方式写出来, 就会获得不一样的能力. 现在流行的很多前端技术, 也就是在尝试用各种方式写html而已. 比如, react的jsx, vue的模版, 还有pug等模板引擎, 当然也可以把php, jsp这些老一代的技术算上.

但是我们还需要更多的信息来源, 要有机会和外面的世界交流. 我们需要获得联网的能力, 和存取数据的能力.  这里我们先关注联网, 关于数据的存储我们放在服务器部分讨论. 当然现在的浏览器也都提供了存储少量数据的能力, 甚至读写电脑上的文件. 但是我们都统一放在以后讨论吧.

互联网是一个丰富多彩的世界, 信息多种多样, 我们怎么才能获取到这么多丰富的信息呢. 当然我们打开浏览器, 访问各种网站, 就能看到很多信息. 但是我们想让自己的页面和这些信息有关, 应该不会是自己去复制粘贴(不是绝对不可能, 很多时候你会发现复制粘贴是最简单直接有效的方法). 但是我们想通过代码去获取信息, 就需要用用到浏览器提供的方法了, 有个对象叫XHR, 到今天这是我们在网页中获取外界信息最主要的方法. 当然还有过去使用的古老的iframe, 以及现代使用的websocket技术. iframe大家可以自己搜索了解, websocket我们以后介绍. 这里我们只关注这种被成为 ajax 的技术.

这个名字的最后那个x就是XHR, ja表示javascript. 而a表示异步. 什么是异步呢, 这其实是个比较深刻的问题, 在计算机技术的很多场合你都会见到异步. 这里的异步, 简单的解释, 同步的方式就是顺序执行, 打开网页, 加载完成, 观赏网页, 是顺序的, 而异步就是非同步, 打开网页, 显示出一部分数据, 观赏网页, 同时用js在幕后继续请求数据, 数据返回后显示出来, 用户就可以看到更新后的网页. 不用双方互相等待, 而是时间交叉, 在不同的地方, 通过不同的对象发生, 这就是一般说的异步.

其实用起来也还是挺简单的. 仍然用jquery吧, 写起来简单一些. 指定地址, 参数, 给一个处理函数就可以了. 处理函数那个参数就是返回的结果, 包含了请求的数据内容. 这个数据就可以用来修改页面, 以我们想要的方式显示在页面上了.

$.get("https://www.jianshu.com", data => {

  console.log(data)

})

get是最简单的请求数据的方法, 关于其他方法我们以后会讲.

还有一个问题, 就是地址的限制. 浏览器出于安全考虑, 只允许网页通过XHR请求跟自己同一服务器上的地址. 这就是著名的跨域问题. 怎么解决呢, 可以有各种高招(歪招):

如果只关心自己这儿能解决, 启动chrome浏览器的时候, 加上一些参数, 就可以绕过这个安全检查了. 不过这方法貌似仅限于程序员用, 不太可能让用户都去学这么'科学'的上网方式.

管不了用户, 那就管服务器吧, 服务器上使用nginx配置转发, 可以将其他地址的内容转到同一地址下发回来. 浏览器不知道这些事, 只看到确实是同一个地址, 就可以通过了. 关于nginx转发的配置我们以后还要讨论.

这两种方法相对简单, 不用改代码. 另外一种比较正式的解决方法就要在代码里处理了. 就是CORS协议. 服务器端使用不同的语言环境开发的话, 具体改法也不一样.

采取什么解决方案, 根据各方面情况综合确定. 我喜欢在nginx里转发, 性能高, 配置也不复杂. 而且nginx很轻巧, 安装包10M左右, 运行占几M内存. 要是其他软件也都能这么轻巧节约该多好啊.