Node.js02--02

发表于 | 分类于 ， ， | 本文总阅读量 次
字数统计: 1.7k | 阅读时长 ≈ 6

代码规范

  • standard style
    • 细则
      • 使用两个空格进行缩进
      • 字符串使用单引号-需要转义的地方除外
      • 不再有冗余的变量-导致大量bug的源头
      • 无分号，要注意三种情况
        • 以（ [ ^开头的时候，则在前面补充一个分号避免发生一些解析错误
      • 行首不要以(，[,or^开头
      • 关键字后加空格if （）
      • 函数名后加空格function name（）
      • 坚持使用 === 摒弃 ==——但在需要检查null||undefined时可以使用obj ==null
      • 一定要处理node.js中错误回调传递进来的error参数。
      • 使用浏览器全局变量时加上window前缀：document和navigator除外
  • aibinb style

模板引擎不关心内容

模板引擎不关心你的字符串内容，只关心自己能认识的模板标记语法 在node也可以使用art-template模板引擎模板引擎最早就是诞生于服务器领域，后来才发展到前端

  • 使用步骤
    • 1、安装 npm install art-template
    • 2、 在需要使用的文件模块中加载art-template
      例如var template = require(‘art-template’)，使用require方法加载，参数中的art-template就是下载的包的名字，install的是什么就是什么
    • 3、查文档，使用模板引擎的API
      • 模板引擎的render方法需要接收的是字符串，所以我们需要把data二进制转为字符串，才可以给模板引擎使用
    • ```
      fs.readdir(wwwDir,function(err,files){
      if(err){
      return res.end('  jjj')
      }
      //这里只需要使用模板引擎解析替换data中的模板字符串就可以了
      //数据data 就是files
      //然后去你的temmplate.html文件中编写你的模板语法就可以了
      var html = template.render(data.toString(),{
      files:files
      }
      )
      })
      var template = require(‘art-template’)
      1
      +
      var ret = template.render(原始内容（会被替换）,替换对象)
    • var ret = template.render(‘hello {{ name }}‘,{
      name:’jack’
      })

服务端渲染和客户端渲染

服务端渲染就是模板引擎

  • 客户端渲染
    • 1、收到服务端响应的字符串了
    • 2、从上到下依次解析，在解析的过程中，如果发现ajax请求，则再次发起新的请求
    • 3、发送请求
    • 4、拿到ajax响应结果
    • 5、模板引擎渲染

至少经过两次请求，第一次请求拿到的是页面，第二次请求拿到的是动态数据，即页面结构和数据是分开传送和请求的
好处是会先看到页面，尽管页面里面没有内容，所以第一次给客户端以后客户端还要进行相关处理，所以会有利于用户体验，并且可以局部刷新

  • 服务端渲染
    页面+数据
    • 1、读取index.html
    • 2、模板引擎渲染，在发送给客户端之前，我在服务端就已经把inde.html渲染处理了

服务端渲染值请求了一次，请求一次服务端就把页面和数据一起发送给客户端，服务端渲染，相应的结果就是最终的结果，客户端不需要做任何处理

服务端不利于用户体验，因为会一下子全部加载完，不会有一个过度的效果，并且会有利于搜索引擎优化

  • 客户端渲染和服务端渲染的区别
    • 客户端渲染不利于SEO搜索引擎优化
    • 服务端渲染是可以被爬虫抓取到的，客户端异步渲染时很难被爬虫渲染的
    • 所以你会发现真正的网站既不是纯异步也不是纯服务端渲染出来的，而是两者结合起来
    • 例如京东的商品列表就是采用的服务端渲染，目的为了SEO搜索引擎优化
    • 而他的商品评论列表为了用户体验，而且也不需要SEO优化，所以采用的时客户端渲染

处理网站中的静态资源

  • 浏览器收到HTML响应内容以后，就要开始从上到下依次解析，挡在解析的过程中，如果发现：link、script、img、iframe、video、audio等带有src或者href(link)属性标签（具有外链的资源）的时候，浏览器会自动对这些资源发起新的请求。我们把这些资源请求内容称作为静态资源

  • 页面是一个请求，页面中的每一个资源也是一个请求。

  • 我们为了方便的同意处理这些静态资源，所以我们约定把所有的静态资源都放在public文件夹里面
    例如：public/css/main.css、public/js/main.js、public/lib/jquery.js这样子存放

    注意：在哪服务端中，文件中的路径就不要去写相对路径了。因为这个时候所有的资源都是通过url标识来获取的。我的服务器开放了/public目录。所以这里的请求路径都写成：/public/xxx ； /在这里就是根路径的意思
    浏览器再真正发送请求的时候会自动把地址网络地址拼接上。

    public整个目录中的资源都允许被访问

表单get提交

以前表单是如何提交的？
表单中需要提交的表单控件元素必须具有name属性，表单提交分为两种：
1、默认的提交行为
2、表单异步提交

action 就是表单提交的地址，说白了就是 请求的url地址
method 请求方法：get post

由于有一种表单提交内容会把内容包含在url上，所以，对于这种表单提交的请求路径，其中含有用户动态填写的内容，所以不可能通过完整的url去处理这个请求。

使用url.parse方法将路径解析为一个方便操作的对象，第二个参数为true表示将查询字符串转为一个对象（通过jquery属性来访问）

如何通过服务器让客户端重定向

1、状态码设置为302，表示临时重定向 statusCode
2、在响应头中通过Location告诉客户端往哪儿重定向 setHeader

如果客户端发现服务器的响应状态码时302，就会自动去响应头中招Location对应的url，所以就可以看到客户端自动跳转了

微博评论小功能实现步骤：
1./index.html
2.开放public目录中的静态资源
当请求/public/xxx的时候，读取响应public目录中的具体资源
3./post post.html
4./pinglun
4.1 接收表单提交数据
4.2 存储表单提交的数据
4.3 让表单重定向到 /
statusCode
setHeader

-------------本文结束感谢您的阅读-------------