Fork me on GitHub

SVG 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

矩形

more >>

展开全文 >>

对象

Object Origin Program

对象的属性

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
51
52
53
54
55
56
57
58
59
60
61
62
63
let obj = Object.create({},{
    a:{
        configurable:true,//是否可以通过 delete 删除并重新定义，是否修改它的访问属性
        enumerable:true,//是否可枚举
        writable:true,//是否可写
        value:'xxx',//实际值
    },
    b:{
    	configurable:true,
        enumerable:false,
        writable:false,
        value:'66'
	}
})
    
一、定义对象的属性方法
1、defineProperty
Object.defineProperty(obj,'a',{
    configurable:true,//是否可以通过 delete 删除并重新定义，是否修改它的访问属性
    enumerable:true,//是否可枚举
    writable:true,//是否可写
    value:'xxx',//实际值
})
2、defineProperties
Object.defineProperties(obj,{
    a:{
        value:'xxx',
    },
    b:{
        value:'66'
	}
})
//[注意]：省略不写的属性描述符默都是false

二、获取对象的属性的特性
1、getOwnPropertyDescriptor
Object.getOwnPropertyDescriptor(obj,'a');
//{
//   value:'xxx',
//}
2、getOwnPropertyDescriptors
Object.getOwnPropertyDescriptor(obj);
//{
//    a:{
//        value:'xxx',
//    },
//    b:{
//        value:'66'
//	  }
//}
//[注意]:Symbol类型的键名属性获取不了

3、Object.getOwnPropertySymbols 
//与getOwnPropertySymbols一样，针对Symbol类型属性

4、Object.getOwnPropertyNames
Object.getOwnPropertyNames(obj);//不管对象属性是否可枚举都能获取到

三、对象属性是否可枚举
Object.propertyIsEnumerable(obj); //true

四、对象是否拥有某属性
Object.hasOwnProperty(obj);//true
more >>

展开全文 >>

标签模板 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//创建标签模板 防止用户恶意输入
//string：除变量外的其他字符串数组，argus：变量数组，前者总比后者长度大1
function SaferHTMLx(string,...argus) {
    console.log(string,argus);//["<p>", " has ", " sent you a message.</p>"] , 
    // ["<script>alert("abc")</script>", "<script>alert("abc")</script>"]
    let s = string[0];
    for (let i = 1; i < string.length; i++) {
      let arg = String(argus[i-1]);
 	  //对变量参数进行处理
      s += arg.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;");
              .replace(/"/g, "&qout;")
              .replace(/'/g, "&#27;")
              .replace(/\//g, "&#x2F;");
      s += string[i]         
    }
    return s
  }
 
let senderx = '<script>alert("abc")</script>';
//使用标签模板 
let messagex = SaferHTMLx`<p>${senderx} has ${senderx}sent you a message.</p>`;
console.log(messagex);//<p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

展开全文 >>

正则表达式

匹配模式符

1
2
3
4
5
6
7
8
9
10

-i	忽略大小写
-g	全局模式
-m	多行模式
-y	粘附模式,查找从 lastIndex开始及之后的字符串
-u	Unicode匹配
-s	doAll模式，匹配任何字符（包括 \n,\r）

2、字符转译 
为区别字符和语法 ( [ { \ ^ $ | ) ] } ? * + 等符号 作为匹配字符串时前面要加 \ (如\.)

使用技巧

匹配两个字符（串）中甲的内容

more >>

展开全文 >>

获取地理位置

百度地图方法

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--引入百度 API，"ak=" 后面一串码是密钥，最好自己申请-->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
</head>
<body>
    <input type="button" onclick="getLocation()" value="确认" />
    <div id="position"></div>
    <script type="text/javascript">
    var x = document.getElementById('position');
    function getLocation() {
        // 创建百度地理位置实例，代替 navigator.geolocation
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(e) {
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
                x.innerHTML = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
            } else {
                x.innerHTML = 'failed' + this.getStatus();
            }
        });
    }
    </script>
</body>
</html>
more >>

展开全文 >>

react 插件

react-loadable

React 项目打包时，如果不进行异步组件的处理，那么所有页面所需要的 js 都在同一文件中（bundle.js），整个js文件很大，从而导致首屏加载时间过长。

所有，可以对组件进行异步加载处理，通常可以使用 React-loadable。

more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    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

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。