web前端
关注
分享
扫一扫
文章平均质量分 72
记录web（包括html、css、js）相关知识
赶路人儿
一个十年以上编程人员，擅长使用java、python、C++等语言，具有广告投放、个性化推荐引擎等超大规模系统开发经验。
展开
-
JavaScript 运行机制详解：再谈Event Loop
一年前，我写了一篇《什么是 Event Loop？》，谈了我对Event Loop的理解。上个月，我偶然看到了Philip Roberts的演讲《Help, I'm stuck in an event-loop》。这才尴尬地发现，自己的理解是错的。我决定重写这个题目，详细、完整、正确地描述JavaScript引擎的内部运行机制。下面就是我的重写。进入正文之前，插播一条消息。我的新书《ECMAScript 6入门》出版了（版权页，内页1，内页2），铜版纸全彩印刷，非常精美，还附有索引（当然价格也比同类转载 2021-10-18 10:39:20 · 189 阅读 · 0 评论 -
javascript模块化1
随着网站逐渐变成互联网应用程序，嵌入网页的 Javascript 代码越来越庞大，越来越复杂，extjs就是一个很好的例子。 网页越来越像桌面程序，需要一个团队分工协作。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但早期Javascript不是一种模块化编程语言，不支持"类"（class），更遑论"模块"（module）了。所以js模块化开发的方式一直在改变，从 2009 年就诞生了 CommonJS 规范，...原创 2021-08-17 10:51:34 · 329 阅读 · 0 评论 -
谈谈 ＜script＞ 标签以及其加载顺序问题，包含 defer & async
<script>标签出现的很早，其作用：引入JavaScrit代码。这个元素是由 Netscape 创造，并在 Netscape Navigator 2中首先实现。后来，这个元素被加入到正式的 HTML 规范中。属性包括：async：可选，表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。 charset：可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。 defer：可选。..转载 2021-08-12 21:30:02 · 3265 阅读 · 0 评论 -
JavaScript原型&原型链
原型链图图中Parent是构造函数，p1是通过Parent实例化出来的一个对象。如果你看到这张图一脸懵，不要怕，往下看，下面会一步一步教你认识原型&原型链前置知识js的初学者一般很难理解原型和原型链的概念，但原型和原型链又是js中最重要的点之一。从jQuery到现在最火的框架之一Vue，原型的应用无处不在，那我们该怎么学好JavaScript的原型和原型链呢？想要弄清楚原型和原型链，这几个属性必须要搞清楚，__proto__、prototype、constructor。..转载 2021-07-23 22:21:38 · 197 阅读 · 0 评论 -
css之box-sizing用法
CSS 中的 box-sizing 属性定义了 浏览器 应该如何计算一个元素的总宽度和总高度。在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。box-sizing 属性可以被用来调整这些表现:cont原创 2021-07-22 16:23:37 · 955 阅读 · 1 评论 -
textarea、div、pre中如何使用空白、换行符
我们都知道，html的“容器”元素可以通过white-sapce属性实现对空白、换行符的设置，可参考这篇文章：https://blog.csdn.net/liuxiao723846/article/details/118994673本文介绍主要的容器元素textarea、div、pre中如何处理空白、换行符。1、textarea：textarea元素本身具有white-space:pre-wrap属性。我们看个例子：<html><body><textar原创 2021-07-22 15:00:09 · 3417 阅读 · 1 评论 -
css中white-space 属性：“pre”, “pre-line”, “pre-wrap” “nowrap”的区别
在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示，取值有：normal：默认，忽略文本中所有的空白、换行符；只有文本存在 <br> 或文本达到框的约束时，文本才会换行 nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行 pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在 <br> 或文本中有换行符时，文本才会换行 pre-wrap：和翻译 2021-07-22 11:28:00 · 39378 阅读 · 0 评论 -
How to Set Expiry Time (TTL) for LocalStorage With Javascript
This post will explain how to implement expiry times for items stored in the browsers localStorage.If you’re familiar with the browserslocalStorage object, you know that there’s no provision for providing an expiry time. However, we can use Javascript t.翻译 2021-07-21 21:05:16 · 292 阅读 · 0 评论 -
可视化编辑json数据——json editor
最近开发了一个chrome插件，需要找一个轻量级的可视化编辑json的组件。当然使用ace这一类组件是完全可以的，但是个人感觉比较重量。于是查阅了一些资料，整理如下。对于一个json字符串，通过javascript的如下方法可以很方便的对其格式化：var jsonObj = JSON.parse(json_val) //把json字符串转为json对象var formattedStr = JSON.stringify(jsonObj, null, 4);将formattedStr字符串可原创 2021-07-18 14:02:23 · 9834 阅读 · 5 评论 -
chrome开发者模式中跟踪点击事件
在chrome中浏览网页时，通过F12开启开发者模式，在source页签下可以查看到网页的源代码（html、js、css）。当我们想了解一个陌生网页中某个按钮的点击事件内部逻辑时，该如何快速查找呢？其实，chrome已经考虑了这一点，可以在开发者模式中跟踪某一类事件，方法是：在Elements页签下，首先选中某个具有事件的组件（例如button），然后在EventListeners中可以查看到各种事件。如图接下来，我们拿https://www.bejson.com/这个网站做一个例子：查看“格.原创 2021-07-14 22:09:41 · 22269 阅读 · 0 评论 -
chrome开发者模式中查看hover样式的方法
在chrome中，通过F12打开开发者模式，可以很方便的查看页面样式：鼠标选中某个组建，即可查看。但有些时候，我们的组件在“选中”情况下会发生样式变化，这时我们想看“选中”情况下的样式该如何查看呢？当然，chrome开发团队肯定考虑了这种情况，这时可以选中“.hove”，然后勾选focus，这时再选中组建的时候就会默认获取焦点，此时的css样式就是获取焦点时的样式。...原创 2021-07-14 20:42:00 · 6238 阅读 · 0 评论 -
js 粘贴内容时去掉样式
最近在使用jquery的一个json views插件jquery.json-viewer，该插件可以可视化展示json数据，也能够可视化编辑json数据。使用过程中遇到了一点小的问题：将一段json内容粘贴进去后，会带有格式，如下图解决方法：<pre id="json-display"></pre>$("#json-display").on("paste", function (e) { textInit(e)});function textInit原创 2021-07-14 10:55:00 · 1603 阅读 · 0 评论 -
JSON-handle 插件增加“去除转义”功能
开发调试中，经常需要将一段字符串的json结构数据进行格式化。我们可以通过一些文本编辑器的工具，或者在线json格式化来解决。本着极简主义，本人喜欢chrome的JSON-hand原创 2021-06-03 22:10:41 · 3185 阅读 · 0 评论 -
跨域资源共享 CORS 详解
简介CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。目前所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有转载 2021-01-15 14:59:20 · 871 阅读 · 1 评论 -
JSONP原理以及示例
同源策略浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。如果要在js里发起跨域请求获取数据，有两种方式：JSONP； 采用后端代理的方式。看一个示例：1）准备两个不同端口的服务：（不同的端口，也是不同域的服务）接口数据：前端页面：2）前端代码：<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %><.转载 2021-01-15 10:49:30 · 2566 阅读 · 0 评论 -
css - CSS background-image: 当url有括号时不显示
圆括号冲突，加上引号引用url地址解决：background-image: url('http://xxxxxxxxx-(1)-600x600.jpg')原创 2021-01-09 13:46:19 · 2411 阅读 · 1 评论 -
Ace在线代码编辑器使用
这边文章https://blog.csdn.net/liuxiao723846/article/details/106732401介绍了Ace的使用，本文围绕Ace的api深入介绍其具体功能。官网api使用文档：https://ace.c9.io/#nav=howto1、基本配置：ace有许多的配置项可供选择，通过这些配置项可以打造自己的个性编辑器你可以通过setTheme来设置主题，需要注意的是主题文件要存在，并且需要与ace.js同级，命名规则为theme-主题名.jsedito.转载 2020-09-22 10:36:06 · 4616 阅读 · 0 评论 -
JSON Schema介绍2
上篇文章主要介绍了JSON Schema的标准、规范、实现（https://blog.csdn.net/liuxiao723846/article/details/108523139），接下来本文重点介绍JSON Schema的使用和示例。三、快速开始官网链接：http://json-schema.org/understanding-json-schema/ json schema在线校验工具：https://jsonschemalint.com/ json schema在线生成功能：ht.原创 2020-09-14 10:02:58 · 1751 阅读 · 1 评论 -
JSON Schema介绍1
官网：http://json-schema.org/原创 2020-09-12 18:51:09 · 1802 阅读 · 1 评论 -
jsondiffpatch介绍
介绍jsondiffpatch项目是一个将两个json文档、文本、数组...进行对比，并生成diff、patch信息的javascript库，该库支持多种formatter格式输出，以及提供可视化界面。github：https://github.com/benjamine/jsondiffpatch 在线演示：https://benjamine.github.io/jsondiffpatch/demo/index.html1、特点：支持浏览器、服务端（nodejs）使用； 使用google原创 2020-09-12 18:14:14 · 5115 阅读 · 2 评论 -
jsonpatch介绍
官网：http://jsonpatch.com/原创 2020-09-10 21:01:46 · 6254 阅读 · 0 评论 -
npm generate-schema库去掉默认的required
最近一段时间在使用json-schema对接口响应的json数据做校验。找到了一个开源的项目 json-schema-editor-virual。github连接：https://github.com/YMFE/json-schema-editor-visual 在线demo：https://hellosean1025.github.io/json-schema-visual-editor/项目中可以将原始json数据，一键生成schema，通过源码发现这一功能是通过generate-schema原创 2020-09-08 11:40:02 · 879 阅读 · 0 评论 -
grafana share 页面链接
grafana是一款不错的图表展示软件，通常将一些监控数据写入到graphite或者其他时序数据库中，然后通过grafana来展示图表。有时，我们需要在内部的系统中展示grafana中的某些图表（panel）或者dashboard，grafana正好提供了share功能，提供一个url连接，允许我们在其他系统中引入。官方文档：https://grafana.com/docs/grafana/latest/linking/linking-overview/接下来，我们做一个分享panel的示范。原创 2020-09-03 17:41:19 · 7684 阅读 · 0 评论 -
修改iframe页面中的css
在一个html页面中(a.html)使用iframe引入另外一个页面（b.html），有时候我们需要修改ifram页面的样式，该如何操作呢？假设我们没有修改b.html页面的权限（否则直接修改b.html的代码不就简单了么）。分为两种情况。1、a.html和b.html属于同一个域下：思路：在b.html页面加载完毕后，在a.html中通过js获取到b.html页面中的元素，然后进行样式处理。看个例子：1）a.html：<!DOCTYPE html><html>原创 2020-09-03 17:15:34 · 5847 阅读 · 3 评论 -
react环境变量
官网文档地址：https://www.html.cn/create-react-app/docs/adding-custom-environment-variables/在实际开发中，前端er会面对多个环境的接口：开发环境、测试环境、生产环境...这些环境最终要的区别是API的URL不同，所以代码中不能将URL写死，而是要根据不同的环境配置。注：create-react-app或者 umi这样的脚手架初始化的项目，会将webpack的配置黑盒化了，如何在不执行 eject 操作的前提下优雅地配置多个原创 2020-08-31 01:07:36 · 9793 阅读 · 0 评论 -
react组件中监听window的resize事件，实现响应式
所谓响应式，就是页面在不刷新的情况下，拖到不同尺寸的显示器上，或者鼠标放大、缩小浏览器时（当浏览器窗口尺寸发生变化时），页面中的内容会自动适配窗体大小。目前很多js库都具有响应式功能，例如：bootstrap下的各种库。在html页面中，我们可以通过监听window的resize事件来完成各个组件的大小设置。同样，react组件代码中，我们也可以通过同样的方式来实现，例如：export default class HtmlPage extends Component { handl原创 2020-08-30 18:13:04 · 7021 阅读 · 1 评论 -
React-ace 代码自动补全、修改代码补全内容、获取代码、获取代码格式报错信息、设置代码内容（json) 等问题
需求: 一个代码编辑器，能够补全特定内容，且输入过的内容不可以再在补全内容中出现。1.下载这个很多其他博客有，略过不谈。2.引入import AceEditor from 'react-ace';import "brace/mode/json";import "brace/theme/monokai";import 'brace/ext/language_tools';第一个是必定要引入的，第二个是引入的 编辑器模式，这个可以选的很多，第三个引入的是编辑器主题，第四个引入的是代.转载 2020-08-24 21:22:35 · 2523 阅读 · 1 评论 -
Bootstrap table方法，Bootstrap table事件，配置
调用 BootStrap Table 方法的语法：$('#table').bootstrapTable('method', parameter);例如：$('#my_table').bootstrapTable('refreshOptions', { data: tabledata }); //刷新表格tabledata 为数据$("#my_table").bootstrapTable('removeAll'); //清空表格数据$('#my_table').bootstra...转载 2020-08-21 11:19:06 · 4044 阅读 · 0 评论 -
bootstrap table 设置行背景色
先看一个例子：<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.css"><script src="https://cdnjs.cloudflare.com/ajax/原创 2020-08-21 10:54:49 · 5834 阅读 · 0 评论 -
jquery 移除click添加click事件
有事，我们在做web开发时，需要临时移除某个节点的click事件，然后再某些条件下再加上click事件，那么，这个需求该如何实现呢？首先，在html重定义click事件有两种方式，针对这两种方式有两种移除、添加click事件的方法。1、方式一：第一种定义click事件的方法是在标签内部加上onclick的属性，代码如下：<input id = "demoId"type="button"οnclick="demoFunction();" value="单击事件"/>针对这种定..原创 2020-08-20 21:12:25 · 4033 阅读 · 0 评论 -
json数据压缩
json是一种非常简单、易读的数据结构。通常我们在做开发时，会选取json作为数据传输格式。同时为了提升性能、降低带宽，我们一般会对json数据进行压缩。今天我们就来谈谈各种压缩方法。1、常规压缩：默认的json数据是带有换行的，所以最简单的压缩方法是将json中的回车换行去掉，压缩成一行字符串。测试：找了一个大的json字符串，原始大小为1.1m，去掉回车换行压缩成一行后，大小变为了360k。在线压缩工具：https://www.bejson.com/其次，我们还可以将json中的ke原创 2020-07-24 15:40:18 · 13222 阅读 · 0 评论 -
vscode代码截图插件Polacode
今天介绍一款在vscode中对代码截图的插件——polacode，安装插件：选择polacode-2020 安装即可。使用：打开代码编辑页面，然后按"ctrl+shift+p"，输入polacode、回车即可。接下来，选中代码，就会生成对应的截图，我们还可以设置大小、透明度、边框、颜色... 最后，点击最下方生成图片按钮。...原创 2020-07-18 12:28:30 · 19837 阅读 · 3 评论 -
vscode 脑图插件mindmap
在日常办公中，我们经常使用脑图工具来说明一个复杂的“事情”，百度提供了一个在线的脑图工具，https://naotu.baidu.com/今天，我们来看下vscode中如何通过安装插件，来使用。这两个插件作者是同一个（大搜车公司开发的），这里选择第二个（第一个使用中有bug）。...原创 2020-07-17 18:46:44 · 21450 阅读 · 4 评论 -
json-server使用
json-server是一个在前端本地运行，可以存储数据的server，作用：模拟接口，操作模拟数据。github：https://github.com/typicode/json-server1、安装：$ npm install -g json-server$ json-server -hjson-server [options] <source>Options: --config, -c Path to config file [de原创 2020-07-16 21:40:53 · 777 阅读 · 2 评论 -
JS 中如何判断 undefined null
JavaScript 中有两个特殊数据类型：undefined 和 null，在写代码时该如何判断。1、js中判断undefined：不正确的写法；var exp = undefined;if (exp == undefined){ alert("undefined");}exp 为 null 时，也会得到与 undefined 相同的结果，虽然 null 和 undefined 不一样。注意：要同时判断 undefined 和 null 时可使用本法。正确写法：原创 2020-07-15 21:41:03 · 4264 阅读 · 0 评论 -
vscode流程图插件、diagrams网页端和桌面工具
一、diagrams介绍：diagrams提供了一套网页版流程图绘制，以及对应的桌面版本。官网：https://www.diagrams.net/(或者http://draw.io/)，进入后可以在线绘制流程图。下载桌面版地址：https://github.com/jgraph/drawio-desktop/releases，介绍：drawio-desktopis adiagrams.netdesktop app based onElectron.毫无疑问，diagrams也是用了E...原创 2020-07-02 13:41:41 · 8063 阅读 · 0 评论 -
从 VSCode 看大型 IDE 技术架构
零、前言为什么要去看 VSCode？因为我们团队在做的中后台快速研发平台云凤蝶也是一款类似 Web IDE 形态的产品：而谈起 Web IDE，没人能绕开 VSCode，它非常流行，同时又完全开源，总共 350000 行 TypeScript 代码的巨大工程，使用了 142 个开源库。市面上选择基于 VSCode 去修改定制的 IDE 比比皆是：Weex Studio、白鹭Egret Wing、快应用IDE...我希望从 VSCode 身上看到什么？大型复杂 GUI 软件（如 IDE转载 2020-06-30 21:39:06 · 4779 阅读 · 0 评论 -
code-server安装使用
git版本升级：https://blog.csdn.net/liuxiao723846/article/details/106940099原创 2020-06-24 11:46:41 · 26335 阅读 · 9 评论 -
VSCode介绍、常用 插件使用以及java、C++、python环境配置
一、常用配置：1、左侧视图中树组件的缩紧：默认左侧树缩紧太小，当打开大的工程，层级比较多shi原创 2020-06-21 16:13:47 · 2809 阅读 · 0 评论 -
js 遍历数组、对象
上一篇文章（https://blog.csdn.net/liuxiao723846/article/details/106857447）介绍了使用forEach等方法遍历数组（不能遍历对象），我们知道，这几种方法都不支持break、continue关键字，也不支持遍历对象。接下来，我们学习如何解决这类问题。1、使用keys()方法，将对象转成数组，然后遍历：var obj1 = {"a":1,"b":2,"c":3};Object.keys(obj1).forEach((v,i,arr) =&g原创 2020-06-19 17:12:51 · 347 阅读 · 0 评论