1.什么是前端器源前端源码,什么是后台源码
2.web前端开发编辑器？
3.一般程序员做前端代码开发时用什么工具写代码？
4.图解vue3.0编译器核心原理
5.[前端代码] 第五章 JS 操作浏览器和HTML 文档

什么是前端源码,什么是后台源码

       前端源码一般是指html,js,css等一些浏览器可直接运行的轻量级脚本.

       后端源码一般指在某个编程环境下的运行的后端未编译的代码,如C#,java等,这些代码在未编译解释前无法被浏览器识别!

       注:其实js也可以作为后端编程代码!即js也可是后端源码!但要借助于nodejs等运行工具!换句话说后端代码是需要一个运行环境的,而前端只需要支持浏览器就可以了

web前端开发编辑器？

       å†™ä»£ç çš„软件有哪些

       å¸¸ç”¨çš„写代码软件有以下几个：

       1、WebStorm。WebStorm是jetbrains公司旗下一款JavaScript开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”等。

       2、SublimeText。SublimeText是一个代码编辑器也是HTML和散文先进的文本编辑器。

       3、HBuilder。HBuilder是专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。

前端开发常用哪些工具软件？

       å‰ç«¯å¼€å‘的编译器在选择上还是很多的。在学校里，老师主要讲三个前端开发软件：

       1、WebStorm

       å¸®åŠ©ç¼–写HTML、CSS、Less、Sass和Stylus代码，并且支持Node.js和主流框架，如React、Angular、?Vue.js、Meteor等。与IntelliJIDEA同源，继承了IntelliJIDEA强大的JS部分的功能。但是付费软件。

       2、IntelliJidea

       idea是学校老师教得最多的一款软件，从学Java开始，除了eclipse和myeclipse之外，学校老师用的最广泛的Java编译器就是idea，而idea也能进行前端项目的开发，idea是我用得最熟的一个编译软件。像一个完整的前端网站，配置好jdk，tomcat，maven，数据库之后就可以在idea上进行搭建了。

       3.VisualStudioCode

       ç®€ç§°VScode，前端开发时期学习的第一款软件，当时学VScode的时候上的网课，老师用插件的时候一个没跟上，就跟不上了。总体感觉下来是插件库很丰富，而且内存占用不大，目前我身边用VScode的人是最多的。

       ä¸‹é¢æ˜¯æˆ‘在实习中接触到的前端开发工具：

       notepad++

       é¡µé¢å¾ˆç®€å•ï¼Œä¹ä¸€çœ‹åƒæ˜¯ä¸€ä¸ªè®°äº‹æœ¬ï¼Œå®ƒä¹Ÿç¡®å®žå¯ä»¥å½“记事本用。有很多特色插件可以使用，支持多种编程语言的语法高亮显示，具有代码折叠功能。

       2、HBuilderX

       HBuilderX是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。是HBuilder下一代版本，具有轻便、适合vue框架的特点。

       æœ‰ä»€ä¹ˆå¥½çš„编码软件吗？

       æ•²ä»£ç ç”¨çš„软件有：Androidstudio，WebStorm，IntellijIDEA，sourceinshght，Vscode。

       1、Androidstudio

       å¯¹UI界面设计和编写代码有更好地支持，可以方便地调整设备上的多种分辨率。同样支持ProGuard工具和应用签名。不过，目前版本的AndroidStudio不能在同一窗口中管理多个项目。

       2、WebStorm

       jetbrains公司旗下一款JavaScript开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”等。与IntelliJIDEA同源，继承了IntelliJIDEA强大的JS部分的功能。不过，我的粉丝说这个有点卡，但是功能还是齐全的。

       3、IntellijIDEA

       IntellijIDEA是java编程语言开发的集成环境，在业界内也被公认是比较好的一个java开发工具。

       4、sourceinshght

       ä¸€ä¸ªé¢å‘项目开发的程序编辑器和代码浏览器，它拥有内置的对C/C++，C#和Java等程序的分析。SourceInsight能分析你的源代码并在你工作的同时动态维护它自己的符号数据库，并自动为你显示有用的上下文信息。SourceInsight提供了最快速的对源代码的导航和任何程序编辑器的源信息。

       5、Vscode

       Vscode全称VisualStudioCode，是一款针对于编写现代web和云应用的跨平台源代码编辑器。

web前端开发工作用什么软件

       å½“涉及到开发工具时，肯定避不开编辑器：SublimeText这个工具很受欢迎，关键是它紧凑、简洁、快速，长文本的开速度也是杠杆滴。拥有漂亮的用户界面和强大的功能，如代码缩略图、Python插件、代码片段等等。您还可以自定义键绑定、菜单和工具栏。它是一个跨平台的编辑器，支持Windows、Linux、MacOSX和其他操作系统。AdobeDreamweaver是专业web设计人员可视化web开发工具的第一个特殊开发，它可以方便地创建跨平台的约束，跨浏览器限制动态web页面。【点击测试我适不适合学设计】

       å¦‚果您打算学习前端的知识，可以考虑一下千锋教育。千锋的企业服务业务赋能企业数字化转型进程，致力于为企业提供全方位综合人才服务，目前已与百度、京东、阿里、腾讯、统信、东方国信等国内知名企业达成深度合作关系，与国内余家企业建立人才输送合作关系。千锋在企业招聘和人才就业之间搭建起桥梁和纽带，为我国数字产业健康快速发展做出了实质性贡献。

一般程序员做前端代码开发时用什么工具写代码？

       1. Bootstrap

        前端开发中常用的工具之一，Bootstrap 是浏览一个基于 HTML、CSS、码编JavaScript 的译网页前前端框架，它可以帮助开发者快速构建响应式布局的端源代码网页。它包含了丰富的前端器源人气累积指标源码组件，如按钮、浏览表格、码编导航栏等，译网页前以及用于响应不同屏幕尺寸的端源代码栅格系统。

       2. 蓝湖

        蓝湖是前端器源一款在线的设计协作工具，它允许设计师将他们的浏览设计稿上传到云端，前端开发人员可以通过蓝湖轻松查看设计稿，码编并进行标注和切图操作。译网页前

       3. Cloud9 IDE

        Cloud9 IDE 是端源代码一个基于浏览器的在线集成开发环境，专为 JavaScript 开发设计。它提供了一个功能丰富的代码编辑器，支持多种编程语言的语法高亮，并且集成了 Node.js 和 Chrome 的调试工具。

       4. Notepad++

        Notepad++ 是一款广受欢迎的文本编辑器，适用于 Windows 系统。它支持多种编程语言的语法高亮，并具备插件系统，源码代码设计使得开发者可以扩展其功能。

       5. Visual Studio Code

        Visual Studio Code 是一个轻量级但功能强大的源代码编辑器，适用于 Windows、macOS 和 Linux 平台。它支持多种编程语言，并提供代码补全、版本控制集成等高级功能。

       6. GIMP

        GIMP（GNU Image Manipulation Program）是一款开源的图像编辑软件，功能强大，可与 Adobe Photoshop 相媲美。它适用于 Linux 系统，但也有适用于其他平台的版本。

       7. SecureHeaders

        SecureHeaders 是一个Web安全工具，它可以自动在网页中添加多种安全头部信息，如内容安全策略（CSP）、HTTP 严格传输安全（HSTS）等，以提高网站的安全性。

       8. Fontello

        Fontello 是一个图标字体生成器，它允许用户将图标作为字体使用，这样可以简化网页中的图标管理，减少加载时间，并且提升SEO效果。atomic原子源码

图解vue3.0编译器核心原理

       概览

       Vue.js作为目前最流行的前端框架之一，一些概念和原理还是需要我们前端开发人员了解与深入理解的。

       Vue.js涉及的知识点很多，一些重要概念，例如：如何使用proxy实现响应式effect，虚拟DOM的Diff算法及演变过程（双端Diff算法、快速Diff算法等），渲染器原理的实现，编译器、解析器的工作原理，动态节点、静态提升等等；

       现在重点采用图解步骤分析一下编译器的简单工作原理；

编译器概念

       编译器其实就是一段JavaScript代码程序，它将一种语言（A）编译成另外一种语言(B)，其中前者A通常被叫做源代码，后者B通常被叫做为目标代码。例如我们vue的前端项目的.vue文件一般即为源代码，而编译后dist文件里的.js文件即为目标代码；这个过程就被称为编译（compile）

关键概念

       主要涉及的概念：

       DSL领域特定语言

       AST抽象语法树（AbstractSyntaxTree）

       有限状态机

       深度优先算法

简单流程

       一个标准的编译器流程如下图所示：Vue.js作为DSL，其编译流程会与上图有所不同，对于Vue.js来说，源代码就是组件的模板代码，而目标代码就是能够在浏览器（或其他平台）平台上运行的JavaScript代码。

Vue的reactor模式源码编译器

       Vue.js的目标代码其实就是渲染函数（render函数）。概况而言，Vue.js编译器首先对模板进行词法分析、语法分析，然后得到模板的抽象语法树（AST）。随后将模板AST转换成JavaScriptAST，最后再转换成JavaScript代码，及渲染函数。一个简单的Vue.js模板编译器的工作流如下：

       简单如下：模板代码

<div><h1id="vue">vue_compiler</h1></div>

       目标的AST

constast={ type:'Root',children:[{ type:'Element',tag:'div',children:[{ type:'Element',tag:'h1',props:[{ type:'Attribute',name:'id',content:'vue'}],children:[{ type:'Text',content:'vue_compiler'}]}]}]}

       目标代码

functionrender(){ returnh('div',[h('h1',{ id:'vue'},'vue_compiler')])}

       由以上代码可以看出，AST其实就是一个具有层级结构的对象，模板的AST与模板具有相同的嵌套结构。每一颗AST都有一个逻辑上的根节点，其类型为Root，而模板中真正的根节点则作为Root节点的children存在。

       观察AST可知：

       不同类型的节点是通过节点的type属性进行区分的。

       标签节点的子节点存储在其children数组中。

       标签节点的属性节点会存储在props数组中。

       不同类型的节点会使用不同的对象属性进行描述。

编译过程parse函数

       Vue.js通过封装parse函数，实现对模板的词法分析和语法分析，最终得到模板的AST。parse函数接收模板字符串作为参数，并将解析后的ffmpe优化源码AST作为返回值返回；

consttemplate=`<div><h1>vue<h1></div>`consttemplateAst=parse(template)

       解析器是如何对模板字符串进行分割的呢，此处就需要用到有限状态自动机。指的是在有限个状态之间，随着字符的输入，解析器会自动地在不同的状态之间进行切换。（实际上有限状态机是可以使用正则表达式来实现的）。

       简单的状态机流程图：通过有限状态机原理，可以帮助我们完成对模板的标记，最终将得到一系列Token（词法标记号）。

       假设有如下代码：

consttemplate=`<div><span>Vue</span><p>VueCompiler</p></div>`//模板字符串//通过有限状态机原理实现词法分解得到三个Token//开始标签<div>//文本节点vue//结束标签</div>//最终值为consttokens=tokenize(template);//[//{ //type:'tag',name:'div'//},//{ //type:'tag',name:'span'//},//{ //type:'text',name:'Vue'//},//{ //type:'tagEnd',name:'span'//},//{ //type:'tag',name:'p'//},//{ //type:'text',name:'VueCompiler'//},//{ //type:'tagEnd',name:'p'//},//{ //type:'tagEnd',name:'div'//}//]//此代码需要生成的AST应为constast={ type:'Root',children:[{ //实际的根节点type:'Element',tag::'div',children:[{ type:'Element',tag::'span',children:[{ type:'Text',content:'Vue'}]},{ type:'Element',tag::'p',children:[{ type:'Text',content:'VueCompiler'}]}]}]}

       以上代码生成的AST数据结构HTML结构相同，都是树状结构

       接下来要做的就是将生成的tokens转换成AST，在转换过程中需要维护一个Stack,这个栈将用来维护元素间的父子关系。每到遇到一个开始标签，就创建一个Element类型的AST节点，并将其压入栈内，类似的，每当遇到一个结束标签节点，我们就将当前栈顶的节点弹出。这样栈顶的节点将始终充当父节点的角色。转换过程中的所有节点，都将作为当前栈顶节点的子节点，并添加到栈顶节点的children属性下。流程如下图示：

       最初节点只有根节点Root

       当扫描到第一个标签是开始节点时，因此我们创建一个类型为Element的AST节点Element（div），并将该节点作为当前节点的子节点。由于当前的栈顶节点是Root节点，所以新创建的Element（div）节点作为Root节点的子节点被添加到AST中，最后将新建的Element（div）节点压入栈中。

       由于第二个节点也是一个开始标签，所以流程同上一步，只不过当前的栈顶节点为Element（div），所以将当前的节点Element（span）作为其子节点添加到AST中，最后将Element（div）节点压入栈中。

       接下来的节点是一个文本节点，所以需要创建一个Text类型的AST节点，并将其作为栈顶节点Element（span）的子节点加入到AST中，不同的时，当前接待不是Element类型，所以不需要压入栈中；

       下面是一个结束标签节点，根据规则，则需要将当前栈顶的节点弹出。

       后面的流程此处就不再累述

       最终完成后的效果如下：

       现在我们来实现parse函数

functionparse(str){ //对模板进行词法分析，得到节点listconsttokens=okenize(template);//创建跟节点constroot={ type:'Root',children:[]};//创建节点栈,root节点作为栈的根节点conststack=[root];while(tokens.length){ constparent=stack[stack.length-1];consttoken=tokens[0]//从第一个点开始switch(t.type){ case'tag':consteleNode={ type:'Element',tag:t.name,children:[]}parent.children.push(eleNode);stack.push(eleNode);break;case'text':consttextNode={ type:'Text',content:t.content}parent.children.push(textNode);break;case'tagEnd'://结束标签，将栈顶节点弹出栈stack.pop();break;}//消费掉已处理的节点tokens.shift()}returnroot}

       以上就是一个简版的parse函数的实现，当然相对于Vue.js的源码还有很多差异，但基本原理大致相同。

       下面关于transform函数和generate函数仅做了简要说明，具体实现原理敬请期待；

transform函数consttemplate=`<div><h1>vue<h1></div>`consttemplateAst=parse(template)constjsAst=transform(templateAst)generate函数consttemplate=`<div><h1>vue<h1></div>`consttemplateAst=parse(template)constjsAst=transform(templateAst)constcode=generate(jsAst)完整流程

       以上就是Vue模板编译器的基本结构和工作流程，它主要有三个部分组成：

       用来将模板字符串解析为模板AST的解析器（parser）;

       用来将模板AST解析成JavaScriptAST的转换器（transformer）；

       用来根据JavaScriptAST生成渲染函数代码的生成器（generator）；

       本文章主要讨论了parser的基本实现原理（实际上Vue.js的真正实现要复杂的多，比如正则解析、Vue语法解析v-if、v-show、内插值{ { }}等等），以及如何使用有限状态自动机来构造一个词法分析器，其过程就是状态机在不同的状态之间进行迁移的过程，并生成一个Token列表集合。然后使用Token列表集合和顶节点元素栈来构造一个可以用来描述模板的AST，最后使用模板AST来解析成JavaScriptAST和渲染函数。

       作者：GFE-绝对零度著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

参考

       Vue.js源码；

       Vue.js设计与实现；

原文：/post/

[前端代码] 第五章 JS 操作浏览器和HTML 文档

       JavaScript通过浏览器内置对象操作浏览器，实现对HTML文档的管理和操作，为开发者提供了极大的便利。

       窗口(window)对象作为全局对象，包含了浏览器窗口的几乎所有信息，例如浏览器的大小(innerWidth和innerHeight)、地址栏信息等，提供了直接与浏览器交互的途径。

       navigator对象提供了浏览器的详细信息，如用户代理字符串、操作系统、浏览器版本等，用于了解用户的环境配置。

       screen对象描述了当前屏幕的特性，包括分辨率、颜色深度等信息，可用于响应式设计，确保页面在不同设备上呈现良好。

       location对象代表当前页面的URL，允许获取和修改URL路径，实现页面跳转和重新加载。

       document对象是HTML文档的根节点，提供了访问和操作DOM树的接口，用于解析、修改页面内容。

       JavaScript可以动态修改document对象的title属性，改变浏览器窗口的标题。

       查找DOM节点的方法主要包括通过id、标签名或类名定位。通过document.getElementById()可以获取具有特定id的单个节点，而getElementsByTagName()和getElementsByClassName()则用于获取一组相关节点。

       JavaScript能够读取当前页面的Cookie，Cookie用于存储用户信息和网站偏好，但存在安全风险。通过document.cookie可以获取或设置Cookie值。HttpOnly属性增强了Cookie的安全性，限制了跨域请求访问。

       HTML DOM定义了HTML文档的结构，并提供了一系列方法和属性，用于创建、修改和操作DOM节点。

       DOM节点操作涉及到选择、更新和遍历节点，例如通过id或标签名获取节点后，可以直接更新其内容或属性。

       AJAX（Asynchronous JavaScript and XML）实现异步的JavaScript和XML通信，不刷新页面的情况下，通过JavaScript发送HTTP请求，获取服务器响应，然后更新页面内容，为实现动态交互提供了可能。

       使用AJAX，开发者可以在不刷新页面的情况下实现数据的实时更新，显著改善用户体验。 XMLHttpRequest对象是AJAX实现的核心，允许在现代浏览器中发送HTTP请求和接收响应。

       AJAX代码的编写相对简单，主要包括创建XMLHttpRequest对象、配置请求参数、发送请求、处理响应和更新页面内容等步骤。

       同步请求在等待服务器响应期间，浏览器无法执行其他任务，而异步请求则允许浏览器继续执行其他操作，提升用户体验。

       POST请求允许向服务器发送实体内容，常用于数据提交和更新操作，是AJAX中常见的一种请求方式。