ta_huang的博客

AMD 是一种适用于浏览器环境的模块化规范，主要用于异步加载模块。RequireJS 是实现 AMD 的一个流行库。引入模块所用主文件：main.js。引入 RequireJS 库。index.html，使用。模块1：greet.js。模块2：math.js。

在控制台中打开设置，勾选显示用户代理 shadow DOM，就可以审查video标签的内部样式了。箭头处标出来的就是shodow DOM的内容，这些内容正常不可见的，只有勾选了才会显示。修改video标签的原生样式。

同源不同页面之间的通信，使用SharedWorker，或者使用全局方法通信，这里使用SharedWorker来实现。

vue2和vue3中手动挂载组件案例。

在vue2项目中支持ts语法的使用。node版本：18.9.0。

【代码】手动封装promise功能，class封装实现。

柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术即函数可以接收单个或多个参数，并按照单个参数进行处理，以下是调用例子。

ps：以上代码是对vue3知识点的简单案例应用。

使用 text/event-stream，服务器可以实现与客户端的实时双向通信，通过推送事件来传递实时数据和状态变化。它与其他实时通信技术（如 WebSocket）相比，更适合于单向的服务器向客户端的通信场景，不支持客户端向服务器发送消息。它提供了一种简单的方式来实现服务器推送的功能，且在浏览器端的兼容性较好。是一种用于服务器向客户端推送事件的媒体类型（Media Type）。它是基于 HTTP 协议的一种流式传输技术，也被称为 Server-Sent Events（SSE）

强缓存：强缓存使用Expires（老版本）和cache-control（新版本）来控制协商缓存：协商缓存使用if-Modified-Since 与 Last-Modified配对、If-None-Match与Etag配对来控制。

脚手架可以快速的帮我们搭建一个项目，而不需要我们从头开始去配置和引入插件，使用脚手架5.0.8版本创建的项目，局部webpack是5.x版本的，因此所有的配置均需要使用支持5.x版本的插件使用控制台进入到项目存放目录，使用命令vue create demo创建名为demo的项目选择自定义勾选Babel、Router、Vuex、css预处理、eslint等，如果需要ts的也可以勾选选择vue版本3.x选择n，hash模式，然后选择less作为自己的项目预处理语言。

脚手架搭建的项目，会默认开启sourceMap，此时打包下来的包会很大，如图：map文件比所有js文件都大，会导致包整体体积过大，js文件大小超过100k，也很大不符合预期，这还只是空项目的情况下。如果觉得还不够小的话可以通过其他方式进一步进行优化。

由于脚手架本身在配置项目时，选择了eslint配置，会自动下载好了eslint-webpack-plugin插件并配置好了的，因此，我们如果按照官网的方式直接配置是不会生效的，因为配置的时候会位于原本的之后，因此调用不到，我们只需要直接获取到已经配置好了的插件相关配置信息，进行修改成我们想要的配置就可以达到目的。脚手架vue-cli创建的项目如何基于eslint-webpack-plugin配置eslint在保存时自动修复错误。

编译后的js代码利用了es5的类继承原理实现（继承原型链和构造函数）

在el-input中设置属性autocomplete=”off",普通文本可以生效，但是密码框点击后还是会提示用户信息，由于用户信息提示只跟input有关，因此，我们可以通过监听input的行为来,不然其显示，根据测试，在鼠标按下的时候，就会展示用户信息自动填充框供选择，因此，监听的事件要在按下鼠标的时候，即。事件,在input获得焦点时，先失去焦点，就不会提示用户信息，然后再通过js代码去获取焦点，此时不会触发用户信息框。禁用登录的时候提示用户信息，即不允许保存账号密码。

目前的配置只支持在终端输入命令去校验和修复。stylelint-order 用于样式排序，顺序可以在。stylelintrc.js的数组中配置postcss-html 用于vue和html文件校验postcss-less 用于less文件校验。

element树形表格懒加载勾选问题解决方案，整体实现思路如上面所描述，可以根据这个思路去实现，难度不大，需要一定的思绪，由于是项目代码就补贴出来全部了ps如果有疑问可以评论或者私信询问pselement树形表格数据问题文章可以看这边篇文章httpshttps。.........

elementUI 表格懒加载数据更新不及时，或者需要手动添加数据或者修改数据问题问题分析部分代码展示总结问题分析elementUI 表格懒加载数据更新不及时，或者需要手动添加数据或者修改数据问题，如图：使用树形表格时，由于elmenetUI官网没有提供表格的最新数据对象获取方法，因此我们无法拿到最新数据，也无法修改数据对象，但是elementUI有一个表格的state属性我们可以直接操作它来达到目的—》this.$refs.mulTable.store.states.lazyTreeNodeMa

一张base64图片格式的图片，将其转化成blob然后上传到服务器需求描述实现总结需求描述一张base64图片格式的图片，将其转化成blob然后上传到服务器，后台跟接收表单文件上传一样的方式去处理改图片实现// url 表示base64的字符串， name表示文件名，附加到blob上的那么、上uploadFile(url, name) { // 以逗号划分类型和内容 let arr = url.split(',') // 截取类型

利用cli创建了项目后，针对eslint配置配置.eslintignore需求.eslintignore配置总结需求采用脚手架配置了eslint之后，该文件是针对根目录检查的，但是有时候我们有些目录不希望被检查，比如public中的文件，有可能是第三方打包好的，此时我们可以通过再.eslint.js文件下配置.eslintignore文件来忽略不需要检查的文件.eslintignore配置# .eslintigore文件src/assetspublic/distpackages/zlD

发布vue组件到npm上的详细过程和npm login失败的解决方案需求实现总结需求为了方便组件的使用，将vue组件打包并发布到npm上，或者直接利用到项目中引入使用实现利用脚手架创建项目 vue create demo创建好之后在目录新建一个packages目录用于存放组件，当然也可以在src中创建一个目录存放由于创建了packages目录在src外部，脚手架不会对该目录编译，因此需要配置webpack进行编译，在vue.config.js文件中配置// vue.config.jsm

映射了淘宝npm镜像地址后执行npm login错误处理需求实现总结需求由于映射了淘宝的npm镜像地址后，打包组件发布到npm时会报错，这个时候我们又不想改本地的镜像地址实现登录npm login--registry https://registry.npmjs.org填写信息发布npm publish --registry https://registry.npmjs.org总结参考网上教程替换地址还是错误时，看看协议是否是https...

css3的mask遮罩属性笔记mask笔记mask笔记通过渐变来绘制显示的区域，透明的则代表不显示，不透明则表示显示-webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0, #0000 30px), radial-gradient(circle at right, #0000 20px, red 0);遮罩大小size-webkit-mask-size: 51%;重复repeat-webkit-mask-repe

highchart的draggable-points.js依赖实现图表的动态拖拽操作需求实现总结需求实现一个曲线图，能够通过鼠标去拖拽点，来进行修改图表实现例子基于vue来实现，如果是jq的按照官网的例子即可，配置列表链接.，例子// 引入依赖import Highcharts from 'highcharts/highcharts.js';import draggable from 'highcharts/modules/draggable-points.js'// 注册拖拽事件

使用import和require动态请求vue组件需求实现总结需求需要在js中动态加载vue组件，组件名称由后端提供，组件存放在前端代码中实现ES5的require的方式// url代表组件名this.componenetName = require('../component-list/basic/' + url).defaultES6的import方式this.componenetName = require(url)import('../component-list/b

vue的v-model实现双向绑定

前端js获取剪切板中的文本或者图片文件数据功能描述实现说明功能描述获取剪切板中的文本或者图片实现// 1. 监听paste事件，在进行粘贴的时候会触发DOM节点.addEventListener('paste', function (event) { // 输出事件对象的clipboardData属性，如下图，数据存储在对象中，但是直接打开是看不到的，只有输出event.clipboardData对象的某个属性或方法才可以看到 console.log(event.clipboardData

@TOC情况说明柱状图的图例默认是圆点的，如图要修改成方形，可以采用如下形式plotOptions: { column: { tooltip: { pointFormat: `<span style="color:{point.color}">\u25A0</span> {series.name}：{point.y}<br/>` } }}效果解释采用格式化字符串的形式去替换，其中的\u25A0（Unicode字体）代表的是”实心方

highchart滚动条使用--highcharts/highstock使用目的引入使用完整代码使用目的1. 需要固定图例和y轴，但是x轴需要滚动的情况引入1. 不能像普通表格一样引入highcharts，只需要引入highcharts/highstock2. 使用import HighStock from 'highcharts/highstock' 替换 import HighStock from 'highcharts'使用1. 使用方式上用HighStock.stockChart代

windows代码量计算开源工具cloc下载cloc使用cloc下载cloccloc下载地址: https://github.com/AlDanial/cloc/releases.选择exe版本的使用cloc下载好cloc-1.90.exe之后，重命名未cloc.exe（方便运行，名字长打的多）将cloc.exe复制到需要统计的文件夹中打开当前文件夹的cmd窗口，即计算src目录下的文件代码量执行cloc .(.前面有一个空格）计算完成.注：需要更多编程知识欢迎关注我...

html使用canvas合并多张图片并下载html使用canvas合并多张图片并下载1. 创建canvas对象，并引入2d上下文实例2. 创建图片对象html使用canvas合并多张图片并下载1. 创建canvas对象，并引入2d上下文实例const canvas = document.createElement('canvas')let ctx = canvas.getContext('2d');canvas.width = 1920 // 设定canvas的宽度、高度canvas.heigh

webpack打包学习笔记webpack4打包遇到的问题css文件处理，使用mini-css-extract-plugin插件提取css,html和css中的图片路径问题webpack4打包遇到的问题基于webpack4的基础上整理的一份打包笔记，记录了本人开发过程中遇到的一些问题和处理方法，css提取，css和html打包后使用相对路径css文件处理，使用mini-css-extract-plugin插件提取css,插件 mini-css-extract-plugin安装 npm i mini-

histroy对象History.length返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。console.log(history.length)History.state返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate 事件而查看状态的方式。console.log(history.state)history.back()在浏览器历史记录里前往上一页, 用户可点击浏览器左上角的返回(

ReflectReflect对象的设计目的有这样几个将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj

Iterator迭代器ES6规定，默认的Iterator接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。Symbol.iterator属性本身是一个函数，就是当前数据结构默认的迭代器生成函数。执行这个函数，就会返回一个迭代器。至于属性名Symbol.iterator，它是一个表达式，返回Symbol对象的iterator属性，这是一个预定义好的、类型为Symbol的特殊值，所以要放在方

function*的用法function* 这种声明方式(function关键字后跟一个星号）会定义一个生成器函数 (generator function)，它返回一个 Generator 对象。function* name([param[, param[, … param]]]) { statements }name函数名param要传递给函数的一个参数的名称，一个函数最多可以有255个参数。statements普通JS语句。生成器函数在执行时能暂停，后面又能从暂停处继续

Set和WeakSet//ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值//Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化 //Set结构的实例有以下属性。 // Set.prototype.constructor：构造函数，默认就是Set函数。 // Set.prototype.size：返回Set实例的成员总数。 // Set实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。 //

ES6的classclass Person { constructor(x, y) { this.x = x; this.y = y; } show() { console.log('x---', this.x, 'y----', this.y); } }类型为functionconsole.l

Map和WeakMap使用new Map()语法进行声明，Map键的类型可以使用任意对象作为键（字符串，object类型），我们还可以直接以二维数组键值对的形传入到构建函数中，第一项为键，后一项为值let map = new Map();let o = { n: 1 };map.set(o, "A"); //addmap.set("2", 9);console.log(map.has("2")); //check if key existsconsole.log(map.get(o))

rem适配移动端原理 //现代浏览器本身的html根是16px，我们可以采用100/16*100% = 625%;的比例去换算rem //这样1rem=100px，这样子好换算 // rem转换px 然后适应到其他设备原理 这里以320px宽度的设备为标准去划分，其他宽度划分类似 //然后再根据其他设备的宽度去设定其根值font-size大小 //方式一： //这是一个例子 @media screen and (min-width:360px) an