在上文我们简单的了解过 Web Components 的使用场景，它可以让我们像使用原生标签一样使用我们定义的组件，而 Stencil 又可以让我们像写 React 一样高效的书写 Web Components 组件。

「组件化」 一直是前端工程师绕不开的话题，不管是日常业务开发封装业务组件；还是基础设施建设开发UI组件或基础组件；亦或者是 React 、Vue、Angular 等MV*框架，都是秉承着组件作为基础原子概念，所以可以肯定的是： 组件是下一代 web 技术的发展关键 。

前言：有一天，产品经理贱兮兮的跟你说：“我们看到一个挺好的搜谱小程序，我们来仿一个吧，爬出他们的数据来，放到我们库里”没办法，搞吧！！！！！！爬数据分析小程序接口首先安利一个好用的ios系统免费抓包软件： stream通过分析目标小程序接口发现，有一个接口可以获取单个详情，并且发现每个乐谱的id是自增的，，啧...

前言：在前端日常开发中，toC的业务难免会有一些截图或者生成海报的业务需求受限于html2canvas的不兼容性，或者canvas画图的样式局限性，目前我们又有了一种新的解决方案，node + puppeteer的组合，

是架构设计作为软件生命周期的一部分，并不是说开始的时候 设计完成后就会一成不变，软件的生命周期包含了迭代、维护、重构等过程，架构设计亦是如此，所以说架构是需要变化的，目的就是适应当前情况的开发场景。

1.正常播放音频2.可以滑动进度条3.可以切换上一条，下一条音频4.退出当前页或关闭小程序之后仍然可以正常播放5.试听功能进入该播放页不可以播放上一条，下一条6.退出该页面或小程序之后，再次回到该页面，播放条自动到当前播放进度

页面整体不要设置 height:100%;overflow:hidden;否则安卓端 点击input，页面不会上顶，也无法滚动，可能会遮挡【兑换】按钮，需要先收起键盘，再点击按钮，影响用户体验~

每次用到 v-charts 我都一阵头疼，因为明明是相同的功能，但是我好像每次用到的解决方法都不一样？？每次都是在api中各种查，各种尝试...直到做了个各种数据图形的需求，决定还是好好整理一下吧～～

接触小程序有一段时间了，总得来说小程序开发门槛比较低，但其中基本的运行机制和原理还是要懂的。“比如我在面试的时候问到一个关于小程序的问题，问小程序有window对象吗？他说有吧”，但其实是没有的。感觉他并没有了解小程序底层的一些东西，归根结底来说应该只能算会使用这个工具，但并不明白其中的道理。

最近在做一个项目需求，分享领好书活动，获取用户的个人信息以及unionID，并诱导用户分享给好友或朋友圈，达到裂变拉新的目的。在做的过程中遇到了一些坑的地方，所以回过来总结一下

1、利用小程序官方提供的api可以直接分享转发到微信群打开小程序2、利用小程序生成海报保存图片到相册分享到朋友圈，用户长按识别二维码关注公众号或者打开小程序来达到裂变的目的

1.面向对象设计鼓励将行为分布到细粒度的对象之中，如果一个对象承担的职责过多，等于把这些职责耦合到了一起 2.静态语言在编译的时候就已经确定了变量的类型，而动态语言的变量类型是要到了运行时待变量被赋予某个值之后，才会有变量类型 3.鸭子类型（dake typing）：如果它走起路来像鸭子，叫起来也像鸭子，那么它就是...

对于JavaScript，掌握其语法和特性是最基本的，但是这些只是应用能力，最终仍旧考量仍然是计算机体系的理论知识，所以数据结构，算法，软件工程，设计模式等基础知识对前端工程师同样重要，这些知识的理解程度，可以决定你在前端工程师这条路上能走多远，是时候进行一波自检了，查漏补缺，只有全面发展，才会使你更强，...

从node异步编程解决方案说起吧： 事件发布/订阅模式 Promise/deferred模式 流程控制库 事件发布/订阅模式 事件监听器模式是一种广泛运用于异步编程的模式，是回调函数的事件话，又称发布/订阅模式。 主要实现的几个功能包括 on remove once emit 废话少说，我们来简单的实现一个事件监听函数吧 首先创建一个eventEmitter...

A:“一个前端小白，她对git不熟悉，辛辛苦苦加班一星期敲的代码没了。”B:"噢？怎么没了"A:"在终端输入git log，列出所有的commit信息，如下图："A:“commit的信息很简单，就是做了6个功能，每个功能对应一个commit的提交，分别是feature-1 到 feature-6”B:"好的 然后呢"A:“然后前端小白坑爹了，执行了强制回滚，如下：”

注： <Select></Select>／<CheckboxGroup></CheckboxGroup>都是iview的组件，详情请看iview官网，同理elementUi也有相同的组件iview官网 elementUi官网

vue框架的两个抽象核心：虚拟DOM和相应式数据原理 关于虚拟DOM的核心算法，我们上一章已经基本解析过了，详细的见React && VUE Virtual Dom的Diff算法统一之路 snabbdom.js解读 关于响应式数据原理，我们先看张图你 ‘ (4).png 具体来讲，要分以下几步： 初始化实例对象时运行initState, 建立好props, data 的钩...

VirtualDOM是react在组件化开发场景下，针对DOM重排重绘性能瓶颈作出的重要优化方案，而他最具价值的核心功能是如何识别并保存新旧节点数据结构之间差异的方法，也即是diff算法。毫无疑问的是diff算法的复杂度与效率是决定VirtualDOM能够带来性能提升效果的关键因素。因此，在VirtualDOM方案被提出之后，社区中不断涌现...

本次项目做到一个点赞功能，即分享出去一个页面给微信好友，微信好友点开并点赞，需要将点赞用户的微信昵称，微信头像以及微信openid，微信unionid（这个需要关注公众号才会有该字段）传给后端，记录点赞人的相关信息

微信二次分享／自定义分享 从App中使用App分享（一次分享） 使用微信导航栏的分享（二次分享） －－已做处理 使用微信导航栏的分享（二次分享） －－未做处理 如上图，如果不做相关处理，页面进行二次分享，用户看到的就是链接＋空图，上面显示的文案（考拉阅读）实际上是获取的title标签中的文案，我在网上查的相关例子...

这产品和UI都提需求了，咱也不能反驳哈，所以开始调研，分析可行性方案；1、可以添加悬浮按钮。2、自定义导航栏。添加悬浮按钮，是看起来是比较简单哈，但是感觉不太优雅，会占据页面的空间，体验也不太好。所以想了下第二种方案，自定义导航栏既可以实现产品的需求还可以满足UI的设计美感，在顶部空白处加上返回首页的...

合并K个排序链表 合并 k 个排序链表，返回合并后的排序链表。请分析和描述算法的复杂度。 示例: {代码...} 1.暴力破解法 此解法过于暴力，请谨慎使用 原理就是把所有的节点拆解，排序，再从新组合成一个列表，道理容易理解 时间复杂度为 O(nlogn) 2.枚举法 此解法的主要思路为遍历所有列表的头部值，把最小的一个推入到...

你是一个专业的小偷，计划偷窃沿街的房屋，每间房内都藏有一定的现金。这个地方所有的房屋都围成一圈，这意味着第一个房屋和最后一个房屋是紧挨着的。同时，相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警。

缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直...

我要的是简单粗暴的路由 习惯了 vue-router 路由的用法，再用react-router总感觉挺麻烦的。 那么就自己封装一个吧 1.封装多级路由的情况 ————文件名为routerView.js {代码...} 2.定义路由列表对象 ————文件名为index.js {代码...} 3.在全局挂载 4.在页面中使用 有问题可以留言交流

JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object 、Function 是 JS 自带的函数对象。下面举例说明

H5小游戏 篇一 组词游戏 项目功能简介 词库功能，项目文件里配有csv格式的中文常用词组词库，每次随机抽取词语进行游戏 匹配消除功能，自动在词库中匹配选中词语并进行消除 选中动画以及消除动画，均由svg生成爆炸动画 智能提醒系统，10秒之后未作操作可提示单词 过关判定 bodymovin库描述动画 核心代码展示链接描述 [链...

该方法主要用于对象的合并，将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身属性，不拷贝继承的属性。Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。同名属性会替换。

杨永林，人称“教主”，八年前端开发经验，原新浪微博前端技术专家，现任链家网前端总架构师。长期研究Web访问性能优化和前端框架搭建。作为初始团队成员，教主参与了新浪微博所有PC版本的开发，其中4~6版以架构师的身份设计了微博PC版的前端架构。在新浪微博任职期间，教主设计实现了流水线加载技术与模块化代码组织，达...