贰浪
本文浅谈一下前端技术的发展背后的动机、解决问题的思路和借鉴的一些思想等，更适合有使用过 React 或 Vue 等现代前端框架的开发者阅读。如果你没接触过这些技术，本文也可以帮你扩展一下视野，提升思维高度 > 抽象，本质上是一种泛化与概括的思维方式 科学的发展其实就是人类不断尝试抽象和解释世界的过程。基于已有的现象或数据去努力发现共性、规律，抽象出一个模型或者公式（定律定理），然后再验证是否可以解释所有满足条件的现象。一个正确的科研成果基本都是在一定前提下可以被重复验证和解释一类现象的，该成果进而可以被加以利用到实际生产活动当中，促进生产效率提升和社会的发展 在计算机科学中，抽象与分层是一种降低计算机系统复杂度的基本思想和有效方法。分层是建立在抽象的基础上，分散关注、松散耦合、逻辑复用，在此基础上可以产生行业标准的定义 自从 Ajax 出现以来，前端终于可以自成体系的独立开发部署了。前端通过 Ajax 请求获取到数据后，可以有能力自行维护数据，并通过 DOM 操作来展示数据。处理用户操作所触发的 DOM 事件，对数据进行一定处理后与服务器进行同步，同时更新局部内容或借助前端路由进行页面跳转，而不用刷新页面。自此前端有能力跟后端完全分离，也就是我们常说的 SPA  概括来说，前端在此阶段主要做的事情有这些： - 控制页面渲染 - 编写模板和样式 - 通过 DOM 操作渲染初始数据 -...
首先分享一个有趣的思维实验： > **缸中之脑**: 假设你此刻，并不在你认为你存在的地方，事实上，你只是邪恶天才的科学实验的对象。你的大脑已经被切离你的身体，放进了实验室里一个盛有维持大脑存活的营养液的缸中。大脑的神经末梢连接在一部超级计算机上，计算机提供给大脑一切你日常生活中的感觉，这使你感到一切正常 > > 你是真实存在的吗？你还是“你”吗？你所了解的世界是你想象的虚构的东西，还是邪恶的科学家构建出来的幻觉？这听起来也许是噩梦般的场景。但你无法以绝对的确定说它是虚假的 > > 即使我们不能肯定，外部世界是如何出现在我们的感官中的，但至少我们可以肯定的是，因为每一次我们怀疑这件事时，必然存在一个“我”正在做出怀疑，所以我们的确是存在着的 > > 这就是“我思故我在”的著名哲学理论 虽然无法证明我们活在真实还是虚拟的世界，但是“思考能力”至少可以证明我们是真实存在的，也间接的说明人最具核心价值的能力就是思考 作为前端从业者，我很多次面试都会问面试者一个问题：什么是 Promise ? 面试者给的答案很多：有说如何实现的；有说解决了什么问题的；有介绍使用姿势的；但绝大多数人都没给出一个令人满意的答案，或者说绝大多数人在学习技术知识的时候缺乏主动思考能力 计算机科学的发展和进步是离不开对人类活动的借鉴的，所以当我们在计算机术语里看到一个生活中也出现的词语的时候，要去生活中抽象和寻找本质，拿 Proxy 来说，生活中我们常见的有代理人和代理商： - 代理人：打官司要委托律师作为诉讼代理人，主体是原告和被告，但是他们打官司的经验和法律知识不如律师专业，所以需要律师这个代理体；在外地工作，如果需要在老家办理证件需要委托亲人作为代理人，因为本人不在家 - 代理商：餐饮代理加盟、本地生活公司（饿了么、美团）的区域代理商，游戏代理等，主体提供基础能力，代理商基于这些在自己代理的区域去经营。为什么需要代理商呢？说好听点是其在当地有资源、关系、人脉，说不好听就是地头蛇、政府关系户等，但本质是他们有能力降低运营成本，提升效率 从上面生活中的代理可以总结出其核心要点：主体、代理体、代理体存在的原因和要去做的事。但是，这里存在的原因描述的有点废话嫌疑，再深入思考，这些原因本质是代理体对主体能力的补充和加强。所以最终核心要点有：**主体、补充或加强主体能力的代理体和要去做的事**，简单说就是在主体和要做的事情之间加一层，用来补充或加强能力  拿这个模型来解释”缸中之脑“，我们的躯体只是提供行动能力的代理体，真正的主体我是那个存储着记忆信息、拥有属于个人的思维和思考能力的灵魂。假如未来科技可以将灵魂安放在能力更强大的机器上，人类是否可以成为为所欲为的大力士飞来飞去呢？当我们沉浸在游戏的世界里，此时代理你的不是你的躯体，而是那个游戏角色，而此时你拥有游戏角色的各种技能来完成游戏任务。游戏的本质是提供了一个灵魂可以安放的代理体及代理体所在的环境，让人可以更容易取得成就获得快乐 拿这个模型来理解你在计算机世界里见到的代理： -...
编程的世界有许多套路，可以让我们的程序设计更加优雅 ## [Monkey patch](https://en.wikipedia.org/wiki/Monkey_patch) 形象比喻一下，假如你的代码里有一个猴子对象，猴子走路，呲牙和叫等都跟你预期中的猴子行为一致。但是突然有一天你需要这个猴子会像鸭子一样叫，该怎么办？ 映射到前端代码，最先能想到的就是你正常的业务代码，突然有一天产品经理告诉你需要加30个埋点，而且这些埋点的逻辑还很多，你不想这些非业务逻辑代码出现在业务代码中，该怎么办？ 这里我先讲一个笑话： > 为了测试美国、日本、中国三地警察的实力，联合国将三只兔子放在三个森林中，看三地警察谁先找出兔子。任务：找出兔子。美国和日本警察都兴师动众地在森林里找，结果都是到了晚上无功而返。最后是中国警察，先是玩了一天王者荣耀，黄昏时一个拿着一根警棍进入森林，没五分钟，听到森林里传来一阵动物的惨叫，中国警察抽着烟有说有笑的出来，后面拖着一只鼻青脸肿的熊，熊奄奄一息的用兔子的叫声说：“不要再打了，我就是兔子！” 我们在写代码的时候经常采用和这个笑话一样的套路。你代码里的一只熊，哪天被动态改了一个属性后就可能变成像熊一样走且像兔子一样跳的熊兔了 JavaScript 这种动态语言天生有在运行时对属性进行动态替换或修改的能力，这就叫做猴子补丁。比如数组缺少一个有用的方法，你自己就可以增加它 ``` Array.prototype.split = function(i) { return [ this.slice(0, i), this.slice(i) ] } ``` 你也可以修改原有属性，扩展功能。比如一个常见的需求：为了追求前端项目的稳定性，我们往往需要对运行时的代码进行监控并向服务器上报异常信息。浏览器中 Javascript 的运行时包含两种： 1. 浏览器加载并执行...
谈谈时间管理
随着接触越来越多非常优秀的人，发现他们几乎都时间充足、精力充沛，工作、社交、生活、兴趣每样都不会落下。如何很自然地在平常生活中做到这样呢？答案是拥有很好的时间管理能力 > 时间管理是指通过事先规划和运用一定的技巧、方法与工具实现对时间的灵活以及有效运用，从而实现个人或组织的既定目标。EMBA、MBA等主流商业管理教育均将时间管理能力作为一项对企业管理者的基本要求涵括在内 我自己的体会是：时间管理能力不是孤立的，而是建立在各种综合能力的基础之上，外加特定的训练而养成的良好生活习惯。每个人都能培养起属于自己的一套管理方法，而这些方法是有一定共性的 ## 基础能力 * #### 自律 如果任由自己被激情和冲动及任性支配，那么便会成为欲望的奴隶，从而随波逐流，完全放弃了自己的自由。不能够自我控制的人，何谈时间管理 * #### 沟通能力 沟通能力最简单的判断就是：是否浪费了别人的时间。高效的沟通是节省双方时间的基础，几个简单的注意点： 1. 做充足准备，要确保对要交流的内容有过深入的思考 2. 列清楚要沟通的要点并确定重点，如果有可预见的冲突话，自己的核心诉求点和能做出让步的点是什么 3. 提前确定沟通顺序和恰当的方式，一般情况重点优先 * #### 健康体魄 脑力劳动也是相当耗费体力的，体力是大脑与身体能够持续高效工作的基础。只有健康的体魄，才能保证精力充沛，有效避免困、乏、疲、倦等不良生理状况所导致的效率的极大降低。作息规律，保证足够的睡眠时间，坚持运动、锻炼身体，健康饮食等都是保证时间管理有效开展的基础 * #### 专注能力 在工作时是否遇到过注意力飘浮不定的情况？专注的目标会经常转移，或者心不在焉，沉浸于白曰梦而忘记眼前的事情。这会带来时间的浪费和效率的降低。大多数人在专注时会把事情完成得更快更好，可以尝试一些训练专注力的方法（或使用一些培养专注力的应用）来提升个人的专注能力。在工作的时，如果大脑中冒出其他未尽事项或一些点子，不妨先写到纸上，继续专注做你手头的事，做完后再找时间处理那些事项 * ####...
### SRI是什么？ SRI是Subresource Integrity的缩写，一般按照字面意义翻译为：子资源完整性。详情请参考：https://www.w3.org/TR/SRI/ 点击查看github的页面源码，可以看到这些代码： ``` ``` 上面标签里都有intergrity属性，比如：`integrity="sha256-d8O4dPMucbFM3tWhIPQvXHKI+lLgo38tWRn72Lz8pjw="`。 这里的hash值是根据资源内容通过特定的签名算法（支持 sha256、sha384 和 sha512）生成的签名。 浏览器拿到资源内容以后，会根据integrity所指定的签名算法计算结果与integrity值进行对比。如果二者不一致，就不会执行这个资源，这个过程称为验签。（了解数字签名情查看[数字签名是什么](http://www.ruanyifeng.com/blog/2011/08/what_is_a_digital_signature.html)） ### SRI的用途 SRI可以确保页面引入资源的完整性，这样我们可以做到： 1. 确保安全：假如CDN服务被入侵，文件内容被写入恶意代码的时候，如果启用了SRI策略，有恶意代码的文件无法执行，防止XSS攻击。虽然https也可以确保传输过程中不被劫持并写入恶意代码，但是对于CDN服务被入侵时，https也无济于事。 2. 确保资源无脏数据：假如CDN在同步过程中有脏数据，JS代码与源站代码不一致，便不会运行。这样可以防止运行脏代码导致报错，检测到错误的同时可以向源站下载对应的正常代码。 ### 1.通过SRI确保下载正确完整JS资源 传统的方法，是在JS正常运行的最后，加一个全局的变量来判断其是否正常运行。比如： ``` function _loadScript(src) { const script =...
本文翻译自 [Mark Dalgleish ](https://medium.com/@markdalgleish)的文章 [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) Mark Dalgleish 在CSSconf EU 2017的演讲视频地址 [Mark Dalgleish: A Unified Styling Language](https://www.youtube.com/watch?v=X_uTCnaRe94) PPT地址 [Presentation-a-unified-styling-language](https://markdalgleish.github.io/presentation-a-unified-styling-language/) > Mark Dalgleish的这篇文章将作为2017年最重要的前端发展文章之一 上文评论引用自 [CSS-Tricks](https://css-tricks.com/unified-styling-language/) --------------------------- 在过去几年我们看到了主要来自 [React](https://facebook.github.io/react/) 社区的...
谈谈前端通信
前端开发者一般很少能从一个更高的角度来看待通信这件事情，希望本文可以引领大家深入探究一下通信，并找到解决前端通信问题的通用思路 ### 什么是通信？ 要点：**1. 发送者和接收者 2. 传输媒介 3. 传输的数据 4. 传输格式（协议）** 目的：**1. 同步数据 2. 传递指令(执行的方法)** 浏览器向服务器发送一次 `GET` 请求，会将请求的数据同步给服务器，服务器会根据请求数据执行一些操作后，再决定将哪些数据同步给浏览器。这是为了在浏览器里同步服务器上的数据 遥控器与无人机通信，会将一些指令（本质就是无人机自身可以执行的方法）发送给无人机，无人机去执行，然后做出相应的动作。这是为了传递指令 上图是通过shared-storage来实现通信的过程，如果两个页面同域名且端口号相同，他们可以访问相同的localStorage。如果Tab1想给Tab2发送数据产生通信，只要做到以下几点即可： 1. Tab1通过localStorage.setItem('_data1', data)来改变localStorage中_data1的值 2. Tab2监听storage事件，一旦localStorage事件发生变化，且变化是_data1，就读取_data1的最新值 上面的通信过程中，Tab1和Tab2分别是发送者和接收者，传输媒介是共享的localStorage，传输的格式可以在data中进行标准化 到目前为止，如果你在项目中遇到一个通信相关的问题，首先要想到发送者和接收者分别是什么，以及有哪些传输媒介可以实现通信 ### 前端领域遇到的通信有哪些？ *...
``` addAttribution( text) // Adds an attribution text (e.g. 'Vector data © Mapbox'). removeAttribution( text) // Removes an attribution text. ```
### Before you submit this issue, have you checked the following - [X] Is this really a problem? - [X] I have searched the Github Issues for similar issues, but...
### Before you submit this issue, have you checked the following - [X] Is this really a problem? - [X] I have searched the Github Issues for similar issues, but...