当白的技术小窝 ( git : https://github.com/canwhite )

一些前端小技巧，自用，后续会补充

typescript对象数组去重

CommonJS 是同步的，只需要从项目文件夹读取就可以了，用时较短，但是浏览器端，需要从服务器端加载，如果js标签没有同步走完，页面假死，所以需要另外的方案，这就催生出AMD和CMD这些异步方案AMD推崇依赖前置，基于RequireJS，在定义模块的时候就要声明其依赖的模块。CMD推崇就近依赖，基于SeaJS，只有在用到某个模块的时候再去require。UMD就是一种兼容 CommonJS/AMD/CMD 的兼容写法ESM 设计思想是尽量的静态化，使得编译时就能确定模块的依..

经常的一些使用注意这个角度是顺时针旋转的，初始是竖直，颜色从下到上(1)角度0，颜色方向是竖直从下到上background:linear-gradient(0deg, red 0%, blue 100%);(2)角度为90，颜色顺时针旋转，变为水平从左到右所以90度是从左到右的background:linear-gradient(0deg, red 0%, blue 100%);(3)角度为180，颜色顺时针旋转，变为竖直从上到下所以180度是从上到下的background:li

js和原生通信的一般方法：原始的js和native的通信，有三种模式sheme url弹框事件监听注入上下文实际上比较好用的是注入上下文，这个依赖于ios和android注入的引擎，jsc和jsi官方给的方法当然我们也可以使用三方工具，像jsbridge我们先给ios和android安装包含jsBridge的工具内部实际上使用的是WebViewJavascriptBridge这个包，只不过对于注册和调用统一设置了api一般我们的js文件是放在webview上的，所以我们的js

//图片资源这里就不写了...width: 100%;height: 146px;background-repeat: no-repeat;background-position: 0 -146px;//从底儿开始background-size: cover;

pushState和replaceStateh5中提供了只修改地址栏、不修改页面内容的api:pushState(添加浏览历史),replaceState(修改当前浏览历史)，popState事件在用户返回或前进进会被出发触发history.pushState方法接受三个参数，依次为：state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。可用它来传一些数据title：新页面的标题，但是所有浏览器目前都忽略这个值，

1.效果2.css实现 .item-selected{ font-size: 18px; font-weight: bold; color: white; //给当前元素添加相对定位,也就是after的父级 position: relative; &:after { content: " "; width

装饰器模式是结构型的设计模式之一；结构型设计模式的主要特定就是给外挂，尽量不改动原代码；使用的时候在转译阶段还需要一些操作，主要有两种方法：tsbabel我们这里先分别说下这两种：ts使用tsc转译下npm i typescript -gtsc flat-1-1-装饰器使用.ts文件夹出现了flat-1-1-装饰器使用.js用node运行这个js文件就可以了babelnpm install babel-preset-env babel-plugin-transf

<view style="padding-left:12px;padding-right:12px;font-weight:bold"> ·</view>中间这个点是输入法输入dian，然后查找出来的，并不需要用css去一点点搞；主要看个人怎么搭配了

一、require和import的区别require用于读取并执行js文件， 并返回该模块的exports对象， 若无指定模块， 会报错。CommonJS规范加载模块是同步且动态的， 只有加载完成， 才能执行后续操作。可以在代码中引入import用于引入外部模块， 其他脚本等的函数， 对象或者基本类型。import属于ES6的命令， 它和require不一样， 它会生成外部模块的引用而不是加载模块，等到真正使用到该模块的时候才会去加载模块中的值。二、动态引入和静态引入webpack支持node的c

这里推荐神光的小作文：JavaScript 的静态作用域链与“动态”闭包链

单页面应用路由的实现原理和简单实现原理========================首先第一个问题，在同一个页面上如何实现路径的变化,而不去自动刷新页面呢？hashpushState和replaceState以上两种可以只更改路径，不刷新界面========================然后第二个问题，不自动刷新页面，我们如何随着路径变化手动刷新页面呢？这里我们写一个routes去初始化添加path和path对应的callback注意，这个callback是我们手动刷新

box-shadow: h-shadow v-shadow blur spread color inset;h-shadow :从左上角原点横线移动举例，正值向右，负值向左 v-shadow:从左上角原点纵向移动距离，正值向下，负值向上 blur :呈现模糊效果，如果不给这个阴影完全是实心的，巨丑 spread：阴影尺寸 color : 阴影显示颜色 inset ：展示为内部阴影，也可以展示为outset，直接写inset/outset就可以talk is cheap！一个实例：往..

相同点：它们都是在当前生命的逻辑块有效不同点：const 在初始的时候确定好值之后是不可以修改的

这里主要写一个注意事项：如果要对外部组件进行修改，需要把scoped去掉这样才能实现回溯源头否则，对外部组件修改的一些效果很有可能出不来去掉之后，只是当前页面的样式修改了，并不会污染全部...

parseFloat()并不能进行数据类型转换，所以对字符串进行parseFloat()是不起作用的，需要使用Number()进行强制类型转换；Number()可以强制转换数据类型；但是，如果涉及到精度计算，建议用decimal.js毕竟，js的计算能力在那放着呢～～...

（1）overflow 常用两种：hidden：内容会被修剪，并且其余内容是不可见的 auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。（2）box-sizing常用一种：border-box：边框和内边距向内求...

作用域是一套规则：控制着一组堆栈集合的约束关系外在表现形式一般是{ 逻辑块}规则上，引用计数：在赋值、set、点语法、new对象这些涉及堆栈操作的时候，引用计数会+1在出大括号的时候会-1一个例子：switch(表达式)： case a: 代码块1 break; case b:...

//这种情况并不会得到自己想要的结果if(a>b){}//这种情况才能得到自己想要的结果if(a-b>0){}因为下边的这个是表达式，上边的不是...

无意间发现的，挺好用的，记录一下POST：https://blog.youkuaiyun.com/museions/article/details/78491040

canvas获取轨迹坐标，实际上就是获取从左到右，从上到下，满足轨迹颜色的像素位置。基础知识：一个dot有r、g、b、a四位getDotList(){ this.canvas = document.getElementById(this.domId); this.context = this.canvas.getContext("2d"); // 获取整...

通过侧边栏的a标签的target，和内容部分iframe的name做匹配，来刷新页面(1)侧边栏<div class="dn indiv"><a class="meau_list_off" href="accountD1.html" target="side2”>测试标签</a></div>(2...

var gro = (student)=>{ var score = student.score; return score < 65 ? 'F': score < 70 ? 'E': score < 80 ? 'C': score < 90 ? 'B':'A';}...

Ramda是一个函数式编程的库，满足两个原则：ramda 所有函数都支持柯里化 function first，data last（写参数的时候函数在前，数据在后）在node中使用相对简单，在vue中如何使用呢？首先你需要把Vue CLI 版本升级到3.0以上，升级方法，可以自行百度。创建项目和之前的vue init webpack projname有所不同：vue creat...

var date = new Date();this.year = date.getFullYear();this.month = date.getMonth() + 1;this.date = date.getDate();this.day = new Array("星期日", "星期一", "星期...

(1)首先:区分容器和项目的概念容器都需要：display:grid(2)行|列的两种赋值方法：直接赋值和repeat方法，以列宽举例a.直接赋值：grid-template-columns: 70% 30%;b.repeat方法：grid-template-columns: repeat(12, 1fr);(3)列宽行高grid-te...

一、thunk可以把thunk函数理解为函数柯里化的一个子集，作用是把多个参数的函数，转化为以一个回调为参数的函数方便和gennerator的配合生产环境下可以用thunkify组件npm i thunkify然后，我们就可以得到yield后边的带有回调参数的函数，当然yield会把这个函数，封装到一个对象的value属性里类似于{value:fn,done:'......

有时候有些问题莫名其妙例如：多出来一些高度什么的这时候就不能只盯着你以为出问题的组件看了检查在dom树里，当前组件的上下文看看是不是其他元素引起的...

一、Flex 布局是什么？可以简单理解为弹性布局：在box容器上：display: flex;行内元素也可以使用 Flex 布局。display: inline-flex;为了兼容Webkit 内核的浏览器，这样写更保险display: -webkit-flex; /* Safari */display: flex;...

一、“||”逻辑或逻辑或是“吐真”，第一个真不真，第二个真不真，直到遇到真的值返回，如果比对到最后也没有真值，那么没办法，返回最后一个值一个例子：后边的{}是为了保底，保证一定有个真可以吐var data = res.data || {};二、 “&&” 逻辑与逻辑与是“熔断”，第一个断不断，第二个断不断，一直比对，直到断了为止，如果都没断，比到...

1.变量：const和letES6推荐使用let声明局部变量，相比之前的var（无论声明在何处，都会被视为声明在函数的最顶部） let和var声明的区别：var x = '全局变量';{let x = '局部变量';console.log(x); // 局部变量}console.log(x); // 全局变量let表示声明变量，而const表示声明常量，...

一、background: url()background: url('../../img/bg_line_lin.png') center repeat;PS：1.center指的是background-position一般是两个值：水平位置和垂直位置；如果只写一个的话，表示水平和垂直方向都是center2.repeat指的是background-repeat单独re...

一、what？闭包可以简单理解为：“定义在函数A内部的函数B”；其作用是让外部可以访问A内部变量特性：当外部调用函数A时，理论上函数执行完毕，它就要被弹出栈，但是由于B要用到A，所以A的变量被保存到内存中不被销毁。这也导致了闭包中的变量是一直被保存的，除非手动清空 ，所以可以存储一些我们需要的状态和值二、How？针对上边闭包的特性，它主要能做什么呢？(...

一、what？可以理解为：立即调用的函数表达式常见的两种形态//形态一(function(){//do something here;})();//形态二!function(){// do something}();那么问题来了：请问形态二可以执行是什么原因，为什么去掉符号就会有语法错误？so：first：我们先理解一下括号的含混使用...

所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量如果没有没有this，只能算是一种原始的封装而对构造函数使用new运算符，就可以生成实例Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上,节省内存...

Pre：无论是Promise还是async/await的目的，都是为了让异步的操作更像同步一、why？Promise解决的问题当一个异步任务的执行需要依赖另一个异步任务的结果时，我们一般会将两个异步任务嵌套起来，这种情况发生一两次还可以忍，但是发生很多次之后，你的代码就会变成这个熊样： async1(function(){ async2(functio...

一、浅拷贝 //假设p已经存在　　　　var C = {};　　　　for (var i in P) {　　　　　　C[i] = P[i];　　　　}如果P的一个属性等于数组或另一个对象，那么实际上，C获得的只是一个内存地址，它们指向的是同一内容，在C对象改动数组或者对象属性，P也会被篡改这就是浅拷贝二、深拷贝所谓"深拷贝...

其中ActiveXObject是ie的一个特性，此特性一直存在，所以可以支持到ie11function isIE() { if (!!window.ActiveXObject || "ActiveXObject" in window){ return true; }else{ return false; } } 补充...

:nth-of-type(n) : 在同一父元素下, 同类子元素第n个:nth-child(n) : 在同一父元素下，所有子元素第n个搭配以下两个食用效果更佳：:first-child:last-child(1)nth-of-type(n)h1标签被忽略，p标签是第几个就是第几个(1)nth-child(n)h1标签也被算进去，p标签从上往下排是第...