javascript
文章平均质量分 77
javascript
193Eric
多年后的你,一定会感谢现在拼命的自己
展开
-
AST语法树和babel原理
AST(抽象语法树)在计算机科学中,抽象语法树(abstract syntax tree 或者缩写为 AST),或者语法树(syntax tree),是源代码的抽象语法结构的树状表现形式,这里特指编程语言的源代码。树上的每个节点都表示源代码中的一种结构。无论是LL(1)文法,还是LR(1),或者还是其它的方法,都要求在语法分析时候,构造出相同的语法树,这样可以给编译器后端提供了清晰,统一的接口。即使是前端采用了不同的文法,都只需要改变前端代码,而不用连累到后端。即减少了工作量,也提高的编译器的可维护性。原创 2020-12-10 10:37:14 · 881 阅读 · 0 评论 -
高级前端必备--自动化测试
测试分类常见的开发流程里面,都有测试人员,这种我们称之为黑盒测试。测试人员并不需要去管实现机制,只看最外层的输入输出。比如一个计算机加法页面,设计人员会设计n个case,去测试该加法的正确性。这种如果我们开发人员用代码去做的话,我们称之为e2e测试。还有一种测试叫白盒测试。我们针对⼀些内部机制的核⼼逻辑,使⽤代码进行编写,我们称之为单元测试。其实我们代码里面的console.log,也算是一种测试的雏形。测试的好处组件的单元测试有很多好处:提供描述组件⾏行行为的⽂文档节省⼿手动测试的时间原创 2020-11-25 19:01:45 · 792 阅读 · 2 评论 -
高级前端必备--设计模式
设计模式发布订阅订阅/发布模式 (观察者) pub/sub这个应该⼤大家⽤用到最⼴广的设计模式了了,在这种模式中,并不不是⼀一个对象调⽤用另⼀一个对象的⽅方法,⽽而是⼀一个对象订阅另⼀一个对象的 特定活动并在状态改编后获得通知。订阅者因此也成为观察者,⽽而被观察的对象成为发布者或者主题。当发⽣生了了⼀一个 重要事件时候发布者会通知(调⽤用)所有订阅者并且可能经常已事件对象的形式传递消息vue代码里面的on,emit事件就是发布订阅,双向绑定也是。单例单例例模式的定义:保证⼀个类仅有⼀个原创 2020-11-23 10:07:56 · 1695 阅读 · 0 评论 -
微前端架构实现(项目引入,消息总线,构建部署,监听服务)
简介为了解决庞大的一整块后端服务带来的变更与扩展方面的限制,出现了微服务架构(Microservices):微服务是面向服务架构(SOA)的一种变体,把应用程序设计成一系列松耦合的细粒度服务,并通过轻量级的通信协议组织起来具体地,将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展,每个服务都具有稳固的模块边界,甚至允许使用不同的编程语言来编写不同服务,也可以由不同的团队来管理然而,越来越重的前端工程也面临同样的问题,自然地想到了将微服务思想应用(照搬)到前端,于是有了「微前端(micro原创 2021-01-21 16:05:02 · 4504 阅读 · 6 评论 -
高级前端必备--数据结构
数据结构时间空间复杂度一个是运行时间的长短,一个是占用内存空间的大小。衡量程序好坏的重要因素逻辑结构和物理结构逻辑结构线性结构 (顺序表、栈、队列…)非线性结构 (二叉树、图…)物理结构顺序存储结构(数组)链式存储结构(链表)数组的访问速度最快,直接访问下标就行。链表单向链表双向链表查找元素的时候,链表不像数组可以通过下标,快速定位,只能从头结点一个个往下找。数组在内存中是顺序存储,所以可以直接用下标查找,而链表是乱序存储,只能通过next指针一个个往下找原创 2020-11-18 18:24:02 · 1645 阅读 · 0 评论 -
前端与DSL的秘密
DSL 简介DSL(Domain Specific Language)中文翻译为领域特定语言,例如 SQL、JSON、正则表达式等。与之形成对比的是 GPL(General Purpose Language),中文翻译为通用编程语言,我们熟悉的C、C++、JavaScript、Java 语言等就是。DSL特点是一门便于人们理解的编程语言或规范语言,并且可以被计算机解释执行用于专门领域,不能用于其他领域表现力有限不描述解答域,仅描述问题域DSL主要分为二类:外部 DSL、内部 DSL。外部DS原创 2021-12-15 14:11:39 · 931 阅读 · 0 评论 -
如何高效提高前端代码质量
原则首先说一个最重要的优化原则:代码优化是每天都要进行的,而不是一两个月做一次大优化, 那个时候就太晚了。另外由于优化是每天做的,所以你不需要一次的就过度优化,保持小步快跑即可。这个原则为什么重要?因为很多程序员会在写代码的时候说「先不优化了,等不忙的时候再优化」,然后……就没有然后了。基本上「烂代码」就是因为「不忙的时候再优化」造成的。为什么会有烂代码一些长寿命技术公司都会遇到的问题,一个系统开发了4,5年走了一批核心人员后,代码质量就会直线下降,代码质量和项目成立时间成反比,越新的项目质量越原创 2021-12-13 22:56:00 · 1393 阅读 · 1 评论 -
前端搞搞基建(二)
前端大基建“基建”,就是研发团队的技术基础设施建设,是一个团队通用技术能力的沉淀,是一个团队未来的保证。网上看到的一句话,说的很好,“业务支撑是活在当下,技术基建是活好未来”。源码和更多案例放在github上面,欢迎star前端基建链路层基建的内容和业务阶段团队既有建设的沉淀是分不开的,所以基建就是从最基础的部分开始搞,怎么样能规范流程,方便开发,方便维护,怎样 能更加优雅的扩展业务,就怎么去搞基建。接下来我们以“基建链路层”来搭建基建系统,下面是我所整理的基建链路层:接口联调说到原创 2020-10-21 18:52:35 · 3311 阅读 · 5 评论 -
摸鱼前端的自检(六)你不知道的web性能优化
你不知道的web性能优化你遇到过打开一个网站需要10秒以上的吗,这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅。你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站。作为一个开发者,肯定不愿意看到这种情况,那么怎样才能提高性能呢有兴趣的同学可以去我的github,里面有我的分享的学习过程和blog.github.com/193Eric...原创 2019-11-20 12:31:37 · 14560 阅读 · 9 评论 -
摸鱼前端的自检(五)深入HTTP缓存机制及原理
深入HTTP缓存机制及原理身为一个web开发者,必要的http缓存机制还是要去深入了解,因为在这上面可以做很多的web性能优化。要想成为一个好的架构师,这一环节必不可少。有兴趣的同学可以去我的github,里面有我的分享的学习过程和blog.github.com/193Eric一、http报文因为缓存机制要用到报文,所以这里简单介绍下http报文。现在广泛的应用还是HTTP1.1,H...原创 2019-11-15 11:44:52 · 4514 阅读 · 1 评论 -
摸鱼前端的自检(四)浏览器如何防gank?
浏览器如何防gank?在面试中我们常常会被问到web攻击,如果预防和处理之类的,确保网站或者网页应用的安全性,是每个开发人员都应该了解的事。这里主要列出集中常见的web攻击方式和防御处理方法。有兴趣的同学可以去我的github,里面有我的分享的学习过程和blog.github.com/193EricXSSXSS攻击:跨站脚本攻击(Cross-Site Scripting)XSS是一种...原创 2019-11-06 19:04:22 · 6227 阅读 · 1 评论 -
摸鱼前端的自检(三)v8干了些什么?
v8干了些什么?V8是被设计用来提高网页浏览器内部JavaScript执行的性能,那么如何提高性能呢?接下来我们一个个介绍它干了些什么。有兴趣的同学可以去我的github,里面有我的分享的学习过程和blog.github.com/193EricJIT说到v8首先我们要明白什么是解释型语言和编译型语言。编译型语言,如c/c++,处理该语言实际上使用编译器直接将它们编译成本地代码,所以...原创 2019-11-05 17:20:13 · 6878 阅读 · 1 评论 -
摸鱼前端的自检(二)深入浏览器和node的事件循环
浏览器事件循环和node事件循环node和js都保持了单线程的特点,javascript在最初设计时设计成了单线程,为什么不是多线程呢?如果多个线程同时操作DOM那岂不会很混乱?有兴趣的同学可以去我的github,里面有我的分享的学习过程和blog.github.com/193EricJS事件循环首先我们要知道js是干嘛的,和用户通过浏览器进行交互,如果同时两个任务操作一个dom,那不...原创 2019-11-04 11:17:10 · 7603 阅读 · 0 评论 -
摸鱼前端的自检(一)浏览器渲染过程剖析
浏览器渲染过程剖析作为一个前端,不了解浏览器在干什么,不是个合格的前端哦~有兴趣的同学可以去我的github,里面有我的分享的学习过程和blog.github.com/193Eric首先先贴一张图,网上找的~我们可以看到,主要的组件部分有7大部分。用户看到的界面(User interface) 我们可以打开浏览器,除了主窗口(你的页面内容)之外的其他地方,地址栏,前进后退,t...原创 2019-10-31 15:46:54 · 8419 阅读 · 4 评论 -
vue单页面程序对谷歌GA事件的应用
公司运营最近在对网页做用户转化率调查这块,找到了谷歌GA事件。按照之前GA官网给出的文档,把代码加入到了index.html里面,一周后发现统计出来的数据跟后台数据库对比对不上。 经过一番研究后,发现谷歌GA事件的网页追踪原理是每一次网页跳转都会调用那个gtag('config')代码,然后追踪当前页面。但是对于单页面来说,其实页面只加载了一次index.html,所以造成了数据丢失...原创 2018-06-21 10:39:00 · 3660 阅读 · 0 评论 -
node express ejs 搭建个人网站(1)
首先安装完node版本后,在要建立的web目录下安装express,(这里我的node版本是4.5.0),然后输入命令express -e ejs myweb 安装ejs项目 安装成功后,cd进入myweb目录,输入npm install它会自动安装项目所需要的依赖项. 然后进入cd进入bin文件夹,运行node www 运行成功后,在浏览输入,可以显原创 2017-03-01 14:11:28 · 2316 阅读 · 6 评论 -
node express ejs 搭建个人网站(3)
已经搭好网页了,现在的问题是如何从数据库中取得数据,传给网页,然后一个个人网站就基本搭建成功了。首先现在项目目录输入安装node 的mysql包,然后在本地的sql数据库中,新建一个表node_web(随便怎么命名),我用的是SQLyog工具这是我的导航栏目表。然后再node里面写拿数据的代码,我是在路由文件里面写。首先先链接数据库;原创 2017-03-06 18:37:42 · 1086 阅读 · 0 评论 -
Canvas应用小结
Canvas应用小结canvas 可以画图分为几种基本类型: 线 圆 矩形 图像 文本 颜色样式canvas的高级的应用就是做动画和游戏,主要是应用以下几个功能: 变形(Rotate,Translate,Scaling,Transforms) 状态保存和恢复(save()restore()) 裁切(clip)原创 2017-05-02 14:41:26 · 414 阅读 · 0 评论 -
h5移动端兼容开发小结
1.事件绑定,.on(“click”,’class’,function(){}) 才是对所有class事件绑定,对新生成的元素绑定。 . 2.overflow-y:scroll 在苹果机上的滑动有问题;应该改成 -webkit-overflow-scrolling: touch;. 3.设置滑动条的大小是: ::-webkit-scrollbar. 4.Input原创 2017-05-18 14:07:46 · 502 阅读 · 0 评论 -
360浏览器兼容模式css错乱问题
解决360浏览器兼容模式css错乱问题有些时候在本地写好代码,不管是直接打开网页flie://,还是localhost: 网页都没有问题,但是放到服务器上面,打开360浏览器后选择兼容模式,发现css 错乱,而在本地没有任何问题。 下面给出两种解决方法:第一种:强制执行极速模式<meta name="renderer" content="webkit">第二种:<meta http-equi原创 2017-08-03 14:27:46 · 2903 阅读 · 0 评论 -
浅出ES6特性
ES6学习小结用了这么久的es6来写代码,写一点心得,记录自己,总结自己。 ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,虽然现在很多都不支持,但是我们写代码还是可以用提前用es6来写代码,体验新特性。写完后用Babel就可以转成现在浏览者支持的语言。 变量解构、参数、字符串模板原创 2017-04-28 11:29:14 · 390 阅读 · 0 评论 -
写出高性能的js代码
写出高性能的js代码一、加载运行javascript在浏览器中的性能,大概是开发者面对最重要的问题。因为javascript的阻塞特征,也就是在javascipt运行的过程中,其他的事情并不能被浏览器处理。所以javascript运行的越长,浏览器等待的时间就越长。所以应该把脚本放在底部(通常就是标签的前面)。由于每次http请求都会有性能负担,加载一个100KB的脚本要比加载原创 2017-03-21 22:31:15 · 3977 阅读 · 0 评论 -
JS函数式编程(1)
使用纯函数的形式,函数就能做到自给自足。这样就能保留纯粹性。纯函数对于其依赖必须要诚实,这样我们就能知道它的目的。函数curry(柯里化)curry 的概念很简单:只传递给函数一部分参数来调用它,让它返回一个函数去处 理剩下的参数。var add = function(x) { return function(y) { return x +原创 2017-02-23 10:27:54 · 1204 阅读 · 1 评论 -
关于Js OOP编程 创建对象的一些理解。
面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物。对象的含义 对象可以是汽车,人,动物,文字,表单或者任何存在的事物等等。对象有: 属性-------对象的某些特定的性质。 方法-------对象能做的事情。 事件-------能响应发生在对象上的事情。我们可以通过创建一个人的对象来理解面向对象人: 两只原创 2016-12-09 10:41:00 · 999 阅读 · 0 评论 -
h5破解网站图片防盗链
h5破解网站图片防盗链之前运营的同事,一直在用96编辑器,写运营文章,然后把文章的html搬运到我们的系统中。后来96的图片全部设置了防盗链。我们用了网上很多的方法,结果只有一种生效。在head里面加入:原创 2017-12-01 12:03:05 · 2667 阅读 · 1 评论 -
网站中对referer的应用
在开发中对一个外链网站做了iframe 然后出现的都是乱码。经过研究过后原来是设置了<meta name="referrer" content="never">原来是目标网站后台对referer做了限制,没有referrer的话,被认为是恶意访问。所以直接丢出来乱码。设置成 <meta name="referrer" content="origin"> 就能看到网站了。目前原创 2018-05-09 12:20:27 · 653 阅读 · 0 评论 -
移动端微信开发一些兼容总结(片段)
1.事件绑定,.on("click",'class',function(){}) 才是对所有class事件绑定,对新生成的元素绑定。2.overflow-y:scroll 在苹果机上的滑动有问题;应该改成-webkit-overflow-scrolling: touch;3.设置滑动条的大小是:::-webkit-scrollbar4.Input t原创 2017-02-23 10:23:12 · 1838 阅读 · 1 评论