2018年六月第一周

【相关知识点可能表述不准确，不建议抱着学习态度的人仔细看】

有位老师说过，要想成为大牛，做好日常的总结是很有必要的，就像小学生写日记最初是为了锻炼写作能力，思维逻辑能力，以前我也是写日记的，上大学以后写的不多了，更多是记录自己的梦境，记录一种不一样的潜意识创造。但是现在为了实现技术的提升，我决定以后每周一篇技术性文章或者心得体会。只是算自己的成长记录吧。

前端开发的知识点很庞大，会有一种什么都要懂点的错觉，日常也是做着做着东西就遇到自己不懂，以前没接触过的新领域，查资料，加班研究的时候会有种回到了高三的感觉。前端这个行业，前三年都是入门，所谓的前端入门简单，好操作易上手我觉得都是.........胡扯，反正我个人的学习并不是那么简单，作为计算机专业的学生，依旧觉得从事计算机行业是需要很大的勇气的，因为知识更新迭代快，上班相对枯燥（除非是热爱编程，对敲代码有着超凡的热情，比如我表弟）熬夜加班都是日常，女孩子从事这个行业少不是没有原因的。我是抱着修行的态度来磨练自己的，能否飞仙羽化就看缘分了。

说了两段题外话，现在进入正题吧。

本周主要的点儿是前端开发的必备法宝 Ajax和一个UI框架Bootstrap。ajax本质是从服务器（后台）获取想要的数据显示在前端，数据类型有：json,php,text等。Ajax是 Asynchronous JavaScript + XML 的简写。指一种创建交互式（前端和后台，数据之间的传输）网页应用的网页开发的技术。通过异步模式(目前主流JSON创建对象，方便高效)，提升了用户体验。优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大量用户下的服务器负载。Ajax最大的特点就是局部刷新。Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)。

以下是Ajax中的一些基础，基本上掌握封装和接口的链接，整体就没什么可说的了......当然这只是初步的一个应用。

创建Ajax对象
new XMLHttpRequest();

new ActiveXObject('Microsoft.XMLHTTP') //IE6

open()
xhr.open('get', 'demo.php', true); //相对路径，对于 demo.php 的 get 请求，false 同步
三个参数：要发送的请求类型 (get 、post)、请求的 URL 和表示是否异步
get : if(obj.data){
xhr.open("get",obj.url+"?"+str,true); //？是get获取数据的语法，通过url
}else{
xhr.open("get",obj.url,true);
}
xhr.send(); //发送请求send ( )
Post：xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send(data);

php文件作为数据库内有内容并且有输出才能被封装后使用（登录注册，不需要跳转页面，数据存储在后台）
ajax接收后端返回数据的事件是onresponse

接收服务器返回的信息 onreadystatechange

readyState （Ajax内部的状态码）从aja跟服务器建立链接开始的整体状态
0 请求未初始化 1 服务器连接己建立
2 请求已接收 3 请求处理中
4 请求完成，响应就绪

status HTTP 状态码
常见状态码整体状态中的细节状态
200 - 请求成功
301 -Moved Permanently 资源（网页等）被永久转移到其它URL
304 -Not Modified 使用缓存文档
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
状态码分类
1**信息，服务器收到请求，需要请求者继续执行操作 2**成功，操作被成功接收并处理
3**重定向，需要进一步的操作以完成请求 4**客户端错误，请求包含语法错误或无法完成请求
5**服务器错误，服务器在处理请求的过程中发生了错误

用到Ajax的地方太多了，举几个例子。百度的搜索框的自动填充功能，注册判断用户名是否重名，点击“更多”加载更多数据，点击“换一批”实现局部更新数据，瀑布流，即时聊天.......等等等等。

接下来是Bootstrap,来自百度的概念介绍【Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。】。这个东西用起来很简单，前提是你对HTML和css有了解，玩儿过。照着官方网站( https://v3.bootcss.com/css/ )给的使用手册先配置，然后直接复制粘贴代码到HTML文件里，使用人家设置好的类名就哗哗的能用了，从按钮到footer，应有尽有，你也在此基础上二次开发........官网给的很多优秀参考样例网站，实话实说我觉得，好看的，没有......所以吧，这个web框架可以用，但是基本也就是企业后台或者后台测试了，正儿八经前端写个这不现实，UI毕竟不是吃干饭的，他们会设计各种你想得到想不到的奇思妙想让你去实现，做的又美又实用（微笑脸）就是我写着糟心。

好了，贴一段bootstrap框架中的几个简单的组件代码，今天的伪技术贴到此结束。人生的真理是十二点之前睡觉，不要被公司压榨，健康最重要。

<table class="table table-bordered table-striped table-hover">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="success">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="danger">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="warning">
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</button>

以下是基于bootstrap的一个小demo，记录错题，心得，查看错题的一个模块

</head>

<body>
<div class="container-fluid">
<h3 class="wq-title">
<span class="logo">
<img src="http://www.du.com/images/new_logo.png" alt="">
</span>
易错内容
<button type="button" class="btn" data-toggle="modal" data-target=".wq-add">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
添加错题
</button>
</h3>

<div class="modal fade wq-add">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<h4>请详细填写重点信息:</h4>
<div class="form-group">
<label for="wq-content">易错内容</label>
<input type="text" class="form-control" id="wq-content" placeholder="易错内容" value="闭包">
</div>
<div class="form-group">
<label for="wq-where">错在哪</label>
<textarea id="wq-where" class="form-control" rows="2" placeholder="请详细描述错误位置" value="闭包的原理略有模糊现在已经了解"></textarea>
</div>
<div class="form-group">
<label for="title">你的想法</label>
<textarea id="wq-idea" class="form-control" rows="2" placeholder="你的感悟" value="闭包利用了垃圾回收机制，在每个函数执行的时候，都会产生一个活动对象，这个活动对象会在函数执行结束之后删除，但是内存的垃圾回收机制会保留已经储存的数据，该数据可查询，闭包就是利用这个原理对已经删除的数据进行查询"></textarea>
</div>
<div class="text-center">
<button type="button" class="btn btn-success" data-dismiss="modal" id="wq-save-question">提交</button>
</div>
</div>
</div>
</div>

<div class="row">
<table class="table table-bordered table-hover wq-main-table ">

<thead>
<tr>
<th class="col-md-1 text-center">#</th>
<th class="col-md-3 text-center">易错内容</th>
<th class="col-md-3 text-center">错在哪</th>
<th class="col-md-3 text-center">你的想法</th>
<th class="col-md-1 text-center">删除</th>
<th class="col-md-1 text-center">操作</th>
</tr>
</thead>
<tbody id="tbody">


</tbody>
</table>
</div>
<div class="row text-center">
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>

</body>

最后希望，有毅力和耐心看完的好心人，可以，给我评论一下，让我知道，写的东西是有人看的=。=谢谢

我的愿望是世界和平，天下大同。晚安

猜你喜欢