简单算法思想02|栈与队列

（队列）数组操作：

两个变量：head与tail，head指向队首，tail指向队尾最后一个位置。
在队首删除一个数是head++，在队尾加一个数是q[tail]=x;tail++;

简单队列：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#include <stdio.h>
int main() {
	int q[101]={0,6,3,1,7,5,8,9,2,4},head,tail;
	int i;
	head = 1;
	tail = 10;
	while(head<tail)
	{
		//打印队首并将队首出列
		printf("%d",q[head]);
		head++;
		q[tail]=q[head];
		tail++;
		//再将队首出列
		head++;
	}
	return 0;
	}

队列将是我们今后学习广度优先搜索以及队列优化的 Bellman-Ford 最短路算法的核心 数据结构。所以现在将队列的三个基本元素(一个数组，两个变量)封装为一个结构体类型， 如下。

1
2
3
4
5
6
struct queue
{
int data[100];//队列的主体，用来存储内容
int head;//队首
int tail;//队尾 
};

回文字符串 :

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
#include <stdio.h>
#include <string.h>
int main()
{
	char a[101],s[101];
	int i,len,mid,next,top;
	gets(a);
	len = strlen(a);
	mid = len/2-1;
	top = 0;//栈的初始化
	for(i=0;i<=mid;i++)//将mid前的字符依次入栈
		s[++top]=a[i];
		//判断字符串的长度是奇数还是偶数，并找出需要进行字符匹配的起始下标
		if (len%2==0) {
			next = mid+1;
		}else
			next=mid+2;
	for(i=next;i<=len-1;i++)
	{
		if(a[i]!=s[top])
		break;
		top--;
	}
	if (top==0) 
		printf("yes");
	else
		printf("no");
	return 0;
	
}

链表

动态存储：

malloc(4);
malloc函数的作用就是从内存中申请分配指定字节大小的内存空间。上面这行代码就申 请了 4 个字节。

数据结构|二叉树

新建结构体

1
2
3
4
5
6
7
8
#include <stdio.h>
struct BinaryTreeNode
{
	int m_nValue;
	BinaryTreeNode*m_pLeft;
	BinaryTreeNode*m_pRight;
};

求二叉树的结点数

采用递归分别遍历左右子树最后加上根节点。

1
2
3
4
5
6
7
8
int GetNodeNum(BinaryTreeNode * pRoot)
{
	if (pRoot == NULL) {
		return 0;
	}else {
		return GetNodeNum(pRoot->m_pLeft) + GetNodeNum(pRoot->m_pRight) + 1;
	}
}

二叉树的深度

1
2
3
4
5
6
7
8
9
10
11
int GetDepth(BinarytreeNode * pRoot)
{
	if (pRoot == Null) {
		return 0;
	}else {
		int a = GetDepth(pRoot->m_pleft);
		int b = GetDepth(pRoot->m_pright);
		return a > b ? (a+1) : (b+1);
	}
}

前序遍历

1
2
3
4
5
6
7
8
9
void Preorder1(BinaryTreeNode * pRoot)
{
	if (pRoot == NULL)
		return;
	printf("%c",pRoot->data);
	Preorder1(pRoot->m_pleft);
	Preorder1(pRoot->m_plight);
}

第k层结点个数

1
2
3
4
5
6
7
8
9
10
int GetNode(BinaryTreeNode * pRoot, int k)
{
	if(pRoot == NULL || k<1)
		return 0;
	if(k == 1)
		return 1;
	int numl = GetNode(pRoot->m_pLeft, k-1);
	int numr = GetNode(pRoot->m_pRight, k-1);
}

React入门系列01

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。—来自阮一峰

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>

最后一个script标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type=”text/babel” 。

其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

JSX语法规则：
遇到HTML标签（以<开头）遇到代码块，（以{开头），就用javascript规则解析

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

React 允许将代码封装成组件，然后像插入普通HTML标签一样，在网页中插入这个组件。

React.createClass方法就用于生成一个组件类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);
    </script>
  </body>
</html>

注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。

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
<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var NotesList = React.createClass({
        render: function() {
          return (
            <ol>
            {
              React.Children.map(this.props.children, function(child) {
                return <li>{child}</li>;
              })
            }
            </ol>
          );
        }
      });
      ReactDOM.render(
        <NotesList>
          <span>Hello</span>
          <span>world</span>
        </NotesList>,
        document.body
      );
    </script>
  </body>
</html>

上面的NoteList组件有两个span子节点，都通过this.props.children读取.

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性.

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

imooc|圣诞css

1.自适应rem布局

rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem。

1
2
3
4
recalc = function() {
        //设置根字体大小
        docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
    };

2.css3关键帧动画

Animation有八个属性

  1. animation-name ：动画名
  2. animation-duration：时间
  3. animation-delay：延时
  4. animation-iteration-count：次数
  5. animation-direction：方向
  6. animation-play-state：控制
  7. animation-fill-mode：状态
  8. animation-timing-function：关键帧变化
    1
    2
    3
    4
    5
    animation:bird-slow 400ms steps(3) infinite;
    @keyframes bird-slow {
        0% {background-position-x: -0px}
        100% {background-position-x: -273px}
    }

通过定义一个类，类中定义的动画的一些关键数据，比如动画名，时间，次数，切换的位置
通过keyframes定义动画具体执行参数与时间段
steps(3)的意思就是：keyframes设置的0%-100%的段中，background-position的的x坐标会变化3次
steps会平分这些段落值，其变化值就是:

  1. background-position-x: -0px
  2. background-position-x: -91px
  3. background-position-x: -182px

transition是css3引入的”过渡”属性，可以让css的属性值在一定的时间区间内平滑地过渡，考虑兼容性问题，这里会额外引入一个插件jquery.transit，这个就是具体封装了transition的CSS3过渡动画的实现
接下来代码部分就非常简单了
transition的使用与jQuery提供的animate()方法基本差不多，所以使用上很容易接受
参考右边的代码，让飞鸟执行一个飞的动作，可以这样用

1
2
3
4
5
$(".bird").transition({
    'right': "3rem",
}, 10000,'linear',function(){
    alert("结束")
});

3.3D变换：

要想实现3D的效果，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。
1.父元素或者当前运动元素上设置透视角perspective，perspective属性的值决定了3D效果的强度。
可以呈现3d的属性有，translate3d、scale3d、rotateX、rotateY、rotateZ等等
2.3D视图：设置在父元素上，子元素都可以相对于父元素的平面进行3D变形操作。

异步编程梳理：

1
2
3
4
5
6
7
8
9
setTimeout(function(){
	//任务一
	setTimeout(function(){
		//任务二
	},1000)
},1000)
var dtd = $.Deferred();  //创建
dtd.resolve();          //成功
dtd.then()              //执行回调

观察者模式：
var observer = new Observer(); //创建对象
observer.subscribe(“任务名”,处理函数)
observer.publish(“任务名”）／／触发事件
observer.unsubscribe(“任务名”)

SVG概述
在之前的七夕主题中，在留言反馈中经常会有人说：”这个怎么又是图片，还以为是画出来的”。其实我很想说：靠人工是很难画的。当然基于七夕的优化，我在圣诞中还是特意引入的一部分svg与canvas来做一些图形操作。SVG是基于xml标记语言可缩放矢量图形，支持无损缩放的同时也因为是dom节点，所以也支持事件，但是弊端也很明显，dom的数量非常大，复杂度高，渲染就比较慢了，也不适合游戏的开发，一般会用canvas之后会介绍
SVG有什么优势？

  • 文件体积小，能够被大量的压缩
  • 图片可无限放大而不失真(矢量图的基本特征)
  • 在视网膜显示屏上效果极佳
  • 能够实现互动和滤镜效果

CANVAS概述
Canvas是html5的新标签，看起来很屌的样子其实理解了就不难。Canvas意为画布，简单的来说通过Canvas提供的一些接口方法在这个指定的画布中画出我们想要的图片与执行一系列的动作。

1
2
3
4
5
6
7
8
9
10
11
12
//第一步：获取canvas元素
   var cvs = document.getElementById('cvs'); //画布
    //第二步：获取上下文
   var ctx = cvs.getContext('2d'); // 画笔
   //第三步：指定绘制线样式、颜色
   ctx.strokeStyle = "red";
   //第四步：绘制矩形，只有线。内容是空的
   //ctx.strokeRect(10, 10, 190, 100);
   ctx.moveTo(50,50);
   ctx.lineTo(300,200);
   ctx.stroke();
   //以下演示填充矩形。
  • 创建HTML页面，设置画布标签
  • 编写js，获取画布dom对象
  • 通过Canvas标签的Dom对象获取上下文
  • 设置绘制线样式、颜色
  • 绘制矩形，或者填充矩形

代码封装：
设计3个独立的JS文件分别是page-a.js、page-b.js、page-c.js，分别对应了3个场景类，把每一个场景的内容封装到每一个场景类中
然后在三个场景类之间通过接口去调用，比如切换页面，所以需要创建一个”中介”对象(christmas.js)充当，接口分配任务。

在HTML5标准网页里面，我们可以运用audio标签来完成我们对声音的调用及播放.

1
2
3
var audio = new Audio(url);   //创建一个音频对象并传入地址
audio.loop  = loop ||  false; //是否循环
audio.play(); //开始播放

传递一个视频的地址，创建一个Audio对象，设置属性loop是否循环播放，然后调用play方法就可以实现播放了.

在代码的编写上，我合并了next方法的处理，增加了Deferred异步的方法，让异步的代码可以有同步执行的逻辑，这样代码结构看起来会更清晰
在next方法中封装了Deferred是使用，所以可以连续调用
next().then().then().then()…….

3D开窗效果

在openWindow方法中，动态的通过JS对“门”增加对应的样式，从而执行动画。
this.$leftWin.addClass(“window-transition”).addClass(“hover”)
this.$rightWin.addClass(“window-transition”).addClass(“hover”)

window-transition:定义的一个transition过渡动画。
hover：定义了一个transform过渡动画执行的变换scale(0.95)rotateY(60deg)

1
2
3
4
5
6
7
8
9
.window-left.hover {
    transform-origin:left top;
    transform:scale(0.95,0.95);
    transform:rotateY(80deg);
    top:0.1rem;
    left: -0.25rem;
}

title: 搭建php运行环境，编写并运行PHP程序
date: 2017-10-14

tags: [PHP]

1， 因为mac系统自带Apache服务器，且内置PHP，所以其中的一个方法是另外安装MYSQL数据库并且启动，在终端运行。
但是此方法有一个弊端：在MAC每次升级系统时会自动升级php和apache，所以之前可能已经安装的插件都会不见，所以这里还是不太推荐这种方法。

2， 第二种方法是使用集成软件，我这里使用的是MAMP，集成了所需要的部分，比较方便，安装也不会有太大的问题。

运行软件后只要点击打开网页就默认进入你的目录，环境也已经搭建好了，可以直接运行PHP文件。
但是有时侯会出现打不开的问题，如果上面的MySQL Server打不开，可能就是你的电脑终端已经启动了其他的MYSQL数据库，这时候你就要手动关掉，才能重新打开运行。

3， 搭建完成之后你可以选择一个喜欢的代码编辑器，这里我选择的是Sublime Text，轻量级且功能强大，其中还可以安装许多插件，提高代码效率。
4， 这时候我们就可以来编写我们的第一个php程序，直接运行Sublime，输入你的代码，保存到固定的文件夹下，运行即可。

5,在打开MAMP之后，很方便的一点就是你可以直接选择你的文件夹打开，不需要新建虚拟目录再配置。
6.接下来找到所命名的文件，推荐使用英文命名，不然可能会出现乱码。这样就可以看到你的第一个php运行结果啦。

|