做一个独立开发的前端工程师
框架选型 vue/react/angular 结合业务需要，选择合适的框架。 项目初始化工具 create-react-appuminext.jsvue clivite UI组件库 AntdElement-plusAntd-mobileVant 后续操作：重写样式、自定义主题色、按需加载、移动分辨率适配、组件二次封装、iconfont字体图表引入 CSS 预处理器 LessSassStyles HTTP 请求库 axios.jsrequest.jsfetch 二次封装: 拦截请求、统一报错、统一返回、区分环境 全局状态管理 ReduxdvaMobxVuex 公用方法封装 localStorage时间日期插件封装 day.js滚动回顶部获取当前机型常用正则 打包构建部署 CI/CDpm2静态资源 cdn前端服务启动入口 其他 阅读文档的能力解决问题的思路兼容不同浏览器合理的布局一点服务端的知识 node/nginx等 成为一名独立开发的前端，任重而道远呀，努力吧骚年~~
vue-element-admin里面的知识点
记录一些值得学习的知识点 一、scss部分scss里的函数使用： 1234567891011/*src\styles\btn.scss*/@import './variables.scss';@mixin colorBtn($color) { background: $color;}.blue-btn { @include colorBtn($blue)} 12/*src\styles\variables.scss*/$blue:#324157; 二、TagsView部分 router-link使用tag属性来控制被浏览器渲染成何种元素； 自定义的右击事件@contextmenu.prevent.native； slot的使用 element里的隐藏组件el-scrollbar滚动条 1234567891011121314151617<-- src\layout\components\TagsView\index.vue --> <scroll-pane ref="scrollPan ...
【8月】每日打卡,卷土重来
08 月 29 日计划：每天 6 点起床，23 点睡觉，开始进入学习模式早上学习 vue3 里的工具函数 08 月 22 日完成仿写 newbee 的项目，了解了 vue3 项目的一些写法整理了一些关于 vue3 的知识点，备查 08 月 18 日git reflog 查看所有分支的操作记录（包括已删除的 commit 操作和 reset 操作）git cherry-pick 把其他分支复制到当前分支 123this[this.type === 'instance' ? 'updateInstance' : 'updateDefinition']( this.urlParam.id).then((res) => {}); 08 月 17 日继续敲了下 newbee 的代码部分，vue3 方法都直接写在 setup 里需要页面引用的 return 出来。 08 月 16 日项目上遇到难题了，ui 给的设计图找遍网络找不到插件实现 gantt 图，手写吗。。。 08 月 15 日今天看了并手动敲了下 ...
寄生组合继承
1234567891011121314151617181920212223242526function Parent (name) { this.name = name}// 这里不能使用箭头函数Parent.prototype.play = function() { console.log('play' + this.name)}function Child (name,age) { Parent.call(this, name) this.age = age}// 组合继承Child.prototype = new Parent()Child.prototype.constructor = Child// function F() {}// F.prototype = Parent.prototype// let f = new F()// f.constructor = Child// Child.prototype = f// 简写Child.prototype = Ob ...
websocket的简单实现
客户端： 1234567891011121314151617181920212223242526272829303132333435<script> new Vue({ el: '#app', data: { value: 'haha' }, methods: { init() { if(window.WebSocket){ var ws = new WebSocket('ws://localhost:4444'); ws.onopen = function(e){ console.log("连接服务器成功"); // 向服务器发送消息 ws.send("what`s your name?"); } w ...
【7月】每日打卡
07.22 抽出时间继续， 手写 js 最近在项目上实现 websocket 的功能，恩，我想一下.. you don’t know js 已经看完，一些基础确实理解了大半 07.20 学习，手写了 8 个实现，恩，每天进步一点点 项目上在改 ui，感觉是一个熟悉 Ui 框架的过程，没啥难度，像一个搬运工了额 07.19 有点佛系打卡了，从今天起立个 flag,每天 21:30-23:00 是学习时间 看点手写源码的思路，先来点简单点的，再深入 07.17 算法复杂度 O(f(n)) 时间复杂度： O(1)常数阶：无论代码执行多少行，只要没有循环，这个代码的时间复杂度都是 O(1) O(n)线性阶：代码消耗时间随着 n 的变化而变化 O(n²): 双重循环时 O(logn): 循环里成倍数缩减搜索范围 O(nlogn): 将 O(logn)的代码循环 n 遍 空间复杂度：指执行当前算法要占用多少内存空间 07.12 ~07.13 每天早上利用时间看了下 don’t know，不是能深入看得懂 项目进入改 ui 阶段，没有新的知识学习 现在一看 js 书就困，是哪里的问题额 ...
bind与vue bind
vue bindvue的固定作用域：在methds里，vue使this指向始终指向了vue实例。 思路： 1.判断是否支持bind 2.兼容写法里传入函数fn和对象ctx 3.返回一个新函数，调用函数时使用call方法直接绑定函数作用域为ctx(为什么要返回一个新函数？bind不是立即执行的，需要调用才能执行) 12345678910111213141516171819202122// 兼容bind方法// 使用到了函数柯里化function polyfillBind(fn, ctx) { // a 是 bind 指向里的第一个参数 // arguments 是bind指向里的参数集合 function boundFn(a) { var l = arguments.length return l ? ( l > 1 ? fn.apply(ctx, arguments) : fn.call(ctx, a) ) : fn.call(ctx) } boundFn._length = fn.len ...
复习ES6(八)：其他
PromisePromise.all()Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例 Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理 Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例 Promise.race()Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例 只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数 Promise.allSettled()ES2020 引入 Promise.allSettled()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果，不管是fulfilled还是r ...
dagre/dagre-d3绘制流程图
概念dagre 是专注于有向图布局的 javascript 库，由于 **==dagre 仅仅专注于图形布局 #F44336==**，需要使用其他方案根据 dagre 的布局信息来实际渲染图形，而 dagre-d3 就是 dagre 基于 D3 的渲染方案。 dagre: https://github.com/dagrejs/dagre dagre-d3: https://github.com/dagrejs/dagre-d3 步骤 引入 d3.js 以及 dagre-d3.js 两个文件。 使用 dagre-d3 创建 Graph 对象，并添加节点和边。 创建渲染器并在 svg 上绘制流程图。 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465<!DOCTYPE html><html lang="en"><head> <meta ...
复习ES6(八)：Set和Map数据结构
Set基本用法ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值 Set本身是一个构造函数，用来生成 Set 数据结构 12345678const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4 12345// 去除数组的重复成员[...new Set(array)][...new Set('ababbc')].join('')// "abc" 向 Set 加入值的时候，不会发生类型转换，所以5和”5”是两个不同的值 在 Set 内部，两个NaN是相等的。 1234567let set = new Set();set.add({});set.size // 1set.add({});set.size // 2 上面代码表示，由于两个空对象不相等，所以它们被视为 ...