20180715_ARTS_week03

ARTS 是耗子哥(左耳朵耗子)发起的一个活动。 A -- Algorithm 每周一道算法题 R -- Review 每周阅读并点评一篇英文技术文章 T -- Tip 每周学习一个技术技巧 S -- Share 每周分享一篇技术文章 坚持一年 :-) 这是我的第三周 ARTS

Algorithm

/**
https://leetcode.com/problems/longest-substring-without-repeating-characters/description/
 * @param {string} s
 * @return {number}
 */

var lengthOfLongestSubstring = function(s) {
   var i = 0,
    maxNum = 0,
    curNum = 0,
    subStringList = [];

   for(i; i<s.length; i+=1) {
    var charItem = s[i],
     charPos = subStringList.indexOf(charItem);  // O(n)

    if (charPos != -1) { // 找到了
     subStringList.splice(0, charPos+1)  // O(n)
    }

    subStringList.push(charItem)
    curNum = subStringList.length
    if (curNum > maxNum) {
      maxNum = curNum
    }
    // maxNum = Math.max(curNum, maxNum)
   }
   return maxNum
};

// console.log(lengthOfLongestSubstring("abcabcbb"))
// console.log(lengthOfLongestSubstring("bbbbb"))
// console.log(lengthOfLongestSubstring("pwwkew"))
console.log(lengthOfLongestSubstring("dvdf"))

题目寻找最大子串,一开始没想到特别好的方法, 后来看了下大家的讨论,主要是用移动窗口的方式记录当前寻找的子串,当发现重复字符的时候,起始位置就从下一个开始。

其中,因为要检查记录下来的子串中是否和当前的字符有重复,这里用到了 Array.indexOf 方法,这个方法时间复杂度是 O(n),本来想用 ES6 提供的 Set 类型数据结构的 has 方法来检查,虽然 has 方法的时间复杂度是 O(1),但是当发现重复时 Set 不方便删除一序列元素,还是要转为 Array 操作,实际耗时反而比较长。

另外,我这里贪方便直接 Sting[i] 用下标来取字符串中的字符,IE 下应该是有兼容性问题,可以先 String.split('') 把 String 转为 Array。

Rewiew

GraphQL: front-end queries made easy

这是一篇介绍前端使用 GraphQL 的文章。

  • 简单介绍了的 GraphQL 是什么,是 FaceBook 推行的一种查询语言。我个人觉得更像一种接口约定 DSL。
  • 接口约束的表现形式,表达上和 FaceBook 以前推出的 Thrift 有点像。
  • GraphQL 与 Rest API + Swagger 的一些比较,作者认为 Swagger 在正确的使用时还是挺有用的。
  • 简单描述了前端使用 GraphQL 的方式,文中主要介绍的是依赖一个开源库 apollo-client,apollo-client 也能用在 Angular,React,Vue 中。
  • 以及介绍了 React 使用 GraphQL 的另一个库 Relay,这个库也是 FaceBook 开源的。

总体来说,文章讲的比较简单,对前端了解 GraphQL 是做什么的有一定帮助,如果想更多的了解 GraphQL 可以参考 https://www.howtographql.com

Tip

分享一个写 Vue 组件时候的小 Tip。 平常在做父子组件传值通信的时候,通常是父组件用属性传到子组件的 props 中,然后子组件再一个个绑定到子组件各个 dom 上。 这时,有一种情况,比如子组件是对输入框的封装,子组件外层一般会用 div 等元素包裹,父组件直接传的属性只会被绑定到最外层的 div 上,子组件在做的时候就要一个一个把可能用到的属性都用 props 暴露出去,很多冗余代码。

这个时候,可以借助 inheritAttrs: false 来改变这种默认行为,同时在子组件结合 $attrs 来解决把一堆属性绑定到一个元素上的问题。

示例代码如下:

<div id="app">
  <parent></parent>
</div>
<template id="parent-component">
  <div>
    <h1>Parent</h1>
    <inherited-child :id="id" tmp="tmp" v-bind="$attrs" @click="sayHello"></inherited-child>

    <noninherited-child :id="id" :tmp="tmp" v-bind="$attrs" @click="sayHello"></noninherited-child>
  </div>
</template>

<template id="child-component">
  <div v-on="$listeners">
    <h1>Child</h1>
    <div>
      $attrs -> {{$attrs}}
    </div>
  </div>
</template>


<template id="child-component2">
  <div >
    <h1 v-on="$listeners">Child</h1>
    <div :id="$attrs.id">
      $attrs -> {{$attrs}}
    </div>
  </div>
</template>
<script src="https://unpkg.com/vue@2.4"></script>
new Vue({
  el: '#app',
  components: {
    'parent': {
      name: 'parent',
      template: '#parent-component',
      data: function() {
        return {
            tmp: '123',
          id: 'Hello',

        }
      },
      methods: {
        sayHello: function() {
          window.alert('hello123!'+this.tmp)
        }
      },
      components: {
        'inherited-child': {
          name: 'inherited-child',
          template: '#child-component'
        },
        'noninherited-child': {
          inheritAttrs: false,
          name: 'noninherited-child',
          template: '#child-component2'
        }
      }
    }
  }
})
#Hello {
  color: white;
  background-color: tomato;
  border-radius: 10px;
  padding: 10px;
}

在线地址: https://jsfiddle.net/Bob_Chen/5wgy0rjo/

延伸阅读: https://vuejsdevelopers.com/2018/06/18/vue-components-play-nicely

Share

刚好这周看了一篇讲 GraphMQ 的文章,联想到以前用过的几种类似的东西,简单分享一下 :-)

SOAP

SOAP 是一个比较老的协议,用的是 XML 格式,可读性不是很好,之前做的时候借助 SOAP UI 等工具做可视化会方便很多。

个人感觉 SOAP 是一个比较重的协议,输入输出定义也比较严谨,可能是因为使用 XML 的关系,现在好像用的已经不多了。

Thrift

我第一次知道 Thrift 是因为以前有个项目是 SOAP 接口的,后来有个客户他们是用 Thrift 的,于是我们就把接口层从 SOAP 改为了 Thrift。

刚接触 Thrift 的时候,我就被它震惊了,简单定义好接口描述文件,用的是它自己的一套 DSL,然后执行个命令行,相关客户端和服务端代码就生成好了,而且支持生成多种语言,包括各种结构体的定义。 接口描述文件相对 SOAP 可读性更好,有时候甚至不用读,跑个命令行代码生成好了,直接看代码,这就叫【Talk is cheap, show me the code】

不足之处是有些生成的代码依赖 Thrift 自身的发展。比如用的时候生成的 python 服务端代码是不建议用在生产环境的。

Rest API

Rest 和上面两个来讲,不是一个协议,而更像一种接口风格,把各种东西当成资源,然后围绕资源的状态变化来构建 API 接口,包括调用 API 的 HTTP 方法。

由于只是一种接口风格,缺少足够的约束,因为理解不同各种不完全遵守风格用法都可以有。

当然,之前也缺少一些文档工具,现在 Swagger 似乎挺强大,还可以交互。

除此之外, Rest 风格和 HTTP 绑的比较紧,依赖 HTTP 状态码以及 HTTP 请求方法 GET/POST/DELETE/PUT,某些情况可能不适用,比如需要更高性能的 RPC 调用时。


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

说说JSON和JSONP,也许你会豁然开朗-转

今天在写底层通信框架的时候,遇到了跨域的问题;随便给不知道的童鞋们分享下基础知识。 前言   由于Sencha Touch 2这种开发模式的特性,基本...

3986
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-BABY MILESTONES

课程内容 Ø图片的读写 Ø序列化 Ø双向数据绑定     Baby Milestones将婴儿从出生到2岁之间的发展关键里程碑通知给父母。该应用程序使得父母能...

18810
来自专栏JackieZheng

AngularJS入门心得1——directive和controller如何通信

  粗略地翻了一遍《JavaScript DOM编程艺术》,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too...

2276
来自专栏JackieZheng

漫谈可视化Prefuse(一)---从SQL Server数据库读取数据

  上篇《可视化工具solo show-----Prefuse自带例子GraphView讲解》主要介绍了整个Prefuse工具集具有的一些特征、框架的运行流程,...

2516
来自专栏程序员同行者

django rest framework通用view

官方文档:http://www.django-rest-framework.org/ drf为我们提供强大的通用view的功能,本博客对这些view进行简要的...

962
来自专栏北京马哥教育

有关bash,我希望我能知晓的十件事

1725
来自专栏小灰灰

Spring定时任务高级使用篇

前面一篇博文 《Spring之定时任务基本使用篇》 介绍了Spring环境下,定时任务的简单使用姿势,也留了一些问题,这一篇则希望能针对这些问题给个答案

1272
来自专栏微服务生态

野谈系列之高性能可定制化分布式发号器

刘兵,花名玄靖,开源技术爱好者,高性能Redis中间件NRedis-Proxy作者,目前研究方向为java中间件,微服务等技术。

833
来自专栏james大数据架构

原生js写的贪吃蛇网页版游戏特效

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <body><title...

2585
来自专栏互联网杂技

react+redux+webpack教程2

先弄个什么例子呢?如果是现代的MVVM框架,可能会用双向绑定来吸引你。那react有双向绑定吗? 没有。 也算是有吧,有插件。不过双向绑定跟react不是一个路...

3407

扫码关注云+社区

领取腾讯云代金券