编程笔记
文章平均质量分 76
晴空闲雲
有温度的软件工程师。
展开
-
css中skew实现元素倾斜
css中可以用transform可以实现元素2D、3D的一些变化,其中有一个变化倾斜可以用skew实现。skew语法skew语法:skew(ax, ay)其中:1. ax 表示在x轴上的倾斜角度,单位为 deg。2. ay 表示在y轴上的倾斜角度,单位为 deg。x轴倾斜示例1,x轴上倾斜30deg:<!-- 要旋转的div --><div class="box"></div><!-- 参照物 --><div class="b原创 2021-12-23 10:02:08 · 7728 阅读 · 0 评论 -
vue3中基于script setup语法糖的$refs使用
在用vue3开发项目的时候,需要调用子组件的方法,于是想着用$refs来实现,但是我是使用script setup语法糖,原先vue2的语法已经不适用了。于是一番折腾和查阅资料,终于搞定。vue2语法vue2语法在组件上设置ref属性后,在代码里可以通过 this.$refs.ref值 访问到对应的子组件。一个设置ref值的组件:<base-input ref="usernameInput"></base-input>在js代码中可以通过如下代码访问到这个组件:thi原创 2021-12-02 15:04:55 · 6255 阅读 · 2 评论 -
从谷歌一行代码能学到哪些姿势
网上很流行的一行代码,据说是谷歌工程师写的,它的作用是给页面所有元素增加一个随机颜色的外边框。[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})运行效果如下图:这个代码虽然只有一行,但是包含的知识点不少,网上有很多解析。我也说下自己的理解,然后最后推荐在实务中使用TreeWalker对象进行遍历。我的理解其中主要包含如下原创 2021-11-26 15:33:13 · 277 阅读 · 0 评论 -
JavaScript用html5新方法操作元素类名
现在网页中类属性使用越来越多,经常会通过增加类、移除类给指定的元素修改样式效果。早先JavaScript处理起来特别不方便,需要先取到class属性,然后对字符串进行处理。现在html5给所有元素增加了classList属性来操作类属性,非常方便。classList先看如下代码:<ul class="nav"> <li class="active">栏目1</li> <li>栏目2</li> <li>栏目3</li原创 2021-11-20 12:26:13 · 724 阅读 · 0 评论 -
JavaScript用Element Traversal新属性遍历子元素
之前遍历子元素可以用childNodes属性或者firstChild进行遍历,但是要判断子元素是否是ELement元素。后来W3C通过Element Traversal规定定义了一组新的属性来进行遍历,就不用判断了,非常方便。childNodes属性遍历遍历子元素通常是通过childNodes属性进行遍历,但是这个属性会包含空白节点,如果只是要遍历Element元素就特别不方便。请看如下代码示例:<div class="article"> <p>段落一</p>原创 2021-11-20 11:51:29 · 573 阅读 · 0 评论 -
JavaScript中选择器函数querySelector和querySelectorAll
选择器是Css非常强大的功能,早先一般是通过getElementById和getElementsByTagName来获取页面元素,在一些场景下就很不方便。后来DOM扩展出了Selector API标准,其中 Selector API Level 1 包含了querySelector和querySelectorAll两个方法,可以通过Css选择器匹配页面元素。querySelector查询单个元素querySelector用于查询页面中第一个符合规则的元素,可以在Document实例和Element实例原创 2021-11-20 10:29:37 · 4432 阅读 · 0 评论 -
JavaScript中if判断包含逗号表达式
有时会看到JavaScript中if判断里包含英文逗号 “,”,这个是其实是逗号表达式。在if条件里,只有最后一个表达式起判断作用。请看如下示例:let a = 1, b = 2, c = 3;// if只判断最后一个表达式if (a == 10, b == 20, c == 3) { console.log("c == 3");} else { console.log("c != 3")}// 控制台输出:// c == 3上面if中有3个表达式,前面两个都不成立,只有最后原创 2021-11-19 21:25:12 · 3938 阅读 · 0 评论 -
JavaScript中MutationObServer监听DOM元素详解
DOM的MutationObServer接口,可以在DOM被修改时异步执行回调函数,我的理解就是可以监听DOM修改。基本使用可以通过MutationObserver构造函数实例化,参数是一个回调函数。let observer = new MutationObserver(() => console.log("change"));console.log(observer);observer对象原型链如下:可以看到有disconnect、observer、takeRecords方法。1.原创 2021-11-19 14:51:19 · 1793 阅读 · 0 评论 -
也谈JavaScript浅拷贝和深拷贝
网上关于这个话题,讨论有很多了,根据各路情况我自己整理了一下,最后还是能接近完美的实现深拷贝,欢迎大家讨论。javascript中的对象是引用类型,在复制对象的时候就要考虑是用浅拷贝还是用深拷贝。直接赋值对象是引用类型,如果直接赋值给另外一个对象,那么只是赋值一个引用,实际上两个变量指向的同一个数据对象,如果其中一个对象的属性变更,那么另外一个也会变更。示例1,简单示例:let human1 = { id: 1, name: "happy"};human2 = human1; // 这里就原创 2021-11-04 17:24:04 · 89 阅读 · 0 评论 -
JavaScript中isPrototypeOf函数详解
有时看一些框架源码的时候,会碰到 isPrototypeOf() 这个函数,那么这个函数有什么作用呢?isPrototypeOf()isPrototypeOf() 是 Object函数(类)的下的一个方法,用于判断当前对象是否为另外一个对象的原型,如果是就返回 true,否则就返回 false。这个函数理解的关键是在原型链上,这个据说是JavaScript的三座大山之一。这里不详述其中的原理,简单的来讲就是3点:1. 函数对象,都会天生自带一个prototype原型属性。2. 每一个对象也天生自原创 2021-11-03 15:05:28 · 4029 阅读 · 0 评论 -
script使用integrity属性进行安全验证
script标签引入文件在html中,script标签可以通过src属性引入一个js文件,引入的js文件可以是本地的,也可以是远程的。1. 引入本地文件开发环境一般多引入本地js文件。<script src="./js/index.js"></script>2. 引入远程文件部署到线上后,一般会分发到cdn,需要引入远程文件,形如:<script src="https://cdn.xxx.xx/js/index.js"></script>只原创 2021-11-02 09:17:05 · 5894 阅读 · 0 评论 -
webpack配置typescript详解
随着现在typescript使用越来越多,作为打包工具界的webpack怎么编译typescript呢?下面我把自己的实践记录一下,成功编译了typescript文件,并且引入typescript模块后,也可以成功编译。我们从新建webpack项目开始,在此之前先贴一下环境,经常环境不同会造成不同的状况,这边先贴上的环境:$ node -v v14.15.4$ npm -v 6.14.10$ webpack -v webpack: 5.58.2webpack-cli: 4.9.0we原创 2021-10-19 08:14:40 · 2678 阅读 · 2 评论