js
Cribug8080
这个作者很懒,什么都没留下…
展开
-
前端阅读笔记
使用 React Hooks 分离组件逻辑CSS counter计数器(content目录序号自动递增)详解一个 JS 库,用来在 JS 脚本里面方便地调用 Bash 命令原创 2021-09-16 11:49:37 · 192 阅读 · 0 评论 -
ts用法
interface 中定义函数的三种方法interface Person { readonly name: string, say?: {(a: string): string}, run?(a: string): boolean, eat?: (a: string) => string,}原创 2020-07-20 16:39:07 · 1242 阅读 · 0 评论 -
js笔记
日常js笔记滚动触底滚动触底// 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight原创 2020-06-28 21:19:47 · 151 阅读 · 0 评论 -
react笔记 Create React App
Create React App使用typescriptnpx create-react-app my-app --typescript添加less第一步 暴露webpack配置文件npm run eject多了一个config文件夹,这样就可以修改 webpack 相关配置了。第二步 添加lessnpm install --save-dev less-loader less...原创 2020-01-07 16:59:46 · 248 阅读 · 0 评论 -
SPA 应用路由原理
history模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...原创 2019-12-13 10:51:03 · 149 阅读 · 0 评论 -
函数节流(throttle) 函数防抖(debounce)
JS的函数防抖与节流搜索框输入文字后的联想。当用户频繁的输入应该在用户最后一次输入完成后进行提醒。这就是防抖(debounce)scroll事件有可能每秒触发50次,但是触发次数太多会消耗性能。让滚动事件每秒最多执行5次,就是节流(throttle)函数防抖function debounce(fn, delay = 1000) { var timer return fu...原创 2019-12-10 11:36:51 · 305 阅读 · 0 评论 -
mac os安装nvm
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash可能需要添加环境变量~/.bash_profileexport NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # ...原创 2019-11-11 15:02:14 · 199 阅读 · 0 评论 -
js作用域
js作用域es5作用域:全局作用域、函数作用域es6作用域:全局作用域、函数作用域、块级作用域es5作用域var out1 = "out1"; //全局作用域out2 = "out2"; //全局作用域function fn1(){ var inner1 = "inner1" //函数作用域 inner2 = "inner2" //全局作用域 window....原创 2019-10-30 15:52:06 · 145 阅读 · 0 评论 -
Vue3 调试
clone 代码 git clone https://github.com/vuejs/vue-next.git文件tsconfig.json。更改属性sourceMap: true。文件rollup.config.js。函数createConfig中的return前添加一句话output.sourcemap = true执行命令npm run dev。会生成packages/vue/d...原创 2019-10-13 13:49:42 · 1178 阅读 · 0 评论 -
koa-router async 不等待返回结果直接not found
场景:登录接口,当不添加async的时候可以正常访问,添加之后返回Not Foundrouter.post('login', async (ctx, next) => { console.log('login') await userService.findUserByName().then((res) => { console.log('findUs...原创 2019-07-09 19:08:40 · 2368 阅读 · 0 评论 -
js 原型链继承
构造函数的prototype的__proto__默认指向Object.prototype,是继承Object。function Animal(age){ this.age = age}Animal.prototype.getAge = function(){ return this.age + ", getAge, prototype"}Animal.prototyp...原创 2019-07-04 16:43:47 · 252 阅读 · 0 评论 -
js使用修饰器
依赖:.babelrcc文件{ "presets": ["@babel/preset-env"], "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose" : ...原创 2019-07-04 18:08:52 · 563 阅读 · 0 评论 -
log4j 使用笔记
const log4js = require('log4js')const path = require('path')const LOG_PATH = path.join(__dirname, './log/')//ALL<TRACE<DEBUG<INFO<WARN<ERROR<FATAL<MARK<OFFlog4js.configur...原创 2019-07-11 17:56:39 · 107 阅读 · 0 评论 -
IP 转换
let ipStr = "128.2.2.2-128.5.67.9";let STEP = 8, PART_NUM = 4;// 转换成二进制let ips = parseIptoArray(ipStr)console.log(ips)console.log(ips[0])console.log(ips[ips.length-1])//IP段转换成IP数组function pa...原创 2019-07-17 19:09:39 · 1165 阅读 · 0 评论 -
ant design pro 表搜索 地址与页面对应
当搜索条件变化时,改变地址改变页面内容,达到页面和地址一一对应。举个例子:当查看所有用户时,是一个表格分页,用户翻页第二页时,地址添加参数,表示当前是用户页面的第二页。// 默认页面http://localhost:8080/system/users// 翻页第二页http://localhost:8080/system/users?page=2&pageSize=10思路...原创 2019-07-31 15:33:11 · 624 阅读 · 0 评论 -
npm
npm 使用笔记命令npm i vue --savenpm创建项目# 登录npm login# 判断登录状态npm whoaminpm initnpm publish# 更改后应该更改package.js里面的版本号,然后执行npm publish记得添加readme.md文件让大家和自己知道使用方法。发布到git上面去...原创 2019-08-08 11:05:35 · 335 阅读 · 0 评论 -
使用trao trao-ui 的历程
搜索组件中我不想要搜索按钮<AtSearchBar value={this.state.value} onChange={this.handleChange} className="searchNoBtn"然后再全局样式中添加:我的就在app.less文件.searchNoBtn { .at-search-bar__action...原创 2019-08-13 17:26:27 · 1996 阅读 · 0 评论 -
js 标准内置对象 error
EvalError本对象代表了一个关于 eval 函数的错误.此异常不再会被JavaScript抛出,但是EvalError对象仍然保持兼容性.InternalError创建一个代表Javascript引擎内部错误的异常抛出的实例。 如: “递归太多”.RangeError创建一个error实例,表示错误的原因:数值变量或参数超出其有效范围。ReferenceError创建一个err...原创 2019-08-23 14:30:15 · 284 阅读 · 0 评论 -
snabbdom@0.7.3 文件内容
snabbdom@0.7.3snabbdom.js核心文件。包含init 返回patch函数h 返回vNodethunk patch优化类似于pureComponentscript方法引入后使用snabbdom全局变量。# 核心函数 返回patch函数function init(modules, domApi) { ...}modules是数组,可以是classM...原创 2019-08-28 15:09:28 · 329 阅读 · 0 评论 -
highlight 代码高亮
hljs.initHighlightingOnLoad(); //高亮全部hljs.highlightBlock(document.getElementById("viewSqlModalSql")); //改变HTML之后手动改变<!DOCTYPE html><html lang="en"><head> <meta charset="...原创 2019-09-25 16:00:03 · 895 阅读 · 0 评论 -
js 箭头函数 this
箭头函数没有this,所以箭头函数中的this指向上一层作用于的thisvar obj = { name:'name1', age:18, getName:()=>{ console.log('getName:',this) }, getAge:function(){ console.log('getAge:...原创 2019-03-13 10:19:41 · 136 阅读 · 0 评论 -
babel
babel 版本babel-loader@7需要babel-core babel-preset-envbabel-loader@8需要@babel/core @babel/preset-env原创 2019-07-04 10:43:19 · 160 阅读 · 0 评论 -
webpack 懒加载 部署应用 js 404
webpack懒加载出现的404场景部署前端项目-用户访问页面a(未访问其他页面、也没有其他页面的缓存)-码农更新代码-部署前端项目-用户由刚才的页面a跳转到页面b-js文件404原因:后来部署时候原来的js文件已经删除,但是index.html文件没有刷新,所以不能获取最新的js。解决办法:在懒加载的import后面添加catch,然后强制刷新页面。{ path: 'home',...原创 2019-05-23 18:11:09 · 942 阅读 · 0 评论 -
React 父子组件互相交互
script分为三个部分:ReactDOM.renderFather 构造父组件Sub 构造子组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...原创 2019-04-11 11:00:57 · 663 阅读 · 0 评论 -
vue 中使用 marked + highlight.js 代码高亮
markdown 代码高亮需要依赖npm install marked --savenpm install highlight.js --save这里使用的主题是monokai-sublime.css可以自行更换主题。结果<template> <div> <div class="hljs" ref="hlDiv" v-html="code...原创 2019-03-22 19:06:27 · 9406 阅读 · 1 评论 -
umi react router 路由
环境yarn global add umi //全局安装umi乌米mkdir myapp && cd myapp //创建空文件夹并进入文件夹yarn create umi//❯ app - Create project with a simple boilerplate, support typescript.//Do you want...原创 2019-03-13 17:42:52 · 12143 阅读 · 0 评论 -
lodash 总结
lodash–whilev4.17.5版本带有while的函数有四个:dropWhile 0->n-1 drop 新建一个数组,直到identity返回falsedropRightWhile n-1->0 droptakeWhiletakeRightWhile参数是一样的 fn(array, [predicate=_.identity])第一 默认情况 while[i...原创 2019-03-22 08:16:40 · 384 阅读 · 1 评论 -
axios get 传参数 数组
get 传参数 数组this.$axios.get('/getUserByName',{ params:{ names:['qwe','asd'] + '', }}).then(res=>{ console.log(res)})//所形成的url为: /getUserByName?names=qwe,asd 等价于 /getUserBy...原创 2019-03-08 11:29:10 · 9709 阅读 · 0 评论 -
mermaid 使用 (javascript 流程图 甘特图 序列图)
目录mermaid 使用script 方式使用mermaid 使用用来在页面画流程图、甘特图、序列图。script 方式使用mermaid 会选中所有的class为mermaid的节点,将内容翻译成图形。&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;原创 2019-03-16 12:06:07 · 7870 阅读 · 1 评论 -
d3 力导向布局 表ER图 动态增加删除
绘制表ER图 源码地址在页面上使用JS画表关系。难点表位置布局动态添加移除表解决方案:力导向布局(源码使用的是d3v5版本)目前结果: 实现力导向布局 动态添加表节点 动态添加表中的字段 字段悬浮高亮 搜索定位 删除关联节点 生成数据用于下次直接打开之前的样子如图:用到d3属性d3.forceManyBody().strength()电荷力d3....原创 2019-03-19 22:17:13 · 3031 阅读 · 2 评论 -
iview form表单校验 input number 报出number不能为空
在iview表单校验中,需要指定校验类型,不然给表单赋予新值时会出问题。比如,报错不能为空,特别是number类型。<Form :model="changeModal.data" :rules="changeModalRules" ref="changeModalForm" label-position="right" :label...原创 2019-03-04 11:45:34 · 10777 阅读 · 2 评论 -
React 基本语法 createElement 属性、变量、style样式、事件
React语法基本结构JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖。在线编译器JSX 使用const ele = <h1>title</h1>var root1 =( <ul className="my-list"> <li>First T...原创 2019-03-29 10:56:57 · 5282 阅读 · 0 评论 -
react 组件远距离通信 EventEmitter
订阅者发布者模式,组件之间通信。两个组件Father、Father2<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...原创 2019-04-12 10:58:36 · 2771 阅读 · 0 评论 -
react redux redux-saga
react是前端view框架redux是前端状态管理器redux-saga是redux的升级版,异步状态管理saga.js管理异步状态变更,一般是异步请求reducer.js是redux的东西main.js整合react+redux+redux-saga<!DOCTYPE html><html><head><meta charset=...原创 2019-04-17 12:24:44 · 484 阅读 · 0 评论 -
react生命周期
react生命周期生命周期图包含挂载、更新、销毁三个环节生命周期演示包含两个组件FaComponents和ClassComponent。为了验证props的变化,所以追踪的是ClassComponent的钩子函数。第一次加载后输出://首次加载-挂载constructorcomponentWillMountrendercomponentsDidMount//点击"加一"按钮...原创 2019-05-16 15:11:10 · 352 阅读 · 0 评论 -
live-server 启动 umi单页应用 刷新页面
设置统一入口live-server --entry-file=/index.html原创 2019-05-07 18:01:45 · 2177 阅读 · 0 评论 -
dva effect reducers 循环执行
effects和reducers的名字不要相同,不然你会很嗨的import { findTablesWithPage } from '@/services/api';export default { namespace: 'tables', state: { data:{}, }, effects: { *appendList({ payload }, {...原创 2019-05-10 10:19:53 · 2496 阅读 · 0 评论 -
uppy JavaScript 文件上传
可以显示上传进度、预览文件等。本文使用script标签,也可以使用npm等。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...原创 2019-04-30 12:21:14 · 2424 阅读 · 0 评论 -
node dev 内存不够
#!/usr/bin/env node --max-old-space-size=4096原创 2019-04-24 17:15:37 · 641 阅读 · 0 评论 -
JavaScript 将其他类型转换为数字
JavaScript 将所有的类型的数据转换为数字核心点>>位操作符。类型:NumberObjectStringFunctionArraynullundefinedBoolean//Symbol 不行let args = [123, true, {}, "qwe", function(){}, [], null, undefined]console.log...原创 2019-04-24 10:14:30 · 347 阅读 · 0 评论