一、写在前面

  上周测试同事给我提了个bug。他说在公司运营系统某个编辑页面中，一个post请求调用太多次了，想让我看看怎么回事。我刚听他讲这个事情时心里有点不屑一顾，觉得能有多少次啊，大惊小怪的。然而当我在测试环境中打开那个页面一看，直呼好家伙！这个页面调用了30次相同的请求，属实有点离谱的！

  既然情况属实，那么肯定是需要优化一下的。我打开项目代码全局搜索这个请求，发现是在全局公用的一个 Upload 组件的created方法里面调用的。这个请求发送的目的是获取图片上传 oss 系统的签名。因为这个页面一共有30个 Upload 组件，所以整个页面渲染完成后会调用30次接口！！我接着查看接口请求返回的数据，发现签名的有效期是1小时。每次请求的发送又会重新刷新了这个签名和有效时间。但是为什么最先调用接口的 Upload 组件还能上传图片成功，这我还不知道。

  我灵机一动，如果把这个获取签名的方法单纯抽取出来。第一次调用方法后将返回数据缓存下来，后面请求时岂不美哉！但实际操作时发现事情没我想象的那么简单。。。

二、我的解决方案1.0

  一开始我的方案是使用 Vuex 缓存接口返回的签名数据，Upload 组件每次都先从 Vuex 中 state 中查找签名数据 cosConfig，如果没找到再去请求接口。大致的流程如下图：

  在捋清楚后逻辑之后，我开始新写 Vuex 的 state 和对应的 mutation了。当我写完代码后一运行，发现这个也能还是依旧调用了30次请求。这让我我很是纳闷啊！！！无奈只好debugger语句开始一行行代码进行调试。
经过一小段时间的调试，问题被我发现了。那就是：签名数据的异步获取。这个签名数据是通过调用后端接口异步返回给前端的。当这个页面存在30个 Upload 组件时，每个组件都会在自己的 created 生命周期函数里先查找了 Vuex 中有没有缓存的签名数据。当页面第一次渲染时，vuex 中肯定是没有签名数据的。所以每个 Upload 组件都会找不到签名数据，然后每个组件都会继续调用接口获取签名数据。等获取到了签名之后，签名配置数据再缓存在 Vuex 中，也就没有意义了。所以方案一失败！！

三、我的解决方案2.0

  我需要承认的是平时困于重复性业务的开发中，很少去处理稍微复杂一点的问题，脑子容易混沌。我在发现方案1.0失败了之后，开始想其他的解决方案。通过 google 的无私帮助下，我找到了这篇文章([vue中多个相同组件重复请求的问题？])，完全就是和我一样的问题嘛。我进去看了第一个赞最多的回答，清晰透彻！主要的解决方案就是运用设计模式中的单例模式，把 Upload 组件中的获取签名的方案单独抽出来。这样子页面上不管有多少个 Upload 组件，调用的获取签名的方法都是同一个。这样子就可以在这个方法里面做文章了。

  那么要做什么文章呢？我们假设这个获取上传图片签名的方法名叫做 getCosConfig，无论多少个 Upload 组件，都是调用同一个 getCosConfig 方法。那么在这个方法外部添加一个缓存对象 cacheConfig，组件每次先从这个缓存对象查找存不存在配置数据。如果存在直接获取缓存对象，如果不存在就调用接口获取。

  但光是这样效果还是和方案1.0结果一样的，同样会调用30次接口。所以我们还需要加一个计数器变量 count。count 的初始值是0，Upload 组件每次发送请求时都会给 count 加1。这样子当我们发现是第一次请求时就去调用接口，不是第一次的话就等待，直到第一次请求结束获得数据。逻辑流程图如下：

四、我的解决方案2.1

  到此，本以为这个问题完美解决，但是我突然发现这个接口有入参的！这个页面调用的30个接口中，其中两个剩余的28个参数是不同的。我赶忙去查询了接口文档，发现这个接口是用于获取图片上传的签名，并且不同的业务模块的存储位置是不同的。那么自然返回的上传签名也是不同的，这也意味着原来的 cosConfig 的数据结构是不对的。因为原来的一级对象结构会导致不同业务模块的签名数据混乱了，搞不好弄成了p0级的线上bug。想到这里我心里一凉，感慨还好我细心多瞅了一眼。

  既然问题已经定位到了，那么解决方案2.1自然而然也出来了，只要改造一下 co sConfig 和 count 的结构即可，增加一个key，变成二级的对象。最后我的代码成品如下：

五、总结

  最后总结一下，数据结构和设计原则的学习看似虚无缥缈，实际上能够帮助我们解决复杂度很高的问题。通过结合我们日常的开发工作，我们才能感受到这些知识的魅力，也会让我们更加有动力去提高我们的水平。

六、评论区其他方案推荐

 之前写文章都是自娱自乐，没啥人看。这篇文章不知道怎么看的人挺多，评论的朋友也不少。评论区也提出了不少其他方案和业界通用的解决方案，让我见识到了自己知识面的狭窄。我也总结一下供有需要的人使用：

1.【业务维度】在上传图片时再去获取服务端的token，不需要提前去获取。

2.【技术维度】一些请求库自带了去重的功能，例如vue-query。

3.【技术维度】缓存池的概念和处理，这个老哥写的很好【你不知道的promise】设计一个支持并发的前端接口缓存。

4.【技术维度】使用异步单例模式，将请求的Promise缓存下来，再次调用函数的时候返回这个Promise。这篇文章讲的不错，给大家推荐一下高级异步模式 - Promise 单例。

引言

好久没有发感触了，之前一直在做讲师授课，接触了好多入门的程序员，有很多感触，但是在做讲师的时候有时候不方便说，在做开发又开始忙，所以就沉淀下来了，忽然今天收到了之前一个学习的小伙伴的消息，心里有些触动，本人也不是一个特别喜欢发朋友圈的人，但是总感觉想说点啥（矫情了，哈哈），所以写写做一个回顾吧。

编程行业从开始到现在被贴上了很多标签: 幸苦，掉头发，工资高，不愁工作等等，这些有好有坏，但是总结起来大多数人对编程行业的认知是：

1、需要一定的学历，尤其对数学和英语要求很高。

2、工作比较累，加班是便饭。

3、收入很可观，10k轻轻松松。

4、岗位比较多，是一个搞高级技术（嘿嘿嘿，之前一个家长和我聊的）的行业。

当然还有很多，但是就是上面这些认知让好多毕业迷茫、家境一般、工作遇到问题的人，把编程行业作为了一个全新开始的选择。于是，就有了市场，有了市场很快就有了资本，有了资本很快就有了营造焦虑氛围的营销策略，然后就有各种各样在掩盖在光鲜下的问题，又得真的很无奈，那么今天就聊聊吧。

问题

1、社会是你做程序员的第一绊脚石

啥意思，啥叫做社会，这里的社会不是一个群居的结构，而是人情世故（嘿嘿嘿），好多小伙伴是转行过来的，老话说的好，人往高处走，水往低处流，大部分转行的小伙伴不是来自于大家认知当中更好的行业（比如：公务员，医生，律师..嘿嘿嘿，扯远了），甚至编程本行业的也很少（程序员自学的能力还是很不错的）,所以大家在学习之前就已经在社会上摸爬滚打了很久，久历人情，好处是好沟通，不好的地方就是真的把人情世故看的比技术更重要了，这一点可能拉低这些小伙伴70%的学习效果，你要明白，程序员这个行业确实也有人情世故，但前提是大家可以在一个水平上，这个水平可以是技术，也可以是职级，但是如果开头就这么琢磨的话，没有一个扎实的编程基础，真的很难立足在这个行业。没有必要的谦让，习惯性的差不多损耗了太多的学习效果了，既然选择编程，首先请把技术学好，哪怕是基础（当然那个行业也会有浑水摸鱼的，但是对于转行的小伙伴来说，概率太低了）

2、学历重要，学力也很重要

编程行业是一个需要终生学习的行业，不论是前端，后端，测试，运维还是其他岗位，如果在做技术就一定需要学习，好多人会说学历不够所以干不了编程，但是在我个人的眼里，学历确实重要，但是并没有完全限制你进入编程行业，因为：

（1）任何行业都是有完整的岗位结构的，需要的高精尖人才是需要的，但是普通的岗位也少不了，编程行业也是如此，有些岗位的学历要求不是很高。

（2）在编程行业除了那些竞争激烈的大厂，自考学历是有一定的市场和认可程度的

但是，在学历背后的学力就不是这样一个概念了，这里想表述的是学习能力，包括：

（1）专注能力，好多小伙伴如果之前有一定的社会经历或者在大学过的比较懒散，在没有聊到学历之前，先决条件就是能静下心来学习，但是很多小伙伴专注力根本不达标，听课走神，练习坐不住...(其实个人感觉任何一个行业，能静下心来做，并且活下来的都不会很差)

（2）学习习惯，这里不贬低学历低的小伙伴，但是不能否认的是，参加高考后获得一个高学历的小伙伴能力不谈，但是99%都有一个很好的学习习惯。比如不会在学习的时候把手机放到旁边，科学的记笔记，有效的复习和预习等等，所以在担心学历之前，请先培养好自己的学习习惯（个人建议，如果真的没有一个好的学习习惯，那么学习的时候就不要在眼前出现多余的东西分散注意力，比如: 课桌上除了听课的电脑，不要有其他的，之前见过的容易分散注意力的：手机，水杯，指尖陀螺，魔方....）

3、不要在没有选择能力的时候做出选择

这里想聊的是一些学习恐慌的小伙伴的惯性，好多小伙伴在选择了一种学习方式（买书，看视频，加入培训班）之后，还会进行类比学习，比如：买了Python的一本基础书，然后再大数据或者小伙伴的推荐下又买了另外一本，或者参加了培训班，又去看其他的教学视频，这些对小白同学的学习伤害会很大，因为，本身对技术没有全面的理解，不同的书，不同的教程传递的教学方法是不一样的，混着来有点像老家喝酒掺着喝，白酒不醉，啤酒不醉，白加啤那么就不一定了（很大概率会醉），所以小白同学最总要的不是再学习的过程当中进行对比，而是可以最快最稳的完成基础感念的学习，在自己脑子当中有了基础概念再做选择。

当然了，还有很多，一次也聊不完，之后有时间再聊吧，今天就先写这么多

前言

为什么代码要整洁？

代码质量与整洁度成正比。有的团队在赶工期的时候，不注重代码的整洁，代码写的越来越糟糕，项目越来越混乱，生产力也跟着下降，那就必须找更多人来提高生产力，开发成本越来越高。

整洁的代码是怎样的？

清晰表达意图、消除重复、简单抽象、能通过测试。
换句话说：具有可读性、可重用性和可重构性。

命名

1. 
   

   名副其实：不使用缩写、不使用让人误解的名称，不要让人推测。

   
   

   // bad: 啥？
   
   const yyyymmdstr = moment().format("YYYY/MM/DD");
   
   // bad: 缩写
   
   const cD = moment().format("YYYY/MM/DD");
   
   
   
   // good:
   
   const currentDate = moment().format("YYYY/MM/DD");
   
   

   
   

   const locations = ["Austin", "New York", "San Francisco"];
   
   
   
   // bad：推测l是locations的项
   
   locations.forEach(l => doSomeThing(l));
   
   
   
   // good
   
   locations.forEach(location => doSomeThing(location));
   
   

   
   


2. 
   

   使用方便搜索的名称：避免硬编码，对数据用常量const记录。

   
   

   // bad: 86400000指的是？
   
   setTimeout(goToWork, 86400000);
   
   
   
   // good: 86400000是一天的毫秒数
   
   const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000;
   
   setTimeout(goToWork, MILLISECONDS_PER_DAY);
   
   

   
   


3. 
   

   类名应该是名词，方法名应该是动词。

   
   

   // bad
   
   function visble() {}
   
   
   
   // good
   
   function getVisble() {}
   
   

   
   


4. 
   

   多个变量属于同一类型的属性，那就他们整合成一个对象。同时省略多余的上下文。

   
   

   // bad：可以整合
   
   const carMake = "Honda",
   
   const carModel = "Accord",
   
   const carColor = "Blue",
   
   
   
   // bad: 多余上下文
   
   const Car = {
   
     carMake: "Honda",
   
     carModel: "Accord",
   
     carColor: "Blue",
   
   };
   
   
   
   // good
   
   const Car = {
   
     make: "Honda",
   
     model: "Accord",
   
     color: "Blue",
   
   };
   
   

   
   

其他：

• 
  

  不要写多余的废话，比如theMessage的the可以删除。

  
  


• 
  

  统一术语。比如通知一词，不要一会在叫notice，一会叫announce。

  
  


• 
  

  用读得通顺的词语。比如getElementById就比 useIdToGetElement好读。

  
  

函数（方法）

• 
  

  删除重复的代码，don't repeat yourself。很多地方可以注意dry，比如偷懒复制了某段代码、try...catch或条件语句写了重复的逻辑。

  
  

   // bad
  
   try {
  
       doSomeThing();
  
       clearStack();
  
   } catch (e) {
  
       handleError(e);
  
       clearStack();
  
   }
  
   // good
  
   try {
  
       doSomeThing();
  
   } catch (e) {
  
       handleError(e);
  
   } finally {
  
       clearStack();
  
   }
  
  

  
  


• 
  

  形参不超过三个，对测试函数也方便。多了就使用对象参数。

  
  
  
  
  • 
    

    同时建议使用对象解构语法，有几个好处：

    
    
    
    
    1. 能清楚看到函数签名有哪些熟悉，
    
    
    2. 可以直接重新命名，
    
    
    3. 解构自带克隆，防止副作用，
    
    
    4. Linter检查到函数未使用的属性。
    
    
    
    
  
  
  
  

   // bad
  
   function createMenu(title, body, buttonText, cancellable) {}
  
  
  
   // good
  
   function createMenu({ title, body, buttonText, cancellable }) {}
  
  

  
  


• 
  

  函数只做一件事，代码读起来更清晰，函数就能更好地组合、测试、重构。

  
  

   // bad: 处理了输入框的change事件，并创建文件的切片，并保存相关信息到localStorage
  
   function handleInputChange(e) {
  
       const file = e.target.files[0];
  
       // --- 切片 ---
  
       const chunkList = [];
  
       let cur = 0;
  
       while (cur < file.size) {
  
           chunkList.push({
  
             chunk: file.slice(cur, cur + size)
  
           });
  
           cur += size;
  
       }
  
       // --- 保存信息到localstorage ---
  
       localStorage.setItem("file", file.name);
  
       localStorage.setItem("chunkListLength", chunkList.length);
  
   }
  
  
  
   // good: 将三件事分开写，同时自顶而下读，很舒适
  
   function handleInputChange(e) {
  
       const file = e.target.files[0];
  
       const chunkList = createChunk(file);
  
       saveFileInfoInLocalStorage(file, chunkList);
  
   }
  
   function createChunk(file, size = SLICE_SIZE) {
  
       const chunkList = [];
  
       let cur = 0;
  
       while (cur < file.size) {
  
           chunkList.push({
  
             chunk: file.slice(cur, cur + size)
  
           });
  
           cur += size;
  
       }
  
       return chunkList
  
   }
  
   function saveFileInfoInLocalStorage(file, chunkList) {
  
       localStorage.setItem("file", file.name);
  
       localStorage.setItem("chunkListLength", chunkList.length);
  
   }
  
  

  
  


• 
  

  自顶向下地书写函数，人们都是习惯自顶向下读代码，如，为了执行A，需要执行B，为了执行B，需要执行C。如果把A、B、C混在一个函数就很难读了。(看前一个的例子)。

  
  


• 
  

  不使用布尔值来作为参数，遇到这种情况时，一定可以拆分函数。

  
  

   // bad
  
   function createFile(name, temp) {
  
     if (temp) {
  
       fs.create(`./temp/${name}`);
  
     } else {
  
       fs.create(name);
  
     }
  
   }
  
  
  
   // good
  
   function createFile(name) {
  
     fs.create(name);
  
   }
  
  
  
   function createTempFile(name) {
  
     createFile(`./temp/${name}`);
  
   }
  
  

  
  


• 
  

  避免副作用。

  
  
  
  
  • 
    

    副作用的缺点：出现不可预期的异常，比如用户对购物车下单后，网络差而不断重试请求，这时如果添加新商品到购物车，就会导致新增的商品也会到下单的请求中。

    
    
  
  
  • 
    

    集中副作用：遇到不可避免的副作用时候，比如读写文件、上报日志，那就在一个地方集中处理副作用，不要在多个函数和类处理副作用。

    
    
  
  
  • 
    

    其它注意的地方：

    
    
    
    
    • 常见就是陷阱就是对象之间共享了状态，使用了可变的数据类型，比如对象和数组。对于可变的数据类型，使用immutable等库来高效克隆。
    
    
    • 避免用可变的全局变量。
    
    
    
    
  
  
  
  

  // bad：注意到cart是引用类型！
  
  const addItemToCart = (cart, item) => {
  
    cart.push({ item, date: Date.now() });
  
  };
  
  
  
  // good
  
  const addItemToCart = (cart, item) => {
  
    return [...cart, { item, date: Date.now() }];
  
  };
  
  

  
  


• 
  

  封装复杂的判断条件，提高可读性。

  
  

   // bad
  
   if (!(obj => obj != null && typeof obj[Symbol.iterator] === 'function')) {
  
       throw new Error('params is not iterable')
  
   }
  
  
  
   // good
  
   const isIterable = obj => obj != null && typeof obj[Symbol.iterator] === 'function';
  
   if (!isIterable(promises)) {
  
       throw new Error('params is not iterable')
  
   }
  
  

  
  


• 
  

  在方法中有多条件判断时候，为了提高函数的可扩展性，考虑下是不是可以使用能否使用多态性来解决。

  
  

   // 地图接口可能来自百度，也可能来自谷歌
  
   const googleMap = {
  
       show: function (size) {
  
           console.log('开始渲染谷歌地图', size));
  
       }
  
   };
  
   const baiduMap = {
  
       render: function (size) {
  
           console.log('开始渲染百度地图', size));
  
       }
  
   };
  
  
  
   // bad: 出现多个条件分支。如果要加一个腾讯地图，就又要改动renderMap函数。
  
   function renderMap(type) {
  
       const size = getSize();
  
       if (type === 'google') {
  
           googleMap.show(size);
  
       } else if (type === 'baidu') {
  
           baiduMap.render(size);
  
       }
  
   };
  
   renderMap('google')
  
  
  
   // good：实现多态处理。如果要加一个腾讯地图，不需要改动renderMap函数。
  
   // 细节：函数作为一等对象的语言中，作为参数传递也会返回不同的执行结果，也是“多态性”的体现。
  
   function renderMap (renderMapFromApi) {
  
       const size = getSize();
  
       renderMapFromApi(size);
  
   }
  
   renderMap((size) => googleMap.show(size));
  
  

  
  

其他

• 
  

  如果用了TS，没必要做多余类型判断。

  
  

注释

1. 
   

   一般代码要能清晰的表达意图，只有遇到复杂的逻辑时才注释。

   
   

    // good：由于函数名已经解释不清楚函数的用途了，所以注释里说明。
   
    // 在nums数组中找出 和为目标值 target 的两个整数，并返回它们的数组下标。
   
    const twoSum = function(nums, target) {
   
        let map = new Map()
   
        for (let i = 0; i < nums.length; i++) {
   
            const item = nums[i];
   
            const index = map.get(target - item)
   
            if (index !== undefined){
   
                return [index, i]
   
            }
   
            map.set(item, i)
   
        }
   
        return []
   
    };
   
   
   
    // bad：加了一堆废话
   
    const twoSum = function(nums, target) {
   
        // 声明map变量
   
        let map = new Map()
   
        // 遍历
   
        for (let i = 0; i < nums.length; i++) {
   
            const item = nums[i];
   
            const index = map.get(target - item)
   
            // 如果下标为空
   
            if (index !== undefined){
   
                return [index, i]
   
            }
   
            map.set(item, i)
   
        }
   
        return []
   
    };
   
   

   
   


2. 
   

   警示作用，解释此处不能修改的原因。

   
   

   // hack: 由于XXX历史原因，只能调度一下。
   
   setTimeout(doSomething, 0)
   
   

   
   


3. 
   

   TODO注释，记录下应该做但还没做的工作。另一个好处，提前写好命名，可以帮助后来者统一命名风格。

   
   

   class Comment {
   
       // todo: 删除功能后期实现
   
       delete() {}
   
   }
   
   

   
   


4. 
   

   没用的代码直接删除，不要注释，反正git提交历史记录可以找回。

   
   

   // bad: 如下，重写了一遍两数之和的实现方式
   
   
   
   // const twoSum = function(nums, target) {
   
   //     for(let i = 0;i<nums.length;i++){
   
   //         for(let j = i+1;j<nums.length;j++){
   
   //             if (nums[i] + nums[j] === target) {
   
   //                 return [i,j]
   
   //             }
   
   //         }
   
   //     }
   
   // };
   
   const twoSum = function(nums, target) {
   
       let map = new Map()
   
       for (let i = 0; i < nums.length; i++) {
   
           const item = nums[i];
   
           const index = map.get(target - item)
   
           if (index !== undefined){
   
               return [index, i]
   
           }
   
           map.set(item, i)
   
       }
   
       return []
   
   };
   
   

   
   


5. 
   

   避免循规式注释，不要求每个函数都要求jsdoc，jsdoc一般是用在公共代码上。

   
   

   // bad or good?
   
   /**
   
    * @param {number[]} nums
   
    * @param {number} target
   
    * @return {number[]}
   
    */
   
   const twoSum = function(nums, target) {}
   
   

   
   

对象

• 
  

  多使用getter和setter（getXXX和setXXX）。好处：

  
  
  
  
  • 在set时方便验证。
  
  
  • 可以添加埋点，和错误处理。
  
  
  • 可以延时加载对象的属性。
  
  
  
  

  // good
  
  function makeBankAccount() {
  
    let balance = 0;
  
  
  
    function getBalance() {
  
      return balance;
  
    }
  
  
  
    function setBalance(amount) {
  
      balance = amount;
  
    }
  
  
  
    return {
  
      getBalance,
  
      setBalance
  
    };
  
  }
  
  
  
  const account = makeBankAccount();
  
  account.setBalance(100);
  
  

  
  


• 
  

  使用私有成员。对外隐藏不必要的内容。

  
  

  // bad
  
  const Employee = function(name) {
  
    this.name = name;
  
  };
  
  
  
  Employee.prototype.getName = function getName() {
  
    return this.name;
  
  };
  
  const employee = new Employee("John Doe");
  
  delete employee.name;
  
  console.log(employee.getName()); // undefined
  
  
  
  
  
  // good
  
  function makeEmployee(name) {
  
    return {
  
      getName() {
  
        return name;
  
      }
  
    };
  
  }
  
  

  
  

类

solid

• 
  

  单一职责原则 (SRP) - 保证“每次改动只有一个修改理由”。因为如果一个类中有太多功能并且您修改了其中的一部分，则很难预期改动对其他功能的影响。

  
  

  // bad：设置操作和验证权限放在一起了
  
  class UserSettings {
  
    constructor(user) {
  
      this.user = user;
  
    }
  
  
  
    changeSettings(settings) {
  
      if (this.verifyCredentials()) {
  
        // ...
  
      }
  
    }
  
  
  
    verifyCredentials() {
  
      // ...
  
    }
  
  }
  
  // good: 拆出验证权限的类
  
  class UserAuth {
  
    constructor(user) {
  
      this.user = user;
  
    }
  
  
  
    verifyCredentials() {
  
      // ...
  
    }
  
  }
  
  
  
  class UserSettings {
  
    constructor(user) {
  
      this.user = user;
  
      this.auth = new UserAuth(user);
  
    }
  
  
  
    changeSettings(settings) {
  
      if (this.auth.verifyCredentials()) {
  
        // ...
  
      }
  
    }
  
  }
  
  

  
  


• 
  

  开闭原则 (OCP) - 对扩展放开，但是对修改关闭。在不更改现有代码的情况下添加新功能。比如一个方法因为有switch的语句，每次出现新增条件时就要修改原来的方法。这时候不如换成多态的特性。

  
  

  // bad: 注意到fetch用条件语句了，不利于扩展
  
  class AjaxAdapter extends Adapter {
  
    constructor() {
  
      super();
  
      this.name = "ajaxAdapter";
  
    }
  
  }
  
  
  
  class NodeAdapter extends Adapter {
  
    constructor() {
  
      super();
  
      this.name = "nodeAdapter";
  
    }
  
  }
  
  
  
  class HttpRequester {
  
    constructor(adapter) {
  
      this.adapter = adapter;
  
    }
  
  
  
    fetch(url) {
  
      if (this.adapter.name === "ajaxAdapter") {
  
        return makeAjaxCall(url).then(response => {
  
          // transform response and return
  
        });
  
      } else if (this.adapter.name === "nodeAdapter") {
  
        return makeHttpCall(url).then(response => {
  
          // transform response and return
  
        });
  
      }
  
    }
  
  }
  
  
  
  function makeAjaxCall(url) {
  
    // request and return promise
  
  }
  
  
  
  function makeHttpCall(url) {
  
    // request and return promise
  
  }
  
  
  
  // good
  
  class AjaxAdapter extends Adapter {
  
    constructor() {
  
      super();
  
      this.name = "ajaxAdapter";
  
    }
  
  
  
    request(url) {
  
      // request and return promise
  
    }
  
  }
  
  
  
  class NodeAdapter extends Adapter {
  
    constructor() {
  
      super();
  
      this.name = "nodeAdapter";
  
    }
  
  
  
    request(url) {
  
      // request and return promise
  
    }
  
  }
  
  
  
  class HttpRequester {
  
    constructor(adapter) {
  
      this.adapter = adapter;
  
    }
  
  
  
    fetch(url) {
  
      return this.adapter.request(url).then(response => {
  
        // transform response and return
  
      });
  
    }
  
  }
  
  

  
  


• 
  

  里氏替换原则 (LSP)

  
  
  
  
  • 
    

    两个定义

    
    
    
    
    • 如果S是T的子类，则T的对象可以替换为S的对象，而不会破坏程序。
    
    
    • 所有引用其父类对象方法的地方，都可以透明的替换为其子类对象。
    
    
    •     也就是，保证任何父类对象出现的地方，用其子类的对象来替换，不会出错。下面的例子是经典的正方形、长方形例子。
    
    
    
    
  
  
  
  

  // bad: 用正方形继承了长方形
  
  class Rectangle {
  
    constructor() {
  
      this.width = 0;
  
      this.height = 0;
  
    }
  
  
  
    setColor(color) {
  
      // ...
  
    }
  
  
  
    render(area) {
  
      // ...
  
    }
  
  
  
    setWidth(width) {
  
      this.width = width;
  
    }
  
  
  
    setHeight(height) {
  
      this.height = height;
  
    }
  
  
  
    getArea() {
  
      return this.width * this.height;
  
    }
  
  }
  
  
  
  class Square extends Rectangle {
  
    setWidth(width) {
  
      this.width = width;
  
      this.height = width;
  
    }
  
  
  
    setHeight(height) {
  
      this.width = height;
  
      this.height = height;
  
    }
  
  }
  
  
  
  function renderLargeRectangles(rectangles) {
  
    rectangles.forEach(rectangle => {
  
      rectangle.setWidth(4);
  
      rectangle.setHeight(5);
  
      const area = rectangle.getArea(); // BAD: 返回了25，其实应该是20
  
      rectangle.render(area);
  
    });
  
  }
  
  
  
  const rectangles = [new Rectangle(), new Rectangle(), new Square()];// 这里替换了
  
  renderLargeRectangles(rectangles);
  
  
  
  // good: 取消正方形和长方形继承关系，都继承Shape
  
  class Shape {
  
    setColor(color) {
  
      // ...
  
    }
  
  
  
    render(area) {
  
      // ...
  
    }
  
  }
  
  
  
  class Rectangle extends Shape {
  
    constructor(width, height) {
  
      super();
  
      this.width = width;
  
      this.height = height;
  
    }
  
  
  
    getArea() {
  
      return this.width * this.height;
  
    }
  
  }
  
  
  
  class Square extends Shape {
  
    constructor(length) {
  
      super();
  
      this.length = length;
  
    }
  
  
  
    getArea() {
  
      return this.length * this.length;
  
    }
  
  }
  
  
  
  function renderLargeShapes(shapes) {
  
    shapes.forEach(shape => {
  
      const area = shape.getArea();
  
      shape.render(area);
  
    });
  
  }
  
  
  
  const shapes = [new Rectangle(4, 5), new Rectangle(4, 5), new Square(5)];
  
  renderLargeShapes(shapes);
  
  

  
  


• 
  

  接口隔离原则 (ISP) - 定义是"客户不应被迫使用对其而言无用的方法或功能"。常见的就是让一些参数变成可选的。

  
  

   // bad
  
   class Dog {
  
       constructor(options) {
  
           this.options = options;
  
       }
  
  
  
       run() {
  
           this.options.run(); // 必须传入 run 方法，不然报错
  
       }
  
   }
  
  
  
   const dog = new Dog({}); // Uncaught TypeError: this.options.run is not a function
  
    
  
   dog.run()
  
  
  
   // good
  
   class Dog {
  
       constructor(options) {
  
           this.options = options;
  
       }
  
  
  
       run() {
  
           if (this.options.run) {
  
               this.options.run();
  
               return;
  
           }
  
           console.log('跑步');
  
       }
  
   }
  
  

  
  


• 
  

  依赖倒置原则（DIP） - 程序要依赖于抽象接口(可以理解为入参)，不要依赖于具体实现。这样可以减少耦合度。

  
  

   // bad
  
   class OldReporter {
  
     report(info) {
  
       // ...
  
     }
  
   }
  
  
  
   class Message {
  
     constructor(options) {
  
       // ...
  
       // BAD: 这里依赖了一个实例，那你以后要换一个，就麻烦了
  
       this.reporter = new OldReporter();
  
     }
  
  
  
     share() {
  
       this.reporter.report('start share');
  
       // ...
  
     }
  
   }
  
  
  
   // good
  
   class Message {
  
     constructor(options) {
  
       // reporter 作为选项，可以随意换了
  
       this.reporter = this.options.reporter;
  
     }
  
  
  
     share() {
  
       this.reporter.report('start share');
  
       // ...
  
     }
  
   }
  
   class NewReporter {
  
     report(info) {
  
       // ...
  
     }
  
   }
  
   new Message({ reporter: new NewReporter });
  
  

  
  

其他

• 
  

  优先使用 ES2015/ES6 类而不是 ES5 普通函数。

  
  


• 
  

  多使用方法链。

  
  


• 
  

  多使用组合而不是继承。

  
  

错误处理

• 
  

  不要忽略捕获的错误。而要充分对错误做出反应，比如console.error()到控制台，提交错误日志，提醒用户等操作。

  
  


• 
  

  不要漏了catch promise中的reject。

  
  

格式

可以使用eslint工具，这里就不展开说了。

最后

接受第一次愚弄

让程序一开始就做到整洁，并不是一件很容易的事情。不要强迫症一样地反复更改代码，因为工期有限，没那么多时间。等到下次需求更迭，你发现到代码存在的问题时，再改也不迟。

入乡随俗

每个公司、项目的代码风格是不一样的，会有与本文建议不同的地方。如果你接手了一个成熟的项目，建议按照此项目的风格继续写代码（不重构的话）。因为形成统一的代码风格也是一种代码整洁。

参考：

1. 《代码整洁之道》


2. github.com/ryanmcdermo…
   （里面有很多例子。有汉化但没更新）

作者：xuwentao
来源：juejin.cn/post/7224382896626778172

一、Class 类可以看作是构造函数的语法糖

ES6引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。constructor()方法，这就是构造方法，而this关键字则代表实例对象。类的所有方法都定义在类的prototype属性上面，方法前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。使用的时候，类必须使用new调用跟构造函数的用法完全一致。

• 类不存在变量提升

    class Point {

      constructor(x, y) {

        this.x = x;

        this.y = y;

      }



      toString() {

        return '(' + this.x + ', ' + this.y + ')';

      }

    }

    var p = new Point(1, 2);

通过代码证明：

    class Point {

      // ...

    }



    typeof Point // "function"

    Point === Point.prototype.constructor // true

类的数据类型就是函数，类本身就指向构造函数。

constructor： 方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加。

class Point {

}



// 等同于

class Point {

  constructor() {}

}

取值函数（getter）和存值函数（setter）

        class Person {

            constructor(name, age) {

                this.name = name

                this.age = age

            }



            get nl() {

                return this.age

            }



            set nl(value) {

                this.age = value

            }

        }

        let p = new Person('fzw', 25)

        console.log(p.nl);

        p.nl = 44

        console.log(p.nl);

class表达式

        let person = new class {

            constructor(name) {

                this.name = name;

            }



            sayName() {

                console.log(this.name);

            }

        }('张三');



        person.sayName(); // "张三"

        

上面代码中，person是一个立即执行的类的实例。

二、静态方法、静态属性

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

         class Foo {

            static classMethod() {

                this.baz(); // 'hello'

                return '我被调用了';

            }

            static baz() {

                console.log('hello');

            }

            baz() {

                console.log('world');

            }

        }



        console.log(Foo.classMethod()); // 我被调用了



        var foo = new Foo();

        foo.classMethod() // TypeError: foo.classMethod is not a function

注意 如果静态方法包含this关键字，这个this指的是类，而不是实例。静态方法可以与非静态方法重名。

        class Foo {

            static classMethod() {

                return 'hello';

            }

        }



        class Bar extends Foo {

        }



        Bar.classMethod() // 'hello'

父类的静态方法，可以被子类继承。父类Foo有一个静态方法，子类Bar可以调用这个方法。
静态方法也是可以从super对象上调用的。

        class Foo {

            static classMethod() {

                return 'hello';

            }

        }



        class Bar extends Foo {

            static classMethod() {

                // super在静态方法之中指向父类

                return super.classMethod() + ', too';

            }

        }



        console.log(Bar.classMethod());

注意 super 在静态方法之中指向父类。

静态属性

static 关键词修饰，可继承使用

         class MyClass {

            static myStaticProp = 42;

            constructor() {

                console.log(MyClass.myStaticProp); // 42

            }

        }

        class Bar extends MyClass {

        }

        new MyClass()

        console.log(Bar.myStaticProp);

三、私有方法和私有属性

用#修饰属性或方法，私有属性和方法只能在类的内部使用。
私有属性也可以设置 getter 和 setter 方法
私有属性和私有方法前面，也可以加上static关键字，表示这是一个静态的私有属性或私有方法。

    class Counter {

      #xValue = 0;



      constructor() {

        console.log(this.#x);

      }



      get #x() { return this.#xValue; }

      set #x(value) {

        this.#xValue = value;

      }

    }

四、class 继承

• Class 可以通过extends关键字实现继承，让子类继承父类的属性和方法。


• ES6 规定，子类必须在constructor()方法中调用super(),如果不调用super()方法，子类就得不到自己的this对象。调用super()方法会执行一次父类构造函数。


• 在子类的构造函数中，只有调用super()之后，才可以使用this关键字，

        class Foo {

            constructor() {

                console.log(1);

            }

        }



        class Bar extends Foo {

            constructor(color) {

                // this.color = color; // ReferenceError

                super();

                this.color = color; // 正确

            }

        }



        const bar = new Bar('blue');

        console.log(bar); // Bar {color: 'blue'}

super 关键字

super这个关键字，既可以当作函数使用，也可以当作对象使用。

• super作为函数调用时，代表父类的构造函数。只能用在子类的构造函数之中，用在其他地方就会报错。


• super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

作为对象,普通方法中super指向父类的原型对象

    class A {

      constructor() {

        this.x = 1;

      }

      print() {

        console.log(this.x);

      }

    }



    class B extends A {

      constructor() {

        super();

        this.x = 2;

      }

      m() {

        super.print();

      }

    }



    let b = new B();

    b.m() // 2

注意:
在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。

作为对象,静态方法之中，这时super将指向父类

        class Parent {

            static myMethod(msg) {

                console.log('static', msg);

            }



            myMethod(msg) {

                console.log('instance', msg);

            }

        }



        class Child extends Parent {

            static myMethod(msg) {

                // super 代表父类

                super.myMethod(msg);

            }



            myMethod(msg) {

                // super 代表父类原型对象

                super.myMethod(msg);

            }

        }



        Child.myMethod(1); // static 1



        var child = new Child();

        child.myMethod(2); // instance 2

extends 关键字

    // 1、构造器原型链

    Child.__proto__ === Parent; // true

    Parent.__proto__ === Function.prototype; // true

    Function.prototype.__proto__ === Object.prototype; // true

    Object.prototype.__proto__ === null; // true

    // 2、实例原型链

    child.__proto__ === Child.prototype; // true

    Child.prototype.__proto__ === Parent.prototype; // true

    Parent.prototype.__proto__ === Object.prototype; // true

    Object.prototype.__proto__ === null; // true

extends 继承，主要就是：

1. 把子类构造函数(Child)的原型(__proto__)指向了父类构造函数(Parent)，


2. 把子类实例child的原型对象(Child.prototype) 的原型(__proto__)指向了父类parent的原型对象(Parent.prototype)。

这两点也就是图中用不同颜色标记的两条线。

子类构造函数Child继承了父类构造函数Parent的里的属性，使用super调用的。

引子

通过本文可以学习到深拷贝的三种写法的实现思路与性能差异

首先，我们要理解什么是深拷贝，以及为什么要实现深拷贝

深拷贝是什么

通俗来讲，深拷贝就是深层的拷贝一个变量值；

为什么要实现深拷贝

因为在拷贝引用值时，由于复制一个变量只是将其指向要复制变量的引用内存地址，他们并没有完全的断开，而使用就可以实现深拷贝将其完全拷贝为两个单独的存在，指向不同的内存地址；

如何实现深拷贝

一行实现

let deepClone = JSON.parse(JSON.stringify(obj))

这种是最简单的实现方法，虽然这个方法适用于常规，但缺点是无法拷贝 Date()或是RegExp()；
 

简单实现

function deepClone(obj) {

    // 判断是否是对象

    if (typeof obj !== 'object') return obj

    // 判断是否是数组 如果是数组就返回一个新数组 否则返回一个新对象

    var newObj = obj instanceof Array ? [] : {};

    // 遍历obj

    for (var key in obj) {

        // 将key值拷贝，再层层递进拷贝对象的值

        newObj[key] = deepClone(obj[key]);

    }

    // 返回最终拷贝完的值

    return newObj;

}

对于普通的值(如数值、字符串、布尔值)和常见的引用类型(如对象和数组)，这个写法完全够用。

但是这个写法有个缺陷，就是无法正确拷贝 Date()  和  RegExp()  等实例对象，因为少了对这些引用类型的特殊处理

普通版

function deepClone(origin, target) {

    let tar = target || {};

    for (var key in origin) {

        if (origin.hasOwnProperty(key)) {

            if (typeof origin[key] === 'object' && origin[key] !== null) {

                tar[key] = Array.isArray(origin[key]) ? [] : {};

                deepClone(origin[key], tar[key]);

            } else {    

                tar[key] = origin[key];

            }

        }

    }

    return tar;

}

这个深拷贝方法通过判断属性的值类型，实现了对 对象、数组 以及 Date、RegExp 等引用类型对象的递归拷贝，同时也考虑了拷贝基本类型值的情况，能够满足大多数场景的要求。

最终版

为什么还有最终版？

上面的案例，可以应对一般场景。

但是对于有两个对象相互拷贝的场景，会导致循环的无限递归，造成死循环！

Uncaught RangeError: Maximum call stack size exceeded

场景：

如何解决无限递归的问题？

首先我们要了解 WeakMap()：
WeakMap的键名所指向的对象，不计入垃圾回收机制；

而通过 WeakMap 记录已经拷贝过的对象，能防止循环引用导致的无限递归;

WeakMap 的设计目的在于，有时我们想在某个对象上面存放一些数据，但是这会形成对于这个对象的引用

代码

利用 WeakMap() 在属性遍历完绑定,并在每次循环时获取当前键名，如果存在则返回数据，不存在则拷贝

function deepClone(origin, hashMap = new WeakMap()) {

    // 判断是否是对象

    if (origin == undefined || typeof origin !== 'object') return origin;

    // 判断是否是Date类型

    if (origin instanceof Date) return new Date(origin);

    if (origin instanceof RegExp) return new RegExp(origin);



    // 判断是否是数组

    const hashKey = hashMap.get(origin);

    // 如果是数组

    if (hashKey) return hashKey;



    // 从原型上复制一个值

    // *:利用原型构造器获取新的对象 如: [], {}

    const target = new origin.constructor();

    // 将对象存入map

    hashMap.set(origin, target);

    // 循环遍历当前层数据

    for (let k in origin) {

        // 判断当前属性是否为引用类型

        if (origin.hasOwnProperty(k)) {

            target[k] = deepClone(origin[k], hashMap);

        }

    }

    return target;

}

我们再来看一下使用最新版后的两个对象互相拷贝：

可以看到，通过使用 WeakMap 记录已经拷贝的对象，有效防止循环引用导致的栈溢出错误，是功能最完备的深拷贝实现。

总结

深拷贝可以完全拷贝一个对象，生成两个独立的且相互不影响的对象。

明白各种深拷贝实现的思路和性能差异，可以在不同场景选用最优的方案。

前言

在工作以及学习中，我们有时候会遇到一些定时任务的需求，比如每天定时发送邮件，定时给群或者频道发消息，定时爬取数据等等。这些其实都是比较常见的需求，但是我们又不想去部署一个专门的定时任务服务，这个时候我们就可以使用 Google App Script 实现这些需求。

Google App Script 是什么？

Google App Script 是谷歌提供的一种脚本语言，可以在谷歌的各种服务中使用，比如 Google docs、Google sheets、Google forms 等等。它的语法和 js 基本差不多，但是又有一些不同，比如没有 window、document 等对象，但是有SpreadsheetApp、DocumentApp 等对象，这些对象可以用来操作 Google docs、Google sheets 等服务。

写代码前的准备

既然 Google App Script 可以直接操作 Google sheets，那我们就可以直接使用 Google Sheets 来充当我们的数据库。我们在读取表格中的数据以后，再根据数据的内容来执行不同的操作。

首先我们先新建一张表格，然后在表格中填入一些数据，比如下面这样：

channel 字段表示消息要发送到的频道，hourOfDay 和 minutesOfDay 表示消息要发送的时间，message 表示消息的内容，isWorkDay 则使用了 Google Sheets 中的 NETWORKDAYS 函数来判断今天是否是工作日。而 webhook 就是我们要发送消息的 URL。

以 slack 为例,如果想用机器人给频道发消息，我们可以在 slack 中创建一个 App，然后在 App 中创建 一个新的Incoming Webhooks，然后我们就可以获取到一个 Webhook URL，我们只需要发送 POST 请求 URL，body 中带上消息内容，就可以实现给频道发消息的功能了。

然后我们在 Google Sheets中点击 扩展程序 -> App 脚本，就会跳转到 Google App Script 的编辑器中，这个时候我们就可以开始写 js 代码了。

用法

首先，我们要先获取到 Google Sheets 中的数据。并将其转换成我们想要的格式。

const getDailyMessage = () => {

  const workbook = SpreadsheetApp.getActiveSpreadsheet();

  const sheet = workbook.getSheetByName(sheets.dailyMessage.sheetName);

  return convertValues(sheet.getDataRange().getValues());

}



const convertValues = (values) => {

  const [header, ...rows] = values;

  return rows.map((row, rowIndex) => {

    const result = {};

    row.forEach((column, columnIndex) => {

      result[header[columnIndex].trim()] = {

        value: column,

        position: {

          row: rowIndex + 2, // skip the header row

          column: columnIndex + 1,

        },

      };

    });

    return result;

  });

};

有了表格中的数据以后，我们就要开始发请求了

const shouldRun = item => {

  const hourOfDay = item[sheets.dailyMessage.columnNames.hourOfDay].value;

  const minutesOfDay = item[sheets.dailyMessage.columnNames.minutesOfDay].value;

  const currentHour = new Date().getHours();

  const currentMinutes = new Date().getMinutes()

  const isWorkDay = item[sheets.dailyMessage.columnNames.isWorkDay].value

  if (isWorkDay && hourOfDay === currentHour && currentMinutes === minutesOfDay) {

    return true

  }

  return false

}

// daily message

function runDailyMessage() {

  const dailyMessage = getDailyMessage();

  Logger.log(`${dailyMessage.length} daily message channel(s) are ready to notify...`)

  const tasks = dailyMessage.filter(shouldRun).map(item => new Promise((resolve) => {

    try {

      const channelName =

        item[sheets.dailyMessage.columnNames.channel].value;

      const message = item[sheets.dailyMessage.columnNames.message].value;

      const url = item[sheets.dailyMessage.columnNames.webhook].value

      const options = {

        method: "post",

        payload: JSON.stringify({

          text: message,

        }),

      }

      const fetchResult = UrlFetchApp.fetch(url, options).getContentText();

      if (fetchResult === "ok") {

        afterNotify(cfg, nextMemberIndex);

      }

      Logger.log(`${channelName} daily message notify successfully`);

    } catch (err) {

      Logger.log(`${channelName} daily message throws error: `);

      Logger.log(err);

    } finally {

      resolve()

    }

  }))

  Promise.all(tasks)

    .then(() => {

      Logger.log("daily message have been executed");

    })

    .catch((err) => Logger.log(err));

}

写完以后，我们就可以在 Google Sheets 中点击 运行 -> runDailyMessage 来执行我们的代码了。

这时候，就可以在 slack 中看到我们的消息了。

触发器

上面是手动执行的代码，但是我们希望代码能够自动执行，这时候就需要用到 Google App Script 的触发器了。

Tips

在设置触发器以前，有两个值得注意的地方：

1. 上面的函数中，我们使用的是 SpreadsheetApp.getActiveSpreadsheet() 获取到 Google Sheets 中的数据。但是在触发器中，使用这个 api 是无法获取到数据的，这会导致你的触发器失败。所以我们需要在触发器中使用 SpreadsheetApp.openById 来获取到 Google Sheets 中的数据。

//  use openById replace getActiveSpreadsheet when use app script trigger

  const workbook = SpreadsheetApp.openById("在这里填入你 Google Sheets 的 id");

2. 我们最好是部署我们当前的应用, Google App Script 编辑器右上角就有部署按钮

选择脚本库，添加新版本描述，然后点击部署。就部署完成了。

触发器设置

在 App Script 中点击小时钟图标，就可以看到触发器的设置了。

选择我们要运行的函数，选择刚才部署的版本，然后设置触发器的时间，这里我们设置为每分钟执行一次，就完成了一个简单的定时任务啦。

总结

Google App Script语法跟 JavaScript 很像，所以对于前端学习起来也很容易，提供了部署以及触发器的功能，可以帮助我们快速实现一些简单的功能。希望这篇文章能够帮助到你。

前言

在web前端开发中，文件上传属于很常见的功能，不论是图片、还是文档等等资源，或多或少会有上传的需求。一般都是从添加文件开始，然后读取文件信息，再通过一定的方式将文件上传到服务器上，以供后续展示或下载使用。

下面简单介绍几种上传的方法

简单文件上传

文件上传的传统形式，是使用表单元素 file：

<input type="file" id="file-uploader">

你可以添加 change 事件监听器读取 event.target.files 文件对象。

const fileUploader = document.getElementById('file-uploader')

fileUploader.addEventListener('change', (e) => {

  const files = e.target.files

  console.log('files', files)

})

多个文件上传

使用 multiple 属性

<input type="file" id="file-uploader" multiple />

文件元数据

在成功上传文件内容后，您可能需要显示该文件内容。对于图片，如果我们在上传后不立即将上传的图片显示给用户，则会感到困惑。

每当上传文件时，File 对象都会包含元数据信息，如文件名称、大小、上次更新时间、类型等。此信息可用于进一步验证和决策。

const fileUploader = document.getElementById('file-uploader')



// 侦听更改事件并读取元数据

fileUploader.addEventListener('change', (e) => {

  // 获取文件列表数组

  const files = e.target.files



  // 循环浏览文件并获取元数据

  for (const file of files) {

    const name = file.name

    const type = file.type ? file.type: 'NA'

    const size = file.size

    const lastModified = file.lastModified

    console.log({ file, name, type, size, lastModified })

  }

})

上传前预览图像

我们准备一个上传文件控件，并为预览所选文件准备 img 元素，结构如下：

<input type="file" id="fileInput" />



<img id="preview" />

getElementById() 方法可以获取这两个元素：

const fileEle = document.getElementById('fileInput')

const previewEle = document.getElementById('preview')

使用 URL.createObjectURL() 方法

URL.createObjectURL() 方法包含一个表示参数中给出的对象的 URL。这个新的 URL 对象表示指定的 File对象或 Blob 对象。

fileEle.addEventListener('change', function (e) {

  // 获取所选文件

  const file = e.target.files[0]



  // 创建引用该文件的新 URL

  const url = URL.createObjectURL(file)



  // 设置预览元素的源

  previewEle.src = url

})

使用 FileReader 的 readAsDataURL() 方法

• 使用 FileReader 对象将文件转换为二进制字符串。然后添加 load 事件侦听器，以获得成功文件上传的二进制字符串。


• FileReader.readAsDataURL() 方法用于读取指定的 Blob 或 File对象。

// 获取 FileReader 的实例

const reader = new FileReader()



fileUploader.addEventListener('change', (e) => {

  const files = e.target.files

  const file = files[0]



  // 上传后获取文件对象，以 URL 二进制字符串的形式读取数据

  reader.readAsDataURL(file)



  // 加载后，对字符串进行处理

  reader.addEventListener('load', (e) => {

    // 设置预览元素的源

    previewEle.src = reader.result

  })

})

accept 属性

使用 accept 属性来限制要上传的文件类型。

<input type="file" id="file-uploader" accept=".jpg, .png" multiple>

上面示例中，浏览器将只允许具有 .jpg 和 .png 的文件类型。

验证文件大小

我们读取了文件的大小元数据，可以使用它进行文件大小验证。您可以允许用户上传高达 1MB 的图像文件。

// 文件上载更改事件的侦听器

fileUploader.addEventListener('change', (event) => {

  // 读取文件大小

  const file = event.target.files[0]

  const size = file.size



  let msg = ''



 // 检查文件大小是否大于 1MB，提示对应消息。

  if (size > 1024 * 1024) {

    msg = `<span style="color: red;">允许的文件大小为 1MB。您尝试上载的文件属于${returnFileSize(size)}</span>`

  } else {

    msg = `<span style="color: green;"> ${returnFileSize(size)} 文件已成功上载。 </span>`

  }



  // 向用户显示消息

  feedback.innerHTML = msg

})

显示文件上传进度

更好的可用性是让用户了解文件上传进度。XMLHttpRequest 第二版还定义了一个 progress 事件，可以用来制作进度条。

先在页面中放置一个 progress 标签

<label id="progress-label" for="progress"></label>

<progress id="progress" value="0" max="100" value="0">0</progress>

定义 progress 事件的回调函数

const reader = new FileReader()



reader.addEventListener('progress', (e) => {

  if (e.loaded && e.total) {

    // 计算完成百分比

    const percent = (e.loaded / e.total) * 100

    // 将值设置为进度组件

    progress.value = percent

  }

})

上传目录

有一个非标准属性 webkitdirectory，使我们能够上传整个目录。
虽然最初仅针对基于 WebKit 的浏览器实施，但 WebkitDirectory 在微软 Edge 以及 Firefox 50 及以后也可用。然而，即使它有相对广泛的支持，它仍然不是标准的，不应该使用，除非你别无选择。

<input type="file" id="file-uploader" webkitdirectory />

拖放上传

主要的 JS 如下：

const dropZone = document.getElementById('drop-zone')

const content = document.getElementById('content')



dropZone.addEventListener('dragover', event => {

  event.stopPropagation()

  event.preventDefault()

  event.dataTransfer.dropEffect = 'copy'

})

dropZone.addEventListener('drop', event => {

  // 获取文件

  const files = event.dataTransfer.files

  // ..

})

用对象处理文件

使用 URL.createObjectURL() 方法从文件创建一个唯一的 URL。使用 URL.revokeObjectURL() 方法释放它。

DOM 和 URL.createObjectURL() 和 URL.revokeObjectURL() 方法允许您创建简单的 URL 字符串，可用于引用任何可以使用 DOM 文件对象引用的数据，包括用户计算机上的本地文件。

示例：

<div>

  <h1>使用 Object URL</h1>

  <input type="file" id="file-uploader" accept=".jpg, .jpeg, .png" >

  <div id="image-grid"></div>

</div>

const fileUploader = document.getElementById('file-uploader')

const reader = new FileReader()

const imageGrid = document.getElementById('image-grid')



fileUploader.addEventListener('change', (event) => {

  const files = event.target.files

  const file = files[0]

  

  const img = document.createElement('img')

  imageGrid.appendChild(img)

  img.src = URL.createObjectURL(file)

  img.alt = file.name

})

总结

1. 表单元素 file


2. 文件元数据


3. 上传前预览图像


4. URL.createObjectURL() 方法


5. 使用 FileReader 的 readAsDataURL() 方法


6. accept
   
   作者：整天想死的鱼
   来源：juejin.cn/post/7224402365452238906
   属性

在上一篇《单枪匹马程序员，月营收从 0 到 1 万刀，近 90% 的毛利》里有掘友评论，这样的产品只有国外有，国内缺乏生态。

这篇文章主要是分享一下为什么我认为作为国内的开发者，应该多关注海外市场、做面向海外用户的产品。

早在 2000 年（点 com 泡沫那阵），国外就有了 indie hacker / indie maker 这个名词来称呼做“独立”产品的人。这里的 indie 是 independent 的意思，意在独立（解脱）于各种束缚，比如：朝九晚五的工作时间、固定的办公室、领导、或者是投资人。

而国内在最近几年也涌现了一拨独立开发者，多数以工程师为主，当然做的产品也是面向国内的市场。有做地不错的，像 Baye 的熊猫吃短信、vulgur 的极简时钟、Kenshin 的简阅等；但综合我这两年来对海外一些独立产品的研究，海外市场或许是更好的选择。

当然凡是都有个前提，就是你没有一个豪华的创始团队或者是顶级投资人的背书，就是个人或者两三人的小团队。这个条件我觉得可以覆盖 90% 的中国的开发者；对于另外 10% 的拥有资源或者金主爸爸靠山的个人或者团队，不仅“可以”还“应该”去磕中国市场。但这不是今天要讨论的主题。

在 BAT TMD 等巨头和背靠资源的精英创业者们的夹缝里，我觉得只有做面向海外市场的小产品是更有胜率一点；做国内市场面临的四个问题：

第一、不存在足够的空间给个人/小团队做独立产品存活。

Slack 大家应该都知道，在美国已经上市了，市值 200 亿刀。Slack 一直是被 qiang 的，但是为什么国内没有出现 Slack 这样的产品作为一个信息中心来连接各个办公工具？

其实有，还不少，但都没活太久。一部分原因是腾讯阿里都非常重视这个“商业流量入口”，不想有可能被对方占有了。另外是国内互联网生态，从 BAT TMD 巨头到小软件公司，都太封闭；不仅不开放，还相互制约，都想把自己流量的守住，所以就同时出现了三个 Slack：

• 微信出个企业微信（还封杀了 wetools）


• 阿里出个钉钉


• 字节出个飞书

在这种巨头虎视眈眈且相互对抗的格局里，作为三缺（缺钱、缺资源、缺核心门槛）的个人或者团队是无法存活的。或许在 2010 年至 2016 年间还有草根产品团队依靠“热钱”注入有爆发的可能性，时至今日，特别是这个蜜汁 2020 的局势，是不太可能的了。

即使，你找到了一个空白的利基市场（niche），你接下来面对三个问题：需求验证（试错）、推广、和商业化。

第二点、需求验证或者叫“试错”成本高。

由于国情不同，咱们需要经过一些不可避免的审核流程来保证互联网的干净。这个没话说，在哪做事就守哪的规矩。但这“需求验证”的门槛可就提高了不少。

比如要做个网站吧，备案最快也两周。做游戏？有没有版号？做 app ？有没有软著？小程序（从用户端来讲）是个不错的创新，但是你最烦看到的是不是“审核不通过，类目不符合”？稍微做点有用户互动的功能都需要公司主体。公司注册、银行开户、做帐、以及各种实名制等；这些虽然都不是不可达到的门槛，但是去完成这些要耗费大量的精力，对于本身就单打独斗的开发者来说 - 太累了。

再看看海外，简直不要太爽。做 app 还是需要经过苹果和谷歌的审核，但几乎不会对程序本身以外的东西设置门槛。网站注册个域名，30 秒改个 DNS 指到你的 IP，Netlify 或 Vercel 代码一推，就自动构建、部署、上线了。哪怕你不会写代码或者会写代码但是想先验证一下需求，看看潜在用户的响应如何，国外有不少非常值得一样的 no code 或 low code 平台。这个以后可以单独写一篇。

OK，国内你也通过重重难关项目终于上线了，你面临剩下的两个问题：推广和商业化。

第三点、推广渠道少 && 门槛高。

海外市场的推广渠道更多元，比如 ProductHunt, IndieHackers, BetaList 等。这些平台不仅国内没有，我想表达的更重要一点是，这些平台用户都比较真诚和热心会实在地给你提建议，给你写反馈。国内也有几个论坛/平台，但是用户氛围和友好度就和上述几个没法比了。

在付费推广方面，国内门槛（资质、资金）都挺高，感觉只有大品牌才能投得起广告，这对于缺资金的团队来讲，又是闭门羹。而国外，facebook 和 google 拿个 50、100 刀去做个推广计划都没问题。

可以以非常低的成本来获取种子用户或者验证需求。

行吧，推广也做得不错，得到了批种子用户并且涨势还不错；就最后一步了，商业化。

第四点、商业化选择少。

说商业化选择少可能说过了。国内是由于巨头间的竞争太激烈，出现各种补贴手段，导致互联网用户习惯于免费的互联网产品，甚至觉得应该倒贴给他来使用；伸手党、白 piao 党挺多；付费以及版权意识都还有改善空间。

想想你都给哪些浏览器插件付费过？“插件还需要付钱？！”

而海外用户的付费意愿足够强烈，在以后的案例分享中就能体会到。一个小小的浏览器插件，做得精美，触碰到了用户的购买欲望，解决了他一个痛点，他就愿意购买。

下一篇就分享国外浏览器插件的产品案例。

顺便再说一个「免费 vs 付费」的问题，这个不针对哪个国家，全世界都一样。免费（不愿意付费）的用户是最难伺候的，因为他们不 value 你的产品，觉得免费的就是创造者轻易做出来的、廉价的。如果依着这部分不愿意付费的客户来做需求，产品只会越做越难盈利。

hi，今天给大家整理了十个Javascript的高级知识，希望对你有所帮助

1. 高阶函数

高阶函数是指接受一个或多个函数作为参数，并/或者返回一个函数的函数。这种技巧可以用于将函数组合起来，实现函数的复用。

// 高阶函数示例：将一个数组中的所有元素相加

function add(...args) {

  return args.reduce((a, b) => a + b, 0);

}

function addArrayElements(arr, fn) {

  return fn(...arr);

}

const arr = [1, 2, 3, 4, 5];

const sum = addArrayElements(arr, add);

console.log(sum); // 15

2. 纯函数

纯函数是指没有副作用（不改变外部状态）并且输出仅由输入决定的函数。纯函数可以更容易地进行单元测试和调试，并且可以更好地支持函数式编程的概念。

// 纯函数示例：将一个数组中的所有元素转换为字符串

function arrToString(arr) {

  return arr.map(String);

}

const arr = [1, 2, 3, 4, 5];

const strArr = arrToString(arr);

console.log(strArr); // ["1", "2", "3", "4", "5"]

3. 闭包

闭包是指一个函数可以访问其定义范围之外的变量。这种技巧可以用于将变量“私有化”，从而避免全局变量的滥用。

// 闭包示例：使用闭包实现计数器

function makeCounter() {

  let count = 0;

  return function() {

    count++;

    console.log(count);

  };

}

const counter = makeCounter();

counter(); // 1

counter(); // 2

counter(); // 3

4. 柯里化

柯里化是指将一个接受多个参数的函数转换为一个接受一个参数的函数序列的技巧。这种技巧可以用于将函数变得更加通用化。

// 柯里化示例：将一个接受多个参数的函数转换为一个接受一个参数的函数序列

function add(a) {

  return function(b) {

    return a + b;

  };

}

const add5 = add(5);

console.log(add5(10)); // 15

console.log(add5(20)); // 25

5. 函数组合

函数组合是指将多个函数组合成一个函数的技巧。这种技巧可以用于将多个函数的输出传递给下一个函数，实现函数的复用。

// 函数组合示例：将多个函数组合成一个函数

function add(a, b) {

  return a + b;

}

function multiply(a, b) {

  return a * b;

}

function compose(...fns) {

  return function(x, y) {

    return fns.reduce((acc, fn) => fn(acc, y), x);

  };

}

const addAndMultiply = compose(add, multiply);

console.log(addAndMultiply(2, 3)); // 15

6. 函数记忆化

函数记忆化是指使用缓存来保存函数的结果，从而避免重复计算。这种技巧可以用于提高函数的性能。

// 函数记忆化示例：使用缓存来保存函数的结果

function memoize(fn) {

  const cache = {};

  return function(...args) {

    const key = JSON.stringify(args);

    if (cache[key]) {

      return cache[key];

    }

    const result = fn(...args);

    cache[key] = result;

    return result;

  };

}

function add(a, b) {

  console.log("Calculating sum...");

  return a + b;

}

const memoizedAdd = memoize(add);

console.log(memoizedAdd(2, 3)); // Calculating sum... 5

console.log(memoizedAdd(2, 3)); // 5 (from cache)

7. 类和继承

类和继承是指使用面向对象编程的概念来组织代码的技巧。这种技巧可以用于使代码更加模块化和可维护。

// 类和继承示例：使用类和继承实现动物类和猫类

class Animal {

  constructor(name, age) {

    this.name = name;

    this.age = age;

  }

  speak() {

    console.log("I am an animal.");

  }

}

class Cat extends Animal {

  constructor(name, age, color) {

    super(name, age);

    this.color = color;

  }

  speak() {

    console.log("Meow!");

  }

}

const cat = new Cat("Fluffy", 2, "black");

8. Generator

Generator 是一种特殊的函数，它可以暂停和恢复执行，并且可以用来生成迭代器。
示例代码：

function* generate() {

  yield 1;

  yield 2;

  yield 3;

}

const iterator = generate();

console.log(iterator.next()); // 输出 { value: 1, done: false }

console.log(iterator.next()); // 输出 { value: 2, done: false }

console.log(iterator.next()); // 输出 { value: 3, done: false }

console.log(iterator.next()); // 输出 { value: undefined, done: true }

9. Proxy

Proxy 是一种对象代理机制，它可以拦截对象的访问、赋值、删除等操作，并且可以用来实现数据校验、数据缓存等功能。
示例代码：

const user = {

  name: 'John',

  age: 30,

};

const proxy = new Proxy(user, {

  get(target, key) {

    console.log(`Getting ${key} value.`);

    return target[key];

  },

  set(target, key, value) {

    console.log(`Setting ${key} value to ${value}.`);

    target[key] = value;

  },

});

console.log(proxy.name); // 输出 "Getting name value." 和 "John"

proxy.age = 40; // 输出 "Setting age value to 40."

10. Reflect

Reflect 是一种对象反射机制，它提供了一系列操作对象的方法，并且可以用来替代一些原来只能通过 Object 上的方法来实现的功能。
示例代码：

const user = {

  name: 'John',

  age: 30,

};

console.log(Reflect.has(user, 'name')); // 输出 true

console.log(Reflect.get(user, 'name')); // 输出 "John"

console.log(Reflect.set(user, 'age', 40)); // 输出 true

console.log(user.age); // 输出 40

大佬：你的CSS的写的质量太低，看的我难受。

萌新：那要怎么样？

大佬：自己去优化一下。

萌新：额。。。CSS还能怎么样优化？

咳咳。。。咱们进入正题。

当前端项目想做到极致的性能与体验，优化CSS代码是非常重要的一环。优化CSS代码能够减少页面加载时间，提升性能，改善用户体验。前端的同学有没有想过如何在项目中把CSS这一环优化？

下面我将给大家介绍优化CSS的9个技巧。

1. 使用简洁的选择器

选择器越短，浏览器匹配就越快。因此在编写CSS时，应该尽可能使用简洁的选择器。例如，优先使用类选择器和标签选择器，而不是id选择器和属性选择器。应该避免使用通配符选择器。

/* 优化前的代码 */

#sidebar ul li a:hover {

  color: red;

}

/* 优化后的代码 */

.sidebar a:hover {

  color: red;

}

2. 避免嵌套过深

嵌套过深会增加选择器的复杂度，影响浏览器性能，同时也使得代码难以维护。为了避免嵌套过深，可以采用命名约定，或者使用后代选择器代替嵌套。

/* 优化前的代码 */

#header .nav ul li a {

  color: red;

}

/* 优化后的代码 */

.header-nav-link {

  color: red;

}

3. 减少重复的样式

重复的样式会让CSS文件变得臃肿，增加文件大小，影响页面加载速度。如果某些样式被多处引用，可以将其定义为一个class或者使用CSS变量。

/* 优化前的代码 */

#sidebar h3 {

  font-size: 1.5rem;

  color: #333;

  margin-bottom: 1rem;

}

#main h3 {

  font-size: 1.5rem;

  color: #333;

  margin-bottom: 1rem;

}

/* 优化后的代码 */

.heading {

  font-size: 1.5rem;

  color: #333;

  margin-bottom: 1rem;

}

4. 避免使用昂贵的属性

有些CSS属性会影响浏览器性能，例如position、float、display等。应该尽可能避免使用这些属性，或者使用更轻量级的替代方案。

/* 优化前的代码 */

#header {

  position: absolute;

  top: 0;

  left: 0;

}

/* 优化后的代码 */

.header {

  position: sticky;

  top: 0;

  z-index: 999;

}

5. 压缩CSS文件

压缩CSS文件是一种简单而有效的优化方式。压缩CSS文件可以删除注释和空格等无用代码，减少文件大小，加快页面加载速度。可以使用在线压缩工具或者构建工具自动压缩CSS文件。

例如：

/* 压缩前的代码 */

.header {

  position: sticky;

  top: 0;

  z-index: 999;

}

/* 压缩后的代码 */

.header{position:sticky;top:0;z-index:999;}

6. 单独使用!important

!important能够优先级最高控制CSS属性值，但这种方法很容易过分使用，在大的CSS文件中成为代码的混乱来源。尝试尽可能避免使用它们，只在必要的情况下使用。

7. 避免使用通配符选择器

通配符选择器（*）会匹配所有元素，这样的选择器不仅速度慢，而且可能会导致CSS规则被某些你不想匹配的元素使用。因此，尽量避免使用通配符选择器。如果必须使用，也应该在选择器中增加额外的限制条件来提高精确度。

8．使用CSS继承

CSS继承能够将子元素的样式设置为与其父元素相同的属性值。这种方法不仅简单，而且可以减少代码量和增强代码的可读性。使用继承可以减少你的样式表中的重复代码。

9. 使用CSS预处理器

CSS预处理器（如Sass、Less、Stylus）能够让你使用变量、嵌套、函数、注释等高级功能，从而更加简洁、易于维护的方式编写CSS代码。预处理器将会自动将这些代码转换为标准CSS语法，这样能够降低代码量和复杂度，提高开发效率。

前言

挂钟大家都知道吧，它通过时针、分针和秒针来表示时间，想当初小学刚开始教怎么看时钟的完全看不懂。今天带大家一步步实现一个类进度条时钟的效果，更直观的知晓当前的时间。

本文将会带大家学到以下知识点：

1. 垂直水平居中方式


2. gap 属性搭配 flex 布局 实现等边距


3. Date 日期函数的使用及注意点


4. CSS 变量的简单应用


5. svg 及 circle 标签的用法


6. stroke-dashoffset 属性和 stroke-dasharray 属性能够的用法

样式重置

首先老规矩，我们将 CSS 样式重置 ，方便各个浏览器统一展示效果。

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

背景调整

接下来通过添加 min-height: 100vh 属性，将 body 限制为 视口大小 且通过 overflow: hidden 来将 超出部分隐藏 。

body {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    background-color: #2f363e;

}

这里为了将我们的时钟在屏幕中间展示，我们需要使用 flex 布局 将 body 设置为 水平垂直居中 。同样的，小伙伴们还可以使用 light-height 或 transform 等手段实现。

时间绘制

接下来我们要准备 4 个 div ，用来作为展示时间的容器。

<body>

    <div id="time">

        <div class="circle">

            <div id="hours">00</div>

        </div>

        <div class="circle">

            <div id="minutes">00</div>

        </div>

        <div class="circle">

            <div id="seconds">00</div>

        </div>

        <div class="ap">

            <div id="ampm">00</div>

        </div>

    </div>

</body>