Vue框架在前端开发中应用广泛，当一个多人开发的Vue项目经过长期维护之后往往会沉淀出很多的公共组件，这个时候经常会出现一个人 开发了一个组件而其他维护者或新接手的人却不知道这个组件是做什么的、该怎么用，还必须得再去翻看源码，或者压根就没注意到这个组件 的存在导致重复开发。这个时候就非常需要维护对应的组件文档来保障不同开发者之间良好的协作关系了。
在各种大型项目中，流量统计是一项重要工程，统计点击量可以在后端进行监控，但是这局限于调用接口时才能统计到用户点击，而前端埋点监控也是一个统计流量的手段，下面就基于百度统计来完成以下需求
最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。
小技巧：如果API写的是Emement复数的形式，也就是后面加了s（Emements）那么它返回的就是一个伪数组 否则就是单个对象，一般只有id才会是单个对象，其他方式获取（标签名 类名）都是伪数组.
Element.replaceWith(）的签名接受数量可变的Node或DOMString参数。。。
1 1. 什么是JSX语法 2 2. jsx语法示例与渲染的VNode节点 3 3. jsx的渲染流程 4 4. jsx中的js和html的写法不同 5 a. js：{ js语法 } 6 i. 花括号里边一定要返回字符串才能渲染 7 ii. {{ 双花括号表示js语法里的对象格式 }} 8 iii. 花括号里可以写表达式、三元、有返回值且返回字符串的函数调用 9 iv. 花括号里直接放对象报错 10 v. 数组可以直接被渲染到页面中。 11 b. html：<html语法> 12 i. class等关键字不能用做html的属性（如class、for等不行，需要替换成别的） 13 1) class -> className 14 2) for -> htmlFor 15 c. a标签写了以后，必须写href属性 16 d. 组件根节点只能是一个标签，不能有并列标签。否则报错！ 17 三种方法实现空白标签包裹：（就像小程序的block标签、又像vue的template标签） 18 i. <React.Fragment>空白标签1</React.Fragment> 19 ii. import { Fragment } from 'react'；<Fragment>空白标签1</Fragment> 20 iii. <>空白标签2</> 21 e. 列表渲染 - 迭代的方法（没有for）：利用数组进行渲染 22 f. key值唯一的绑定 23 g. 条件切换的使用（没有if else、简直反人类） 24 h. 动态样式的绑定 - style的值需要是一个js语法，包裹在对象里边。 25 i. v-html类似用法：dangerouslySetInnerHTML={ {__html: variableName} }【innerHTML容易造成xss攻击，避免使用】 26 j. jsx中的注释 27 i. 多行注释：{ /** js注释 **/ } 28 ii. 单行注释： 29 { 30 // 单行注释，花括号如果提上来就被注释了。所以换行 31 }
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。 为什么要使用 JSX？ 你不需要为了 React 使用 JSX，可以直接使用纯粹的 JS。但我们更建议使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。 对于非专职开发者（比如设计师）同样比较熟悉。 XML 有固定的标签开启和闭合。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。 它没有修改 JavaScript 语义。 HTML标签 与 Rea
本文的初衷是想让更多的同学知道并了解vue模版编译，所以文中主要以阶段流程为主，不会涉及过多的底层代码逻辑，请耐心观看。
其中 compiler-core 模块是 Vue 编译的核心模块，并且是平台无关的。而剩下的三个都是在 compiler-core 的基础上针对不同的平台作了适配处理。
babel 编译的第一步是把源码 parse 成抽象语法树 AST （Abstract Syntax Tree），后续对这个 AST 进行转换。（之所以叫抽象语法树是因为省略掉了源码中的分隔符、注释等内容）
HTML 用了尖括号作为了标签的边界符，这只是一种语法规定，事实上如果我们愿意，我们使用 JSON 或 TOML 格式实现结构化也是可以的，我们也可以使用方括号代替尖括号，但从实际结果来看，还是使用 XML 格式更好，尖括号因为在文本中使用不多，用它作为边界符也比较合适。
笔者近期在将前端架构 webpack 升级到 5 时，一些配套模块也需要进行升级，其中包括了 css 处理模块 PostCSS。旧版本使用的是 PostCSS 7，在升级至 PostCSS 8 的过程中，笔者发现部分插件前置依赖还是停留在 7 版本，且年久失修，在 PostCSS 8 中出现各种各样的问题，无奈只能研究源码，将目前部分旧版本插件升级至新版本。这里，笔者将升级插件的过程进行简化和提炼，让读者自己也可以编写一个 PostCSS 8 插件。
原生JS有一个常见的小技巧那就是通过元素的previousSibling 属性，额外需要注意的是该属性会遍历text节点，即回车键。
前面讲解了数组，栈和队列。其实大家回想一下。它们有很多相似的地方。甚至栈和队列这两种数据结构在js中的实现方式也都是基于数组。无论增删的方式、遵循的原则如何，它们都是有序集合的列表。在js中，我们新建一个数组并不需要限定他的大小也就是长度，但是实际上，数组的底层仍旧为初始化的数组设置了一个长度限制。我们想要在数组中任意的插入和删除元素的成本很高，虽然在js中我们有便捷的方法可以操作数组，但是其底层原理仍旧是这样的。只是我们对它并没有感觉，比如在java中，声明一个数组是必须要限制它的长度的。并且在扩容的情况下，操作起来也不是十分方便。这就需要用到其它的数据结构来应对我们不同的需要，比如链表。
前面讲解了数组，栈和队列。其实大家回想一下。它们有很多相似的地方。甚至栈和队列这两种数据结构在js中的实现方式也都是基于数组。无论增删的方式、遵循的原则如何，它们都是有序集合的列表。在js中，我们新建一个数组并不需要限定他的大小也就是长度，但是实际上，数组的底层仍旧为初始化的数组设置了一个长度限制。我们想要在数组中任意的插入和删除元素的成本很高，虽然在js中我们有便捷的方法可以操作数组，但是其底层原理仍旧是这样的。只是我们对它并没有感觉，比如在java中，声明一个数组是必须要限制它的长度的。并且在扩容的
window对象定义了一些属性，用来指定当前窗口的一些信息。通过该属性的引用，可以获取当前窗口的信息
jsx = javascript XML jsx :facebook 提出的草案jsx规范：核心规范 https://facebook.github.io/jsx/
React 是一个用于构建用户界面的 JAVASCRIPT 库。 起源： React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站 描述
React Native之React速学教程(上) 本文出自《React Native学习笔记》系列文章。 React Native是基于React的，在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document，但篇幅比较多，学起来比较枯燥。 通过《React Native之React速学教程》你可以对React有更系统和更深入的认识。为了方便大家学习，我将《React Native之React速学教程》分为上、中、下三篇，大家可以根据需要进行阅读学习。 概
JavaScript作为使用得最多的脚本语言，可以说是无处不在。所有主流浏览器都支持JavaScript。目前，全世界大部分网页都使用JavaScript。它可以让网页呈现各种动态效果。 作为后台程序员的我们，JavaScript也是必备的。接下来就一起来学习一下JavaScript，感受它的魅力！
https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript
JSX 是一个看起来很像 XML 的 JavaScript语法扩展。React 可以用来做简单的 JSX 句法转换。 下面看一段React组件的代码：
我们在开发的时候会习惯缩进和写注释，方便我们在日常的维护，但将代码上传至服务端后，我们完全可以把那些空格、制表符、换行符进行压缩，以此减少请求资源的大小；同样的，我们在服务端所引用的第三方库进行合并，能减少 HTTP 的请求数量
什么是JSX？ JSX 是一个看起来很像 XML 的 JavaScript语法扩展。React 可以用来做简单的 JSX 句法转换。 下面看一段React组件的代码： // 未使用JSX Reac
如果你有babel相关知识基础建议直接跳过 前置知识 部分，直接前往 "插件编写" 部分。
吐槽：虽然JSX出发点是好的，而且写起来也很简单，但是对于要在JS中写类HTML格式的内容，我的内心是排斥的，感觉非常不习惯。这不是我熟知的web开发啊！有种在开发app的感觉，一个个自定义的组件。
上篇 《如何编写高质量的 JS 函数（1） -- 敲山震虎篇 》介绍了函数的执行机制，此篇将会从函数的命名、注释和鲁棒性方面，阐述如何编写高质量的 JS 函数。
javascript和jQuery有点关系，js是一种脚本语言，主要用于客户端，现在主要用于实现一些网页效果。
在react中，父组件给子组件传递数据时，就是以上的方式，通过给子组件设置props，子组件获取props中的值便可完成数据传递。
从浏览器的运行机制谈起。大家都知道，浏览器是多进程多线程的，多进程包括主进程，渲染进程，插件进程，GPU进程等，作为前端开发者，我们主要关注其中的渲染进程，这里是页面渲染，HTML解析，css解析，js执行所在的地方。在渲染进程中包括多个线程，此次核心关注页面渲染的两个线程，GUI线程和JS线程。
有需求就要改进 最近两年没有在春节回家过年了，主要是票太难买，虽然之前写了一个12306“无声购票弹窗”工具，解决了抢票问题，但是全家老小一起回去还是很累，干脆就在北京过年了。这两天突然有一个朋友问我你之前的抢票工具还能用不，我让他试试，他说可以，于是我觉得这样一个小工具居然还有人继续使用啊，既然有人用我就继续把他做好点，让大家过年抢票更“安心”！ 之前的抢票工具是基于IEBrowser控件做的，不用说大家都知道这个控件在不同的Windows系统上表现各异，因为它主要依赖于IE内核，坑爹的是它有时候还没有直
之前上家公司主要是做移动端 H5 开发的，但相关技术和配套体系已经很成熟了，很难接触到背后的这套体系。
尽管如此，js还定义了一个方法，即一个getElementsByClassName()，是基于class属性值中的标识符来选取成组的文档元素
作者：sagittarius-rev 链接：https://www.zhihu.com/question/31305968/answer/116439739 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
在正式讲解 React 之前，我们需要对 WebPack 部分做一个简单的介绍，而 WebPack 0 基础的同学，可以先参考 WebPack 模块化打包工具（上） 、WebPack 模块化打包工具（下） 这两篇文章的讲解，再进行 React 的学习
HTML节点的基本操作，添加节点，替换节点，删除节点，绑定事件，访问子节点，访问父节点，访问兄弟节点。 文档对象模型Document Object Model，简称DOM，是W3C组织推荐的处理可扩展标记语言XML的标准编程接口，是一种与平台和语言无关的应用程序接口API。 根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，每个HTML属性是属性节点，注释是注释节点。HTML DOM将HTML文档视作树结构。这种结构被称为节点树：HTML DOM Tree实例。
2)从节点上进行一致性快照恢复，仅仅对数据部分进行恢复，暂时不要对oplog进行恢复
第一次在手机上写文章，觉得别有一番风趣。上周自己抽时间把Strve.js升级了一下，现在目前版本是2.3.3。有兴趣的朋友可以去官方文档查阅一下。说到官方文档，之前有位朋友说我的文档缺乏可视化界面，就是那种在线编辑插件。这位朋友提的建议很不错，就去网上调研了一下，最后选定了Codepen。选定它的原因是我只是单独的页面展示，这样简单就足够了。
引用 <link rel="stylesheet" type="text/css" href="./index.css"> <script type="text/javascript" src="./index.js"></script> <script type="text/javascript"> var toaster = new Toaster() toaster.info({ text: 'default config' }) </sc
为了使诸如屏幕阅读器之类的辅助技术能够解释网页和应用程序，无障碍支持是必需的。为了使这些技术起作用，开发人员需要考虑可访问性。
当浏览器接收到一个Html文件时，JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度，它首先会将html文件解析成一个DOM树，与此同时，浏览器将识别并加载CSS样式，并和DOM树一起合并为一个渲染树。有了渲染树后，渲染引擎将计算所有元素的位置信息，最后通过绘制，在屏幕上打印最终的内容。JS引擎和渲染引擎虽然是两个独立的线程，但是JS引擎却可以触发渲染引擎工作，当我们通过脚本去修改元素位置或外观时，JS引擎会利用DOM相关的API方法去操作DOM对象,此时渲染引擎变开始工作，渲染引擎会触发回流或者重绘。下面是回流重绘的两个概念：
一个html页面由那几部分组成的？ html(超文本标记语言)、css(层叠样式表)、js(动态脚本语言)(操作页面上所有元素，让元素具有动态的效果) 前端工程师工作的内容： 拿到UI设计图：切图---->html+css静态布局----->用js写一些动态效果----->ajax和后台进行交互，把数据绑定到页面上---->用nodejs服务平台做源代码的管理---->用nodejs做后台 用到的开发工具有： Dw、sublime、webstrom、hbuild、eclipse...... 将css引
为了构建你自己的 Virtual DOM，你只需要知道两件事，甚至你都不必深入 React 或者其它 Virtual DOM 实现的源码。因为它们都太庞大和复杂了 —— 但是实际上 Virtual DOM 的主要部分可以用少于 50 行代码实现。50 行！！！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
