ARTS-第2周-190325

Algorithm
ZigZag Conversion，题目如下，给定字符串，然后按照Z字形规则组成一个数组，然后按照行的顺序输入字符串。

The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like this: (you may want to display this pattern in a fixed font for better legibility)
P   A   H   N
A P L S I I G
Y   I   R
And then read line by line: "PAHNAPLSIIGYIR"
Write the code that will take a string and make this conversion given a number of rows:
string convert(string s, int numRows);
Example 1:
Input: s = "PAYPALISHIRING", numRows = 3
Output: "PAHNAPLSIIGYIR"

Example 2:
Input: s = "PAYPALISHIRING", numRows = 4
Output: "PINALSIGYAHRPI"
Explanation:
P     I    N
A   L S  I G
Y A   H R
P     I

给出的参考方案有两种：

1. 先按照规则要求生产数组，然后逐行遍历生成结果字符串。
2. 找到字符位置规则，直接生成结果字符串。
   我个人的实现方法选择的是第二种：

string result = "";
if (s.Length == 1 || numRows==1)
{
    return s;
}
for (int i = 0; i < numRows; i++)
{
    for (int j = 0; (i + j * (numRows + (numRows - 2))) < s.Length;j++)
    {
        result += s[(i + j * (numRows + (numRows - 2)))];
        if (i!=0&& i!=(numRows-1) && (((j+1) * (numRows + (numRows - 2)))-i)

以4列为例，第0列和第3列很容易找到编号

Example 2:
Input: s = "PAYPALISHIRING", numRows = 4
Output: "PINALSIGYAHRPI"
Explanation:
P     I    N
A   L S  I G
Y A   H R
P     I

• 第0行对于的编号是 rowindex+(numRows +(numRows -2))*j
• j是个自增变量从零开始，那么第一行对应的序号是：0，6，12
• 最后一行也一样rowindex是3，对应的序号是：3，9
• 中间行就不太一样，在一个j值得时候对应的序列号可以有多个：
• rowindex+(numRows +(numRows -2))j 和 (numRows +(numRows -2))(j+1) - rowindex
• 以第0行的序号为标记点，往前找到中间行和两端行不同的序号。
• 第1行对应的序号是：1，（6-1），7，（12-1），13
• 第2行对应的序号是：2，（6-2），8，（12-2）
• 这个算法的具体应用场景我没有遇到过，可能是某种特殊的遍历方法。

Review
原文链接：https://uxdesign.cc/design-better-forms-96fadca0f49c
标题：Design Better Forms
Common mistakes designers make and how to fix them
主要内容是以一个注册/个人信息界面为例，介绍和对比一些作者觉得在界面排版和显示上更好的方式。截取几个我觉得还不错的建议。后面的没有附上图片，可以去原文链接查看。

• Forms should be one column（界面最好一行只有一个input框），我觉得国外网站的姓名分两个框显示在一行没啥大问题，其他的独立的内容单独一行显示会显得更清晰。
  
• Top align labels，把说明输入框的label放到输入框的上方，这个我不是完全同意，当页面比较宽的时候可以借助其他方式让眼睛的显示不混淆。
  
• Group labels with their inputs，和input输入框相对应的label间的距离稍微近一点，输入框之间的距离可以远一点。
• Show all selection options if under 6，当选项少于6个的时候，全部显示出来，不要用下拉列表。
• 按钮上的说明要标注清楚。
• 输入框的文字格式或其他错误提示要标识清楚。
• 当一个input输入结束以后再提醒当然输入框中的错误，不要在输入到一半的时候提醒。
• 用来提醒或帮助的提示不要隐藏起来，直接显示出来。
• 不同作用的按钮颜色不一样，例如：确认和取消。
• 输入框的长度尽量和需要填写的内容长度相符，如：邮编
• 内容相关的输入框放到一个group里面。

Tips & Share

• 分享 Vue.js 个人学习之路，参考官网教程：https://cn.vuejs.org/v2/guide/ 和 http://www.runoob.com/vue2/vue-tutorial.html
• 安装，看到这个词总是觉得怪怪的。我个人觉得，下载vue相关的js文件，或者使用官方提供的cdn，新建一个本地html文件，就可以开始学习了。
• 数据绑定：{{}} 直接写到html文本中，双括号中也可以使用 JavaScript表达式；v-html 用法和普通的属性类似；v-bind 用来绑定属性；v-on 监听事件；v-model 用来在 input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。

    



    

        {{message}}

        {{5+5}}

        {{ message.split('').reverse().join('') }}

        

        
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        
        
百度
        
{{ message_rev }}
        反转字符串
        

            
{{ message_model }}
            
        
    

v-bind 和 v-on 有缩写：

• 条件与循环

    
        
        
    
    
        

            ifseen
            elseifseen
            elseseen
            showseen
        

            
迭代--数组
            

                

                    {{item.name}}
                
            
            
迭代时候使用 key value index
            

                

                    {{value}}--{{key}}--{{index}}
                
            
            
迭代--对象
            

                

                    {{item}}
                
            
            
迭代时候使用 key value index
            

                

                    {{value}}--{{key}}--{{index}}
                
            
            
迭代--整数
            

                

                    {{item}}
                
            
            
迭代时候使用 key value index
            

                

                    {{value}}--{{key}}--{{index}}
                
            
        
        
    
    

从输出结果可以看到：迭代遍历的时候 key value index 有特殊意义，如果遍历的是数组和整数是没有index值，如果遍历的是object，使用 key value index进行迭代遍历会更方便。

• 组件化，教程上都是比较简单的例子，详细学习的时候需要一个更加复杂的例子。