Notes for a front-end developer, esyou.net

我们可能会经常遇到如下这样的问题，就像我们的后端要从数据库中读取相同id的内容，并且合并相同id已有的值。

1

var arry = [{

2

        pid:123,

3

        info: '男'

4

    },{

5

        pid:123,

6

        info:'女'

7

    },{

8

        pid:123,

9

        info: '未知'

10

    },{

11

        pid:456,

12

        info: '东'

13

    },{

14

        pid:456,

15

        info:'西'

16

    },{

17

        pid:456,

18

        info: '南'

19

    },{

20

        pid:456,

21

        info: '北'

22

    }

23

]

我们看到以上数组对象中，可以看到有很多个相同pid的属性值，我的目的就是将其相同的pid值的对象的info值全部合并起来，诸如

1

[{pid:123,info:'男/女/未知'},{pid:456,info:'东/西/南/北'}]

也就是说将相同的pid的相关内容进行合并。

我以前确实玩过一些java web，并且还写过java web，但是那是很久以前的事情了，而且悲催的是我还居然没有用过一个java框架。比如spring、Struts、hibernate之类的框架，我仅仅只是听说过，并未真正研究与使用过。由于工作的需要，我需要搭建一个可以跑起来的 reset api 服务，由此想起之前朋友给我推荐的spring-boot，听说很容易，不过我折腾了一下，环境搭建就花费了我不少时间。下面我就将这过程给大家说一说，当然请先确保你的电脑已经配置好了JDK环境。

环境配置

1、java环境配置
JDK配置、maven配置，JDK配置网上已经说得一大片了，再说了不论是搞后端还是搞前端开发基本也离不开JDK环境了，这里主要说一下maven配置。
首先到maven官方下载一个压缩包，https://maven.apache.org/download.cgi
解压后，放到任意位置，我将其放到了/Users/ubeing/Library/maven目录中，这个是MAC开发环境，如果你是windows开发环境，那你可以放到C盘或者其他盘都可以。

接着我们需要配置下环境变量啦，mac下的配置如下

1

vim ~/.bash_profile

2

export MAVEN_HOME=/Users/ubeing/Library/maven

3

export PATH=$MAVEN_HOME/bin:$PATH

windows下，请打开你的环境变量，新建一个MAVEN_HOME的变量，值为C:/Users/ubeing/Library/maven，找到path，添加$MAVEN_HOME/bin即可
配置完成后，windows下立即生效，mac下还需要执行source ~/.bash_profile，接着在终端（windows上叫命令提示符）输入以下命令验证一下：

cordova或者phonegap都提供了一系列很牛的插件，为我们做开发省了不小力气，在app开发中，有一些app适合竖屏展示，某些app又适合横屏展示，因此我们得去设置它相关的config.xml

安卓上的横屏与竖屏

首先我们先来看一下android上的某些原生Activity属性
安卓 Activity 在设备上的显示方向。如果 Activity 是在多窗口模式下运行，系统会忽略该属性。Activity有以下几种属性值

“unspecified” 默认值。由系统选择方向。在不同设备上，系统使用的政策以及基于政策在特定上下文所做的选择可能有所差异。
“behind” 与 Activity 栈中紧接着它的 Activity 的方向相同。
“landscape” 横向方向（显示的宽度大于高度）。
“portrait” 纵向方向（显示的高度大于宽度）。
“reverseLandscape” 与正常横向方向相反的横向方向。API 级别 9 中的新增配置。

最近项目中总是遇到一些莫名其妙的问题，当然这个项目已经存在已久，之前也有过这样的问题，现在感觉问题总是显得很突出，大部分问题都是由于数据更新后，视图无法及时更新而导致的，由于项目的代码原因，我就不多去深入为什么会发生这个问题了，主要的是说一下解决这个问题的方法。
场景
如果你在组件中定义了一个变量，当你使用console能将其值打印出来，可是我们能看到的视图中，这个变量并没有任何值或者改动。又或者你在一个点击事件中去改变相关变量的值，让其显示在视图上，但是当你点击事件触发后，变量的值是改变了，但是视图却为更新。这个时候你就可以使用以下几种方法

1、直接使用ngZong.run()
我们可以将某个要发生改变的变量或者方法直接放到ngZong.run()中。比如：

1

ngZong.run(()=>{this.closeNum()})

2、ChangeDetectorRef.detectChanges()
此方法本人使用的不多，并没有切确的深入了解这个方法，而且我在进行测试中，这个方法对我来说并未产生任何效果，如果你想要尝试一下，建议看一下官方文档https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor

3、直接使用ngDocheck()生命周期
我们可以将相关代码直接放到ngDocheck中，即可实现视图强制更新。但是一定要注意ngDocheck特别像setInterval，不论你数据是否发生改变他都会执行，并且任意一个事件都有可能触发它。因此得需要慎用，以防影响到性能

对象拷贝，可能很多人并不是很清楚，而且也使用的不多，简单的说拷贝对象就是直接复制一个数组或者一个对象，听到复制可能大家都蒙了，该如何才能达到复制一个对象或者数组？我们可以将这里的复制理解为是赋值，我们可以将一个数组或者一个对象直接赋值给一个变量，这个过程就可以称为复制（或者对象拷贝），大家一定不要被“复制、拷贝”这样的名词给搞晕了。下面我们来看几个简单的示例

JavaScript拷贝数组（浅拷贝）

1

var arry = [1,2,3]

2

var arry1 = arry

3

console.log(arry) //输出[1,2,3]，说明拷贝数组成功

4

arry1[1] = 6

5

console.log(arry1) //改变arry1拷贝过来数组中的值，输出[1,6,3]

这就是一个简单的数组拷贝的过程，其意义在于，当我们需要使用和arry相同数据的时候，并且只需要更改其中的一个值，从而达到另一个效果，那么我们就可以使用这一的方式进行数组拷贝。
当然，以上方法主要是属于数组的浅拷贝。

JavaScript数组深拷贝

for 循环实现数组的深拷贝

1

var arr = [1,2,3,4,5,6]

2

function copyArry(){

3

   let result = [];

4

   for(var i=0;i<arr.length;i++){

5

     result.push(arr[i])

6

   }

7

   return result;

8

}

9

var arr1 = copyArry();

数组去重，简单来说就是一个数组中如果同时存在两个相同的值，但是我们只需要其中一个即可，不需要将两个相同的值都一起展示出来，这个时候就必须得使用到javascript的数组去重方法了，在javascript中并没有专门的方法直接去重的，因此我们得自己来写一个这样的方法。下面我仅介绍其中的容易理解的4种方法，当然还有其他更多的方法，希望大家能够自己去寻找和学习了，因为目前我就仅能理解这3种方法。
大概的思路应该是这样的：
1）、定义一个变量数组 res 保存结果，遍历需要去重的数组，如果该元素已经存在在 res 中了，则说明是重复的元素，如果没有，则放入 res 中。
2）、将原数组中重复元素的最后一个元素放入结果数组中
下面我们直接来看代码，代码可以让你一目了然。

万能的for循环

1

var arr = [1,2,3,1,2,'1','3','3'];

2

function uniqueTwo(arr) {

3

  var res = [];

4

  for(var i=0; i < arr.length; i++){

5

    var item = arr[i]

6

    res.indexOf(item)===-1 && res.push(item)

7

  }

8

  return res;

9

}

10

var testTwo = uniqueTwo(arr);

11

console.log('testTwo',testTwo); // 返回[1, 2, 3, "1", "3"]

这是一道前端开发中常常被问到的基础问题，该如何画一个三角形？该如何画一个圆？被问到的时候，可能在你脑海里飘过的就是“我好像在哪里看过，但是记不得了”，我们往往觉得很简单的问题，往往却被面试官问到脸红、紧张。下面就来说说利用css画出各种基本图形的代码。
1、画圆
画圆，我们可以利用CSS3中的border-radius方法具体使用是将一个四方形设置上等宽等高后，再去设置边框的弧度为宽高的一半

1

.circle{

2

    width: 50px;

3

    height: 50px;

4

    border-radius: 25px;

5

    background: blue;

6

}

2、画三角形：
思路是将某两个边框设置为透明，然后设置三角形底边的边框颜色以及高度即可

在JavaScript中我们经常要使用到this关键字，但是有时候this的指向总是让我们搞不明白，理不清楚。总之刚开始接触的时候直接是一头雾水，当然this指向都没法搞清楚，那么就很难判断出很多代码输出的结果。比如以下代码中，大家可以猜一猜this指向的是谁？

1

function getUrl(){

2

  console.log(this)

3

}

4

getUrl()

以上代码中很简单的一个例子，其实我们打印出来后this指向的是window对象
然而这并没有什么卵用，最多就是我们知道了this的指向。由此JavaScript中就出现了call、apply方法，这两个方法主要是用于动态改变this指向的，他们的使用方法一样，只不过是传递的参数不一样罢了。
使用方法：
如果call或apply的第一参数是null的话， this指向window

1

obj.myFunc();

2

myFunc.call(obj,arg);//以参数的方式进行传递

3

myFunc.apply(obj,[arg1,arg2..]);//以数组的方式进行传递

不要跟我说类型检测不是很简单吗？好像直接使用typeof就可以检测了，这个有什么难度？但是大家都知道使用typeof检测出来的并无法检测出Arry、Date、RegExp、Error、Null等特殊类型，如我们遇到是arry的类型，检测出来的是object类型。因此我们想要得到更加精确的类型，就必须得自己动手写一个函数出来判断下类型

了解Object.prototype.toString

1

var b = null

2

Object.prototype.toString.call(b) //[object Null]

由Object.prototype.toString的方法我们可以知道这个方法可以获得[object Null]，[object Error]等类型。这样我们就可以直接来拼接一个属于我们自己的类型检测函数啦

类型检测函数type

大致的思想是：假如我们检测到的是object，那么就使用Object.prototype.toString去检测，否则就使用typeof进行检测

1

var typeClass = {}

2

"Boolean Number String Function Array Date RegExp Object Error Null Undefined".split(' ').map(function(item, index){

3

  typeClass['[object '+ item +']'] = item.toLowerCase();

4

})

5

6

function type(obj){

7

  var objType = typeof obj ==='object' || typeof obj ==='function' ? typeClass[Object.prototype.toString.call(obj)] || 'object' : typeof obj;

8

  return objType

9

}

10

type(111) //number

11

type('111') //string

12

type([1,2,3]) //array

13

type(null) //null

14

type({a:1}) //object

15

type(new Date()) //date

JQ中的type函数

1

type: function( obj ) {

2

    if ( obj == null ) {

3

       return obj + "";

4

    }

5

    return typeof obj === "object" || typeof obj === "function" ?

6

       class2type[ toString.call( obj ) ] || "object" :

7

       typeof obj;

8

}

JQ中对IE浏览器做了兼容！

本文使用的都是CSS3以及html5中的video实现的播放器，在PC与手机端都可以完美播放，目前还未实现播放进度条的拖移功能，后续会增加这个功能。
demo效果查看地址：https://king2088.github.io/html5-vPlayer/
先看效果图：

首先我们要了解一下html5中的media事件以及属性