网站代码需要注意什么问题,爱站网在线全集私人影视,一般做网站图是多大的像素,怎么学好网页设计在MVC模式中#xff0c;随着代码量越来越大#xff0c;主要用来处理各种逻辑和数据转化的Controller首当其冲#xff0c;变得非常庞大#xff0c;MVC的简写变成了Massive-View-Controller#xff08;意为沉重的Controller#xff09;
我曾经接手老项目#xff0c;sprin… 在MVC模式中随着代码量越来越大主要用来处理各种逻辑和数据转化的Controller首当其冲变得非常庞大MVC的简写变成了Massive-View-Controller意为沉重的Controller
我曾经接手老项目springMVC Hibernate技术栈更能体现朴素的mvc其中有些controller层代码8000行一个方法体1000行。
在使用Hibernate\mybatisPlus\Spring data GPA这种完全的ORM框架、且不使用三层架构的项目中controller过大这一缺点更加明显。因为了三层架构中service层分担业务逻辑。而由重量级ORM框架直接生成的service层只做与实体有关的、对实体数据部分的程序逻辑。
hibernate主要是要在controller通过前端http传来的参数动态拼接sql来处理逻辑如果view的参数直接传到service处理相当于直接和model接触了 MVC MVC三层架构
所以有人想到把Controller的数据和逻辑处理部分从中抽离出来用一个专门的对象去管理这个对象就是ViewModel。当人们去尝试这种方式时发现Controller中的代码变得非常少变得易于测试和维护只需要Controller和ViewModel做数据绑定即可。
3.开发解耦(举两个例子) a.一人负责逻辑实现、另一人负责UI实现 b.敏捷开发时会发经常发不是等后端做好了接口我们再去开发不过在没有接口的情况下通常我们可以把Controller和View完成。
将整个前端页面分成ViewControllerModal视图上发生变化通过Controller控件将响应传入到Model数据源由数据源改变View上面的数据。
通过数据来驱动视图开发者只需要关心数据变化DOM操作被封装了。 但这是mvvm的特性吗封装dom?这么一来只有浏览器前端可以用mvvm了?
可以看到MVVM分别指ViewModelView-ModelView通过View-Model的DOM Listeners将事件绑定到Model上而Model则通过Data Bindings来管理View中的数据View-Model从中起到一个连接桥的作用。
一、ViewModel将改变传给ControllerController定位到需要修改的View部分并改变这部分 二、ViewModel包揽了Controller的数据处理功能之後由于Controller的存在原本的一个大视图的控制与处理被Controller切割成了很多小的ViewModel和Model的编写问题每一个View、ViewModel和Model组成了一个单独的单元问题规模变小问题就更容易处理了 三、数据绑定是将视图中的某个小组件(View)、小组件的处理函数(ViewModel)、小组件相关的数据(Model)互相绑定起来。原本大Controller的处理是收到一个事件後Controller需要从整个Model的顶端一层层下来找到对应的数据进行计算计算完成後又从document对象上一层层找下来找到对应的小组件进行修改。每一个数据查找和视图修改操作都需要从全局空间找下来。进行数据绑定之後所有的这些都在局部空间操作不再经过全局空间所以代码看起来就舒服很多 分层的时候是不是不应只看到组件而是从逻辑上把另一方的接口也算上如数据层是数据库缓存实体model的话还算上mapper操作和service逻辑 MVVM用ViewModel层代替了controller mvvm目前只有B端资料
VUE实现原理
三个核心点
响应式vue如何监听data的属性变化模板解析vue的模板是如何被解析的渲染vue模板是如何被渲染成HTML的
响应式
对于MVVM来说data一般是放在一个对象当中就比如这样
var obj {name: zhangsan,age: 25}当我们访问或修改obj的属性的时候比如
console.logobj.name //访问obj.age 22 //修改但是这样的操作vue本身是没有办法感知到的那么应该如何让vue知道我们进行了访问或是修改的操作呢 那就要使用Object.defineProperty
var vm {}var data {name: zhangsan,age: 20}var key, valuefor (key in data) {(function (key) {Object.defineProperty(vm, key, {get: function () {console.log(get, data[key]) // 监听return data[key]},set: function (newVal) {console.log(set, newVal) // 监听data[key] newVal}})})(key)}通过Object.defineProperty将data里的每一个属性的访问与修改都变成了一个函数在对象的getter和setter方法中我们即可监听到data的属性发生了改变。
模板解析
模板本质上是一串字符串它看起来和html的格式很相像实际上有很大的区别因为模板本身还带有逻辑运算比如v-ifv-for等等但它最后还是要转换为html来显示。
div idappdivinput v-modeltitlebutton v-on:clickaddsubmit/button/divdivulli v-foritem in list{{item}}/li/ul/div/div模板在vue中必须转换为JS代码原因在于在前端环境下只有JS才是一个图灵完备语言才能实现逻辑运算以及渲染为html页面。 图灵完备语言
这里就引出了vue中一个特别重要的函数——render
render函数中的核心就是with函数。 with函数将某个对象添加到作用域链的顶部如果在 statement中有某个未使用命名空间的变量跟作用域链中的某个属性同名则这个变量将指向这个属性值。 举个例子
var obj {name: zhangsan,age: 20,getAddress: function () {alert(beijing)}}function fn1() {with(obj) {alert(age)alert(name)getAddress()}}fn1()with将obj这个对象放在了自己函数的作用域链的顶部当执行下列函数时就会自动到obj这个对象去寻找同名的属性。
而在render函数中with的用法是这样
div idappdivinput v-modeltitlebutton v-on:clickaddsubmit/button/divdivulli v-foritem in list{{item}}/li/ul/div/div
// 对应的js文件var data {title: ,list: []}// 初始化 Vue 实例var vm new Vue({el: #app,data: data,methods: {add: function () {this.list.push(this.title)this.title }}})with(this){ // this 就是 vmreturn _c(div,{attrs:{id:app}},[_c(div,[_c(input,{directives:[{name:model,rawName:v-model,value:(title),expression:title}],domProps:{value:(title)},on:{input:function($event){if($event.target.composing)return;title$event.target.value}}}),_v( ),_c(button,{on:{click:add}},[_v(submit)])]),_v( ),_c(div,[_c(ul,_l((list),function(item){return _c(li,[_v(_s(item))])}))])])}在一开始因为new操作符所以this指向了vm通过with我们将vm这个对象放在作用域链的顶部因为在函数内部我们会多次调用vm内部的属性所以使用with可以缩短变量长度提供系统运行效率。
其中的_c函数表示的是创建一个新的html元素其基本用法为
_c(element,{attrs},[children...])其中的element表示所要创建的html元素类型attrs表示所要创建的元素的属性children表示该html元素的子元素。
_v函数表示创建一个文本节点_l函数表示创建一个数组。
最终render函数返回的是一个虚拟DOM。
渲染为html
模板渲染为html分为两种情况第一种是初次渲染的时候第二种是渲染之后数据发生改变的时候它们都需要调用updateComponent,其形式如下
vm._update(vnode){const prevVnode vm._vnodevm._vnode vnodeif (!prevVnode){vm.$el vm.__patch__(vm.$el,vnode)} else {vm.$el vm.__patch__(prevVnode,vnode)}
}function updateComponent(){vm._update(vm._render())
}首先读取当前的虚拟DOM——vm._vnode,判断其是否为空若为空则为初次渲染将虚拟DOM全部渲染到所对应的容器当中vm.$el若不为空则是数据发生了修改通过响应式我们可以监听到这一情况使用diff算法完成新旧对比并修改。
拓展
更新节点
Vue 节点中更新节点内容可以使用两种方式
在组件内部监听节点事件在外部触发事件。使用 Pinan,Vuex 等状态管理器
