- 博客(43)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 TypeScrip
数据类型boolean string number any void undefined null # 数组list:number[]=[1, 2, 3, 4];# 枚举enum Weeaks{ Mon, Tues, Wed}# 联合数据类型data:number | string | boolean# 类型推论let x3 = 3; x3 = ...
2020-02-07 21:16:46
237
原创 工程化项目之 npm和yarn --- LTS
npm常用指令`npm i packageName -D`: --save-dev 写入devDependencies`npm i packageName -S`: --save 写入dependencies`npm i packageName -g`: --global 全局安装 注意，一定不能使用-G`npm info packageName`: 查看包的版本`n...
2019-09-08 10:50:58
309
原创 正则模式---g
众所周知正则的g模式是全局模式，当使用g模式的时候，匹配字符串的时候会尽可能多地去匹配（其中是使用了lastIndex这个特性）；不使用g模式的时候，就只要匹配到了就立马返回。下面分别看一下如果同一个字符串采用不同的模式匹配多次会产生怎样的效果。采用g模式不采用g模式同样的字符串使用不同的模式得到的结果不一样，究竟是为什么呢？让我们打个断点看看究竟发生了什么g模式下的断点第一次匹配第二次匹配第三次匹配可以发现，lastIndex发生了三次变化，首先是0，然后是1，最后是0.非
2020-11-09 09:49:39
691
原创 前端动画解决方案
对于一些简单的纯展示的需求可以通过svg或者gif通过image或者img标签进行嵌入。如果需要一些比较复杂的，多图形动态展示的话，那么就需要用到lottie + json（AE生成），但如果遇到3D的需求lottie就显得有点吃力，所以就需要vedio或者gif,然而纯3D展示不能满足需求，还需要有一些交互，比方说我点击对应的一个地方，就需要展示那个地方的数据，那么three.js的API结合一些canvas的基础就用得上...
2020-08-22 17:38:11
230
原创 小程序项目总结
小程序框架每个小程序的结构都是由两个主要部分构成：主体部分 + 各个页面。类似于许多框架，主体部分主要用于核心的配置，各个页面主要用于不同业务场景。1.1，主体部分主要由3个文件构成1）app.js：小程序逻辑，初始化APP2）app.json ：小程序配置，比如导航、窗口等3）app.wxss：公共样式配置1.2，页面由4个文件构成1）js：页面逻辑，相当于控制层（Control层）；也包括部分的数据（Model层）2）wxml：页面结构展示，相当于视图层（View层）3）wxss：页
2020-08-21 09:04:21
481
原创 安全整改思考之道
最近项目组安全整改，然后需要把所有的安全隐患问题一扫而空，其中也踩了不少的坑，记录下来，以便后续遇到类似问题能立马解决CSPCSRFCSP全称Content Security Policy，主要限制图片资源、css资源、js资源的加载设置方式# 使用meta标签<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src 'self' data:; script-src 's.
2020-07-27 20:39:51
192
原创 小程序项目搭建
使用uni-app作为框架，Chrome作为调试工具。https://uniapp.dcloud.io/frame目录为什么选择uni-app环境部署为什么（点解？？？）主要是这个原因 -- 90%兼容vue，上手成本低# 数据双向绑定<img :src="imgSrc"/><input v-model="reason" placeholder="填写理由" class='reason'/><image src="{{imgSrc}}"><.
2020-07-03 10:16:53
411
原创 node---模块
目录背景介绍模块规范模块实现核心模块模块调用栈包与NPM背景介绍在Web发展历程中，浏览器涌现了丰富多彩的标准API供JavaScript调用，这些过程发生在前端，后端JavaScript的规范却远远落后。主要存在以下缺陷：没有模块系统标准库较少没有标准接口缺乏报管理系统CommonJS规范提出，主要弥补当前JavaScript没有标准的缺陷，以达到像Python、Ruby和Java、具备开发大型应用的基础能力，而不是停留在小脚本程序的阶段。他们期望那些用CommonJS
2020-06-27 16:14:55
138
原创 Node---Buffer
目录Buffer出现解决了什么问题Buffer与String在使用上的区别Buffer内存Buffer的出现解决了什么问题解决了JavaScript在处理二进制流方面的软肋。例如流和文件操作，因为与操作系统或其它进程的交互总是以二进制数据的形式发生。可以突破Node内存限制，可以更大范围使用内存。区别# 声明let str = 'xxx'; // String可以直接使用字面量声明let buf1 = Buffer.from('xxx') // Buffer 需要通过Buffer.f
2020-06-26 14:45:29
144
原创 图片服务器搭建
图片服务器# 在Server那块使用yarn add highcharts-export-server -D# 然后使用PM2管理导出图片服务# 可能存在问题1. node版本过低，导致下载highcharts-export-server不成功解决方案 1）https://nodejs.org/en/download/下载一个linux安装包 2）将包解压到/home/ccq目录下面 3）去/etc/profile下面设置环境变量，加上下面这一句 export PATH=PATH:/
2020-06-19 14:31:02
355
原创 echarts
问题：改变legend的text的宽度：legend.textStyle.rich.name.width,改变legend的整体位置：legend.right(left top bottom)
2020-04-14 11:22:56
157
原创 node实践记录
process.envprocess.env属性返回一个包含用户环境信息的对象。最常见的需求，前端需要根据不同的环境（dev，prd），来调用不同的后端接口。如果用webpack，是这么做的：1）package.json里的命令：# 通过cross-env配置项往环境里面注入变量NODE_EVN"scripts": {"dev": "cross-env NODE_ENV=develop...
2020-01-16 17:33:51
395
原创 构建vue项目常见错误集锦 ---LTS
webpack打包出现这样的错误A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:Invalid: `{ presets: [{option: value}] }`Valid: `{...
2020-01-08 09:13:57
2119
原创 2019年度总结
大纲技术栈能力栈2020需要提升的方面技术栈# 框架 - vue今年核心技术栈是围绕vue展开，由此学会了组件化封装思想，vue调试技巧（console>debbug>vuetool>resource），学会了如何去更好地扩展项目，如何命名css、国际化、适配大小屏，还有就是如何去将项目更好更快地运行。# 可视化 - echart 国产 - highchar...
2019-12-31 10:27:29
124
原创 版本迭代那些事
版本常见问题# PO、PM、Testers、Developer三者的信息不对称ex：一般而言，新的需求到来，首先是PO或者PM知道，然后就是开发，然后就没有然后了，测试对中途插入的需求是无法知晓的，然后造成了测试回归案例的时候发现新的功能并以为是bug，造成测试提TD。当问题走到开发那里的时候被打回然后告知新需求，然后测试再close掉，这个过程不单只耗费了测试的时间，而且还耗费了开发的时间。...
2019-12-30 16:13:18
161
原创 项目实战下的经验总结
背景实现一个可以在wps、office的数据报表，功能： 图片插入、标题修改、echart/highchart图表的生成，页眉、页脚等等使用工具# officegen主要用于将对应的数据插入到office和wps中去，内置足够多的API用于操作Office# node、highcharts-exports-server用于生成图表# 一门后台语言，node、python、p...
2019-12-27 17:53:58
500
原创 window下的小技巧提高你的开发效率
使用注册表完成一些右键打开的功能注册表是Microsoft Windows中的一个重要的数据库，用于存储系统和应用程序的设置信息。# 书写规范// 这一句一定要加上，不然执行不了Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory\Background\shell\ws] // 右键浮窗的文案展示@="w...
2019-09-21 13:32:43
236
原创 shell基础命令
# 表示注释的意思#! eg:'#!/usr/bin/env bash' 结合一起时候，后面一般接着路径，然后就是程序。表示脚本用什么程序执行，第一行指令在不明确声明什么程序去执行脚本的时候生效if 语句的结束标签是fi${} 获取变量的意思$() 执行命令，获取结果$0 获取执行脚本的第一个参数 eg: ssh **.sh param1 param2 其中$1表示param2chmo...
2019-09-21 12:22:44
183
原创 搭建GitLab以及配置CI/CD流水线
CI/CDgitlab搭建流程配置gitlab的runner在开始之前搭建流水线前，你需要准备的东西gitlab服务器一些基本的服务器脚本(这里主要的是shell脚本)gitlab搭建流程# 更新软件包 yum update -y# 安装 sshdyum install -y curl policycoreutils-python openssh-server# 启用并启...
2019-09-14 09:22:24
4740
原创 版本控制之 GIT踩坑之旅
一号开发任务坑2019年7月9日这天，当时有个紧急的bug需要从分支2.0.10切换到2.0.8，为了不再去拉代码，所以第一次使用了命令stash，当时出现了一个问题，就是提示说...rm: commond not found。原来stash命令底层应用到rm，而且当时我的git内置的rm不知道咋滴就没了，后来重装一次git后rm命令就回来了。然后git stash也成功了，结合git stas...
2019-09-08 10:45:26
330
原创 ECMAScript - GrammarⅠ
变量声明及赋值// 这里包含两步：1、声明变量；2、变量赋值var a = 10;// c被声明为全局变量 var b = c = 10;原始值与引用值原始值 > 基本类型 > 栈内存 (Null, Undefined, String, Number, Boolean)引用值 > 引用类型 > 堆内存 (Function、 Object、 Array)...
2019-09-08 10:37:45
186
原创 ECMAScript - Object Ⅰ
在编程的时候，不能期望所有功能都是现成的，因此你可能逐个编写计算机需要执行的代码和步骤，而忽略了这些步骤之上的抽象概念。在编程时，注意你的抽象级别什么时候过低时一项非常有用的技能。创建对象的方式1. 字面量2. 系统自带的构造函数 new Object()3. 自定义的构造函数4. Object.create(null)对象属性的种类- 自有属性 - 数据属性 - 存...
2019-09-08 10:35:32
112
原创 ECMAScript - Function Ⅱ
call、bind、apply三者都是绑定函数的this指向，其中call和apply会立即执行，bind会返回一个函数，apply次参为数组。DOM.addEventListener('click', function(){}.call(this), false); // 这里面的this指向DOM，因为addEventListener是谁调用this指向谁，然后如果函数里面直接使用this...
2019-09-08 10:29:23
93
原创 ECMAScript - Function Ⅰ
- 在类里面，static声明的方法只提供给构造函数使用，不能传递给任何子例。如果在实例里使用会出现`TypeError`# 思考: 当实参没有传值给对应的形参，内部给形参赋值，是没有用的。因为形参和实参没# 有一 一对应的话，那么arguments是无法跟实参产生联系的，也就是说undefined的时候# 形参和arguments是不产生联系的function test(a, b) {...
2019-09-08 10:26:49
102
原创 ECMAScript 之Array基础篇Ⅰ
数组一些行为不同于对象Ⅰ. 自动更新`length`Ⅱ. 当设置`length`值比较小，会截断数组Ⅲ. 类属性是`Array`Ⅳ. 从`Array.prototype`继承方法如何创建一个0-100的数组Ⅰ. Object.keys([...Array(100)])Ⅱ. Array.from({ length: 100 }, function () { return this.v...
2019-09-08 10:07:03
122
原创 DOM 基础篇 Ⅱ
HTML DOM 对象 - 方法和属性# 一些常用的 HTML DOM 方法：getElementById(id) - 获取带有指定 id 的节点（元素）appendChild(node) - 插入新的子节点（元素）removeChild(node) - 删除子节点（元素）从页面上拿掉节点，内存的节点还存在，node.remove() - 也是删除子节点(元素),不单止在页面上拿掉节点，...
2019-09-08 09:41:31
238
原创 DOM 基础篇Ⅰ
三种对象# 本地对象 Native ObjectObject、Function、Array、String、Number、 Boolean、 Error、EvalError、RangeError、ReferenceError、TypeError、URIError、Date、RegExp其中Number、String和Boolean也称为包装对象# 内置对象 Build-in Object...
2019-09-08 09:31:24
154
原创 BOM
BOM （Browser Object Modal浏览器对象模型）。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。定义全局变量： var a = 99; let a = 9...
2019-09-08 09:08:09
120
原创 了解JSON
JSONJSON是一种数据格式，不是一种编程语言，而且是JavaScript的语法的子集。支持两种数据类型：第一种、js中的基本类型(除了undefined外)第二种、数组和对象（不支持函数）注意： JSON对象的属性必须加双引号，其次，没有末尾的分号，因为这不是JavaScript语句，所以不需要分号。了解JSON之所以流行于互联网中传输结构化数据的原因1.JSON拥有与Ja...
2019-06-04 23:53:33
224
原创 常见职位英文缩写
CTO（首席技术官）英文Chief Technology Officer，即企业内负责技术的最高负责人。这个名称在1980年代从美国开始时兴。CEO在经济组织机构中，首席执行官（Chief Executive Officer，缩写CEO）是在一个企业中负责日常事务的最高行政官员，主司企业行政事务，又称作司政、行政总裁、总经理或最高执行长。PM（Project Manager），项目主...
2019-06-03 00:39:47
4316
原创 WebPack学习
2019-5-7 点亮webpack技能/* * yarn install 安装所有依赖 yarn add 安装某个依赖 * 多个依赖之间可以使用空格隔开 -D将依赖写进devDependencies中 */1. yarn add webpack webpack-dev-server webpack-cli -D2. 设置webpack配置文件，主要是文件的输入输出 mod...
2019-05-08 09:27:09
99
原创 JS编码小技巧
1、如何快速创建一个数组长度为100，value为0 - 99 eg:[0,1,2,3…,99]Array.from({length:100},function(){return this.len++},{len:0})说明：使用普通函数而不是箭头函数，因为箭头函数会把this指向绑定至window，导致会有污染全局的嫌疑2、去除浮点数据小数点后的有效数字let data = 12345...
2019-04-27 15:51:28
173
原创 前端开发种踩过的坑
今天聊聊在新公司一个多月来前端所踩的坑规范在公司里面，踩坑最多莫过于变量名命名、文件名命名、函数名命名、标签名命名常量统一下划线加大写变量统一驼峰严禁下划线，vue文件的name除了驼峰外首字母还得大写不能使用魔术数字除了1，0，-1文件名使用功能模块+下划线+具体功能细节，而且每个功能基本拥有一个common文件，用于存储该业务代码复用的组件和工具。对应地，最大的功能模块也有一个c...
2019-04-24 21:51:37
347
原创 前端错误处理与调试
错误处理try-catch-finallytry catch应用场景：适用处理无法控制的错误，一般与throw抛出错误搭配 eg: 对一个陌生的调用库使用。使用时为了提高代码的可维护性，要加上注释。错误类型 7种Error 所有错误都继承于此EvalError 如果不是函数调用eval函数则会报此错。eg: new eval()、eval = fooRangeError 超出有效范围则...
2019-04-22 00:13:23
513
原创 玩转Git
git add *: 将文件加入本地暂存区git commit -m '*': 将文件加入本地仓库git commit push origin *: 将文件推送至远程仓库git branch -a:查看所有本地的分支情况git branch -r:查看所有远程仓库分支情况git branch -vv:查看本地分支与远程仓库的关系git branch -D *:删除分支git res...
2019-04-20 00:08:32
139
原创 撤销Git commit但没git push
撤销提交☞ git commit☞ git status 查看仓库当前状态☞ git reflog 查看仓库日志获取提交ID☞ git reset --hard ***☞ git status 查看仓库当前状态如果类似这样一条语句Your branch is ahead of 'origin/master' by 1 commit.则说明你的仓库已经commit了一些修改至本地仓库☞ g...
2019-04-12 19:25:04
175
原创 Javascript之 深入理解New
New 的基本用法简介JavaScript 语言中，创建一个对象有许多方法，其中之一是使用New关键字外加一个函数(这个函数被大多数人称为构造函数)function fn(a,b){}let obj1 = new fn(para1,para2);let obj2 = new fn;上面的两种创建对象的方法都是允许的,如果函数不需要用到参数,那么可以传参也可以不传参，如果需要用到参...
2019-02-23 11:14:42
245
转载 JavaScript 类的概念
Class 的基本语法简介JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};...
2019-02-18 23:26:48
1072
1
原创 Less&Sass部分讲解
今天我们来聊聊两款Css预编译处理语言的使用变量的声明与使用 //声明一个Css变量 LESS SASS@fontSize:10px; $fontSize:10px;//使用这个变量.test{ .test{ font-size:@fontSize; font-size:$fontSize;} } ...
2019-01-01 15:26:36
189
转载 ES6之Object详解
对象的扩展对象（object）是 JavaScript 最重要的数据结构。ES6 对它进行了重大升级，本章介绍数据结构本身的改变，下一章介绍Object对象的新增方法。属性的简洁表示法ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于c...
2018-12-25 10:15:48
1059
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人