源码结构
每日记录_当前月
-Mark。。3个月归档一次。不然内容有点过多。
-常用工具,Teambition,石墨,墨刀。。怎么都喜欢叫个墨字。
-神仙朱文章 | 前端 100 问 https://github.com/yygmind/blog
VUE和React的DIFF,Patch,update可以有很多挖掘的地方。
-日语学习网址 https://res.wokanxing.info/jpgramma/
发现,到了晚上,意志力下降的厉害,特别是旁边还有个无所事事,颓废的队友,现在想到一个对抗的招数,就是打开一个视频,什么面试的,技术教学的,之类的。看视频。营造学习氛围和被动接受知识。就当上晚课吧。
2020-6-8
帮better-oneTabs 优化提升了性能。笑死我,那个css,整个html页面滚动。流弊。
2020-6-6
增强学习,带着问题看,what,why,how方法论。
2020-6-5
-看了许多关于自控力的文章,套路都差不多,利用冥想,延迟满足,用习惯来替代自控对抗。分解目标,目标奖励。其实都挺麻烦。
-如何增强学习,https://www.zhihu.com/question/35103080/answer/447654017
提到了思维导图学习法,貌似正是我现在在使用的,我感觉对我来说特别有效果。
然而文章又提到了一个间隔式重复回忆法 提取记忆方法。ok,这个方法其实也是符合我的学习方式,不过我是通过查找面试题来回忆的。就是,当有个知识点,了解后,过段时间,时不时去回忆。以前我的知识点还是比较散乱的,用了思维导图以后,就有了location,像是记忆迷宫,但是迷宫听起来就很迷,地图就不一样了,每个知识点有其结构,有其位置。
2020-6-4
之后不再这里写具体做了什么了,就在google calendar上面记录。不过这里记录一些别的东西,比如想法或者别的。
2020-6-3
-OneTabs tags 应该是修复了个BUG,外加PR和邮件通知作者。。看看这家伙是不是还维护。收到作者的邮件回复了,果然是怕麻烦,不想复活。也许可以帮忙接手维护下。
-视频-程序员面试北大研究生Java岗,中途离场,是不是玩不起?
2020-6-2
-优化了个人日历
-CSS,浏览器性能优化相关。
-关于better one tab,导入没标签的BUG需要修复,两边不同步了。
2020-6-1
如果,不出意外,今天正式开始了。
-早上看算法,也不错,比较清醒。。不过午夜看也挺有意思。But,要健康作息。算法一研究时间过太快了。
-百度脑图,加载了一堆DOM节点,但是节点都设置了Display:none,按道理来说不会触发重绘(repaint)和回流(reflow)…但是为什么还会卡。不过代码是开源的,也许可以研究下。
2020-5-26
-构建后端知识图谱
-完成前端CSS部分脑图
2020-5-25
-Springboot 创建了一个项目,安装了Mysql。
2020-5-21
继续完善前端脑图。
2020-5-20
filter 有很多属性,blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 挺有意思。
- filter:grayscale(100%) 这个还是蛮有趣的,一行把页面变成灰色。
常用属性,文本超长省略号
overflow:hidden(文字超出限定宽度,则隐藏超出的内容)
white-space:nowrap(设置文字在一行显示,不能换行)
text-overflow:ellipsis(规定当文本溢出时,显示省略符号来代表被修剪得文本)
2020-5-19
-了解了下Deno,感觉至少1,2年内,和Node还是没办法对比的。虽然特性挺多。除非是Ryan Dahl带一个团队来做。
垂直居中 1
居中元素宽高已知
absolute + margin
absolute + calc
居中元素宽高未知
*flex 推荐用~
absolute + transform
lineheight
grid
css-table
writing-mode
2020-5-18
重温下Flex.
inline-flex:将对象作为内联块级弹性伸缩盒显示,效果,父元素不设置宽度,子元素自适应宽度,高度。
flex相关,横向,main-axis,main start|end main size,纵向,cross-axis cross start|end cross-size.
容器属性,父容器。
- flex-direction,排列方向,横纵。
- -warp,排列是否换行,换行从上到下还是从下到上。
- flow ,direction warp的简写
- justify-content 重要属性,主轴对齐方式,flex-start, flex-end, center, space-between, space-around,项目两侧间隔相同,所以项目之间间隔是边框和项目间隔2倍.
- align-items 在cross轴对齐方式,flex-start, flex-end, center, base-line, stretch(占满整个容器)
- align-content,多根轴线的对齐方式,如果只有一根,不起作用。corss轴有多余空间,将所有子项作为一个整体。
子项属性,项目。
- order,排列顺序,数值越小越靠前,默认0.
- flex-grow, 定义项目的放大比例,默认0.如果都是1,等分空间,如果有个2,那么2是1的空间两倍。
- flex-shrink 默认是1,空间不足缩小。如果设置0,空间不足不缩小。
- flex-basis 默认auto,设置xxxpx。占据主轴的空间。在分配空间之前。
- flex,是以上的结合体。比如默认值 flex:0 1 auto. 建议用这个。
- align-self. 可以对单独项目设置对齐方式,覆盖align-items。
2020-5-17
-安装了个better oneTab插件,整理了一天的页签分类。然后,发现DMZ,端口转发怎么都设置不了,一开始以为是路由器的问题,因为查IP发现是公网IP。后面破解了电信的路由,发现公网IP是100.开头。dmz就木有了。。只能搞dnns或者内网穿透。做完试了一个,还是可以穿透的。
2020-5-5
-研究了下骑砍的Mod。。。
-5月5日学习+刷题。
-5月4日,GameDay。
-5月3日,学习+刷题+放松。5月2号晚上规划下,什么内容
-5月2日,加班+一家人吃饭。
2020-5-2
2020-5-1
-gulp和webpack打包差异
-webpack,entry,out,loader,module概念。自动递归分析依赖打包。
-JS继承。http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html -没看完。
-发现一个问题,每天晚上看东西有点随意。必须要制定下明日,或者后面几天计划。不过明天晚上一家人吃饭。不过计划赶不上变化。尽量吧。。
UNI-APP资料搜集
发现一个很强的框架UNI-APP
看官网的意思,直接上手可用。先记录下,研究研究。
一些比较精彩的文章
DIFF算法
Blog优化
-发现博客,网站没被百度搜录,要加一下
https://ziyuan.baidu.com/linksubmit/index?site=http://www.marszm.cn/
没成功,加个http://tool.chinaz.com/robots/ robots试试
-页面有点单调,加了个小猫。。
-页面文字结构太乱了。。加个小格子和hover效果。。Nice
#catIframe { position: absolute; width: 400px; } @media screen and (min-width: 48em){ .blog .site-main > article, .archive .site-main > article, .search .site-main > article { padding-bottom: 4em; border: 1px solid #dcdee2; padding: 2em; margin-bottom: 1.5em; transition: all .2s ease-in-out; } .blog .site-main > article:hover { box-shadow: 0 1px 6px rgba(0,0,0,.2); border-color: #eee; transform: translateY(-4px); -ms-transform: translateY(-4px); -moz-transform: translateY(-4px); -webkit-transform: translateY(-4px) } }
-滚动条太丑
::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-thumb { height: 6px; border: 4px solid rgba(0, 0, 0, 0); background-clip: padding-box; -webkit-border-radius: 7px; background-color: rgba(50, 200, 250, .25); -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); } ::-webkit-scrollbar-button { width: 0; height: 0; display: none; } ::-webkit-scrollbar-corner { background-color: transparent; }
ES6常用Feature
1.数组去重,一行
array = Array.from(new Set(array)) //new Set返回的是个对象,需要from生成数组.
2.数组操作
- 克隆数组:
const arr = [...arr1]
- 合并数组:
const arr = [...arr1, ...arr2]
- 拼接数组:
arr.push(...arr1)
面试过程中被问到,项目中遇到的难题,或者有什么说的整理.
1.富文本编辑器, div contenteditable. + document.execelCommand.
光标问题,
- div contenteditable嵌套,删除末尾的光标消失.处理方法,加一个image 1宽1高标签.但是又扯到后端返回值和数据校验问题,因为有个修改提示功能,要对比初始数据和改动数据是否一样,这个问题又扯到IE和chrome对于空格的处理不同.同样一段html,解析出来不一样.解析的原因是会将编辑好的文档传给后端,进入页面要解析这堆html和样式.
- IE兼容问题,比如失焦事件需要手动触发.IE自动定位滚动到赋值的位置,开始用的scrolltop=0,但是画面撕裂,后来用先hide,赋值后,blur,再显示搞定.
(3.先display:none 隐藏元素,然后对该元素进行所有的操作,最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。IE中甚至可以让默认blur事件失效)
- 整个结构是,wangEditor第三方基础组件源码(有改造,基础用excelCommond实现)–>richEditor封装一个基础输入框,配置项,change,blur事件处理.校验处理,第三方组件没有校验功能,show,hide,setContent,getContent,setText,getText->reminderEmail整个子组件,更加复杂,里面还有个联动时间计算处理校验规则以及切换页面时校验是否有改动的校验。对比后台数据,解析数据,以及页面数据。->外层还有个emailList,因为reminderEmail可以实时增删改,所以还有个List处理.->外层还有总控制的.包含另外一个部分.
面试题整理,人手不足要批量面试些外包人员.整理一些题出来
1.先聊聊都做了什么项目,负责了什么内容的开发,开发了什么组件,什么模块,什么功能.根据简历聊.
- 遇到过什么难题?
- 怎么解决的?
恶趣味。为什么0.1+0.2不等于0.3.。。。。PS:十进制整数转二进制方法:除2取余;十进制小数转二进制方法:乘2除整。0.1的二进制是二进制无限循环小数。bignumber.js
//基础知识
2.谈谈过去开发中的代码规范,自由发挥,主要是对项目,对JS,CSS,结构的规范.如何使代码清晰,易维护
-驼峰命名,class,变量,类名,代码复用
-html,css,js,vue相关的.Eslint,
组件封装
谈谈IE兼容问题.如果说不上来就先跳过.
算法记录,每日一题_两数相加02
其实这个应该是链表直接加就行了。。我开始想错了,然后搞笑的玩意来了。把我给气笑了。
测试用例有个
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1] [5,6,4]
JS存的表示为
对于过长的数字,JS显示为1E+30.。。。牛逼。
function sumStrings(a,b){
var res='', c=0;
a = a.split('');
b = b.split('');
while (a.length || b.length || c){
c += ~~a.pop() + ~~b.pop();
res = c % 10 + res;
c = c>9;
}
return res.replace(/^0+/,'');
}
https://www.jianshu.com/p/c373943f0e9e js大数相加问题
JS处理大数相加,一般引用BigNumber.js。。查了下核心代码,加法的计算如下。
// adds two positive BigNumbers BigNumber._add = function(a, b) { var index; var remainder = 0; var length = Math.max(a.number.length, b.number.length); for (index = 0; index < length || remainder > 0; index++) { a.number[index] = (remainder += (a.number[index] || 0) + (b.number[index] || 0)) % 10; remainder = Math.floor(remainder / 10); } return a.number; };
a.number = [],是个数组 array : [3,2,1], [‘+’,3,2,1], [‘-‘,3,2,1]。所以说,我存储的结构必须改变为数组。
原来的思路PASS。
完成版本。。。效率惨不忍睹。
执行结果:
/** * Definition for singly-linked list. * function ListNode(val) { * this.val = val; * this.next = null; * } */ /** * @param {ListNode} l1 * @param {ListNode} l2 * @return {ListNode} */ var addTwoNumbers = function(l1, l2) { var numListA = []; var numListB = []; var resultArr = []; getListNodeArr(numListA,l1); getListNodeArr(numListB,l2); console.log(numListA) resultArr = add(numListA,numListB) console.log(resultArr) return array2ListNode(resultArr) function array2ListNode(arr){ var line = arr.map((i,j)=>{ return new ListNode(i) }) for(var j = 0;j<= line.length; j++){ line[j+1] && (line[j].next = line[j+1]) } return line[0] } function getListNodeArr(listArr,listNode){ if(listNode.next!=null){ listArr.push(listNode.val) getListNodeArr(listArr,listNode.next) }else{ listArr.push(listNode.val) } } function add(listA,listB){ var index; var remainder = 0; var length = Math.max(listA.length, listB.length); for (index = 0; index < length || remainder > 0; index++) { listA[index] = (remainder += (listA[index] || 0) + (listB[index] || 0)) % 10; remainder = Math.floor(remainder / 10); } return listA; } };
好吧,看了官方解法。
很简单,逆序保证了,低位对齐。然后进一位,记录.
var addTwoNumbers = function(l1, l2) { var result = temp = new ListNode(0) while(l1 || l2){ var sum = (l1 && l1.val || 0) + (l2 && l2.val || 0) + ( temp.val || 0 ) var carry = parseInt(sum / 10) l1 = l1 && l1.next l2 = l2 && l2.next temp.val = (sum % 10) if(l1 || l2 ||carry){ temp.next = new ListNode(carry) } temp = temp.next } return result };
貌似标准答案也没有快很多,空间占用也挺多的.
气死个人。。一晚上,没什么提速。感觉leetcode有问题。
C语言真的强。。算法是一样的。
惊了,java只要2ms,wtf