2018.11

发表于 | 分类于 |
字数统计: 2k 字 | 阅读时长 ≈ 8 分钟

2018.11.02

1.JS获取上一访问页面URL地址

document.referrer

2.获取后跳转到指定页面，也可获取当前页面地址

document.location.href

2018.11.07

ant的输入框返回一个value，而不是整个值，比如输入123，返回的是1，2，3

处理：函数在失焦后执行,blur()

2018.11.09

1.router的history模式

1
history没有#

2.打包工具可视化

1
2
cnpm i -g @vue/cli
vue ui

3.vue ssr

服务器渲染，之前是浏览器渲染，服务器更快

2018.11.12

1.小技巧

1
微信聊天：新建一个文件夹，写上时间、名称，专门用于开发

2.process.browser

1
2
3
4
5
判断是否在浏览器环境中，在的话，可以调用window（因为vue ssr没有window）

if(process.browser) {
    console.log(localstorage)
}

3.服务器端的路由是全部注册好的，不用做区别，因为之前浏览器是为了加载速度

2018.11.14

1.写css

1
需要有一个大的id，包裹，减少环境污染

2.一个debug产生的想法

1
发现steps组件无数据->找steps组件，发现无数据传入->往上查找，发现父组件未传数据（因为不符合条件）

2018.11.16

1.git 坑1

1
2
3
4
git commit -a -> 去到奇怪的地方 -> 退出 -> git add . 报错：Unable to create 'D:/cms-open/.git/index.lock':File exists. -> 解决：rm -f ./.git/index.lock

git commit -a -m “massage”:
其他功能如-m参数，加的-a参数可以将所有已跟踪文件中的执行修改或删除操作的文件都提交到本地仓库，即使它们没有经过git add添加到暂存区，注意，新加的文件（即没有被git系统管理的文件）是不能被提交到本地仓库的。建议一般不要使用-a参数，正常的提交还是使用git add先将要改动的文件添加到暂存区，再用git commit 提交到本地版本库。

2.git 坑2

1
2
3
git commit 不成功 导致pull有冲突 -> git rebase --abort 回滚到pull之前 -> git pull 解决 

每次解决冲突后，git status 看看

2018.11.19

当要断其他点：比如 serer.js 或 router -> Debug(visual) -> Start bugging

2018.11.20

computed watch
当变量少，逻辑简单，使用推荐；如果变量多，逻辑复杂不推荐，因缓存 迫不得已才用

computed>watch

post put patch
创建一个新资源，不幂等 更新，要完整的资源对象，幂等（局部更新） 不幂等（局部更新）

幂等：在计算机范畴内表示一个操作执行任意次对系统的影响跟一次是相同的

2018.11.26

git reset –soft git reset –hard
回退到某个版本，只回退到commit 的信息，且之前修改的代码还在；如果还要提交，直接commit 即可 彻底回退到某个版本，本地的源码也会变为上一个版本的内容，撤销的commit 中新包含的更改被冲掉

2018.11.30

1.React

一、新特性(ES6)

let

  • 与var的区别
    • let声明的变量只在其声明的块或子块中可用，var声明的变量的作用域是整个封闭区域。
    • let不能变量提升，var可以
1
2
3
4
console.log(bar) undefined
console.log(foo) foo is not undefined
var bar = 1;
let foo = 2;
二、React是什么

一个采用声明式，高效且灵活的用来构建用户界面的框架

1
2
3
4
5
6
7
8
9
class ShoppingList extends React.Component {
    render(){
        return (
            <div class = 'test'>
                <h1>{this.props.name}</h1>
            </div>
        )
    }
}

ShoppingList 是一种React组件类。一个组件会接受名为props的参数，并通过名为render的方法返回一个嵌套结构的视图。React会根据你的描述讲对应的内容在屏幕上渲染出来。

在JSX语法中可以任意使用JavaScript表达式，只需用一个大括号把表达式括起来。

1).通过props传递数据

Board传 -> Square

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
calss Board extends React.Component {
    render Square(i) {
        return <Square value={i} />
    }
}

calss Square extends React.Component {
    render {
        return (
            <button className='Square'>
                {this.props.value}
            </button>
        )
    }
}
2).给组件添加交互功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
calss Square extends React.Component {
    constructor(){
        super();
        this.state = {
            value: null
        }
    }
    render {
        return (
            <button className='Square' onClick={()=>this.setState({value:'x'})}>
                {this.props.value}
            </button>
        )
    }
}

在Js classes中，必须使用super();方法才能在继承父类的子类中正确获取到类型的this

3).开发工具

React Devtools

三、状态提升
1).不可变性

当遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的state数据提升至其共同的父组件当中保存，之后父组件可以通过props将状态数据传递到子组件当中，这样应用当中的状态数据就能够更方便的交流共享了。

不可变性在React相当重要

  • slice()方法可以对已有的数组数据进行浅拷贝

改变应用数据方法

  • 直接修改
1
2
var player = {score:1,name:'Jeff'};
player.score = 2;
  • 替换修改
1
2
var player = {}
var newPlayer = {...player,score:2}
2).函数定义组件

React专门为只有render方法的组件提供了一种更简便的定义组件的方法：函数定义组件（写一个props为参数的function返回JSX元素即可）

1
2
3
4
5
6
7
function Square (props) {
    return(
        <burron className='Square' onClick={props.onClick}
            {props.value}
        </button>
    )
}

props.onClick 不能加(),会立即触发

3).轮流落子

用一个xIsNext操控

4).判断赢家
四、保存历史记录
1).展示每步历史记录链接

React元素事实上都是JS当中的对象，我们可以把元素当做参数或定义到变量中使用。在React当中渲染多个重复的项目时，我们一般都以数组的方式传递React元素，最基本的方法是使用数组的map方法。

1
2
3
4
5
6
7
8
const moves  = history.map( (step,move)=>{
    const desc = move?'Move #'+move:'Game start';
    return (
        <li>
            <a href='#' onClick={()=>this.jumpTo(move)}{desc}</a>
        </li>
    )
})
2).keys

强烈建议在渲染列表项时添加keys值，key值会和对应元素绑定。

所以

1
<li key={move}>

2.class判断

1
2
:class="{test:isTest==true}"
:class="test>0?'test':''"

3.React文档

一、JSX简历

JSX，一种javascrpt的语法扩展，用来声明react当中的元素。

1.在JSX中使用表达式

可任意在JSX中使用JS表达式：但要在大括号里；不要套引号，会识别为字符串；JSX标签是闭合的 结尾处用</>；reactDom使用小驼峰命名定义属性的名称，class=>className

2.书写JSX时，一般要带上换行和缩进——可读性
在JSX代码外，扩上一个小括号，防止分号自动插入

二、元素渲染
1).将元素渲染到DOM中

要把它们传递给ReactDom.render()

1
<div id='root'></div>
2).更新元素渲染

React元素都是不可变的，当元素被创建之后，无法改变其内容或属性，一个元素就像动画里的一帧，代表应用界面在某一时间点的样子。

React只会更新必要的部分

三、组件 & props
1).函数定义/类定义组件
1
2
3
4
5
6
7
8
9
function Welcome(props) {
    return <h1>Hello,{props.name}<h1>
}

class Welcome extends React.Component {
    render(){
        return <h1>Hello,{props.name}<h1>
    }
}
2).组件名称必须大写字母开头
3).props只读性
四、state & 生命周期