Fork me on GitHub

gojs

仅仅是一个前端插件

官网:https://gojs.net/latest/index.html

下载之后并不是所有的js文件都用的到，我们需要了解到只有三个

1
2
3
4
5
6
"""
go.js				 正常必须要导入的文件
go-debug.js  会展示报错消息 类似于debug模式 线上肯定不会使用
Figures.js	 扩展图表(go.js自带的图表比较少，如果出现图标显示不出来的情况)
"""
# 总结:使用的时候导入go.js和Figures.js就不会有任何问题了

简单的使用

more >>

展开全文 >>

momentjs时间处理类库

1、安装

1
2
3
4
5
npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor

2、日期格式化

格式代码 说明 返回值例子
M 数字表示的月份，没有前导零 1到12
MM 数字表示的月份，有前导零 01到12
MMM 三个字母缩写表示的月份 Jan到Dec
MMMM 月份，完整的文本格式 January到December
Q 季度 1到4
D 月份中的第几天，没有前导零 1到31
DD 月份中的第几天，有前导零 01到31
d 星期中的第几天，数字表示 0到6，0表示周日，6表示周六
ddd 三个字母表示星期中的第几天 Sun到Sat
dddd 星期几，完整的星期文本 从Sunday到Saturday
w 年份中的第几周 如42：表示第42周
YYYY 四位数字完整表示的年份 如：2014 或 2000
YY 两位数字表示的年份 如：14 或 98
A 大写的AM PM AM PM
a 小写的am pm am pm
HH 小时，24小时制，有前导零 00到23
H 小时，24小时制，无前导零 0到23
hh 小时，12小时制，有前导零 00到12
h 小时，12小时制，无前导零 0到12
m 没有前导零的分钟数 0到59
mm 有前导零的分钟数 00到59
s 没有前导零的秒数 1到59
ss 有前导零的描述 01到59
X Unix时间戳 1411572969
more >>

展开全文 >>

插件集合

js读取excel文件

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
1、js读取excel文件 xlsx.js
	

const datas={};
    $('#doc-form-file').on('change', function(e) {
        var fileNames = '';
        $.each(this.files, function() {
            fileNames += '<span class="am-badge">' + this.name + '</span> ';
        });
        $('#file-list').html(fileNames);
        //获取json，同时进行json数据校验
        var files=e.target.files;
        var file=files[0];
        var fileNames=file.name;
        //判断上传的文件是不是excel格式文件
        console.log(fileNames)
        var postfix = fileNames.substr(fileNames.lastIndexOf(".")).toUpperCase();//得到的是后缀名,且转换为大写
        var type=[".XLSX",".XLS"];
        if(!type.includes(postfix)){
            toast('文件格式不是excel')
        }else{
            //进行数据校验
            //console.log(XLSX);
            //读取文件
            var reader=new FileReader();
            reader.onload=function (e) {
                var data=e.target.result;
                var workbook=XLSX.read(data,{
                    type:'binary'
                })
                var sheetNames = workbook.SheetNames;
                var worksheet = workbook.Sheets[sheetNames[0]];
                var  supplement=XLSX.utils.sheet_to_json(worksheet)
                datas.object=supplement
            };
            reader.readAsBinaryString(file);
        }
    });
more >>

展开全文 >>

UUID

UUID 是 通用唯一识别码（Universally Unique Identifier）的缩写，是一种软件建构的标准，亦为开放软件基金会组织在分布式计算环境领域的一部分。其目的，是让分布式系统中的所有元素，都能有唯一的辨识信息，而不需要通过中央控制端来做辨识信息的指定。如此一来，每个人都可以创建不与其它人冲突的UUID。在这样的情况下，就不需考虑数据库创建时的名称重复问题。最广泛应用的UUID，是微软公司的全局唯一标识符（GUID），而其他重要的应用，则有Linux ext2/ext3文件系统、LUKS加密分区、GNOME、KDE、Mac OS X等等。另外我们也可以在e2fsprogs包中的UUID库找到实现。

1. Install

1
npm install uuid

2. Create a UUID (ES6 module syntax)

1
2
import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

… or using CommonJS syntax:

1
2
const { v4: uuidv4 } = require('uuid');
uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'

API Summary

more >>

展开全文 >>

rollup

一、简介

打包工具的作用是，将多个 JavaScript 脚本合并成一个脚本，供浏览器使用。

浏览器需要脚本打包，主要原因有三个。

（1）早期的浏览器不支持模块，大型网页项目只能先合并成单一脚本再执行。

（2）Node.js 的模块机制与浏览器不兼容，必须通过打包工具进行兼容处理。

（3）浏览器加载一个大脚本，要比加载多个小脚本，性能更好。

目前，最常用的打包工具是 Webpack。它的功能强大，但是难学难用，一直被人诟病。

img

rollup.js 的开发本意，是打造一款简单易用的 ES 模块打包工具，不必配置，直接使用。这一点，它确实做到了。

后来经过不断发展，它也可以打包 CommonJS 模块。但是，这时需要经过复杂配置，实际上并没有比 Webpack 简单多少。

因此建议，只把 rollup.js 用于打包 ES 模块，这样才能充分发挥它的优势。下面你会看到，那是多么简单的一件事。

如果你的项目使用 CommonJS 模块，不推荐使用 rollup.js，优势不大。

如果你还不了解 ES 模块与 CommonJS 模块之间的差异，详见 ES6 教程。

二、安装

本文采用全局安装 rollup.js。

more >>

展开全文 >>

three.js开发指南 笔记

准备

1
2
3
4
5
6
7
8
9
10
11
12
13
1、准备
-Three.js自身也提供了在线场景编辑器，访问地址为http://threejs.org/editor。使用该编辑器，可以用图形化方法创建Three.js场景。


-Three.js 开发指南示例代码
https://github.com/josdirksen/learning-threejs

-禁用Firefox和Chrome的安全性检测
	如果你使用的是Chrome浏览器，有种方式可以禁用安全性设置，这样就可以在没有Web服务器的情况下查看示例。需要注意的是，应尽量避免用下面的方法访问真正的网站，因为这样做会使浏览器向各种恶意代码敞开大门。用下面的命令可以启动Chrome浏览器同时禁用所有安全特性。
    对于Windows操作系统：chrome.exe --disable-web-security
    对于Linux操作系统：gogle-chrome --disable-web-security
    对于Mac OS操作系统：open -a "Google Chrome" --args --disable-web-security
通过这种方式启动Chrome浏览器就可以直接运行本地文件系统中的示例。

实例

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example - Baseic skeleton</title>
    <script src="./js/three.js"></script>
    <script src="./js/TrackballControls.js"></script>
    <!-- 主要用于检测动画运行时的帧数。在动画运行时，该库可以在一个图片中显示画面每秒传输帧数 -->
    <script src="./js/Stats.js"></script>
    <!-- 实时调整动画参数 -->
    <script src="./js/dat.gui.js"></script>
    <script src="./js/util.js"></script>

</head>
<body>
    <div id="webgl-output"></div>

    <script>
        // 
        var camera, renderer, scene;
        function init() {
            
            // 初始化状态栏
            var stats = initStats()
            // 创建一个场景，该场景将包含所有元素，例如对象、相机和灯光。
            scene = new THREE.Scene();

            // 创建一个摄像头，它定义了我们要看的地方
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

            // 创建渲染并设置大小
            renderer = new THREE.WebGLRenderer();
            // 将场景的背景颜色设置为接近黑色
            renderer.setClearColor(new THREE.Color(0x000000));
            // 设置场景的大小
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true

            // 创建了坐标轴（axes）对象并设置轴线的粗细值为20
            var axes = new THREE.AxesHelper(20);
            //  在屏幕上显示轴
            scene.add(axes);

            // 创建平面 宽60 高20
            var planeGeometry = new THREE.PlaneGeometry(60, 20);
            // 创建材质对象来设置平面的外观
            var planeMaterial = new THREE.MeshLambertMaterial({
                color: 0xffffff
            })

            // 将大小和外观组合进Mesh对象并赋值给平面变量
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.receiveShadow = true
            // 旋转并定位平面
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.set(15, 0, 0);

            // 将平面添加到场景中
            scene.add(plane);

            // 创建一个立方体
            var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
            // 为立方体添加材质
            var cubeMaterial = new THREE.MeshLambertMaterial({
                color: 0xFF0000,
            });

            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.castShadow = true
            // 定位立方体
            cube.position.set(-4, 3, 0);

            // 将立方体添加到场景中
            scene.add(cube);

            // 创建一个球体
            var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
            var sphereMaterial = new THREE.MeshLambertMaterial({
                color: 0x7777ff,
            });

            var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
            sphere.castShadow = true
            // 定位球体
            sphere.position.set(20, 4, 2);

            // 将球体添加到场景中
            scene.add(sphere);

            // 将相机定位并指向场景中心
            camera.position.set(-30, 40, 30);
            // 摄像机将决定哪些东西会被渲染到场景中。在这段代码中，我们使用x、y、z的位置属性来设置摄像机的位置。
            // 为了确保所要渲染的物体能够被摄像机拍摄到，我们使用lookAt方法指向场景的中心，默认状态下摄像机是指向（0，0，0）位置的
            camera.lookAt(scene.position);


            // 为阴影添加聚光灯
            var spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(-40, 40, -15);
            spotLight.castShadow = true;
            spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
            spotLight.shadow.camera.far = 130;
            spotLight.shadow.camera.near = 40;
            scene.add(spotLight);


            // 添加微妙的环境照明
            var ambientLight = new THREE.AmbientLight(0x353535);
            scene.add(ambientLight);

            // 将渲染器的输出添加到html元素
            document.getElementById("webgl-output").appendChild(renderer.domElement);

            // 渲染场景
            renderer.render(scene, camera);
            //初始化控制器
            var trackballControls = initTrackballControls(camera, renderer)
            var clock = new THREE.Clock()

            // 定义属性，默认值
            var controls = new function() {
                this.rotationSpeed = 0.02 // 立方体旋转速度
                this.bouncingSpeed = 0.02 // 球体弹跳速度
            }
            console.log('controls:', controls, dat);
            // 需要将这个JavaScript对象传递给data.GUI对象，并设置这两个属性的取值范围
            var gui = new dat.GUI()
            gui.add(controls, 'rotationSpeed', 0, 0.5)
            gui.add(controls, 'bouncingSpeed', 0, 0.5)


            renderScene()
            
            // 动画
            var step = 0;
            function renderScene() {
                stats.update()
                // TrackballControl.js库也需要在render函数渲染完一帧后更新
                trackballControls.update(clock.getDelta())

                cube.rotation.x += controls.rotationSpeed
                cube.rotation.y += controls.rotationSpeed
                cube.rotation.z += controls.rotationSpeed
                // cos 函数返回一个数值的余弦值
                step += controls.bouncingSpeed
                sphere.position.x = 20 + 10*(Math.cos(step))
                sphere.position.y = 2 + 10*Math.abs(Math.sin(step))
                
                requestAnimationFrame(renderScene)
                renderer.render(scene, camera);
            }
        }

        window.addEventListener('resize', onResize, false)
        function onResize() {
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
        }
        // 初始化
        init()

       </script>
</body>
</html>

-threejs

-控制器库TrackballControls.js。
	-有了它便可以利用鼠标任意移动摄像机，以便从不同角度观察场景

在代码中，首先定义了场景（scene）、摄像机（camera）和渲染器（renderer）对象。
	1、场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。如果没有THREE.Scene对象，那么Three.js就无法渲染任何物体，在第2章还会对THREE.Scene进行详细介绍。示例中所要渲染的方块和球体稍后将会添加到场景对象中。
	
	2、还定义了摄像机对象，摄像机决定了能够在场景看到什么。
		你还会进一步了解摄像机对象能够接受的参数。
    3、我们定义了渲染器对象
		该对象会基于摄像机的角度来计算场景对象在浏览器中会渲染成什么样子。最后WebGLRenderer将会使用电脑显卡来渲染场景。

-dat.GUI

	在创建类似三维场景和动画时，我们需要尝试很多次才能够确定最合适的速度和颜色。如果有一个GUI（可视化图形界面）允许我们在运行期间修改这些属性，那么事情就会变得很简单。幸运的是，这样的GUI是存在的

three.js基础知识

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

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