返回顶部

html、css及javascript三者关系理解。浅谈对mvc的理解

来源:无 发布时间:2016-03-05

我一直想总结html、css、js三者之间的关系,因为只有这样我才能更加理解他们,而不会像背公式一样机械式的使用他们,为此,我在这里仅仅记录一下目前自己对它们之间的关系的简单理解,后面还会结合讲一下对mvc的理解。

html

html是一种“标记”语言,这样说,好像跟教课书上说的一样,没错,那么具体怎么理解他的“标记”性呢!打一个比方,你在某购物网站上看到了一本你很喜欢的书籍,于是你买了下来,我们就以这本书为例子,你可以想象一下,如果没有书本这个“实体”,那么它里面的内容、故事你是没有办法知道的。怎么理解这层概念!也就是说,你喜欢的书中的内容最终是靠书本这个“实体”来呈现的,没有所谓书本的纸,恐怕书本里面的内容再牛逼,恐怕也到不了你眼前!ok!那这个故事怎么跟我要讲的html关系联系起来呢!很明显,他们之间具有共性,比如书本具有“被放置性”,“描述性”,“构造性”,“载体性”。这些性质放到html理解就是没有html这种标记语言,你的网页要展示给用户的东西就没有被放置的“载体”了,浏览器也不知道你放的这个东西是什么了,它只知道你放了很多东西在里面。你的css文件、js文件就像一个没有骨架的软体一样,没有了依靠的地方!所以,html你可以理解为一个“载体”。

css

css控制你网页的显示层,具体来说,你的网页最终怎么的效果显示给用户,都由这个老哥来控制,最开始,没有css这个东西的时候,html本身也带有一种“表现性”的体质在身体里面,可是这种性质非常脆弱。比如最开始网页页面要实现一些特殊的字体效果,可能需要套很多层font标签,因为font具有显示性的效果,可是一个简单的效果,你却套了很多层font标签,现在看来,这样的html文档真的会让人头疼,第一你js控制的难度大了,第二,加了很多无意义的font标签,文档难以阅读。可是有了css之后,这哥们的把html怎么显示具体用对应的一个属性单独出来了,从此你不会再写很多font标签了,而你可能仅仅需要一个类名,设置几个属性解决显示问题了。css分离了html“承载数据”和“怎么显示数据”两个功能,让你更专心投身的其中一个功能中去,这样开发更简单、更快、更轻松。可是css非常具有依赖性,也就是它自身要依靠到html上面才能实现他的功能,没有了html的“肉体”,它仿佛就没有了施展才华的空间了。所以可以这样理解:css是一种依靠html文档而存在的描述呈现效果的力量。

javascript

javascript本身是一种独立html的脚本语言,只不过借助浏览器强大的js的编译引擎,跟html、css形成了很牛逼的集合。这语言本省很灵活,语法很宽松,入门起来也较容易,因此得到很多编程同仁的青睐,而且现在随着nodejs开发的流行,未来js在后端开发中也会大有用武之地。ok,怎么理解js和html、css之间的关系!js控制了页面中的交互层、动态呈现效果的控制。比如当用户点击了一个按钮,js监听到了用户的这样一个行为,然后它会按照预先的流程执行通知html、css怎么做,比如提交表单,隐藏一个块,改变一个元素的样式等等。再举一个例子,我相信更助于对于它们之间的关系的理解!我曾经写过不下20遍网页中轮播广告的代码,写到后面,我感觉js在轮播过程中无非充当了一个自动执行的工具而已,如果你不用js,其实你可以慢慢的在控制台慢慢改变的样式的一个属性,只要你愿意坚持和达到一定的频率、速度,那么你就可以充当一个人工的js了,所以我想说的意思就是,js只是做了一件自动定时改变css的一个属性的事情,最后改变了页面的视觉效果,也就是js这一步动作的前提是你的html和css已经搭建好即将被js控制的“房子”了。从这里出发还可以写一篇怎么写页面流程的心得了。所以可以这样理解:javascript控制了你的网页与用户的交互行为。它充当着html、css两个“小弟”的“大哥”。

三者之间的关系

比较“白话”的理解就是:html承载数据,css实现数据具体呈现给用户的视觉效果,javascript充当着用户和html、css之间交互的桥梁,并且它还负责安排了html和css这两个“小弟”怎么做事!比如让html的某个节点删掉、让css的某个属性改变。

从html、css、js的关系谈mvc的认识

在我刚开始找工作的时候,就听见mvc这个概念了,因为那个时候想找后台方面的工作,然后别人问我什么是框架,那时候的理解说真的对它的理解一直是云里雾里,我一直以为mvc是一种开发框架。但是到最近,我觉得mvc并非一个框架这么简单,我觉他更像一种思想,或者说是编程领域中一种高效的“设计模式”,不过我觉得用“设计思想”的说法更为精妙。那我们从这里理解就是:html复杂装载数据,可以理解为m(model)层,css用于呈现数据,可以理解v(view)层,js用户控制他们,可以立即为c(control)层。他们分工明确,各自做好自己分内的事情。那么在设计开发过程中,这样做有什么好处呢?我觉得可以从如下三点说明:

第一:分离了你的工作,让你更集中精力做其中一件事情,比如专注html文档结构的合理性、css的复用性亦或js代码的高效性。

第二:正因为分离js、css、html三者之间的关系,削弱了他们之间强耦合性,从而在开发过程中,后期维护、调试过程会更加轻松。比如,当你用js给一个dom附加一个类名的时候,与此同时,你给另外一个dom节点以用js直接改变样式的方式实现同样一个视觉效果的时候,后期如果出现问题,你会发现后面一种方法查错比较困难,因为后面一种方式其实币前一种方式耦合性更强,查找问题的分界点变弱了,为了便于后面理解这层意思,我把大概代码说明如下

1、<div id="elm1" class="class1"></div>,你的想法是想给id为elm1的元素添加一个类,用于实现一个字体颜色为color1的效果。

2、document.getElementById("elm2").style.color = "color1",你以js直接改样式的方式实现了同样的效果

两种方式,后面一种后期更难维护,可以想象查找样式类比查找dom的js属性更容易些。也许,在这里问题可能还不是很明显,只是说明了强耦合性所带来的问题。

第三:我觉得是最重要的一点了,因为这些东西分离了。所以你可以复用了,不会像以前那样,一个页面的只能用在一个页面上了,现在还可以把js、css用到其它html页面上了,增加了开发效率、减小了工作量、便于管理。

这里只是说了mvc很浅显的一部分,更高深的部分,亦或后台的mvc思想,现在尚不能完全领会。希望借此后期继续了解!

持续更新中…………………………