前后端模板

前端模板

• 目的：显示与数据分离
• 用模板之前：在js中字符串拼接数据，每一部分都要进行逻辑的拼接以及元素的创建等，繁琐费时。
  

1.字符串模板引擎

• 原理：利用正则表达式识别模板标识，利用数据替换其中的标识符。
• 步骤：
  
  1. 利用正则分解出普通字符串和模板标识符
  2. 将模板标识符转换成指定的数据
  3. 生成待执行的语句
  4. 将数据填入执行，生成最终的字符串
  5. 将字符串写入页面

2.Dom模板引擎

Vue.js  angular.js 等MVVM前端框架自带的模板输出模块

以Vue.js为例，通过具有特殊前缀的HTML 属性来实现数据绑定，或者使用常见的花括号模板插值，或是在表单元素上使用双向绑定，数据的变化自动映射为视图的更新

    <span v-text="msg"></span>
    <span>{{ msg }}</span>
    <input v-model="msg">

在模板的编译过程中，Vue.js会为每一处需要动态更新的DOM节点创建一个指令对象。每当一个指令对象观测的数据变化时，它便会对所绑定的目标节点执行相应的DOM操作。

    <!-- 模板 -->
    <div id="app">{{ msg }}</div>

    //原生对象即数据
    var data={msg:"hello!"};
    //创建一个ViewModel实例
    var vm=new Vue({
        //选择目标元素
        el:"#app",
        //提供初始数据
        data:data
    })

渲染结果:

    <div id="app">
        Hello!
    </div>

Vue.js采用基于依赖收集的观测机制：
1. 将原生的数据改造成 “可观察对象”。将原生数据对象的属性改造为getter和setter，在这两个函数内部实现依赖的收集和触发，一个可观察对象可以被取值，也可以被赋值。
2. 在watcher的求值过程中，每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者，并成为当前watcher的一个依赖。
3. 当一个被依赖的可观察对象被赋值时，它会通知所有订阅自己的watcher重新求值，并触发相应的更新。

前端模板的优缺点

• 优点：在浏览器端完成字符串替换，把一些计算分摊到了客户端，减轻了服务器的压力
• 缺点：不利于SEO，搜索引擎无法抓取到页面的数据，如果用户禁用js，则数据没办法显示
  
  
  

后端模板

后端渲染，浏览器接收到的是呈现给用户的最终的页面。
后端模板是靠占位、替换拼装页面内容，大都是完整的html内容，而前端模板一般只是局部的片段，并且是靠Dom插入内容

优缺点

• 优点：数据已经渲染，页面静态化，利于SEO
• 缺点：占用服务器资源

Blade模板：

后缀名的修改：

找到app/Providers/AppServiceProvider.php

    use View;//顶部添加

    View::addExtension('html','blade');//在boot()方法里增加

模板继承

• @yield不可扩展，如果子模板中没有指定此区块的内容，则显示默认的内容，如果定义了新的内容，则显示定义的内容。
• @section是可以扩展的，如果使用了@parent关键字，父模板中的内容将会被保留，并扩展添加的内容进去。
• @section在父模板中的结束方式只能为@show，表明执行到此将section中的内容输出。而在子模板中@section有四种结束方式。
• @endsection，@stop，@append，以及@overwrite。前两个都是普通的结束标志，表明此section已经扩展结束，如果后续同名section还有扩展并且是以@endsection或@stop结束，则只有第一次的扩展生效。
• 如果以@append结束，则表明此section可以继续扩展，后续如果有对同名section的append扩展，则都生效。
• @overwrite 表明覆盖之前所定义的section，使用当前的。