dangerouslySetInnerHTML 的使用

不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候,经常会出现错误,不合适的净化也是导致网页攻击 的原因之一。

Read more   2018/12/6 posted in  Front-end

CSS动画使用技巧

直接上一个点击事件触发动画的例子(里面已经能够涵盖大部分的常用点),剩余的技能点再另外补充

Read more   2018/11/27 posted in  Front-end

CSS文本布局技巧

CSS 实现文本超出限定行数使用省略号

多行实现:

.over_hidden {
    width: 200px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5; //行数
    -webkit-box-orient: vertical;
    word-break:break-all;
}

多行实现:

.over_hidden {
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -moz-text-overflow:ellipsis;
    white-space:nowrap;
}

Read more   2018/11/24 posted in  Front-end

ES6--Module 语法(export / import)

在ES6之前使用的模块加载方案是CommonJSAMD两种,前者用于浏览器,后者服务端。两者需要在运行时确定。

ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。__ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。__

import { stat, exists, readFile } from 'fs';
Read more   2018/11/5 posted in  Front-end

React 定义方法和事件参数传递

在方法中要获取this.state中的数据

改变this指向的三种范式

  • 在方法绑定的时候赋值this

        <button id = "jake" onClick={this.getInput.bind(this)}>获取input值</button>
    
  • 在类(组件)初始化的时候进行赋值

        this.getMessage = this.getMessage.bind(this)
    
  • 将方法改成箭头函数(此方式使用得最多)

    run = (event) => {
        alert(event)
    }
Read more   2018/10/31 posted in  Front-end

React官方文档阅读记录

元素

React元素都是不可变的,当元素被创建之后,你是无法改变其内容或属性的。更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法。

React DOM会比较元素内容先后的不同,在渲染过程中只更新改变了的部分。

Read more   2018/10/30 posted in  Front-end

使用DvaJS脚手架

项目地址: DvaJS

按照上面地址中的教程
使用脚本生成项目后,进行运行发生了如下错误

➜  dva-quickstart npm start

> @ start /Users/jakehu/Desktop/H5_Study/React/dva-quickstart
> roadhog server

sh: roadhog: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ start: `roadhog server`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
Read more   2018/10/29 posted in  Front-end

VSCode开发React常用插件

Read more   2018/10/28 posted in  Front-end

React 开发环境搭建

Read more   2018/10/26 posted in  Front-end

CSS页面居中布局技巧

覆盖css的方式

  • class中的样式是从上到下加载进行覆盖
  • 元素的id属性比class有更高的优先级,会覆盖class的样式
  • 行内样式的优先级最高,能覆盖掉<style>标签中的所有样式
  • !important关键字会防止样式被覆盖掉
.pink-text {
    color: pink  !important;
}

Read more   2018/10/25 posted in  Front-end