模块化/MVC

下午看了一些关于模块化和MVC的文章，从各个文章中摘取了一些知识点，记录下来。想到好久没更新博客，权当充数。
接下来三天面试GIS开发和游戏开发，希望这三个公司有一个是我的归宿。

模块化

关键词：
函数集合：污染全局变量
对象：可修改内部变量，不安全
立即执行函数：匿名函数，闭包，私有成员
内存泄露：引用未释放，内存被占用
高内聚低耦合：代码拆分

别人的模块拿来即用。标准化的接口。相互独立，功能完整。

模块化的价值

  1. 代码服用
  2. 提升可维护性
  • 公共模块通常用于促进代码复用
  • 业务模块通常用于提升可维护性
more >>

展开全文 >>

Today

今天没有心情发笔记。
有时候常在想，我们做项目的意义何在？仅仅是为了完成任务，交付拿钱走人？
性格使然，不喜欢很功利性的事情，往往想到很功利的去做事就没有了动力。
我也不喜欢临时抱佛脚，考试周冲刺这些事。所以总是不能快速的解决问题，做出成果。没少吃亏，死性不改。
也许等我能做出成绩之后再回过头来想这些可能更实际一点吧。现在看问题还是太局限了。
小孩子脾气。依着自己的性子。终究是成不了大事的。

忍耐吧。

展开全文 >>

进度条

思路：

进度是已上传除以总大小的百分比；通过动态改变元素的宽度来显示百分比，数字的变化标明大小。

编程重要的是思想，逻辑清楚了，再来码代码会清晰许多。

more >>

展开全文 >>

Ajax系列三-探讨XHR及POST数据

#Ajax系列三-深度探讨XHR及POST数据
Ajax异步原理

相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

ajax状态码

排序 时间 状态码
0 XHR对象刚创建 0
1 open建立连接成功 1
2 接收头信息完毕 2
3 接收body信息完毕 3
4 成功,结束后 4

ajax的好处就是不阻塞后面代码的执行。

more >>

展开全文 >>

Ajax系列二-现代化的Ajax

核心–XMLHttpRequest对象，一个专门的HTTP请求工具

使用XMLHttpRequest做Ajax请求：

如何创建该对象

标准` new XMLHttpRequest()`
低版本`IE(678)`，`new ActiveXObject('Microsoft.XMLHTTP')`;新的`jQuery`已经抛弃IE6，**程序员不应该去迁就用户的坏习惯，有时候需要逼用户改变习惯。**

1
2
3
4
5
6
7
8
9
10
11
function createXHR(){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	} else if(window.ActiveXObject){
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	} else{
		console.log('你的浏览器很奇怪。');
	}
	return xhr;
}

利用XHR发送请求来请求后台服务器资源

分析HTTP协议，请求需明确几个因素:
　　　1)请求方法：GET/POST/PUT/DELETE/HEAD
　　　2)请求哪个资源(URL)
　　　3)同步方式–同步/异步

如何得到请求返回结果

1
2
3
4
5
6
7
8
9
10
11
function vote(){
	//1. 制造xhr
	var xhr = createXHR();
	//2. 打开连接
	xhr.open('GET', './05-ajaxvote.php', true/false);
	//3. 发送请求
	xhr.send(null);
	//4. 测试同步异步的差异,改true/false
	//alert(xhr.responseText);
	//为避免误会用
	alert('123');
more >>

展开全文 >>

Ajax系列一-远古时代

题按–在真正的Ajax出现之前，是怎么实现类似效果的。

这几天断断续续的看完了ajax和http相关的教程，查询了Wikipedia相关资料，接下来几天，整理一下。

投票需求：要求无刷新投票，并且不允许使用XMLHttpRequest对象
分析：在XHR对象没有流行之前，已经有无刷新这种效果的要求

方法一： HTTP协议204 No Content

原理：利用http 204 No Content 状态码,浏览器不会跳转

前端：

1
2
3
4
5
6
<body>
    <div>
        <p><img width=300 height=400 src="lin.jpg"></p>
        <p><a href="vote.php">vote</a></p>
    </div>
</body>

后端：

1
2
3
4
5
6
7
8
9
10
<?php 
$votenum = file_get_contents("./vote.txt");
if ($votenum == null) {
    $votenum = 0;
}
$votenum += 1;
file_put_contents('./vote.txt', $votenum);
//利用HTTP协议的204特性
header('HTTP/1.1 204 No Content');
 ?>
more >>

展开全文 >>

判断非手机登陆，做一次提醒

需求

项目的网站时做的手机网页，但是没有考虑到自适应pc端，只是在chrome中固定了手机屏幕大小，所以在pc端查看会很丑，布局是乱的；但是重写又很麻烦，所以有必要做一下提醒，让用户手动将网页缩小到手机屏幕大小。

用到

非手机检验和cookie记录

方法

这段代码是使用了cookie来控制的

  1. 使用cookie让浏览器记住页面已经打开过一次，当前页面刷新不会弹出提醒。
  2. 浏览器一旦关闭，保存这个记录的cookie文件将被删除。重新打开浏览器弹出窗口会再次出现，从而确保了在原有的窗口基础上只打开一次。

判断非手机登陆方式

1
2
if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))
	alert("为了提高体验效果，请把页面缩小成手机屏幕大小。\n谢谢合作！");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script type="text/javascript">
	try{
		var alertmessage="为了提高体验效果，请把页面缩小成手机屏幕大小。\n谢谢合作！";
		var once_per_session=1
		function get_cookie(Name) {
		  var search = Name + "="
		  var returnvalue = "";
		  if (document.cookie.length > 0) {
			offset = document.cookie.indexOf(search)
			if (offset != -1) {
			  offset += search.length;
			  end = document.cookie.indexOf(";", offset);
			  if (end == -1)
				 end = document.cookie.length;
			 	 returnvalue=unescape(document.cookie.substring(offset, end))
			  }
		   	}
		 	return returnvalue;
		}
		function alertornot(){
			if (get_cookie('alerted')==''){
		        loadalert();
				document.cookie="alerted=yes";
			}
		}
		function loadalert(){
			if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))
				alert(alertmessage);
		}
		if (once_per_session==0)
			loadalert();
		else
			alertornot();
	} catch(e)
	{
		alert(e);
	}
</script>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true