ら不吃つ-CSDN博客

原创 2021-09-27

MixinWhatWhyHow(Vue)Pros & ConsProsCons参考WhatMixin是一个 class 或者 interface，其中部分或全部methods与properties未实现，需要另一个class或者interface来提供这些缺失的实现。新的类或者接口包括混合所有的以及自有的属性和方法。所有方法和属性的使用方法在混合或混合的实现中保持一致。WhyMixins 鼓励代码重用，可用于避免多重继承可能导致的继承歧义或解决语言中缺乏对多重继承的支持。 mixin 也可以

2021-09-27 14:32:59 2264

原创 vue中mixins的使用方法和注意点

混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。1. 把混入对象混入到当前的组件中，方法和参数在各组件中不共享export const myMixin = { data() { return { number: 1, data: { aa: 'haha' } } },}在模版Admin中

2021-09-27 13:43:26 3218

原创 Lit vs React

Web Component用Lit， React，原生Javascript写web component，他们之间的区别JavascriptLitReactNote使用使用方式<awc-dropdown></awc-dropdown><awc-dropdown></awc-dropdown><awc-dropdown></awc-dropdown>都可以按照普通标签的形式使用修改

2021-08-09 16:17:01 2580

原创 Web Component 实战笔记

文章目录一、模版元素1. 模版元素2. IDL3. 模版元素的延迟加载4. 激活模版中节点a 克隆节点b. 导入节点二、HTML Import1.HTML Import2. IDL三、Shadow DOM1. 优点2. DOM类型3. IDL4. Example四、自定义元素1. 自定义元素的生命周期2. Example五、Polyfill1. Polymer2. Lit3. Bosonic4 Mozilla Brick5. ReactJSFlux 架构JSX是什么六、 Polymer vs Bosonic

2021-07-19 15:28:20 1328

原创对React Hooks的理解

文章目录一、Why二、What三、How1.引入库2.读入数据四、Use五、Summarize一、WhyReact 创建组件的方式，最常见的有两种，一个是类组件，例如 class Dashboard extends React.Component, 一种是纯函数组件，例如 const Dashboard = () => {return <></>}，而我们希望组件不要变成复杂的容器，最好只是数据的管道。所以组件的最佳写法应该是函数，而不是类。但是，我们知道穿函数组

2021-07-15 09:58:04 621

转载说说react中引入css的方式有哪几种？区别？

一、是什么组件式开发选择合适的css解决方案尤为重要通常会遵循以下规则：可以编写局部css，不会随意污染其他组件内的原生；可以编写动态的css，可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；支持所有的css特性：伪类、动画、媒体查询等；编写起来简洁方便、最好符合一贯的css风格特点在这一方面，vue使用css起来更为简洁：通过 style 标签编写样式scoped 属性决定编写的样式是否局部有效lang 属性设置预处理器内联样式风格的方式来根据最新状态设置和改变

2021-07-14 17:12:50 828

原创防抖和节流

// 节流 - 是在高频出发函数的时候，如果当前函数正在执行，则再触发的函数就不执行了let canRun = true;function onScroll() { if (!canRun) { return; } canRun = false; setTimeout(() => { canRun = true; }, 300);}// 防抖 - 是高频发生时，只执行最后一次，前面的都被取消执行了let timer;

2021-07-06 17:16:38 73

原创 Angular vs React vs Vue

文章目录前言一、Introduce1. Start2. License3. Popularity4. Job market二、Community and development三、Size Angular vs React vs Vue四、LearnSummrize前言通过这几周的学习，下面对Angular， React 和Vue做一下总结对比，希望对你选择哪个框架有所帮助一、Introduce1. StartAngular 是由Google在2010年首次发布，可以说是最早发布的一

2021-07-05 14:45:54 1095

原创使用web component，React vs Angular vs Vue

DiffReactAngularNotes创建项目npx create-react-app my-appng new my-appangular cli 比react cli好使， angular提供了创建service， components， directive等命令，并且angular支持路由和样式选择，方便开发人员搭建项目文件文档React 支持中文文档Angular不支持中文文档文件类型React 是JSX语法Angular是 Typescrip...

2021-05-31 16:12:31 2644 1

原创 Web Component 初步调研知识点 - 1

Web Component 初步调研知识点 - 1What Web ComponentWeb Component 为什么会出现Web Component包涵什么Web Component 思想是什么Web Component three framesWeb Component 优缺点优点缺点Web Component 兼容性Web Component APIHTML TemplatesCustom elementsShadow DOMWhat Web ComponentWeb Component 是一

2021-05-31 15:46:57 390

转载 Web Fonts

Fonts1 CSS font-family在 CSS 中，可以使用 font-family 属性来指定字体，浏览器渲染文字时候会根据这个属性应用于元素。如果没有指定这个属性或者指定的字体不存在于客户的计算机上，则浏览器会使用默认字体。<style> .line { font-family: 'Courier New', Courier, monospace; }</style>如果没有设置 font-family，浏览器会使用默认字体应

2021-02-07 16:32:59 734

转载 JS 引擎运行程序花费的时间图

JS 引擎运行程序花费的时间如图：Parsing - 讲源码转换成解释器可以运行的东西所用的事情。Compiling + optimizing -花费在基础编译和优化编译上的时间。有一些优化编译的工作不在主线程，所以这里并不包括这些时间。Re-optimizing - 当预先编译优化的代码不能被优化的情况下，JIT将这些代码重新优化，如果不能重新优化那么久丢给基础编译去做。这个过程叫做重新优化。Execution - 执行代码的过程Garbage collection - 清理内存的时间

2021-02-07 14:34:31 170

原创 CSS总结

CSS总结css选择器种类有：通用选择器：*id选择器：#header{}class选择器：.header{}元素选择器：div{}子选择器：ul > li{}后代选择器：div p{}伪类选择器：:hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:n...

2020-04-03 16:49:35 452

原创 Print 页眉页脚页码

页眉页脚当我们想打印当前页面或者保存当前页面为PDF的时候，希望加上自己自定义的logo或者文字，经过调研，找到如下两种最常用的添加页眉页脚方式，但是却不是最理想的实现方案，依然在努力调研中table实现方式利用标签和(当长的表格被打印时，表格的和可被打印在包含表格数据的每张页面上。)这个特性，来自定义页面与页脚<style> .preview-table { ...

2020-01-20 16:29:27 11575 2

原创 CSS n行显示不下显示...

<div class="aa">This is the first section...This is the first section...This is the first section...This is thefirst section...This is the first section...This is the first section...This is t...

2020-01-20 15:29:32 558

原创 RxJS: 举例说明forkJoin, zip, combineLatest 的区别

forkJoin当所有 observables 完成时，发出每个 observable 的最新值。const ob1 = interval(1000).pipe( map(d => `ob1:${d}`), ake(8));const ob2 = interval(2000).pipe( map(d => `ob3:${d}`), take(5)...

2020-01-20 15:12:39 544

原创 print 模块小结

print 模块小结Print Google浏览器调试Print 分页折行使用@media（[print，设置打印模式下element的样式](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)）keywordsMedia TypesMedia Featurespage浮动元素撑不开父元素怎么办?Print Google浏览器调试...

2019-12-31 14:52:51 444

原创子元素自动填充父容器，并且会自动折行- dispaly: grid

很多时候，我们都需要这样的布局父元素宽度是resizable子元素个数不确定子元素无论都少宽度都可以自动填充父元素当子元素过多时，子元素可以自动折行每行的子元素宽度一置，都是左对齐如图：如果实现以上的1-4的需求，我们完全可以用dispaly:flex;来实现，如：<style> .parent { width: 40%; ...

2019-12-05 16:20:25 2119

原创 resize font-size according to div size

如果我要满足以下的需求，怎么实现呢？字体大小随着父容器div的宽度变化而变化，即 width = font size * 1.8最小font size是20px最大font size是32px调研总结以下的方法可以改变font-size使用CSS单位 vw | vh，但是 vw | vh Viewport is the browser window size.1vw = 1% ...

2019-12-05 15:44:32 501

原创 css color 之间的转换与一些最佳实践

近期BA要求把rgba转换成16进制的颜色，所以研究了一下怎么转换，以下是转换的方法（1）rgba -> rgbtarget = opacity * overlay + (1 - opacity) * background;// rgba(0,0,0,0.2) -> rgb(204, 204, 204) => 0 * 0.2 + (1 - 0.2) * 255(2) ...

2019-11-05 17:46:39 419

原创 RGBA 转换16进制颜色

RGB HEX Opacity of BLACK on WHITE (0,0,0) #000000 100% (3,3,3) #303030 99% (5,5,5) #505050 98% (8,8,8) #808080 97% (10,10,10) #0A0A0...

2019-10-30 21:40:24 6383

原创 angular-ngFor

假设这样定义模版:<span *ngFor="let item of items">{{item}}</span>然后由编译器将其转换为以下内容：<ng-template let-item [ngForOf]="items"> <span>{{item}}</span></ng-template>然后，A...

2019-09-24 14:34:26 369

原创 angular - trackBy with ngFor

在为ngForOf指令触发的每个ngDoCheck上，Angular都会检查哪些对象已更改。它在此过程中使用不同的方法，每个方法都使用trackBy函数将当前对象与新对象进行比较。默认的trackBy函数：const trackByIdentity = (index: number, item: any) => item;它接收当前item，并应返回一些值。然后将函数返回的值与该...

2019-09-24 14:17:44 210

原创 CSS 单位总结

CSS 单位总结em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸ex: 相对长度单位，相对于字符“x”的高度。通常为字体高度的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。ch: 数字“0”的宽度rem: 相对长度单位，相对于根元素(即html元素)font-size计算值的倍数vw...

2019-09-10 17:48:25 138

转载 Angular change detection

Angular 2 Change Detection - 2typescript angular2 angular.js 17.3k 次阅读 · 读完需要 48 分钟更新时间 - 2017-03-20 16：15；更新内容 - 我有话说模块在 Angular 2 Change Detection - 1 文章中，我们介绍了浏览器渲染、Zone、NgZone 的概念，本文将详细介绍...

2019-05-05 14:38:19 356

原创 angular 6 download files and cancel http request

showDownloadDialog() { const subscription = this.alert.custom(&quot;Cancel&quot;) .subscribe(() =&amp;gt; { this._ngUnsubscribe.unsubscribe(); subscription.unsubs...

2019-02-25 13:40:59 635

原创 Boolean VS boolean

Javascript boolean: primitive type - const disabled: boolean = false;javascript: Boolean object - const boolean = new Boolean(false);const b = Boolean("hi");console.log(b); // trueconsole.log(type...

2019-02-25 13:29:36 337

转载使用position的fixed和absolute二者区别

我们知道，css的position定位属性中，表示绝对定位的有两个值，值absolute与值fixed。都是绝对定位，二者有一致性，也有不同点。那么二者的区别是什么呢？那就是position的fixed值定位的元素会固定在原来的位置不变，不管你如何拖动滚动条，元素都不会改变位置，这从fixed这个英文单...

2018-12-27 16:01:08 383

原创 HTML属性和DOM属性的关系

1.少量的HTML属性和DOM属性之间有着1:1的映射，如id2.有些HTML属性没有对应的DOM属性，如colspan3.有些DOM属性没有对应的HTML属性，如textContent4.就算名字相同，HTML属性和DOM属性，也不是同一样的东西5.HTML属性的值指定了初始值；DOM属性的值表示当前值。DOM属性的值可以改变；HTML属性的值不能改变6.模板绑定是通过DOM属性和事件...

2018-12-27 09:55:33 501

原创 Number.isNaN 与 isNaN 的区别

JavaScript 中，value一共有七种typenull，undefined，boolean，number，string，object，symbol(ES6新增),以下为isNaN与Number.isNaN的输出结果：//isNaNconsole.log(isNaN(null)); //falseconsole.log(isNaN(true)); ...

2018-12-06 16:51:31 2777

原创如何在npm发布自己的包并且关联github

1.创建github帐号，如果google浏览器总是报错，换edge浏览器2.new git相应分支，git clone到本地3.github上传你自己的代码4.在npm上创建帐号3.在本地git文件夹运行npm init，生成package.json文件4.运行npm login，登录npm5.在package.json中添加相应git地址，使npm与github连接"reposi...

2018-11-26 17:54:07 3772

原创一些简单的算法

//反转字符串function revertStr(str) { var arr = str.split(" "), newArr = []; arr.forEach(function (item) { var length = item.length, newStr = ""; for (var i = 0; i < length; i +...

2018-11-23 13:56:38 2241 1

原创 javascript知识点

window.onload = function () { //window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行, $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 } window.onload = function () { //window.onload必须等到页面内包括图片的所有元素加载完毕后才能执...

2018-11-19 18:07:10 135

原创将字符串首字母大写

Css&lt;span style="text-transform: capitalize;"&gt;bb&lt;/span&gt;JSfunction toUpperFirstCode(str) { var reg = /( |^)[a-z]/g; // | - 指明两项之间的一个选择, ^ - 匹配输入字符串的开始位置 //var reg = /^\S/; //

2018-11-19 17:03:50 604

原创 javascript选择器

1.document.querySelector()querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代（1）获取文档中 id=“demo” 的元素：document.querySelector("#demo");（2）获取文档中第一个p的元素 document.querySelector...

2018-11-19 16:47:06 2180

原创 Promise 简单封装Ajax

get请求function getJSON (url) { return new Promise( (resolve, reject) =&amp;gt; { var xhr = new XMLHttpRequest() xhr.open('GET', url, true) xhr.onreadystatechange = function () ...

2018-11-18 17:46:51 135

原创 componentWillReceiveProps为什么deprecated

官方文档（https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops）有一句是这样说的：Using this lifecycle method often leads to bugs and inconsistencies, and for that reason it is going to be...

2018-11-16 16:43:29 4231

原创 es6 为什么引进块级作用域

在没有es6之前，js只有全局作用域和函数作用域，其中作用域内的变量和函数都存在提升问题。a.函数内层的变量会冲掉该外层的变量(function () { var str = "ynqc"; function test() { console.log(str); //undefined if (false) { ...

2018-11-12 18:20:47 210

翻译 let和const命令

1. let和const 声明的变量只能在他所在的代码块内生效var a = [];for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); // 10 }; }console.log(a[6]()); i用var生明，则在全局内生效，console.log(i),...

2018-11-12 17:52:03 146

原创 javascript this指向初探

注：this 即绑定函数上下文1. 普通函数this指向var user = &amp;amp;quot;ynqc&amp;amp;quot;;function f() { var user = &amp;amp;quot;hello&amp;amp;quot;; console.log(this.user); //ynqc console.log(this); //Window}f();

2018-11-08 18:33:23 118

空空如也

空空如也