前端-进击的巨人-青铜篇
Posted lt666
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端-进击的巨人-青铜篇相关的知识，希望对你有一定的参考价值。
从事前端有4年多了，经历了不少坑，也摸索了一些经验。既然是随笔，那就随便写写了。
按照农药的等级，依次是青铜、白银、黄金、铂金、钻石、星耀、王者。
以我现在的能力也就是黄金到铂金。那么写到哪算哪把。
既然这篇是青铜篇，那就是前端基础中的基础——html、CSS、javascript。
这应该算是前端入门必须的条件了。当然，如果只写静态页面，然后交给jsp、php。那么HTML、CSS基本就够了。
HTML是什么呢。官方说是超级文本标记语言(HyperText Markup Language)。用人话说，就是可以被浏览器读出来的编程语言。
如果你没有编程基础的话，打开这个连接http://www.w3school.com.cn/html/index.asp，从<head>、<title>、<body>这些基础标签学起。
当然，还有HTML5规范的新标签。比如<section>、<header>、<footer>等等
其实，HTML是个很容易入门的语言，HTML是骨架、CSS是皮肤、JavaScript是大脑。
1 <html> 2 3 <head> 4 <title>我的第一个 HTML 页面</title> 5 </head> 6 7 <body> 8 <p>body 元素的内容会显示在浏览器中。</p> 9 <p>title 元素的内容会显示在浏览器的标题栏中。</p> 10 </body> 11 12 </html>
这个就是骨架，上面代码来自http://www.w3school.com.cn/tiy/t.asp?f=html_basic
接着、再说说皮肤的CSS吧。
打开这个连接http://www.w3school.com.cn/css/index.asp开始学习吧。
CSS官方名称是层叠样式表（Cascading Style Sheets）
我的理解是，CSS是“静态化”的属性设置。为什么这么说呢。其实就是，对一个元素（比如一个div标签）的各种属性设置，通过一系列键对值（比如设置背景色属性为黄：background-color: yellow），让浏览器读这个设置，从而让这个元素（比如一个div标签）“渲染”（render）成这个元素对应的属性设置的样子。我为什么把“渲染”（render）这个词单拎出来呢。render这个单词会出现在现今所有的框架中，render就代表着把元素变成我们设置的那样。
前面说了，如果只编写静态页面的话，HTML、CSS基本就够了。如果涉及到交互（比如点击、按键等等操作）了，用什么捕捉或者说这些操作怎么和页面结合呢。
对，用的就是JavaScript。教程看这里http://www.w3school.com.cn/js/
如果有点编程基础的人看到这个名字，会猜想是不是和Java类似呢。答案是 X。JavaScript这个名字是跟风的，不明白的百度一下。
比如一个页面我们有个按钮要点击，点击后要有反馈。怎么实现呢。
来源于这里http://www.w3school.com.cn/jsref/event_onclick.asp
1 <html> 2 <body> 3 4 Field1: <input type="text" id="field1" value="Hello World!"> 5 <br /> 6 Field2: <input type="text" id="field2"> 7 <br /><br /> 8 点击下面的按钮，把 Field1 的内容拷贝到 Field2 中： 9 <br /> 10 <button onclick="document.getElementById(‘field2‘).value= 11 document.getElementById(‘field1‘).value">Copy Text</button> 12 13 </body> 14 </html>
这段代码的意思是，通过一个按钮点击后，把第一个input标签中的值Hello World! 复制到第二个input标签里面。
onclick这个属性就是连接页面操作者（就是你）和页面的一个属性。
另外，有个名词需要注意，表单（form），对就是这个词，对新手来说，这个词是啥啊。
用人话讲，页面操作者（就是你），需要把你想要告诉服务器的数据，这些数据所对应的页面元素的集合。
举个栗子，来自于http://www.w3school.com.cn/js/js_form_validation.asp
1 <body> 2 <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post"> 3 Email: <input type="text" name="email" size="30"> 4 <input type="submit" value="Submit"> 5 </form> 6 </body>
这段代码中的 <input type="text" name="email" size="30">元素 就是表单，你想告诉服务器的数据就是<input>标签里你输入的数据。
<input type="submit" value="Submit"> 这个是提交按钮，可以算是表单的一部分，也可以不算。因为某些场景，可能不是一个按钮提交数据，可能是个按键、拖拽等等。
青铜篇的最后，隆重推出一个万恶之源，什么东西呢，是的，jQuery插件。
解释为什么是万恶之源之前，先简要说明一下jQuery插件是什么。
教程看这里http://www.w3school.com.cn/jquery/
jQuery是一个优化的JavaScript的库，肯定有人问，库是什么？库就是根据原始编程语言，经过代码转化，变成一种易读、操作简化的原始编程语言进化版。
比如，原始JavaScript中，通过id获得对应元素的话需要
var x=document.getElementById("myHeader")
来源于http://www.w3school.com.cn/jsref/met_doc_getelementbyid.asp
但是同样的操作，用jQuery就变成了
var x=$("#myHeader")
是不是感觉又好懂，有简便呢。jQuery的优势就是对DOM的操作，什么是DOM呢？简单理解为嵌套的一个个元素标签。
下面，就说明为什么是万恶之源了，
从开始接触jQuery后，就会深深的爱上它。因为它几乎可以让我们做的我们想做的一切。
可为什么是几乎呢，因为代码复用的问题，对，也就是组件化开发。
代码量少的时候，或者说，业务流程唯一的时候。没有做同样事情的操作，自然jQuery就做到了我们想要的。
可是，可是，可是
如果有代码相同的业务流程呢。仅仅是多了几个新参数的时候。jQuery就会显得非常臃肿。尤其是涉及到DOM操作的时候，还需要看到底操作了什么，两个相同的业务流程有哪些区别。
比如，我有个页面有两个栏目，
第一个栏目中，先需要下拉列表选择省、市、区，然后点击确定，出现对应列表，列表的操作还会反选下拉列表省、市、区中的数据。
第二个栏目中，先需要下拉列表选择省、市、区、学校，学校还要选择有无分校的，然后再点击确定，出现对应列表，列表的操作还会反选下拉列表省、市、区、学校中的数据。
看，这两个业务流程有相同的部分，下拉列表选择省、市、区，这部分如果做成组件的话，这个组件可以输出省、市、区三个数据；
同样，把省、市、区三个数据输入到这个组件，下拉列表显示对应的省、市、区。
因为涉及到DOM操作，所以没有组件化的操作，就需要把数据和下拉列表元素对应起来。数据不能传错。而且代码冗长。
对的，每次需要把数据放在下拉列表元素中，都需要单独写一段单独的代码。你要修改这块，就需要通读整篇代码，把对应的代码都改才行。维护困难啊。这就是代码耦合性。
所以，组件化开发是成熟的编程方式。
对于JavaScript来说，
面向对象编程
就是这种成熟的编程方式。
面向对象技术：http://www.w3school.com.cn/js/pro_js_object_oriented.asp
也是白银篇的开始。
以上是关于前端-进击的巨人-青铜篇的主要内容，如果未能解决你的问题，请参考以下文章