<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[wangongda的博客]]></title><description><![CDATA[我的生涯]]></description><link>https://blog.youkuaiyun.com/wangongda</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; wangongda]]></copyright><item><title><![CDATA[移动端适配之vw+rem]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/113060484</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/113060484</guid><author>wangongda</author><pubDate>Sat, 23 Jan 2021 19:09:52 +0800</pubDate><description><![CDATA[前置概念:

rem: 相对于根元素(html)的字体大小的单位, 例如html font-size: 14px 则 1rem = 14px。
vw: 当前视窗(指浏览器的可视区域)的宽度为100vw, 1vw指当前视窗宽度的百分之一。
物理像素: 一个物理像素是显示器(手机屏幕)上最小的物理显示单元。
设备独立像素: 设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素 (前端中可理解为 =&gt; css像素)。
设备像素比(dpr): 设备像..]]></description><category></category></item><item><title><![CDATA[liunx端常用命令]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/104700319</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/104700319</guid><author>wangongda</author><pubDate>Fri, 06 Mar 2020 17:27:07 +0800</pubDate><description><![CDATA[应用安装

centos
// 安装
yum install xxx 
// 更新
yum-update 			

ubuntu
// 安装
apt install xxx / apt-get install xxx 	
// 更新
apt update / apt-get update							


liunx

文件基础操作
// 清屏
clear
// 查看文件
ls
// 查看所有文...]]></description><category></category></item><item><title><![CDATA[前端中的设计模式——单例模式]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/104041266</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/104041266</guid><author>wangongda</author><pubDate>Sun, 19 Jan 2020 15:26:45 +0800</pubDate><description><![CDATA[什么是单例模式:
保证一个类仅有一个实例，并提供一个访问它的全局访问点.


为什么需要单例模式:

为了将“描述同一件事务的属性或者特征归纳汇总在一起”,同时避免全局变量污染.
模块化开发之间数据的共享.(状态管理)



单例模式的优点:

对于频繁使用的对象，可以省略创建对象所花费的时间.
由于 new 操作的次数减少，对系统内存的使用频率也会降低.
全局唯一性,可以保证全局数据和功能的...]]></description><category></category></item><item><title><![CDATA[前端中的设计模式——发布订阅模式]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/104019769</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/104019769</guid><author>wangongda</author><pubDate>Fri, 17 Jan 2020 15:16:11 +0800</pubDate><description><![CDATA[在前端中观察者通常抽象为事件更具实用性,但这种模式会有一个问题.

假设想在登陆成功后通知组件A、B、C更新view(A、B、C未登录时view处于缺省状态).


用观察者模式的话
const ob = new Observable()
// A、B、C进行一波订阅
ob.add('update1', () =&gt; {
  console.log('login successful!')
...]]></description><category></category></item><item><title><![CDATA[前端中的设计模式——观察者模式]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/103928058</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/103928058</guid><author>wangongda</author><pubDate>Fri, 10 Jan 2020 17:19:23 +0800</pubDate><description><![CDATA[在实现js中的观察者模式前,先了解两个js中的概念

1. hidden class
解释: 由于 JavaScript 是一种动态编程语言，属性可进行动态的添加和删除，这意味着一个对象的属性是可变的，大多数的 JavaScript 引擎（V8）为了跟踪对象和变量的类型引入了隐藏类的概念。在运行时 V8 会创建隐藏类，这些类附加到每个对象上，以跟踪其形状/布局。这样可以优化属性访问时间。
2. ...]]></description><category></category></item><item><title><![CDATA[实现类似redux的状态管理库]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/103544148</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/103544148</guid><author>wangongda</author><pubDate>Sat, 14 Dec 2019 22:29:23 +0800</pubDate><description><![CDATA[文章目录基本实现处理多个reducerreducer和state的模块化中间件的开发 =&gt;日志系统多日志支持中间件模块化封装新的createStore优化实现支持替换Reducer
基本实现

实现梳理:

createStore: 创建一个store来存储监听state
reducer: 规定一个处理state的映射方案(纯函数),修改state


createStore具备的功能

s...]]></description><category></category></item><item><title><![CDATA[对象监听器]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/101207290</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/101207290</guid><author>wangongda</author><pubDate>Mon, 23 Sep 2019 15:19:39 +0800</pubDate><description><![CDATA[如何实现一个对象监听器

知识点拆解:

Event:  Event对象
dispatchEvent: dispatchEvent方法
Proxy对象: 本文会对此对象做一定程度上的讲解

Proxy对象:
语法:
new Proxy(target, handle);

参数:

target: 需要被代理的对象
handle: 一个对象,其属性是当执行一个操作时定义代理的行为的函数.本次涉及g...]]></description><category></category></item><item><title><![CDATA[函数记忆.]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/91870985</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/91870985</guid><author>wangongda</author><pubDate>Thu, 13 Jun 2019 16:15:21 +0800</pubDate><description><![CDATA[函数记忆是一种编程技巧,通过牺牲算法的空间复杂度以换取更优的时间复杂度


定义: 若传递的参数一致,则通过缓存读取存取计算结果的一种编程技巧
实现: 借助map对象、JSON.stringify()、闭包包装传递的函数,使其具有函数记忆的特性

const memorize = (cb) =&gt; {
  const cache = new Map();
  const search = (...]]></description><category></category></item><item><title><![CDATA[深、浅拷贝系列]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/91809781</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/91809781</guid><author>wangongda</author><pubDate>Thu, 13 Jun 2019 10:45:56 +0800</pubDate><description><![CDATA[数组的浅拷贝

arr.slice()
arr.concat()
JSON.stringify(arr)


简单的深拷贝

const cloneDeep = obj =&gt; JSON.parse( JSON.stringify(obj) )
// 缺点: 无法拷贝函数

function cloneDeep (obj) {
  if (obj === null || typeof obj...]]></description><category></category></item><item><title><![CDATA[学习消除循环引用]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/91807873</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/91807873</guid><author>wangongda</author><pubDate>Thu, 13 Jun 2019 10:38:15 +0800</pubDate><description><![CDATA[创建循环引用对象
// 创建一个循环引用的对象
let a = {};
let b = {};
a.b = b;
b.a = a;



打印上述对象a或b,会得到一个无限嵌套互相引用的对象


结束(解除)多余的引用嵌套(具体思路请看超详细注释)
		/**
     * 解除循环引用
     * @param object    循环引用对象
     * @param replacer...]]></description><category></category></item><item><title><![CDATA[防抖与节流]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/89979414</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/89979414</guid><author>wangongda</author><pubDate>Wed, 08 May 2019 22:44:13 +0800</pubDate><description><![CDATA[防抖和节流在很多场景下都可以有效的提升程序的性能和减轻服务器的压力.估计大多数人都使用过这两个工具函数(例如在lodash中以函数或装饰器的模式to use)那么如何实现自己的防抖和节流函数呢?



定义

防抖: 在n秒后不被重复触发才会执行
节流: 在规定的n秒内有且只执行一次



实现(具体思路的在注释中体现,因为并不复杂)

防抖

/**
     * 函数防抖
     * @p...]]></description><category></category></item><item><title><![CDATA[让ng-model支持angular内置的filter date功能]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/89238008</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/89238008</guid><author>wangongda</author><pubDate>Fri, 12 Apr 2019 14:33:48 +0800</pubDate><description><![CDATA[背景:

angular filter 常见于和ng-bind、差值表达式、ng-repeat 配合转换后端 unix 时间戳. 但 filter 不支持和 ng-model 一起使用.

解决思路:

通过angular directive 结合 $filter服务封装一个支持转换 ng-model中 时间戳为指定格式的指令.

代码如下:
app.directive('dateFormat',...]]></description><category></category></item><item><title><![CDATA[异步函数的串行与并行]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/88872712</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/88872712</guid><author>wangongda</author><pubDate>Thu, 28 Mar 2019 16:51:51 +0800</pubDate><description><![CDATA[通过返回一个对象的形式,实现对异步函数进行串行、并行、全执行完毕的操作

实现如下:
const queue = () =&gt; {
    const list = []; // 队列
    let index = 0;   // 索引
    let task = 0;
    let cache;

    // next 方法控制索引
    const next = () =&gt...]]></description><category></category></item><item><title><![CDATA[移动端软键盘问题兼容(安卓、IOS)]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/88841421</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/88841421</guid><author>wangongda</author><pubDate>Wed, 27 Mar 2019 12:07:43 +0800</pubDate><description><![CDATA[解决软键盘顶起fixed元素 (IOS下fixed元素会变成absolute)

// angular.js中 通过封装指令解决 主要思路是通过scrollHeight的前后差值 判断是否弹出软键盘 然后显示或隐藏被顶起的元素即可

// 指令配置如下:

{
        restrict: 'A',
        link: function (scope, element) {

  ...]]></description><category></category></item><item><title><![CDATA[用some和every来美化你的判断]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/88563490</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/88563490</guid><author>wangongda</author><pubDate>Thu, 14 Mar 2019 22:54:28 +0800</pubDate><description><![CDATA[今天关于some和every又引发了我新的思考,还记得前面的判断优化吗?


多或判断

const a = '23333';

if (a === '23333' || a === '33333' || a === '43333' || a === '53333') {
    console.log(1);
}

之前说过关于这样的判断,可以通过includes来简化,如下:
const a...]]></description><category></category></item><item><title><![CDATA[map函数实现]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/88563256</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/88563256</guid><author>wangongda</author><pubDate>Thu, 14 Mar 2019 22:40:03 +0800</pubDate><description><![CDATA[写成这样主要为了减少多余的中间变量,尽可能遵循函数式编程的思想.(好吧,我承认可能看起来有些奇怪…)
Array.prototype._map = function (fn, arg, result = []) {

    for(let i = 0; i &amp;amp;lt; this.length; i++) {
        result.push(fn.apply(arg, [this[i], i...]]></description><category></category></item><item><title><![CDATA[关于修正js浮点数计算误差]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/87878428</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/87878428</guid><author>wangongda</author><pubDate>Fri, 22 Feb 2019 14:50:25 +0800</pubDate><description><![CDATA[
js浮点数乘法是有误差的，这个问题是在很久以前一次项目计算中发现的，那么接下来就说一下如何修正这个误差。

下面直接上代码吧，简单来说就是以小数点为基准进行切割，将是浮点数的转为整数进行计算，最后再放大小数点后N倍还原正确计算结果。
=========&amp;gt; 比如计算 0.14*10

// 直接答案 1.4000000000000001 这显然不是我们想要的结果

function accM...]]></description><category></category></item><item><title><![CDATA[正则判断g模式下异常]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/87878412</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/87878412</guid><author>wangongda</author><pubDate>Fri, 22 Feb 2019 14:50:02 +0800</pubDate><description><![CDATA[正则g模式下出现true和false交替


原因：正则表达式中的g模式, 使得搜索过程后, 如果匹配成功, 则记录上一次字符串的位置, 如果匹配不成功, 则会归零字符串位置.


解决：

reg.lastIndex = 0;	 归零搜索的位置
去掉g模式
直接调用正则



在chrome-console中尝试下下面几段代码
1
const reg = /^a/g;
reg.test('a')...]]></description><category></category></item><item><title><![CDATA[CSS世界第一章提要]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/84320503</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/84320503</guid><author>wangongda</author><pubDate>Wed, 21 Nov 2018 14:39:40 +0800</pubDate><description><![CDATA[

文档流： 就是规则，准确点说就是决定了元素的排列和定位的一套规则。


流体布局：利用文档流本身的特性，实现的各类布局效果。文档流本身具有自适应性，所以流体布局也具有自适应性。


css3


src-set：根据屏幕密度现实对应尺寸的图片

设备像素比：设备物理像素/设备独立像素（window.devicePixelRatio）
设备独立像素：一种由程序使用并控制的虚拟像素，包含css像素...]]></description><category></category></item><item><title><![CDATA[js中如何优雅的判断]]></title><link>https://blog.youkuaiyun.com/wangongda/article/details/84320163</link><guid>https://blog.youkuaiyun.com/wangongda/article/details/84320163</guid><author>wangongda</author><pubDate>Wed, 21 Nov 2018 14:35:02 +0800</pubDate><description><![CDATA[相信下面的代码很眼熟吧
const a = '23333';

if (a === '23333' || a === '33333' || a === '43333' || a === '53333') {
    console.log(1);
}

如果a的值有更多可能呢？或许可以这样写：
const a = '23333';
const compare = ['23333', '33333'...]]></description><category></category></item></channel></rss>