Hike News

mini-project-2017

昨晚开了前端分享会,学姐和boss为我们答疑,记录下来备忘

  • MVC:Model-View-Controller(一种很好的抽象)。

    • 视图(View):用户界面
    • 控制器(Controller):业务逻辑
    • 模型(Model):数据保存
      1. 用户可以向 View 发送指令(DOM 事件),再由 View 直接要求 Model 改变状态。
      2. 用户也可以直接向 Controller 发送指令(改变 URL 触发 hashChange 事件),再由 Controller 发送给 View。
      3. Controller 非常薄,只起到路由的作用,而 View 非常厚,业务逻辑都部署在 View。所以,Backbone 索性取消了 Controller,只保留一个 Router(路由器) 。//参考http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
      4. M&V通过C通信,V串联DOM与M,由于解耦 MV换掉也没关系?
  • 同步异步:

    • 同步:服务端,有模板,发一个请求,马上回来个html
    • 异步:客户端,无模板只有数据,返回来json数据交换

  • 怎么写同步路由文档:有几个页面,(URL,描述,参数,模板的)表格。
  • 怎么用ninja mock一下数据:mock.json & home.html
  • 把大致的结构写出来是什么意思: 不管UI,分组件,建号文件夹目录树,html写好,(图片上传,列表)
  • 怎么分组件: 功能分,例如文章内容+评论是两个; 例如整页列表+某项列表是两个。
  • 下一步具体做什么:看backbone.js http://backbonejs.org/ 文档;
    看PDF书的两章,做TODO:https://addyosmani.com/backbone-fundamentals/

2016-yearEnd-personalSummary

2016-10

2016-11

2016-12

  • 浅尝辄止地点水js
  • 命令行的问题尽量自己解决,前端问题找导师
  • 蜜汁期末到了开始方

little contributions

个人存在的问题与不足

  • 由于是多线程的学习,从萌新小白到–有编码有c有html有css有js有熟悉git有Unix有task等新人任务,我就异常混乱,把握不好他们的关系和时间分配的问题。作为导火索导致了后面两个问题。这个问题直到2017还没有解决orz
  • 平时学业与木犀的任务还可以更好的去平衡。
  • 题几乎没刷,是个切图仔。

寒假计划&2017的期待

js-DOM

五个常用DOM

  • getElementById
  • getElementsByTagName
  • getElementsByClassName
  • getAttribute
  • setAttribute

DOM

document-object-model

  • 把编写的网页文档转化为文档对象
  • 对象的三种类型:
    • 用户定义对象 user-definded object :程序员自行创建的对象
    • 内建对象 native object : 内建在js语言里的对象Array、Math、Date
    • 宿主对象 host object : 由浏览器提供的对象。
  • DOM树
    • parent
    • child
    • sibling
  • 节点node
    • 元素节点:body p ul
    • 文本节点: 一般包含在元素节点内部、可以不存在
    • 属性节点:title id等等

rebuild-task-xueer

  • 这是关于学而的第三篇文章

    第一篇是做xueer之前的配置;第二篇是做的过程以及issue之后的修改;这一篇将是一些反思与巩固。

  • body{margin:0px;
    padding:0px;
    }
    用于去除自带的边框。注意:没有点.
  • header宽度写100%,铺开页面,不要写死,尽量兼容。

  • header的高度写死一次之后,其子元素的高度要用百分比写,这样要求修改时,省时省力。

  • 第一次使用top:calc(% - px;);position:relativel;来改变位置。

  • 查text-align:center;

  • 查vertical-align:top;玄学问题。

  • 查在父元素下font-size:0;可以使其子元素inline-block毫无空隙了。

  • 查可爱的按钮样式border:red 2px solid;border-style;

  • 查常用的box-sizing:border-box;

  • 添加按钮的背景图片,要background-image:url(“”);

  • main 宽度写死之后用 margin:0 auto; 来居中。

  • border-radius: 12px 12px 12px 12px;
    height: 12px;
    width: 12px;画圆。

  • width: 90px;
    height: 90px;
    border: 2px #1dc091 solid;
    -webkit-border-radius: 100px;画圆环。

  • border-right: 2px solid #eeeeee; 画右边框。

  • white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;单行溢出文本省略。

  • text-decoration: none;去除超链接的下划线。

  • 查border-radius: xx%;

  • a:hover{
    color: red;
    }
    div.h1:hover{
    color: red;
    }鼠标掠过变色。


下面查找一些资料:

  • top:calc(% - px;); 点击看calc用法归纳

    点击查看英文用法介绍
  • text-align: left | right | center | justify | match-parent;文字相对于他的块父元素对齐。不能改变块元素自己的对齐,只能控制他的行内内容的对齐。左-右-中间-拉伸-相对于父元素对齐。

  • vertical-align:baseline | sub | super | text-top | text-bottom | middle | top | bottom | |
    只有一个元素是属于inline或是inline-block,才起作用。

    肯定不行了。参考资料

  • inline-block的父元素中加上 font-size:0;去除空隙。

  • border-style的参考资料

  • box-sizing:border-box;此元素的内边距和边框不再会增加它的宽度防止盒子被撑破、避免计算边距

  • border-radius: xx%;

    “/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,top-left、top-right、bottom-right、bottom-left.圆角的设置

    英文参考资料–px;%;

存有疑问–> 比如直接写px不写%是怎么回事orz。。。


END-by WWY.2016-12-17

xueer-task

  • 上上篇讲述了做学而task之前的命令行操作,这篇就记录一下学而task的完成过程。(虽然有好多bug,但是她作为自己的第一个静态页面task,能写下来我还是好开心的)

一.我先布局,研究写html的div(顺便第一次做笨笨的画了个图

  • 觉得应该是整体拆分为三个大块:header,main,footer。
  • 之后按照大块再细分每个小盒子里面的div,写html。

二.header部分

  • 忘记了一个属性:placeholder=”课程名、标签” ,作为提示词。
  • 这里的body的margin,padding。 去除了间隙。

    top:calc( );position: relative; 实现了垂直居中。

    vertical-align: top; 使其紧贴在顶部

    index 处 使用了抽象。
    text-decoration: none;使得去除超链接的下划线。

    border:red 2px solid; 边框加颜色、粗细、边框样式。

    background-image: url(“http://p1.bqimg.com/4851/527ea2d653366686.png“) 使得按钮加入了背景图片。

三.main部分

  • <div class="circleA">公</div>这样可以在图形里面加上文字,我竟然才知道。

    h1h2h3light同样也用了四次抽象。
  • border: 2px #1dc091 solid;
    -webkit-border-radius: 100px; 实现圆形边框。

    border-right: 2px solid #eeeeee; 实现小竖条右边框。

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; 实现单行溢出文本省略.

    a:hover{
    color: red;
    }选择器实现鼠标略过变色。**

四.footer部分。

1
2
3
4
5
6
7
8
9
10
<div class="footer">
<div class="sentenceA">
<div class="s1">最热课程动态</div>
<div class="s2">精心为您推荐最佳口碑课程No.1-No.5</div>
</div>
<div class="sentenceB">
<div class="s1">猜你喜欢课程</div>
<div class="s2">根据您的浏览记录,推荐相似课程列表</div>
</div>
</div>
  • s1 s2 两次抽象
  • border-top: 2px solid #eeeeee; 设置上边框颜色型号。

    margin: auto; 实现居中布局。

五.导师提issue。

冗余的属性和不必要的固定值

.header{
width:100%;
margin:0 auto;
}

//宽度已经是100%,也就没有居中了吧

.header{ height :80px;}

//如果想要它的子元素的高度与它一样。可以给子元素设 height:100%;

这样的好处是当我们想修改导航栏的高度时,不用找出所有的height:80px,只需要修改父元素上面的height。

.main {
width: 1137px;
height: 700px;
}

//main 的宽度应该是占满整个屏幕的宽度的,高度也不需要写,它的子元素会它的高度撑开的。

.footer{
width: 1137px;
height: 500px;
}

.sentenceB{
height:250px;
}

//同理还有很多,找出来,修改过来吧

布局还是导航栏,这种inline-block的布局,尽量不要使用left,right来布局,用margin控制间距就可以了。同样还有banner的居中,课程列表栏底部的加号的居中,可以用margin.

代码的复用:

课程列表分了4栏,写了4个class,里面的样式有很多都是一样的,不妨把它写到一个.list 里面.
样式还不完善的地方:
按钮的样式.
课程列表内容和边框有一定距离.
list前面的黑点也不在文字的中间

六.修改

  • 抽象出来了好多重复的css;优化了盒子(增删);改变布局(footer);了解了margin,height等等不能写死。
  • 优化后代码见仓库

Linux&Unix大学教程-第13章作答

1.1什么是字符数字式字符、元字符?列举三种,展示用途。

  • 字符数字式字符:键入希望键入的,即所见即所得的,字母和数字。
  • 元字符:使用shell时,许多其他字符拥有特殊意义。
  • 列举如下:
    • 使用星号-文件名拓展:匹配0或多个字符。
    • & 和号-作业控制:在后台运行命令。
    • $美元符号-变量:用变量的值替换。

1.2写出下列绰号

  • 星号–星号
  • 输入。回车–新行
  • 感叹号–bang
  • 点号–点
  • 引号–双引号
  • 竖线–管道

1.3引用字符的三种不同方式是什么?如何区别?

  • 1.反斜线—引用单个字符:

    echo It is warm and sunny\; come over and visit

如果没有\,就是两个命令:echo,come

  • 2.单引号—引用一串字符:

    echo It is warm
    ‘(and sunny);come over & visit’

    echo It is warm’(and sunny);’comr over \& visit

  • 3.双引号—引用一串字符,但是保留 美元,反引号,反斜线 的特殊含义。

    echo “My userid is <$USER>; my terminal is <&TERM>”

1.4什么是内置命令?在哪里查找内置命令的文档材料?

  • 在输入命令时,shell将命令分成不同部分,进行解析,之后shell决定如何处理命令。而一些命令在shell内部,shell可以直接解析他们,这些命令叫做内置命令。
    • Korn shell

      man bash

      man ksh

      man tcsh

      man csh

    • 查看是否有说明书页

      apropos builtin

    • 快速查看内置命令列表—Linux & FreeBSD

      man builtin

    • 快速查看内置命令列表–Solaris

      man shell_builtins

    • Linux还有个help命令

      help [-s] [command(命令名称)]

      • help

        help | less 每次一屏地显示信息。

      • help set

        help pwd history kill

        help help 利用help显示一条或者多条具体命令的信息。而help本身也是一个内部命令。

1.5什么是搜索路径?如何显示搜索路径?

  • 搜索路径是:包含所有外部命令的程序的目录列表。命令不是内置的,shell必须查找出合适的程序来运行。比如date,搜索路径中的一个目录里面-包含存放date的文件。
  • 查看搜索路径,显示PATH的值即可:

    echo $PATH

    典型的输出是

    /bin: /usr/bin: /usr/ucb: /usr/local/bin: /home/harley/bin

1.6什么是历史列表?最简单最常见的历史列表应用就是重新执行前面的命令,这是如何完成的呢?如果使用Bash或者Tcsh,那么如何调取、编辑然后再执行前面的命令呢?

  • 在输入命令时,shell会将命令保存在所谓的历史列表中。历史列表会记录之前输入过的诸多命令。
  • 重新执行前面的命令,需要按一下就好了。
  • 两种情况:

    • 对于Bourne shell家族(Bash,Korn shell),可以使用fc命令加上-l(list列举)选项显示历史列表。

      fc -l

    • 对于C-Shell家族(C-Shell,Tcsh),可以使用history命令。

      history

    • 以上两种输出为每行一个事件,事件前面有编号。如果历史列表太长了,可以用less命令。

      history | less

    • 如果重新执行之前的某一个命令(编号为24),可以用 -s(Bash shell) 或者用 !(bang)(C-Shell)

      fc -s 24

      !24

    • 如果要执行前一个命令

      fc -s

      !!

    • 如果要修改一个命令

      打开data,不是tempfile文件

      fc -s tempfile=data 25

      !25:s/tempfile/data/

      输入date,不是datq

      fc -s q=e

      ^q^e

1.7什么是自动补全?自动补全有多少种类型?简述各种类型的自动补全各自完成什么补全。哪种类型的自动补全是最最重要的?

  • 在任何时候,都可以按下一个特殊的键组合,然后shell就会尽量地自动补全当前的单词。
  • 对于Bash、Korn shell、C-Shell、Tcsh来说,自动补全有五种类型。我的好像是Tcsh。
    • BKCT –文件名补全 –补全文件和目录
    • BT –命令补全 –补全命令,包括路径名
    • BT –变量补全 –补全变量
    • BCT –用户标识补全 –补全系统上的用户标识
    • B –主机名补全 –补全局域网上的计算机
  • 文件名补全最常用,当知道希望键入什么,但是记不清完整文件、目录名称时,自动补全非常方便啦。

2.1如何修改Bash的shell显示,以显示用户标识、工作目录、还有当前时间?在Tcsh的shell提示中又是如何实现相同修改的吗?

  • shell提示:

    • Bash:

      $ date

    • Tcsh:

      % date

      date

    • 超级用户:

      /# date

  • 修改Bash的shell显示:

  • USER:
    • ➜ ~ export PS1=”$USER$ “

      ➜ ~ echo “ID is ${USER} “

      ID is qianziqianshang

    • ➜ ~ set prompt = “$USER> “

      ➜ ~ echo “ID is ${USER} “

      ID is qianziqianshang

  • TIME:
    • Bash:

      export PS1=”\d \@$ “

    • Tcsh:

      set prompt = “%d %w %D %@> “

  • PWD:
    • zsh

      echo “$PWD “

    • Bash

      echo “$PWD$ “

    • Tcsh

      echo “$PWD> “

2.2什么是命令替换?创建一条命令:“These userids are logged in right now:”,后面紧跟用户标识列表。

  • 什么是命令替换?—命令替换允许一条命令嵌入在另一条命令里,shell首先执行嵌入的命令,并且输出替换该命令,然后shell再执行整个命令。
  • set prompt = “$USER> “

    echo “These userids are logged in right now: ${USER}”

2.3修改历史列表

如图所示---

2.4自动补全时,引入文件需要的最低字符是多少?

  • datanew —5
  • dataold —5
  • important —1
  • phonenumbers —2
  • platypus —2