发表于

已经两个多月没写了，真是太懒了！
说起js数组的拷贝，无非是浅拷贝和深拷贝。以前对这两个概念一直很模糊，最近好像懂了一点点。

数组拷贝

浅拷贝

浅拷贝就相当于拷贝了该数组的地址，新的数组和旧数组共用一个内存，无论是修改新的数组还是旧的数组，都会影响另一个数组。最简单的浅拷贝就是直接赋值。

1
2
3
4
5
var a = ["one","two","three"];
var b = a;
b[2] = "four";
console.log("a",a);//a ["one", "two", "four"]
console.log("b",b);//b ["one", "two", "four"]

深拷贝

有时我们想修改一个拷贝数组，但又不想改动原数组，就需要使用深拷贝。深拷贝是新开辟一块内存来存放新数组。新数组或旧数组的改动都不会影响对方。下面讲几个常见的简单的数组深拷贝方法。

阅读全文 »

发表于

因为每次重装都要重新装很多东西，在这里记一下，免得以后又要去想。

最重要的当然是node和git了。然后用

1
npm list -g --depth 0

来查看目前我装了哪些npm包。


可以看到还是有挺多的，有些是平时学习时装的，一直没有卸，比如：bower,yo（这个是yeoman），express等；也有其他项目出现问题时装的依赖，比如generator-karma（记得是vue-cli的问题）;然后我觉得有用的是：cnpm，hexo，hexo-cli，less，npm，npm-check，stylus，vue-cli，webpack等。

安装与卸载这些包

1
2
3
//-g决定了是否全局
npm install 名字 [-g]
npm uninstall 名字 [-g]

这里说一下npm-check，使用它可以检查需要更新的npm包，然后选择更新。举个例子

更多使用方法就不说了。

发表于   |   分类于

效果

回到顶部一般的网站都有，具体效果如下：

当滑动到一定距离（通常是一屏）后，某个地方会出现“返回顶部”按钮（通常是右下角），点击按钮可以回到顶部，然后按钮隐藏（或其他效果，比如变得透明）。

代码

  • html
1
2
3
4
5
6
<main>
	<div id="box1"></div>
	<div id="box2"></div>
	<div id="box3"></div>
</main>
<a href="javascript:void(0);" id="btn" title="回到顶部">↑</a>

  • css
    说实话，css部分没什么需要特别注意的地方。

    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
    *{
    	margin: 0;
    	padding: 0;
    }
    main{
    	width:1000px;
    	margin: 0 auto;
    }
    #box1{
    	height: 890px;
    	background-color: #eee;
    	margin-bottom: 10px;
    }
    #box2{
    	height: 590px;
    	background-color: orange;
    	margin-bottom: 10px;
    }
    #box3{
    	height: 400px;
    	background-color: pink;
    }
    #btn{
    	position: fixed;
    	display: none;
    	width: 40px;
    	height: 40px;
    	text-align: center;
    	line-height: 40px;
    	bottom: 20px;
    	right: 5%;
    	background-color: #ddd;
    	text-decoration: none;
    }

  • javascript
    重头戏

    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
    window.onload = function () {
    	var btn = document.getElementById('btn');
    	var clientHeight = document.documentElement.clientHeight;
    	var timer = null;
    	var isTop = true;

    	window.onscroll = function () {
    		var myTop = document.documentElement.scrollTop || document.body.scrollTop;
    		if(myTop >= clientHeight){
    			btn.style.display = 'block';
    		}else{
    			btn.style.display = 'none';
    		}

            //滑动过程中滑动滚动条的话也结束定时器
    		if(!isTop){
    			clearInterval(timer);
    		}
    		isTop = false;
    	}
    	btn.onclick = function () {
    		timer = setInterval(function () {
    			var myTop = document.documentElement.scrollTop || document.body.scrollTop;
    			var speed = Math.ceil(myTop / 6);
    			document.documentElement.scrollTop = document.body.scrollTop = myTop - speed;

    			isTop = true;
    			if(myTop == 0){
    				clearInterval(timer);
    			}
    		}, 30);
    	}
    }

原理

本次通过使用js来实现回到顶部效果，而不是用html的锚点，达到平滑的滚动效果。关键点：scrollTop,clientHeight,setInterval()。

按钮的隐藏与消失

首先是获取屏幕的高度clientHeight,然后通过判断滑动的距离scrollTop与高度的大小来实现效果。滑动大于一屏高度时将按钮显示，其他隐藏。

滑到顶部

通过使用定时器setInterval来实现，当回到顶部时，取消定时器。

发表于   |   分类于

今天终于下定决心尝试把项目部署到服务器，因为之前总是犹犹豫豫，总觉得好麻烦。对于学前端的我，这些东西真的好难弄，几乎弄了一整天，不过看到成功的那一刻，心里还是很高兴。
下面开始部署。

购买阿里云服务器ECS

配置选型


大家根据喜好选择吧。
如果购买成功，应该会受到短信通知，内含（实例名称，公网ip，系统用户名root）等。若没有设置实例密码，需要去控制台设置。
下面是我的选择

阅读全文 »

发表于   |   分类于

简介

Gulp中文网
Gulp是一个构建系统，通过执行相应的任务，可以让我们加快前端开发的速度。使用它，我们可以实现压缩文件、js校验、编译预处理css和刷新浏览器等功能。

使用步骤

  1. 全局安装gulp

    1
    npm install gulp -g

  2. 作为项目的开发依赖安装

新建文件夹，再npm init生成package.json文件，然后安装gulp

1
npm install gulp --save-dev
  1. 创建gulpfile.js文件

在项目根目录下创建gulpfile.js文件

  1. 运行

打开命令行窗口，执行命令gulp

阅读全文 »

发表于
问题好多啊！
兼容性是前端开发不可避免的问题，而且每个公司对此都会有要求，为此，我今天打算花点时间深入了解这个问题。

js兼容文件

1
2
3
4
//使IE5,IE6兼容到IE7模式
<!–-[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
<![endif]–->
1
2
3
4
//使IE5,IE6,IE7兼容到IE8模式
<!–-[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
<![endif]–->
1
2
3
4
//使IE5,IE6,IE7,IE8兼容到IE9模式
<!–-[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–->
阅读全文 »

发表于   |   分类于

今后我们把使用mongoose时所遇到的问题都归纳到这里。

多个相同Schema的collection，如何去特定的一个？(2017-02-08)

这是今天所遇到的问题。
打开我的Robomongo，

从text_20170205开始，所有的schema都是如图上的结构

1
2
3
4
5
prd_img_src
prd_sku
prd_price
prd_url
prd_name

然而我只想取这几个collection中的一个，那我要如何做呢？

回忆之前的文章，使用mongoose需要使用到几个知识点：schema,model,entity。
在models.js中定义Model这一步时，普通的是

1
2
3
4
5
6
7
8
9
var _JD = new Schema({
  prd_img_src: String,
  prd_sku: String,
  prd_price: String,
  prd_url: String,
  prd_name: String
});

exports.JD = mongoose.model('JD', _JD);

然而这次我们需要使用到collection的名字来定义model，

1
exports.JD = mongoose.model('JD', _JD, 'test_20170206');

上述代码可以帮我渠道名为“test_20170206”的collection。

发表于   |   分类于

什么是Sticky footers布局

简单地说，就是如果页面不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

解决方案

举个例子

1
2
3
4
5
6
7
8
9
<header>
	<h1>这是头区域部</h1>
</header>
<main>
这是内容区域。
</main>
<footer>
	<p>这是底区域部</p>
</footer>
1
2
3
4
5
6
7
8
9
10
*{
	margin:0;
	padding:0;}
header{
	border-bottom:2px solid #333;}
footer{
	width:100%;
	height:200px;
	background-color:#333;
	color:#fff;}
阅读全文 »

发表于   |   分类于

当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。我今天就遇到了这样的情况。

原因：根据W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。

举个例子：

1
2
3
4
<div class="main">
	<div class="left">left</div>
    <div class="right">right</div>
</div>

错误的样式示例如下

1
2
3
4
5
6
7
8
9
10
11
12
*{
	margin:0;
	padding:0;}
.main{
	display:flex;
	flex-direction:row;}
.left{
	width:300px;
	height:100%;
	background-color:orange;}
.right{
	flex:1;}

效果：

解决方法：如果想让一个元素的百分比高度height:100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。

正确示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
*{
	margin:0;
	padding:0;}
html{
	height:100%;}
body{
	height:100%;}
.main{
	display:flex;
	flex-direction:row;
	height:100%;}
.left{
	width:300px;
	height:100%;
	background-color:orange;}
.right{
	flex:1;}

效果：

有效果了！可以看到，需要给div.left的每一个父元素都添加高度才行。

发表于

两种常见的立即执行函数写法：

1
2
3
(function(){}());

(function(){})();

以下是错误写法：

1
function(){}();

概念

在了解立即执行函数之前，学习一些概念：函数声明、函数表达式、匿名函数。

阅读全文 »