joeyko
探索云世界
joeyko
暂无个人介绍
暂时未有相关通用技术能力~
阿里云技能认证
详细说明Ant Design Pro 是一款适用于中后台的前端框架，基于React, dva.js, Ant Design。 关于路由的问题 在 src/common/router.js 中， 配置路径如下： /A /A/B /A/C 那么 2 和 3 是访问不到的，这里引用官方的解决方案 关于dva.js的使用 尽可能的将所有处理数据交互的操作都放在 src/models 中，方便管理，同时也可以将业务逻辑有效的分离出来 业务场景： 通过modal提交表单，POST成功之后需要有一个回调函数来关闭modal model file (*.js) *fetch({ payload, callback }, { call, put }) { // request here if (callback) callback() // ** 回调函数 ** }) page file (*.js) this.props.dispatch({ type: '***', payload: '***', callback: () => { // callback function } }) 一个页面，两个表单的处理 初步解决方案，将每个表单分离成一个高阶组件，具体代码如下： // Todo // 1 // 1
React 的事件名称都是使用驼峰标识(比如camelCase) 通过 JSX 可以传递一个函数作为事件处理 HTML: <button onclick="activateLasers()"> Activate Lasers </button> React: <button onclick={activateLasers}> Activate Lasers </button> 当你使用ES6 class定义组件时： class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // This binding is necessary to make `this` work in the callback this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } } ReactDOM.render( <Toggle />, document.getElementById('root') ); 在JavaScript中，类方法没有默认绑定this。如果你忘记绑定this.handleClick就将它传递给onClick, 当函数被调用时this将会被赋值undefined 有时候你会觉得使用bind很麻烦，有两个方法可以简化。 1. 使用实验性的语法public class fields syntax class LoggingButton extends React.Component { // This syntax ensures `this` is bound within handleClick. // Warning: this is *experimental* syntax. handleClick = () => { console.log('this is:', this); } render() { return ( <button onClick={this.handleClick}> Click me </button> ); } } 这种语法在Create React App的方式中是被默认的 2. 如果你并没有使用class的语法，可以在回掉中使用箭头函数 class LoggingButton extends React.Component { handleClick() { console.log('this is:', this); } render() { // This syntax ensures `this` is bound within handleClick return ( <button onClick={(e) => this.handleClick(e)}> Click me </button> ); } }
React 中创建 Components 的方式有两种：Function and Class 定义一个组件最简单的方法就是写一个 JavaScript 函数 function Welcome(props) { return <h1>Hello, {props.name}</h1> } 因为Welcome函数接受单个携带数据的props对象并且返回一个React元素，所以它就是一个组件。这种通过字面表达式函数创建的组建通常叫做functional 当然你也可以通过ES6 class的语法来定义一个组件 class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } 要说明的是从 React's 的角度以上两种定义组件的效果是相等的 那什么时候需要用 Class 方式来定义组件呢 在需要使用一些额外的特点的时候比如 state 和 lificycle 的情况下，就应该使用 Class 来定义组件 在 Class 中添加 State 官方文档指明：Class 方式创建的组件必须总是调用带有 props 的构造器 class Clock extends React.Component { constructor(props) { // 注意这里将props传入了构造器 Class 方式创建的组件必须总是调用带有 props 的构造器 super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } 在 Class 中添加 lifecycle方法 在有很多组件的大型应用中，当在组件被销毁的时候及时地释放资源是非常重要的。 class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } // 当 Clock 第一次渲染到 DOM 时创建一个定时器，在 React 中叫做 mounting componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } // 当 Clock 被移除的时候需要清理掉这个定时器， 在 React 中叫做 unmounting componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('root') ); componentDidMount 和 componentWillUnmount 被叫做 lifecycle hooks
create-react-app方式下引入antd 由于create-react-app构建React App的方式推荐zero-configuration（零配置），所以只能通过 npm run eject 的方式来讲所有的配置项暴露出来。要注意的eject操作是不可逆转的。 进入 项目根目录 安装antd npm install antd --save 安装完 antd , 默认所有的组件都会被引入，那项目将会变得很庞大，antd提供了按需加载的方式 步骤 安装babel-plugin-import npm install babel-plugin-import --save-dev 暴露配置项 npm run eject 配置按需加载 暴露配置项之后，会生成一个config的文件夹，首先我们先配置dev模式。prod模式与dev模式的配置相同。 打开webpack.config.dev.js文件 * 即添加以下代码 * plugins: ['transform-runtime', ['import', { libraryName: 'antd', style: 'css' }]] 运行项目npm start
required IE10+ autofocus 在页面载入后，自动获取输入框焦点 IE10+ maxlength 主流浏览器都支持 对于textarea，IE10+才起作用 如果需要往下兼容，可以使用js的substr方法进行截取
原文链接 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#defining_a_mixin 定义一个Mixin: @mixin @mixin large-text { font: { family: Arial; //会编译成font-family... size: 20px; weight: bold; } color: #ff0000; } 因为一些历史遗留问题，Mixin的命名可以连字符与下划线互换的，也就是说，large-text这个mixin也可以这样引入：include large_text，反之亦然。个人还是建议使用连字符来命名以及使用变量 引入一个Mixin: @include .page-title { @include large-text; padding: 4px; margin-top: 10px; } 最后被编译成： .page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; } Mixin中也可以包含其它mixin，例如： @mixin compound { @include highlighted-background; @include header-text; } @mixin highlighted-background { background-color: #fc0; } @mixin header-text { font-size: 20px; } Mixin的参数 Mixin可以传递SassScript值作为参数，这个值就是在include的时候指定的。 @mixin sexy-border($color, $width) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue, 1in); } 被编译成： p { border-color: blue; border-width: 1in; //1in代表1英尺 border-style: dashed; } Mixin也能够指定参数的默认值，当你在include mixin的时候，如果没有传递参数，那么将使用默认值；如果重新传递了参数，那么就会覆盖默认值。 @mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue); } //使用了默认宽度 h1 { @include sexy-border(blue, 2in); } //覆盖了默认宽度值 被编译成： p { border-color: blue; border-width: 1in; border-style: dashed; } h1 { border-color: blue; border-width: 2in; border-style: dashed; } 关键字参数 显式关键字参数方式引入 p { @include sexy-border($color: blue); } h1 { @include sexy-border($color: blue, $width: 2in); } 虽然这样看上去并不简洁，但是它的可读性更高了。 最大的优点是允许以任何顺序进行传参。 可变参数 对于一个s允许有不确定个数的参数是非常有意义的，比如说box-shadow属性，它允许定义多个阴影，可能有时候你也无法确定你需要的阴影个数，这时候你就需要Variable Arguments。 @mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); } 被编译成： .shadows { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; } 可变参数也可以以关键字方式传入： @mixin colors($text, $background, $border) { color: $text; background-color: $background; border-color: $border; } $values: #ff0000, #00ff00, #0000ff; .primary { @include colors($values...); } $value-map: (text: #00ff00, background: #0000ff, border: #ff0000); //使用了keywords($args)的方法， .secondary { @include colors($value-map...); } keywords($args) function 被编译成： .primary { color: #ff0000; background-color: #00ff00; border-color: #0000ff; } .secondary { color: #00ff00; background-color: #0000ff; border-color: #ff0000; } 还可以在s中引入其它： @mixin wrapped-stylish-($args...) { font-weight: bold; @include stylish-($args...); } .stylish { // $width参数将作为关键字传入"stylish-" @include wrapped-stylish-(#00ff00, $width: 100px); } 传递内容块给一个mixin 通过@content来传递内容块 @mixin apply-to-ie6-only { * html { @content; } } @include apply-to-ie6-only { #logo { background-image: url(/logo.gif); } } 被编译成： * html #logo { background-image: url(/logo.gif); } 变量范围与内容块 在mixin外部申明的内容块的变量作用域无法指向mixin内部参数，例如下面的列子所示，$color指向全局作用域 $color: white; @mixin colors($color: blue) { background-color: $color; @content; border-color: $color; } .colors { @include colors { color: $color; } } 被编译成： .colors { background-color: blue; color: white; border-color: blue; }
map // Define the callback function. const AreaOfCircle = (radius) => { let area = Math.PI * (radius * radius); return area.toFixed(0); } // Create an array. const radii = [10, 20, 30]; // Get the areas from the radii. let areas = radii.map(AreaOfCircle); document.write(areas); // Output: // 314,1257,2827 reduce // Define the callback function. const appendCurrent = (previousValue, currentValue) => { return previousValue + "::" + currentValue; } // Create an array. const elements = ["abc", "def", 123, 456]; // Call the reduce method, which calls the callback function // for each array element. let result = elements.reduce(appendCurrent); document.write(result); // Output: // abc::def::123::456
Airbnb React/JSX 编码规范
国外的 Material UI使用 Google's Material Design 的设计风格 国内的 Antd 阿里出品的组件库
使用阿里巴巴的镜像服务器 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 利用cnpm安装需要的模块 $ cnpm install [name]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-transform: uppercase; width: 200px; height: 40px; border: 1px solid #000; background: -webkit-linear-gradient(90deg, #fff, #fff, #000, #000); background: -moz-linear-gradient(90deg, #fff, #fff, #000, #000); background: -o-linear-gradient(90deg, #fff, #fff, #000, #000); background: linear-gradient(90deg, #fff, #fff, #000, #000); background-size: 300% 300%; background-position: 1% 50%; transition: all 1s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -o-transition: background 0.3s ease; outline: none; cursor: pointer; } input:hover { color: #fff; background-position: 99% 50%; } </style> </head> <body> <input type="button" value="button"> </body> </html> 这个是利用background-position属性的变化实现的渐变效果 还可以通过box-shadow属性来实现这种动画效果，只是颜色不会有一个平滑的过度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } body { font: 14px/1.5 Arial; box-sizing: border-box; } .btn { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-transform: uppercase; width: 200px; height: 40px; text-decoration: none; color: #fff; text-align: center; line-height: 40px; border: 1px solid #d91222; -moz-box-shadow: 200px 0 #d91222 inset; /*通过正负值调整变化方向*/ box-shadow: 200px 0 #d91222 inset; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .btn:hover { box-shadow: 0 0 #d91222 inset; color: #d91222; } </style> </head> <body> <div><a href="javascript:void(0)" class="btn">Hover me</a></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { float: left; margin-right: 5%; } a { display: block; } /*关闭按钮*/ .close { width: 40px; height: 40px; position: relative; } .close:before, .close:after { content: ''; position: absolute; top: 50%; width: 40px; height: 1px; background-color: #888; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /*箭头部分*/ .down-arrow { width: 40px; height: 40px; } .down-arrow:after { content: ''; display: block; width: 25px; height: 25px; border-right: 1px solid #888; border-top: 1px solid #888; -webkit-transform: rotate(135deg); /*箭头方向可以自由切换角度*/ transform: rotate(135deg); } </style> </head> <body> <div><a href="javascript:void(0)" class="close"></a></div> <div><a href="javascript:void(0)" class="down-arrow"></a></div> </body> </html> 效果图
http://jsbin.com/xafeniyaqu/edit?html,js,output
Line <svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke: rgb(255, 0 ,0); stroke-width: 2" ></line> </svg> 直线就是一条线段 Polygon<svg height="210" width="500"> <polygon points="200,10 300,180 180,190" style="fill:#ccc; stroke:#000; stroke-width: 2" ></polygon> </svg> <svg height="210" width="500"> <polygon points="200,10 140,200 300,75 100,75 260,200" style="fill:#ccc; stroke:#000; stroke-width:5;fill-rule:evenodd;" ></polygon> </svg> Polyline <svg height="200" width="500"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="stroke-width: 3; stroke: #000; fill: none"></polyline> </svg> <svg height="200" width="500"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160 160,160" style="stroke-width: 3; stroke: #000; fill: none"></polyline> </svg>
Note: Since SVG is written in XML, all elements must be properly closed! <!DOCTYPE html> <html> <body> <h1>My first SVG</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="#000" stroke-width="4" fill="#ccc" /> </svg> </body> </html> The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0) The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4px green "border" 当然画圆、矩形以及带圆角的矩形大可不必用SVG，普通的CSS就可以搞定。 但如果是画一个椭圆呢？其实如果用CSS设置它的水平半径和垂直半径就行了border-radius: 50px / 100px; 但有了SVG就可以很简单的画出椭圆以及更复杂的矢量图形了。 <svg width="400" height="200"> <ellipse cx="200" cy="100" rx="180" ry="80" style="fill: #ccc; stroke: #000; stroke-width: 4" /> </svg> 叠层的椭圆 <svg width="400" height="200"> <ellipse cx="190" cy="100" rx="180" ry="30" style="fill: red" /> <ellipse cx="180" cy="70" rx="160" ry="20" style="fill: green" /> <ellipse cx="170" cy="45" rx="140" ry="15" style="fill: blue" /> </svg>
发表了文章
2016-10-22
发表了文章
2016-10-24
发表了文章
2016-11-03
发表了文章
2016-11-21
发表了文章
2016-11-22
发表了文章
2016-12-07
发表了文章
2016-12-08
发表了文章
2016-12-20
发表了文章
2016-12-21
发表了文章
2016-12-23
发表了文章
2017-01-07
发表了文章
2017-09-24
发表了文章
2017-09-30
发表了文章
2017-09-30
发表了文章
2018-02-08
