给定一个URL字符串，要求用js实现一个函数，找出其中的query值
例如：URL：http://www.qunar.com/plane/queryPlane.html?startTime=xxxx&endTime=xxxxx#tags

1
2
3
4
5
6
7
8
9
10
11
12

function getQueryParam(url, name) {
    var a = document.createElement('a');
    a.href = url;
    var query = a.search;
    var len = query.length;
    var reg = /[?&]([^\d]\w+)=(\w+)/gi; 
    var res = reg.exec(query);
    while (reg.lastIndex < len && res[1] && res[1] !== name) {
        res = reg.exec(query);
    }  
    return res[2];
}

javascript 中的数组排序算法主要有：冒泡排序、插入排序、快速排序、递归排序。

下满的这些例子都是各个排序算法的具体实现。

所谓单例模式，即是限定一个对象生成的实例数只有一个，这个唯一的实例就是单例。

举个最简单的例子：

1
2
3
4
5
6
7

var user = {  
    firstName: 'John',
    lastName: 'Doe',
    sayName: function() {
        return this.firstName + ' ' + this.lastName;
    }
};

这个user就是一个单例

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
39
40
41
42
43
44
45
46
47
48
49
50

var mySingleton = (function () {

  // Instance stores a reference to the Singleton
  var instance;

  function init() {

    // Singleton

    // Private methods and variables
    function privateMethod(){
        console.log( "I am private" );
    }

    var privateVariable = "Im also private";

    return {

      // Public methods and variables
      publicMethod: function () {
        console.log( "The public can see me!" );
      },

      publicProperty: "I am also public"
    };

  };

  return {

    // Get the Singleton instance if one exists
    // or create one if it doesn't
    getInstance: function () {

      if ( !instance ) {
        instance = init();
      }

      return instance;
    }

  };

})();

// Usage:

var singleA = mySingleton.getInstance();  
var singleB = mySingleton.getInstance();  
console.log( singleA === singleB ); // true

参考：

http://robdodson.me/javascript-design-patterns-singleton/

最近在多次的校招面试中，面试官都问到了我一些算法问题，可能是因为之前没有好好的刷过算法也没有针对性的去准备方面的知识，导致自己答的不太好，即使针对面试官的有些问题能够给出自己的大体思路，但是面试官让我去给出更优的解决方案时也会无从应答。之前我主要是觉得前端这块对算法的要求不是很高，没必要去刷算法。但是实习期间和校招面试的经历告诉我，算法这东西对于一个技术开发者来说是一项必备的基本技能。

因此最近我花时间把前端开发中可能会用到的一些基本的算法问题整理了一下，下面的一些 javascript 的基本算法题是我在 That Js Dude上学习并整理出来的，希望会对你们有所帮助。

MVC

MVC是一种架构设计模式，它将应用分割成业务数据（Model）、用户界面（View）、控制逻辑（Controller）三个部分，其架构图大致是这个样子：

虽然到现在接触前端这一行也有将近一年半的时间了，自己对于前端模块化开发这一块的概念还一直是停留在知道前端领域有AMD和CMD这两个规范，它们是用来解决你的前端开发流程中的模块化加载的问题的。但是却没有在项目中的真正实践，所以这段时间要好好的花时间学习下这块的内容，并且能在以后的项目中真正的去实践一把。

对于AMD和CMD这两个东西，一个是异步模块规范(Asynchronous Module Definition)，一个是通用模块规范(Common Module Definition)；AMD的典型实践是国外大神James Burke开发的Require.js，CMD的典型实践则是国内玉伯大神推出的Sea.js。

我们都知道，Javascript语言的执行环境是”单线程”（single thread）的。所谓”单线程”，就是指对解析器来说一次只能完成一件任务，如果有多个任务的话，那么就必须排队，前面一个任务完成，再去执行后面一个任务，以此类推。

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

v

REF

Vue.js & Angular.js & Avalon.js

基本介绍

通过不同的媒体类型和条件定义样式表规则。
媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。
媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width。

媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲，弹性盒改进了块模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。

1. 新版Flex Box

定义弹性盒模型

通过对父级元素设置display属性为flex | inline-flex属性定义该父级容器为弹性盒。
为了兼容性，注意要带上浏览器的厂商表示前缀。

1
2
3
4

.flexbox{
    display: flex;
    display: -webkit-flex;
}