kittyjie-CSDN博客

原创 Vue2在实际项目中的应用

1，项目目录结构概览2，命名规范概览3，前端工具，js框架以及库介绍4，模块划分以及路由配置5，程序入口启动6，公共组件介绍7，服务层介绍8，打包发布9，表格组件功能介绍...

2019-05-08 14:13:44 420

原创 webpack5 script和css随机加载导致echarts渲染问题

开发中遇到一个奇怪的问题，首页echart和mapbox地图会随机性的获取不到DOM节点的宽高，导致无法渲染。研究了好久，无意间发现了一个现象，在Chrome控制台的网络面板中，css的加载顺序会在js之后。一般来讲，css都应该最先加载，防止用户看到原始的DOM。调查后发现，build出来的index.html内容如下：<head> <script defer="defer" src="/static/js/chunk-vendors.c1b25dfe.js">&

2021-12-15 10:13:55 1354

原创 f 等于几，为什么？

(() => { { function f() { 'A' } f = 1; f = 2; function f() { 'B' } f = 3; } console.log('f =', f);})();

2021-05-31 16:21:49 753

原创 js全排列函数

function permutate(arr) { let result = []; if(arr.length > 1) { let left = [arr[0]], rest = arr.slice(1, arr.length), preResult = permutate(rest); for(let i=0; i...

2019-10-26 14:37:25 515

原创 focusin&focusout 与click事件冲突问题

具体问题见：https://stackoverflow.com/questions/53773661/not-able-to-detect-button-press-when-using-focusout-and-focusin-along-with-click遇到的问题是用jquery on监听element ui dropdown menu里面的button click事件，做一些统计。但...

2019-09-19 13:32:54 892

原创 js canvas图片添加重复背景水印

/** * 给图片添加水印 * @memberof DomUtils. * @param {string} dataUrl - png图片的data url * @param {string} text - 水印文字 */ watermarkImage (dataUrl, text, style = {opacity: 0.5, font: '14px serif'...

2019-09-11 10:53:29 1358

原创 typescript枚举类型编译后代码技巧

var Tristate;(function(Tristate) { Tristate[(Tristate['False'] = 0)] = 'False'; Tristate[(Tristate['True'] = 1)] = 'True'; Tristate[(Tristate['Unknown'] = 2)] = 'Unknown';})(Tristate || (Tris...

2019-09-09 18:08:57 651

原创基于Element UI的Select控件实现多选框中单行显示&左右移动

控件主要功能，可以单行显示多选的tag，并且可以利用左右键移动tag在组件中的位置直接上代码：<el-select v-model="tags" ref="tagsSelect" multiple filterable remote clearable popper-class="tag-input-options" :remote-...

2019-09-07 10:24:24 3182 1

原创 Element UI Popover组件多次点击后不再居中于触发节点的解决办法

在并排渲染多个popover组件的时候，当popover里面的内容宽度不一样，点击几次就会出现popover不再相对于触发DOM居中了，将出现很大的偏移。但是在触发滚动条或者改变窗口大小时，popover位置又会调整回来。这是因为element ui在使用的popper.js控件中监听了resize以及滚动事件，并在这两个事件中重新计算位置。那么怎么利用这个事件调整位置呢，因为element ...

2019-09-07 10:02:08 2025

原创 Vue项目中使用mockjs

mockjs功能还是挺强大的，网上好多文章介绍有的说在dev-server.js中导入，这样的问题是build中掺入了业务逻辑层的文件。有的是在main.js中导入，还有的在组件中导入，但问题是，同一套代码在构建dev版和prod版的时候还需要手工改代码，才能自动build。现在要达到一个目的，就是自动区分dev和prod，可以自动化build，并且mock的代码单独放在业务逻辑层里。首先...

2019-07-17 17:16:01 1882

原创 Array.prototype.reduce使用技巧

先看一下规范对这个方法的几个说明：Array.prototype.reduce ( callbackfn [ , initialValue ] )NOTE 1：callbackfnshould be a function that takes four arguments.reducecalls the callback, as a function, once for each e...

2019-07-16 11:16:57 395

原创 Vue & Typescript 组件传递数组问题

问题是要区分数组是null还是空或者有值，对应的显示会不同。null时什么都不显示，空数组是显示查找结果为空，有值显示列表。由于查找的过程在父组件进行，需要把数据传递给子组件，在子组件中用prop进行声明。那么这个数组的初始状态怎么设置呢？一开始是在子组件中用@Prop设置默认值null：@Prop({type: Array, default: () => null})，然后父组件把...

2019-06-28 16:45:31 2483

原创 Vue2在实际项目中的应用——表格组件功能介绍

TableList组件是以ElementUI Table表格组件为主，并封装了一系列其它组件，提供了以下主要功能筛选功能搜索功能分页功能加载过程以及错误信息提示功能行展开功能单选行功能 switch开关组件功能 progress进度组件功能分行显示日期时间组件功能动态组件渲染功能自定义列组件功能表格组件可以分为三个部分：头部（筛选，搜索）、数据部分、底...

2019-05-14 14:20:44 1853

原创 Vue2在实际项目中的应用——打包发布

由于这个项目需要build出来三个端，所以需要对build.js文件做一些修改，以满足需求。在执行命令的时候会用如下方式调用：npm run build:operationnpm run build:label这样会直接build某一端的代码。如果直接运行npm run build会同时构建几个端的代码。在执行npm run build:operation这个命令的时候，其实在...

2019-05-13 14:33:39 531

原创 Vue2在实际项目中的应用——服务层介绍

所谓的服务层就是对http请求的封装，最好不要直接在业务逻辑的代码里掺杂像下面类似的直接ajax调用：$.ajax({ url: 'https://url.com/user', type: 'get', dataType:'json', contentType: "application/json;charset=UTF-8", cros...

2019-05-13 14:08:09 590

原创 Vue2在实际项目中的应用——公共组件介绍

这个公共的库在项目中是通过dependencies引入进来的："dependencies": { 。。。 "frontend-library": "git+https://git.com/Frontend/library.git", 。。。 },在开发的时候可以换成file协议，这样方便调试。在ci中，依赖的库不是每次都用npm install/updat...

2019-05-10 14:31:55 878

原创 Vue2在实际项目中的应用——程序入口启动

由于一个项目中要build出来几个访问端口，所以会有几个对应的main-xxx.js。main中主要干的几件事：1）加载各种库，包括element-ui和通用的library2）判断是开发环境还是生产环境，进行不同的初始化过程1）如果是开发环境，直接初始化app组件，假定用户信息在localstorage中已经存在了2）如果是生产环境，先检查是否已经登录，然后请求api加载用户...

2019-05-10 14:07:25 1695

原创 Vue2在实际项目中的应用——模块划分以及路由配置

整体项目模块的划分以业务逻辑为主，不按照vue组件类型进行划分。按照组件类型划分会很难维护，降低查找文件的速度。下面以系统管理举例：系统管理在UI上是一个一级菜单，下面会有三个二级菜单，包括审计，消息管理和发布者管理。所以直接映射到源代码结构就是system-mgmt目录下有三个二级目录。其中消息管理下面直接是相应的组件以及服务，而发布者管理下面又进行了一次划分，因为这个功能有三个ta...

2019-05-09 14:21:48 1135

原创 Vue2在实际项目中的应用——前端工具，js框架以及库介绍

前端的工具就是webpack2，做了以下几点优化1）加入了StyleLintPlugin，对scss进行格式进行检查2）使用HappyPack，ParallelUglifyPlugin进行build的速度优化3）使用ContextReplacementPlugin优化moment库的多语言支持4）通过定义externals把一些库用CDN方式引入，减小文件尺寸，优化加载速度e...

2019-05-09 13:50:05 449

原创 Vue2在实际项目中的应用——命名规范概览

vue的官方网站现在有了一个风格指南（https://cn.vuejs.org/v2/style-guide/），当时写这个项目的时候，这个指南还不是很完整，所以项目并没有完全遵循这个指南。指南终究是指南，也没必要完全遵循，只要项目组内大家根据使用习惯达成一致就行。目录命名：一般以小写+中划线命名，比较易读文件命名：项目中采取了和目录命名基本一致的规则，但是会加一个表示不同组件的后缀。比如...

2019-05-08 15:05:09 2305

原创 Vue2在实际项目中的应用——项目目录结构概览

项目采用的是Vue2+Webpack2，分成了几个项目：一个通用的library项目，里面是一些公用的组件；一个是平台项目，会build出来三个端，每个端不同角色的用户会登陆各自的平台。下面先看一下library项目结构：其中：components目录是通用的组件封装，比如表格之类的directives目录是一些指令，比如最大化对话框等filters目录是过滤器，比如时间格...

2019-05-08 14:12:51 946

原创用Vue&ElementUI Upload组件实现自定义顺序上传

产品要求：最多选择100个文件每张图最大2M 需要给出每张图上传的结果：成功从列表中删除，失败提示网络错误，大于2m也需要提示支持重试遇到的问题：upload组件不支持多文件顺序上传，如果一次性上传100张图，压力有点大不支持顺序上传的原因，在elementui的源码中，手动调用submit方法时，会过滤status为ready的file，然后开始上传过程，上传过程异步，就会...

2019-01-04 14:47:35 10560 5

转载 ES2018: RegExp named capture groups

ES2018: RegExp named capture groups[2017-05-15] dev, javascript, esnext, es2018, regexpThe proposal “RegExp Named Capture Groups” by Gorkem Yakin, Daniel Ehrenberg is at stage 4. This blog post explai...

2018-07-04 11:27:30 413

原创 Froala Editor 2.8.1破解过程

这个编辑器功能很强大，文档也很规范，但会有版权问题，下面破解过程仅供个人学习使用，请购买正版版权。以froala_editor.pkgd.min.js这个文件为例，版本是2.8.1，去官网自己下载。用sublime text的JsFormat插件格式化以后一共大概13309行代码。<!DOCTYPE html><html><head> <meta...

2018-06-13 10:03:56 10650 7

转载细数Javascript技术栈中的四种依赖注入

https://www.cnblogs.com/front-end-ralph/p/5208045.html作为面向对象编程中实现控制反转（Inversion of Control，下文称IoC）最常见的技术手段之一，依赖注入（Dependency Injection，下文称DI）可谓在OOP编程中大行其道经久不衰。比如在J2EE中，就有大名鼎鼎的执牛耳者Spring。Javascript社区中自...

2018-02-22 07:54:41 725

原创 Vue中实现简单的AOP

有个简单的需求，需要在前端记录用户的一些行为，联想到Java中可以用annotation加拦截函数调用实现，试着在JS中看看能不能也这样实现。annotation或者decorator的功能在JS中还处在草稿阶段，但是通过Babel的转换，已经可以使用了，例如React中的mobx状态管理，就可以通过decorator实现。下面是简单的实现过程：先通过npm安装babel-

2018-01-25 11:10:56 4571

原创让人崩溃的React Native问题

用React Native写App遇到一个诡异的问题，在debug版本安装到真机，啥问题也没有，但是release版本安装到真机，登录界面能出来，然后用React Navigation跳转到主页面就一直白屏。。。白屏。一开始试着用Reactotron加了好多log，最后发现是主页面里的组件没有渲染，虽然render方法执行了，但是啥也没渲染出来。组件库用的是Native Base，在rende

2018-01-09 10:15:52 2076 1

原创 H5页面中有关视频的一些问题

1）在红米3或者note3中，用户上传视频通过URL.createObjectURL生成blob url进行预览，会出现黑屏，不能播放的问题，这是浏览器内核的一个bug，具体参考：https://bugs.chromium.org/p/chromium/issues/detail?id=253465如果通过FileReader调用readasDa

2017-12-18 17:12:43 1071

原创 JS循环引用的问题

面试的被问到这样一个问题：var a={b:1};a.b=a;问a最终是什么结果？可以猜一猜当时没有想到这个问题的答案，其实也简单，是个循环引用而已，就是自己引用自己，a最终是个无限的对象：{b:{b:{b:{b:{b........如果你用JSON.stringify打印，会报循环引用异常，当时我猜是堆栈溢出异常，又没猜对。但是你console.log不会有什

2017-06-29 21:59:51 4411

转载大部分人都会做错的经典JS闭包面试题

http://www.cnblogs.com/xxcanghai/p/4991870.html目录由工作中演变而来的面试题JS中有几种函数创建函数的几种方式三个fun函数的关系是什么？函数作用域链的问题到底在调用哪个函数？后话由工作中演

2017-06-29 21:51:37 949

转载一道常被人轻视的前端JS面试题

http://www.cnblogs.com/xxcanghai/p/5189353.html前言第一问第二问变量声明提升函数表达式第三问第四问第五问第六问构造函数的返回值第七问最后

2017-06-29 21:40:48 886

原创 JS中多继承的几种实现方法

先了模拟一下new操作符的作用：function Person(name){ this.name = name;}Person.prototype.say = function(){ console.log(this.name);}var p = new Person("KD");p.say();var obj = {}Object.setPrototypeOf(o

2017-06-16 09:12:35 9359 1

原创金融数据类——美国对冲基金持仓

根据美国的法规，美国的对冲基金要定期披露持仓，在美国SEC的网站上可以找到原始的披露文件，如果想抓最原始的数据，可以去google一下网址。本文从另一个已经整理好这些持仓的网站去抓这些数据，网址是：www.insidermonkey.com。我写了几个程序，从这个网站抓取几个主要的对冲基金，资产管理规模在百亿美元以上的，扩展一下也可以抓网站上的其它基金，功能主要是查看，对比，这些对冲基金的持仓股票以及一些增减持变化情况，几个程序介绍如下：

2017-05-19 10:45:16 2339

原创金融数据类——CFTC持仓

CFTC的持仓数据详情可以从官方网站（http://www.cftc.gov/MarketReports/NetPositionChangesData/index.htm）获取，能拿到txt格式的历史数据，有时间可以自己去整理这些原始数据。其它网站也提供一些更好用的API，比如Quandl提供了CFTC数据的API，参考https://www.quandl.com/data/CFTC-Comm

2017-05-08 15:18:48 3024

原创 ES6学习——集合（Collections）：WeakMap 应用示例

这里看一下如何利用weakset实现class属性的私有化：var Person = (function() { var private = new WeakMap(); function Person(name) { var privateProperties = { name: name }; pri

2017-05-02 10:10:49 1179

原创 ES6学习——新的语法：Symbol private类属性

ES6本身并没有提供class属性的私有（private）还是公有（public）的特性，以前要实现类属性的私有化，一般可以通过下面这种方法进行模拟：function Person(name) { var _name = name this.setName = function(name) { _name = name; } this.getName = functio

2017-05-02 10:00:48 3878

原创金融数据类——国内贵金属

国内贵金属主要从银天下获取的，下面列出一些资产对应的URL，直接返回的JSON格式数据：上海黄金au(t+d) 黄金延期（http://api.baidao.com/api/hq/npdata.do?ids=101）上海白银ag(t+d) 白银延期（http://api.baidao.com/api/hq/npdata.do?ids=102）上海黄金99.99 黄金9999（h

2017-04-28 14:34:24 1350

原创金融数据类——债券，全球股指

www.investing.com这个网站上面提供的数据特别全，基本上覆盖了所有的主流金融资产的行情，原来我们都是从这上面抓数据。这个网站不需要登陆，而且流量大，对第三方的连接检查不严，所以对抓取数据比较有利。前几年这个网站都是用ajax轮询的方式从后端获取数据的，所以直接F12，查看请求的参数，然后用nodejs直接抓数据就好了，但现在随着websocket的普及，这个网站也更新了好多技术，

2017-04-25 15:04:07 2094

原创金融数据类——外汇，CFD

外汇交易一般都在MetaTrader 4，简称MT4上进行，MT4提供了一种编程语言类似C/C++，叫MQL4，可以直接挂到对应的图表上，接收数据。MT4上的脚本也有很多类型，实时抓取数据的脚本叫EA脚本。主要思路就是用cmd命令自动打开MT4，然后使用自动化脚本把写好的抓取数据脚本attach到行情图上，就可以开始抓数据了，收到数据之后实时写到mysql中，完成实时数据的抓取。抓到的都是ti

2017-04-19 15:56:48 1923 1