什么是 AST?AST 是 Abstract Syntax Tree 的首字母的缩写,中文名称为:抽象语法树抽象语法树本质上就是一个 JS 对象,以字符串的视角,将 Html 标签 解析为 JS 对象渲染函数(h 函数),既是 AST 的产物,也是 vnode 的起源h('div', { attrs: { className: 'box' } }, [ h('ul', {}, [ h('li', {}, '1'), h('li', {}, '2'), h('l
市面上现在有很多bundler,最著名的就是webpack,此外常见的还有 browserify,rollup,parcel等。虽然现在的bundler进化出了各种各样的功能,但它们都有一个共同的初衷,就是能给前端引入模块化的开发方式,更好的管理依赖、更好的工程化。
整体思路是利用回溯加去重的方式,在具体递归的过程中类似于一棵决策树,首先定义一个用于递归的函数,分别传递原数组的引用、暂存数组索引的引用、目标数组的引用、递归深度、哈希表对象,如果递归的深度与原数组的长度相同,那么就在暂存数组中使用索引取出原数组的值,将更新变量转换为字符串,因为在Js中对象也是以HashTable进行存储的,便可以直接利用Js对象来实现哈希表,将转换的字符串作为键值放置于哈希表,目的是之后再次出现这个字符串那么就不再放入目标数组以达到去重的目的,如果目前的HashTable还不存在该key,那么就将取得的原数组值作浅拷贝放置于目标数组,接下来是递归方案,在递归过程中已经出现在暂存数组的索引值就不再继续递归,利用回溯法实现一棵决策树,从而实现全排列。
深度优先遍历就是当我们搜索一个树的分支时,遇到一个节点,我们会优先遍历它的子节点直到最后根节点为止,最后再遍历兄弟节点,从兄弟子节点寻找它的子节点,直到搜索到最后结果,然后结束。
在JS中,存在几个内置属性天然支持数据浅复制,但是每个属性都有一定的适用条件和范围。
标题看起来有点唬人,在微信小程序里跑 h5 页面,不会又是说使用 web-view 组件来搞吧?确实,使用 web-view 组件可以达到跑 h5 页面的要求,但是 web-view 组件在使用上还是有一些限制:不支持个人类型与海外类型的小程序、不支持全屏、页面与小程序通信不方便、很多小程序接口无法直接调用等。
那么,对一个对象进行拷贝,无非就是对对象的属性进行拷贝,按照拷贝处理的方式不同,可分为浅拷贝和深拷贝:
最近在学习webpack的流程,因为很多都问过webpack的流程,随便不知道问的人知不知道,自己还是想去了解一下。说webpack流程之前先说一下npm link,方便调试npm包的小技巧。
长久以来,你不得不借助于黑魔法和第三方库来创建一个JavaScript值的深拷贝。现在,ECMAScript 2021提供了structuredClone(),这是一个用于深拷贝的内置函数。
题目的答案提供了一个思考的方向,答案不一定正确全面,有错误的地方欢迎大家请在评论中指出,共同进步。
关于DOMDig DOMDig是一款运行于Chromium Web浏览器中的DOM XSS扫描工具,该工具能够以递归的方式扫描单页应用程序(SPA)。 跟其他扫描工具不同的地方在于,DOMDig可以通过追踪DOM树的修改行为和XHR/fetch/websocket请求来爬取任何Web应用程序(包括Gmail),并且能够通过通过触发事件来模拟真实的用户交互。在此过程中,工具会将XSS Payload放到输入字段中,并跟踪其执行情况,以便找到注入点和相关的URL修改行为。 该工具基于htcrawl实现其功能
有时候,当你完成一个项目后,想要展示这个项目的目录结构(如下图所示),对该项目进行文档描述性说明,用于解释其项目中各个目录以及文件代表的含义,这样便于自己和后来的同学理解
去年(19年10月)在某技术沙龙上分享了《小程序工程化探索》后,陆续有网友联系到我询问一些实现方面的细节,虽然常年顶着黑眼圈修着“福报”,但还是决定抽出时间写一个小程序工程化系列,一是希望能帮到部分同学,二是希望能提升自己的总结与表达能力,由于是一个系列,所以每篇文章会尽量聚焦一个点,篇幅不会很长。闲话少述,本篇是小程序工程化系列第一篇,我将会详细介绍如何利用 Webpack 实现对小程序代码的文件依赖分析。
Rollup是一个JavaScript模块打包器,它可以将多个模块打包成一个单独的文件,以便在浏览器中使用。与其他打包工具相比,Rollup的主要优势在于它可以生成更小、更快的代码。在本文中,我们将深入了解Rollup的工作原理、使用方法、摇树优化(tree shaking)。
作者:jolamjiang,腾讯 WXG 前端开发工程师 前言 最近工作中有一些同学在做一些效能工具的时候遇到需要写一门领域相关语言(DSL)及其解析器的场景,笔者恰好有相关的经验向大家指一下北。 首先请问一下大家有没有想过这个功能怎么做? 点击播放视频 本文将围绕如何实现类似于 Excel 中 =C1+C2+"123" 这样子的表达式的功能这一例子,在不需要编译原理的相关知识的前提下,用写正则表达式作为类比,借助一个工具库,讲述实现一个领域相关语言的解析器的一般步骤,让你能够快速实现一个解析器。
webpack可以说是目前最火的打包工具,如果用不好他,真的不敢说自己是个合格的前端工程师
不支持defer属性的浏览器:defer、script、load 支持defer属性的浏览器:script、defer、load 3.2 动态添加script标签,添加到head中比添加到body中安全 3.3 XHR动态脚本注入兼容性好,但不能跨域
对于 Loader 来说,影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST,然后对 AST 继续进行转变最后再生成新的代码,项目越大,转换代码越多,效率就越低。当然了,这是可以优化的。
比如JavaScript在执行之前,会经过词法分析和语法分析两个步骤之后,得到一个抽象语法树。
在webpack中,我们发现配置我们能天然的使用esmodule这种模块化语法,那大家有没有好奇过呢?他究竟是怎么实现的呢?下面一起来探究一下,webpack究竟是怎么解析打包esmodule语法的。
在上一篇推文中,我们详细讲解了【Vue跨端框架的原理】。下面,我们将从React跨端框架,进入到小程序跨端原理的世界,讲解这些跨端框架的核心原理,深入到源码底层去分析,揭开他们神秘的面纱。
我们创建了add.js文件和minus.js文件,然后 在index.js中引入,再将index.js文件引入index.html。
treeview链接:http://www.htmleaf.com/Demo/201502141380.html
zTree 是一个依靠jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
大家好,我是鱼皮,最近为了帮助自己完成写超长 SQL 语句(几千行)的工作,我花几个小时开发了一个小工具 —— 结构化 SQL 生成器,可以使用扁平的 JSON 结构来轻松生成层层嵌套的、复杂的 SQL,从而大幅提高写 SQL 的效率!
最早的时候页面是服务端渲染的,也就是 PHP、JSP 那些技术,服务端通过模版引擎填充数据,返回生成的 html,交给浏览器渲染。那时候表单会同步提交,服务端返回结果页面的 html。
前一段时间我把webpack源码大概读了一遍,webpack 到4.x版本后,其源码已经比较庞大,对各种开发场景进行了高度抽象,阅读成本也愈发昂贵。
网上相关例子基本都是 ztree,然后个人去看了看官网,看了半天没找到合适又简单的,ztree,由于界面不适合项目里面的,要是修改他的样式我还可能出现更多的错误,于是打算自己手写一个,一个是锻炼自己的
JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。
链接:https://juejin.im/post/5b9770056fb9a05d2f3692ce
https://juejin.im/post/6881597846307635214
最近为了工作方便写了一个小工具,这个小工具作用很简单,就是从一个json字符串中筛出你想要的部分。
defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中出现的顺序加载,多个async 脚本不能保证加载顺序
前几年,很多人看到IT行业越来越火,就想转行成为程序员。那时候转行还是很简单的,不一定要掌握很多技术知识,如果你是前端人员,甚至会写个静态页面就可以去应聘了。但现在,这样的“好事”越来越不好找了,很多毕业生面临着一毕业就失业的情况。然而,市面上饱和的大多数是初级的职位,对于中高级开发工程师,企业还是很欢迎的。
准备了解一下 eslint 的原理,就先看一下最早一版 eslint 的实现吧。github 打了 tag 的最早的版本就是 0.0.2 了,提交记录是八年前了。
树这种数据结构包括根节点root,左右节点,子树中又有父节点,子节点,兄弟节点,没有子节点的成为叶子节点,树分为二叉树和多叉树
Webpack 是前端很火的打包工具,它本质上是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有模块打包成一个或多个 bundle。
前面的文章文章我们写到了SDK的开发以及ak认证的实现,在本文我们继续讲讲地图SDK开发中的示例文档的实现。
由于 Loader 对文件的转换操作很耗时,所以需要让尽可能少的文件被 Loader 处理。可以通过 test/include/exclude 三个配置项来命中 Loader 要应用规则的文件。
看完本文,你将从整体了解依赖版本锁定原理,package-lock.json 或 yarn.lock 的重要性。首先要从最近接连出现两起有关 npm 安装 package.json 中依赖包,由于依赖包版本更新 bug 造成项目出错问题说起。
开门见山,npm install 大概会经过上面的几个流程,本篇文章来讲一讲各个流程的实现细节、发展以及为何要这样实现。
面试经典题——URL加载 一、涉及基本知识点: 1. 计算机网络 五层因特尔协议栈: 应用层(dns、http):DNS解析成IP并完成http请求发送; 传输层(tcp、udp):三次握手四次挥手模式建立tcp连接; 网络层(IP、ARP):IP寻址; 数据链路层(PPP):将请求数据封装成帧; 物理层:利用物理介质传输比特流(传输的时候通过双绞线、电磁波等) OIS七层框架:多了两层即,会话层(处理两个通信系统中交换信息的表示方式)和表示层(管理不同用户和进程之间的对话)。 get和post的
webpack是一个打包模块化 JavaScript 的工具,在 webpack里一切文件皆模块,通过 Loader 转换文件,通过 Plugin 注入钩子,最后输出由多个模块组合成的文件。webpack专注于构建模块化项目。
之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。
在明代世系表这棵树中,所有的皇帝都被称为节点。朱元璋称为根节点。后代是皇帝的节点,称为内部节点。没有子元素的节点比如明思宗朱由检称为外部节点或叶节点。朱棣及其后代节点称为朱元璋的子树。
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
从浏览器的运行机制谈起。大家都知道,浏览器是多进程多线程的,多进程包括主进程,渲染进程,插件进程,GPU进程等,作为前端开发者,我们主要关注其中的渲染进程,这里是页面渲染,HTML解析,css解析,js执行所在的地方。在渲染进程中包括多个线程,此次核心关注页面渲染的两个线程,GUI线程和JS线程。
领取专属 10元无门槛券
手把手带您无忧上云