JavaScript实现二分查找法

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
34
35
/**
 * 从有序数组的最中间元素开始查找，如果该元素正好是指定查找的值，则查找过程结束。否则进行下一步; 
 * 如果指定要查找的元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半区域查找，然后重复第一步的操作
 * 重复以上过程，直到找到目标元素的索引，查找成功;或者直到子数组为空，查找失败
 * @param {any} data --要查找的有序数组 
 * @param {any} key --查找的的目标值
 * @param {any} start --开始查找的数组下标
 * @param {any} end --结束查找的数组下标
 */
function binarySearch(data, key, start, end) {
    start = start || 0;
    end = end || data.length - 1;
    var _binaryIndex = Math.floor((start + end) / 2);
    // 递归出口条件
    if (start > end) {
        // 如果该数组没有找到该key,则返回距离其最近的上一个值的索引号
        return end;
        // // 如果该数组没有找到该key,则返回距离其最近的下一个值的索引号
        // return start;
        // // 如果该数组没有找到该key,则返回-1
        // return -1;
    }
    if (key == data[_binaryIndex]) {
        return _binaryIndex;
    } else {
        if (key < data[_binaryIndex]) {
            return binarySearch(data, key, start, _binaryIndex - 1);
        }
        else {
            return binarySearch(data, key, _binaryIndex + 1, end);
        }
    }
}
var arr = [-34, 1, 3, 4, 5, 8, 34, 45, 65, 87];        
console.log("索引是:"+binarySearch(arr,7));
more >>

展开全文 >>

Html-Css-Note(一)

对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
XHTML属于HTML向XML过渡的语言

Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?参考理解

more >>

展开全文 >>

Sass-Note

Sass是采用Ruby语言编写的一款CSS预处理语言

Sass和Scss其实是同一种东西，都称之为Sass。

区别：

  1. Sass是以’.sass’后缀为扩展名，Scss是以’.scss’后缀为扩展名
  2. Sass是以严格对的缩进式语法规则来书写，不带大括号（{}）和分号（;），而Scss的语法书写和我们的css语法书写方式非常类似

Saaa安装

推荐一款前端预处理器语言图形编译工具Koala

Sass的安装前提条件需要是在Ruby环境下。

检测是否已经安装ruby:

1
ruby -v

ruby安装完后在开始菜单找到Start Command Prompt with Ruby，点击进入后直接命令行输入：

1
gem install sass

上面的方法有可能会被墙，如果不行百度使用镜像方法安装。

查看是否安装成功：

1
2
3
4
F:\WebDev\react\SAC.WEB.2.0>sass -v
Sass 3.5.4 (Bleeding Edge)

F:\WebDev\react\SAC.WEB.2.0>

使用sass编译文件

1
sass  **.scss  ***.css

单文件监听命令(实时更新)

1
sass --watch style.scss:style.css

文件夹监听命令：

1
sass --watch sassFileDirectory:cssFileDirectory

css文件转成sass/scss文件

1
2
sass-convert style.css style.sass
sass-convert style.css style.scss

--style表示解析后的css是什么格式，有四种取值分别为：nested,expanded,compact,compressed。

1
sass --watch style.scss:style.css --style expanded

Sass的导入

通过使用关键词@import来导入scss文件，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果是按这个方法来导入css文件，则效果跟普通css导入样式文件一样，导入的css文件不会合并到编译后文件中去，而是以@import方式存在。

Sass的注释

标准的css注释：

1
2
3
4
5
6
7
/*
* 这里是块级注释
* 再来一行
*/
p{
    background-color: #fff;
}

双斜杠单行注释：

1
2
3
4
// this is ***
p{
    background-color: #fff;
}

标准的css注释转译后会显示出来，双斜杠单行注释则不显示出来

Sass的变量

sass的变量必须以$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号:分隔开，如果值后面加上！default则表示默认值。

1
2
3
4
5
6
7
// 定义字体尺寸变量
$fontSize:16px;

body {
    // 这里引用定义的变量
    font-size: $fontSize;
}

默认变量

使用！default来设置默认变量一般用来设置默认值，然后根据需求来覆盖。默认变量的价值在进行组件化开发的时候会比较有用。

特殊变量

一般我们定义的变量都是属性值加值的变量，但有时候有的变量是作为属性来使用的,使用方法：以#{$variables}形式使用

.scss文件转译前

1
2
3
4
5
6
7
8
9
10
11
12
/* 
* 特殊变量
*/
$borderDirection: top !default;

/*
* 应用于class或者属性
*
*/
.container-#{$borderDirection} {
    border-#{$borderDirection}:1px solid #ccc;
}

.css转译后

1
2
3
4
5
6
7
8
9
/* 
* 特殊变量
*/
/*
* 应用于class或者属性
*
*/
.container-top {
  border-top: 1px solid #ccc; }

Sass的嵌套

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般使用的是选择器的嵌套

选择器嵌套

选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强sass文件的结构性和可读性。
在选择器嵌套中，使用&来表示父元素选择器。

转译前.scss文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
* scss嵌套语法
*/

.top-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    li {
        list-style: none;
        height: 40px;
    }

    a {
        text-decoration: none;
        color: #fff;

        &:hover {
            color: #456;
        }
    }
}

转译后.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*
* scss嵌套语法
*/
.top-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0; }
  .top-nav li {
    list-style: none;
    height: 40px; }
  .top-nav a {
    text-decoration: none;
    color: #fff; }
    .top-nav a:hover {
      color: #456; }

跳出嵌套@at-root

使用@at-root命令可以跳出选择器嵌套，但是不能跳出@media和@support:

这种写法在写动画样式的时候有利于区分动画的范围。

转译前.scss文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*
* 跳出嵌套
*/

.demo {

    animation: motion 3s infinite;

    @at-root {
        @keyframes motion {
            from {width: 0;}
            to {width: 200px}
        }
    }
}

转译后.css文件

1
2
3
4
5
6
7
8
9
10
/*
* 跳出嵌套
*/
.demo {
  animation: motion 3s infinite; }
@keyframes motion {
  from {
    width: 0; }
  to {
    width: 200px; } }

Sass的混合

使用@mixin声明混合，可以传递参数。参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。
声明的@mixin通过@include来调用。

转译前.scss文件

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
/*
* 混合
*/

@mixin center-block {
    width: 960px;
    margin: 0 auto;
}

/*
* 无参数mixin
*/
.demo {
    @include center-block;
}

@mixin opacity($opacity:50) {
    opacity: $opacity / 100;
    filter: alpha(opacity=$opacity);
}

/*
* 无参数mixin
*/
.opacity {
    @include opacity; // 使用默认参数
}

/*
* 有参数mixin
*/
.opacity-80 {
    @include opacity(80); // 传递参数
}

转译后.css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*
* 混合
*/
/*
* 无参数mixin
*/
.demo {
  width: 960px;
  margin: 0 auto; }

/*
* 无参数mixin
*/
.opacity {
  opacity: 0.5;
  filter: alpha(opacity=50); }

/*
* 有参数mixin
*/
.opacity-80 {
  opacity: 0.8;
  filter: alpha(opacity=80); }

Sass的继承

选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，需要使用关键词@extend，后面紧跟需要继承的选择器。

.scss文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
* 继承
*/

.demo-jc1 {
    border: 1px solid #fff;
    font-size: 16px
}

.demo-jc2 {
    @extend .demo-jc1;
    font-size: 24px;
}

.css文件：

1
2
3
4
5
6
7
8
9
/*
* 继承
*/
.demo-jc1, .demo-jc2 {
  border: 1px solid #fff;
  font-size: 16px; }

.demo-jc2 {
  font-size: 24px; }

Sass的占位选择器

占位选择器使用%标识定义，通过@extend来调用。使用这个的好处是：在.scss文件中使用占位选择器，然后通过继承调用，转译后的.css文件只会解析出你@extend出来的样式，没有继承调用的样式不会在.css中呈现出来。

.scss文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*
* 占位符
*/

.demo-zw-false {
    width: 100px;
}

%demo-zw-true {
    width: 200px;
}

%demo-zw1-true {
    width: 150px;
    height: 100px;
}

.demo-zw1 {
    @extend %demo-zw1-true;
    border: 1px solid #333;
}

.css文件：

1
2
3
4
5
6
7
8
9
10
11
12
/*
* 占位符
*/
.demo-zw-false {
  width: 100px; }

.demo-zw1 {
  width: 150px;
  height: 100px; }

.demo-zw1 {
  border: 1px solid #333; }

Sass的运算

Sass可以对数值型的Value（如：数字、颜色、变量）进行加减乘除四则运算。运算符前后必须要留一个空格。

1
2
3
4
5
6
7
8
9
/*
* 运算
*/

$boxWidth: 100px !default;

.container-inner {
    width: $boxWidth / 2;
}
1
2
3
4
5
/*
* 运算
*/
.container-inner {
  width: 50px; }

sass中使用calc不能包含变量的问题

下面这种写法在浏览器上显示无效：

1
2
3
4
.menu-container-right{
    width: calc(100% - $menuContainerLeftWidth);
    float: right;
  }

在sass的calc中使用变量，必须对这个变量使用sass的插值方法（#{$variable}）

1
2
3
4
.menu-container-right{
    width: calc(100% - #{$menuContainerLeftWidth});
    float: right;
  }

展开全文 >>

JavaScript立即执行函数

JavaScript函数定义、立即执行函数

jquery源码框架

1
2
3
(function(window,undefined){
    //jquery..
})(window)

编程常遇到的问题：当你前面写的代码中定义了一个变量，后面又定义了一个同名的变量，结果两个变量的作用各不相同。那么后定义的那个变量就将前面定义的变量给覆盖了，造成代码错误。或者和别人合作，别人定义的同名变量覆盖你的变量。

立即执行函数的作用：类似一个沙箱，构造了一个作用域，将你定义的变量放到这个沙箱中使之成为一个局部变量，从而避免暴露在全局环境下造成全局变量的污染。

more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>一直想要来个华丽的变身<br>谢谢大家