ARTS-第2周-190325

最新推荐文章于 2022-04-03 15:59:54 发布

原创最新推荐文章于 2022-04-03 15:59:54 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了ZigZag字符串转换算法，通过特定规则将字符串转换成Z字形排列，再按行读取生成结果。提供了两种实现思路，并附带了一个Vue.js示例，展示了数据绑定、条件渲染和循环的基本用法。

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

给出的参考方案有两种：

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

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)<s.Length)
        {
            result += s[(((j + 1) * (numRows + (numRows - 2))) - i)];
        }
    }
}
return result;

以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等表单控件元素上创建双向数据绑定。

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{message}}<br>
        {{5+5}}<br>
        {{ message.split('').reverse().join('') }}<br>
        <div v-html="message_html"></div>
        <span v-bind:title="msg_bind">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
        <pre><a v-bind:href="url">百度</a></pre>
        <p>{{ message_rev }}</p>
        <button v-on:click="reverseMessage">反转字符串</button>
        <div>
            <p>{{ message_model }}</p>
            <input v-model="message_model">
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js!',
            message_html: 'hello html',
            msg_bind: '页面加载于 ' + new Date().toLocaleString(),
            url: 'https://www.baidu.com',
            message_rev: '反转字符串',
            message_model: 'v-model'
        },
        methods: {
            reverseMessage: function () {
                this.message_rev = this.message_rev.split('').reverse().join('');
            }
        }
    });
</script>

</html>

v-bind 和 v-on 有缩写：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<a v-on:click="onclick"></a>
<!-- 缩写 -->
<a :href="url"></a>
<a @click="onclick"></a>

条件与循环

<!DOCTYPE html>
<html>
    <head>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id='app'>
            <span v-if='seen'>ifseen</span>
            <span v-else-if='elseifseen'>elseifseen</span>
            <span v-else='elseseen'>elseseen</span>
            <span v-show='showseen'>showseen</span>
        <div>
            <div>迭代--数组</div>
            <ul>
                <li v-for='item in for_data_o_array'>
                    {{item.name}}
                </li>
            </ul>
            <div>迭代时候使用 key value index</div>
            <ul>
                <li v-for='(key,value,index) in for_data_o_array'>
                    {{value}}--{{key}}--{{index}}
                </li>
            </ul>
            <div>迭代--对象</div>
            <ul>
                <li v-for='item in for_data_object'>
                    {{item}}
                </li>
            </ul>
            <div>迭代时候使用 key value index</div>
            <ul>
                <li v-for='(key,value,index) in for_data_object'>
                    {{value}}--{{key}}--{{index}}
                </li>
            </ul>
            <div>迭代--整数</div>
            <ul>
                <li v-for='item in 3'>
                    {{item}}
                </li>
            </ul>
            <div>迭代时候使用 key value index</div>
            <ul>
                <li v-for='(key,value,index) in 3'>
                    {{value}}--{{key}}--{{index}}
                </li>
            </ul>
        </div>
        </div>
    </body>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                seen:false,
                elseifseen:true,
                elseseen:false,
                showseen:true,
                for_data_o_array:[
                    { name:'name1'},
                    { name:'name2'},
                    {name:'name3'}
                ],
                for_data_object:{
                    key_1:'value_1',
                    key_2:'value_2',
                    key_3:'value_3'
                }
            }
        });
    </script>
</html>

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