发表于

总结了一下数组去重的方法:

利用 indexOf 进行数组去重

1
2
3
4
5
6
7
8
9
10
var arr = [1,2,2,3,4,5,6,7,8,9,0,2,3,5,8,9,0,1];
var arr1 = [];
for( var i = 0; i < arr.length; i++){
    //ES5中引入了 indexOf 方法
    if( arr1.indexOf( arr[i] ) == -1 ){
        arr1.push( arr[i] );
    }
}
console.log( arr1 );

假设法去重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var arr = [1,2,2,3,4,5,6,7,8,9,0,2,3,5,8,9,0,1];
var arr1 = [];
for( var i = 0; i < arr.length; i++){
    var flag = true;
    for( var j = 0; j < arr1.length; j ++){
        if( arr1[ j ] == arr[ i ]){
            flag = false;
            break;
        }
    }
    if( flag ){
        arr1.push( arr[ i ]);
    }
}
console.log( arr1 );

利用缓存对象实现数组去重

1
2
3
4
5
6
7
8
9
10
11
12
13
var arr = [1,2,2,3,4,5,6,7,8,9,0,2,3,5,8,9,0,1];
var cache = {},
    arr1 = [];
for( var i = 0; i < arr.length; i ++ ){
    if( !cache[ arr[ i ]]) {
        cache[ arr[ i ]] = true;
        arr1.push( arr[ i ] );
    }
}
console.log( arr1 );
ES6数组去重

ES6里新添加了两个很好用的东西，set和Array.from。
set是一种新的数据结构，它可以接收一个数组或者是类数组对象，自动去重其中的重复项目。

'set'

在这我们可以看见，重复的项目已经被去掉了，包括NaN。正常情况下，NaN === NaN 返回的是false，但是在set里，一样能够帮你去重，厉害了。

'结果'

set返回的是一个对象，但是我们想要的是数组啊。
这回，就该轮到Array.from出场了，它的作用，就是可以把类数组对象、可迭代对象转化为数组。

'Array.from'

兼容性

目前主流的浏览器，Chrome,Firfox,Opera，Safari，包括微软的Edge,都是支持的，唯独IE系列不支持

发表于 | 分类于

理解CSS盒子模型

概述

  • 网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。
  • 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型。
  • CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
  • 盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同。
阅读全文 »

发表于 | 分类于

get started

用 Vue.js + vue-router 创建单页应用，是非常简单的。
使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

你可以看看这个例子

动态路由匹配

你可以看看这个例子

路由嵌套

你可以看看这个例子

更多的内容(编程式导航、命名路由、重定向、导航钩子等)可以参照Vue-router官网

发表于 | 分类于

npm info xxx

npm view xxx versions

安装指定版本

首先确保文件目录下含有
package.json文件，
没有的话，可以通过
npm init
创建，
然后只需要在组件的后面加上
@2.8.1
版本号即可，
例如：react-router已经更新到4.x版本，想要下载2.x版本，可以通过下面命令

1
npm install --save-dev react-router@2.8.1

下载完成，可以在
package.json

文件下，查看react-router版本

发表于 | 分类于

在使用npm时，官方的源下载npm包会比较慢，国内我们基本使用淘宝的源，最近公司内部搭建了一套npm私有仓库。要添加自己公司内部的npm源，公司内部的源不可能把npm官方的npm包都全量同步，故需要npm源之间的切换，如果使用npm registry xxx的话，太不好管理了。nrm是管理npm源切换的利器。使用方法如下：

安装nrm

1
npm install -g nrm

nrm --help 帮助命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Usage: nrm [options] [command]
  Commands:
    ls                           list all the registries
    current                      show current registry name
    use <registry>               change registry to registry
    add <registry> <url> [home]  add one custom registry
    del|rm <registry>            delete one custom registry
    home <registry> [browser]    open the homepage of registry with optional browser
    test [registry]              show response time for specific or all registries
    help                         print this help
  Options:
    -h, --help     output usage information
    -V, --version  output the version number
阅读全文 »

发表于 | 分类于

Vue组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

组件数

阅读全文 »

发表于 | 分类于

Vue指令

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

在Vue中，常用的指令有v-text、v-html、v-if、v-show、v-for、v-on、v-bind、v-model、v-ref、v-el、v-pre、v-cloak。

阅读全文 »

发表于 | 分类于

共同点

都是动态显示DOM元素

区别

  1. 手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
  2. 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
  3. 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
  4. 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
  5. 使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。
阅读全文 »

发表于

遇到的问题

在使用集成环境 WampServer 的时候，发现其图标为黄色， 却还显示 Server Online。

而且在本地计算机不能启动 Apache 服务。

本地启动wampapache失败

解决

1.切换到你的apache的bin目录下，按住shift和鼠标右键，打开命令窗口，执行httpd.exe，看有什么提示。

命令窗口

2. 根据错误提示，修改相应的信息。比如我的是ServerRoot must be a valid directory,就是说安装目录不能有中文，因此要改安装目录的名称全为英文。

3. 修改问题之后，window + R 输入 services.msc，找到 wampapache 右键管理，重新启动即可。

发表于 | 分类于

我们在写项目的时候往往会需要获取 url 或截取 url ? 后的参数，为了方便，总结了以下几种方法:

方法一: 利用正则表达式

1
2
3
4
5
6
function getQueryString(name) { 
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
        var r = window.location.search.substr(1).match(reg); 
        if (r != null) return unescape(r[2]); 
        return null; 
    }

方法二: 获取 url 中 “?” 符号后的字串

1
2
3
4
5
6
7
8
9
10
11
12
13
function GetRequest() {  
   var url = location.search; //获取url中"?"符后的字串  
   var theRequest = new Object();  
   if (url.indexOf("?") != -1) {  
      var str = url.substr(1);  
      strs = str.split("&");  
      for(var i = 0; i < strs.length; i ++) {  
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
      }  
   }  
   return theRequest;  
}

方法三: 获取指定的 url 参数值 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/** 
 * 获取指定的URL参数值 
 * URL:http://.../index?name=hudada 
 * 参数：paramName URL参数 
 * 调用方法:getParam("name") 
 * 返回值:hudada
 */ 
function getParam(paramName) { 
    paramValue = "", isFound = !1; 
    if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) { 
        arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0; 
        while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++ 
    } 
    return paramValue == "" && (paramValue = null), paramValue 
}
阅读全文 »