stuxt.github.io
stuxt.github.io copied to clipboard
stuxt
My blog site!
## 背景 最近在做DeepLink的需求，DeepLink不算是一个新话题了，但是却一直都没间断过讨论。开始接触之前了解并不是很多，但是接触下来发现也就那几种实现方式。 什么是DeepLink呢？其实就是H5页面提供一个按钮，例如：“打开APP”或者“下载APP”等。在H5页面中点击这个按钮，如果安装了目标APP直接通过链接唤起，否则跳转到下载页面去下载APP。这种通过H5唤起APP的链接的方式就是DeepLink。 看起来很简单的一个业务流程，但是实现起来还是有很多坑的，主要是因为设备、设备版本、浏览器等碎片差异严重，导致很多兼容需要处理。 ## 最终实现的效果 用户点击H5页面的打开App或者下载按钮（这个按钮可能在一个下载入口页、各种分享页面的吸顶或吸底的banner），如果用户已经安装了App，则根据业务跳转到相应的Native页面；如果用户没有安装该应用，则跳到AppStore或者应用市场去下载App。  图1：各种实现方式 ## 已安装APP时的实现方式 ### 一、iOS中的实现 iOS中在IOS9.0前后是一个分界点，因为从iOS9.0之后苹果开放universal link的方式代替schema的方式来唤起APP。下面我们就分别从iOS9.0前后分别来说： #### 1、iOS9.0之前 iOS9.0之前苹果和安卓的实现方式都是通过schema的方式来实现的。但是跳转方式也有很多种（window.location.href方式、a链接方式、iframe方式等），经过测试和查阅资料发现，iOS9.0之后的跳转方式选择iframe的方式是最靠谱的方式。代码如下所示: ```javascript function openOrDownload() { var ifr = document.createElement('iframe'); ifr.src = 'test.1234://deeplink?token=1111111';...
TouchEvent在移动开发中经常用到，在touch事件中分为三个步骤：touchstart、touchmove、touchend。 当然还有touchenter 、touchleave和touchcancel。 这里主要讨论讨论使用概率最高的touchstart、touchmove和touchend三个事件。 最近在做移动端的一个需求，发现一个有意思的事情（问题）。 首先说一下我的需求：就是在移动端想通过touch事件，来获取touchmove过程中触点的每个页面元素，就像在pc端的mouseover一样。 但是通过demo测试发现，touch的表现和mouseover不一样，怎么不一样呢？我就用一个小例子来说明一下，比如：我们走路从A点准备走到E点，途中会经过B、C、D点，我们在出发的时候发一个定位给E点的朋友，告诉他我在A点，我准备出发了。等我走到B/C/D点的时候分别发送我的定位给他，告诉他我到了哪里了。 对标上面的这个例子，mouseover可以完美的实现，鼠标经过哪个元素，就可以从event事件属性中获取到这个元素的信息，但是touch却不行。 touch给我们的表现是：无论我到哪里发送的定位始终都是A点的定位，即使我到了E点了，定位还是A点的定位。具体表现看如下例子截图：  > touchstart 事件从如图所示的**23456**元素开始touch事件  > touchmove事件，已经移动到 **q325** 元素上，但是target依然指向**23456**元素  > 其实经过坐标计算之后的元素实际的为**q325**元素 所以，touch不能像mouseover那样来通过简单的event属性来获取到我触点的前端元素信息。 那么这种情况该怎么解决呢？ 查阅了很多资料，最终发现一个API可以达到我们的需求，这个API就是：elementFromPoint（x , y）;这个API可以通过页面中的x/y坐标来找到当前坐标下对应的元素是哪个元素。 于是我们可以再touchmove的事件属性中找到touches数组列表，取到对应的x/y坐标，来实现定位元素。
### 悲伤的故事是这样开始的 某天早上兴高采烈的来到办公室，打开电脑，准备开始今天计划的coding，感觉项目每天计划的很完美，一切尽在掌握。 于是我打开IDE在前一天的基础上新写了一个模块，这个模块是一个动态的导航列表，就像用户列表那样，显示在页面的左侧，点击不同的用户，右边容器要展示不同的用户信息，这看上去是so easy。 于是我chuachuachua就写了如下的一段代码： router.js ```javascript //路由中模块路由的配置 {path: 'user/:userId', component: User}, ``` user.vue ```javascript //user组件代码中初始化的代码 …… beforeMount(){ this.initPage(); }, …… methods: { initPage(otherParams = {}){ otherParams = {...
一般情况下我们访问一个网站都会发现图片的加载会是这个样子的：  这种方式用户感知不是很好，能明显感受到加载的全过程，内容只有等完全加载完成后才能看到完整的内容。 然而有些时候我们也会看到有些网站的图片加载是这个样子的：  不是从顶部开始一点一点的加载，而是从一开始就能就能看到整个图片的大致轮廓，然后慢慢变的清晰。这个相比上面的那种方式用户体验有明显的提升。 那么这种加载方式是如何实现的呢？ 其实这种图片的加载方式就是“渐进式图片加载”。 这种方式有两种大致的方法： 1、一种是保存图片的时候就把图片保存为渐进式的图片格式，这样在加载的时候就会使用渐进式的加载方式加载。 我本地测试了一下，效果不是很明显，但是相比较标准的图片加载格式，加载速度有明显的提升。 具体做法，参考：http://www.zhangxinxu.com/wordpress/2013/01/progressive-jpeg-image-and-so-on/ 2、模拟渐进式的图片加载方式。 模拟 progressive image （渐进式图片加载），用低分辨率的模糊图片来做预览图，代替以前懒加载图片时用的 logo 占位图。预览图大小也在平均 2KB~3KB 之间，虽然 cdn 流量上有所增加，但用户体验却非常好。 目前知乎和 Medium 都用了 progressive image （渐进式图片加载）这种方式的。 具体做法，参考：https://juejin.im/entry/58d2485c2f301e007e63ed54...
> 回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切。 > ### ES6 原生提供了 Promise 对象。 > > 所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。 ### Promise 对象有以下两个特点。 （1）对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。 （2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从...
# 向Node.js核心贡献代码的六个步骤 **本文的目的是帮助您完成向Node.js核心文件贡献代码的第一个提交!** 向Node.js贡献代码的方式有很多种。你可以向其中的某个 [工作组](https://nodejs.org/en/about/working-groups/)捐献（像网站或者联机诊断工作组等），或者可以在 [Nodeschools](https://nodeschool.io/)开设课程提供Node.js的教学, 所以那些有着同样困惑的人可以向你学习。 当然你也可以开始直接向Node.js的核心贡献，无论你是通过回答使用者的问题，还是向项目中提交代码。 ## 构建Node.js核心的6个必要步骤 在接下来的章节中，您将深入了解开始提交代码获取乐趣和成就感的必要步骤。 ### #1 Fork 项目 准备开始，请访问位于[https://github.com/nodejs/node](https://github.com/nodejs/node）的Node.js官方仓库，并将该项目fork到您的Github 帐户。  ### #2 设置你的git仓库 一旦拥有了自己的仓库，就可以直接进入终端使用如下命令克隆项目。 ``` `$...
文件上传，是很常见的一个需求，项目中当我看设计稿有这个需求的时候并没有太在意，觉得这个东东司空见怪。 等到去看到这块实现的时候，发现这个跟之前的上传有一点点的差别，那就是要求一个表单同时上传两个或者多个文件。 理论上来说，表单提交设置多个不同的``,很容易就能实现的。但真是图样图森破啊，这只是表面看上去是这样的，于是我就写了一个demo试了一下，从network的记录来看并不是预想中的那样，其实是每个文件的上传都会单个的请求发送，而并不是一个请求同时发送多个文件的。 这里说的是异步的表单提交方式，因为用form的action来实现的话，表单的提交是会有页面的刷新和跳转的。所以用的是异步的post请求方式。 怎么办呢？于是各种搜索和骚扰同事需求办法。 最终使用了FormData的方式实现了这种需求。 核心代码如下： upload.vue ```javascript //hrml代码片段 …… …… //js代码片段 let f = new FormData(); f.append('token', this.ruleForm.token); f.append('id', this.ruleForm.id); …… f.append('file1', this.ruleForm.file1); f.append('file2', this.ruleForm.file2); …… this.upload(f).then(()=> {...
文章来源地址：http://thenewcode.com/1188/A-Complete-Web-Developer-Reading-List 翻译计划，暂定 新开一个仓库：**FE-AT** FE-AT(font-end article list):前端文章列表 在此先mark下~
# 2017最好的JavaScript框架、库和工具 — SitePoint > 本文转载自：[众成翻译](http://www.zcfy.cc) > 译者：[小天同学](http://www.zcfy.cc/@stuxt) > 链接：[http://www.zcfy.cc/article/3101](http://www.zcfy.cc/article/3101) > 原文：[https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/](https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/) 与开发者数量相比，可能有更多的JavaScript框架、库和工具。截止到2017年5月，[在GitHub上快速搜索](https://github.com/search?utf8=%E2%9C%93&q=language:JavaScript&type=Repositories&ref=advsearch&l=JavaScript&l=)能搜到超过110万的JavaScript项目。 [在npmjs上有50万的可用包](https://www.npmjs.com/)，并且这些包每个月的下载量将近100亿次。 > **2017.05.29:** 更新了本文，旨在能正确的描述当前JavaScript生态的状态。 本文着重讲述目前最流行的客户端JavaScript框架、库和工具之间的基本差异和他们的基本介绍。至于是不是你要寻找的最佳实践那是另外一个问题。你可以选择一个，并坚持使用一段时间，你要明白你最喜欢的那一个有可能被“更好”的所取代，而不管你是否选择使用这个更好的。 ### 提纲目录 * [**复杂的术语**](#trickyterminology) * [库](#libraries) * [框架](#frameworks) * [工具](#tools) * [不要给我贴标签](#dontlabelme)...