Web开发

首页 » 常识 » 预防 » Web框架分析与搭建
TUhjnbcbe - 2024/3/4 17:08:00

一、框架的原理

1.提到框架的原理我们得先理解面对对象和对面过程,

(PS)不知不觉写了第四篇了,看过前几篇的应该都知道我不喜欢解释的那么官方细致,浪费时间,百度一搜就知道,我会参杂我所理解的和我所试验过的结果,

(1)面对过程

面向过程就像两个人做事,一个人(A)捏着开关,另外一个人(B)喊话,

程序员喊开,B就在中间喊1,A就打开开关,

程序员喊关,B就喊0,A就关闭

这就是二进制,也是布尔类型,只有对和错,0和1,对面对象编程就是程序员不断地喊开关,要执行一百次就喊一百次,(别说循环,我在讲对于对面对象,他就是这样的)如下图

(2)面对对象

面对对象编程可以理解为上下级,之前对面过程是一步一步的,现在到了面对对象同样是一步一步的,但是程序员不需要一个一个的喊了,程序员找来一堆人(A),一个人在中间传递信息给两个B,一层一层向上,最后程序员一句话就可以干完一件事,如下图

(3)框架的本质

框架就是这样,原生的代码,如面向过程,经过我们一系列的封装,变成了面向过程的代码,废话有点多了,这里就是框架的理解,下面开始正式讲解框架

二、前端框架

1.MVVM

(1)前端框架比较火的模式就是MVVM了,那MVVM是啥呢?

M:模型,你可以理解为一个人的大脑,也就是处理逻辑的地方

V:视图模型,就是用户能看到的地方,网页前端就是视图

VM:视图模型,他就是MV的粘合剂,不太懂没关系,下面要讲,你记住虚拟DOM就行

2.前端框架的变量名冲突

(1)写过前端javascript的小伙伴都知道,多个人开发就会遇到你创建了一个变量叫作ABC,然后他也创建一个变量ABC,最后的结果就是冲突报错,代码卡死,但是框架这玩意就是分享出去大家用的,如果冲突了体验效果就不好了

(2)解决变量名:对于变量名冲突的问题,我们可以巧妙的使用ES6的块级作用域解决,在方法内部创建的变量,方法外部是访问不到的,所以我们可以创建框架的时候先创建函数来存储我们框架的数据,以防跟外部冲突,不过我们需要先使用getter和setter来调用,话说不清,咱上图

变量名冲突解决

通过这个图可以看出,访问数据必须要经过我们内置的get和set

3.自建框架

(1)有了上面的隐藏变量我们就可以放心的随便创建变量了,接下来就是搭建虚拟Dom,虚拟Dom就是我们将Dom树复制下来,然后操作的时候不会直接操作Dom元素,在想要渲染的时候再去进行数据渲染,这样可以降低很多性能,也就是框架流行的原因之一,大概如下,

1)创建虚拟Dom,其中name为标签名,child存储子集元素或者dom元素

虚拟Dom

2)创建getter和setter方法

创捷getter与setter

3)创建渲染Dom的方法

渲染Dom

4)创建一个类来做框架主体,渲染之前记得先将body内部清空,防止多次渲染

防止Dom重复渲染

5)测试效果,创建了两个dom元素,用showDom方法渲染,后附带渲染效果图

测试与渲染结果结构效果图

4.npm发布

(1)大概搭建就是这么多,后面比如数据监听完成双向数据的话可以使用不可枚举的方法,更多的快乐就靠你自己了,但是搭建好了我们还需要发布到npm包管理工具,具体方法大家百度一下吧,大概就是下载node.Js,然后打开cmd命令行,npmlogin使用你的npm账号密码登录,最后npminit-y初始化项目,改一下名字后,npmpublish发布就行了

三、后端框架

1.聊完了前端框架咱们来聊一下后端框架,其实我并不喜欢前端框架,我比较喜欢引入script的方法,因为框架的搭建限制了我的操作(具体啥操作就不说了,容易被打),我觉得引入常用的操作,如后端数据获取后渲染在界面上,或者轮动图啊这些,所以这就是我比较喜欢后端的框架的原因

2.MVC

对前端的MVVM来说,后端的MVC和前端差不多,不讨论谁抄袭谁,容易被打,

1)M:模型,逻辑处理(数据库等)

2)V:模板视图

3)C:控制器(路由等)

后端框架大多是一体制的,上面介绍的MVC就是我最喜欢的Laravel框架(我的评价:优雅而不过时),当然,java的springboot也不差,不过对于我来说,用springboot就是一种难受的工作,用laravel就是享受,还有不得不提的wordpress框架,一个强大的内容管理系统,喜欢的朋友可以去自行了解,

4)后端框架大概就是

在模型处写代码处理参数,接收参数,对数据库操作等,

在模板视图进行渲染,大多数的后端框架都有自己的模板视图

在控制器制定路由,说人话就是网址的后半截

5)因本文过长和时间原因,我就不说后端的实现以及代码的示意图了,如果有感兴趣的小伙伴在评论区留言想看后端框架解析,这么久都没有互动我很沮丧,啥时候有人留言我啥时候在更新后端的框架解析和代码,没人回复我就跳过

四、新框架的存在是否是在造轮子

其实我对这个问题研究很久了,因为我感觉框架是不是有点太过于饱和了,就水平来说,框架其实给我们带来的好处很大,但是带来的困惑也不小的,就前端axios(非框架)来说吧,我很喜欢axios,但是学习成本也是不小,起码得学吧,

明明我原生也可以做到呀,我自己封装也可以啊,奈何你去面试可能人家就会问你会不会,一脸囧,所以我觉得我们中国或许可以自己建立自己的约定,对于一些重复的框架采取择优方式,针对咱中国来做,或与对外交流不足,但是我们可以在其一的方面快速发展,那些重复的造轮子真没必要存在以及浪费时间

Ps:之前说过发表框架的原理,现在发出来了,因为时间紧迫,个人时间不是很充裕,或者说个人没

1
查看完整版本: Web框架分析与搭建