小经验分享

今天想分享一些日常开发中的一些小经验。


经验一、从webpack项目中的require开始说

有个非常聪明的A写了一段代码:

let list = ['a', 'b', 'c'];  
let components = list.map((item) => {  
  return require('/components/'+item+'/index.js');
});

我承认这段代码是我瞎邹的~

有一天,他同事B看到,惊奇的怀疑道,你的require怎么能这样用呢,这种用法只能在nodejs中用的,你一定搞错了。

A说,我用的好好哒,线上跑的棒棒哒~,有谁规定只能在nodejs中用呢?

B 。。。? & # @ !

B为了证明A是错的,查阅了大量文档,结果。。。webpack真tmd能这么干,原理竟是这样~

如图所示,webpack编译生成一份中间文件matchedResults.js,此文件被引入并被编译,这样,开头的代码就能工作了,不过仍然有需要注意的:

  • /components/目录中符合规则的文件会被全被加入;
  • 开头list数组遍历是无法控制编译时加入的文件列表,所以数组所包含的项一定要和匹配出来的结果一致。

经验二、香喷喷的svg图标

你还在使用字体呀!你还在折腾对齐呢!都一样的颜色,有意思么。。。

是不是说到你内心痛处了,如果你正在使用reactwebpack,推荐一款webpack插件svg2react-loader,像react组件一样来使用svg。

let SmileIcon = require('svg2react!smile.svg');

ReactDOM.render(  
    <SmileIcon className="something" />,
    document.body
);

肯定不能凭这么弱智的伎俩出来混。。。来点有用的料

我的项目大量使用了svg图标,目录如下:

src/  
  |-other...
  \-icon/
    |-svgs
      |-smile.svg
      |-cry.svg
      |-angry.svg
      \-happy.svg

难道我要在使用的地方像上面一个一个的require进来吗?太不优雅了!我要像下面这么用:

let Icon = require('icon');

ReactDOM.render(<div>  
  <Icon name="smile" className="my-icon" />
  <Icon name="cry" className="my-icon" />
</div>, document.body);  

好哒~,在icon/加个index.js文件,内容如下:

function getIcon(name) {  
  return require('./svgs/' + name + '.svg');
}
class Icon extends React.Component {  
  render() {
    let SvgIcon = getIcon(this.props.name);
    return <SvgIcon className={this.props.className} />
  }
}
module.exports = Icon;  

结合上一黑,搞定,效果见http://lab.onbing.com/practice-1/index.html#icons

经验三、svg版checkbox

svg这么好用,一定要让TA试遍各种姿势~

以前我们模拟checkbox,用过俩个图片交替,再然后用了背景移动,可能还会用一些其它我不太喜欢的方式,前端就是感性的一生,不喜欢就是不对。。。

我的checkbox设计如下:

有两段路径path1、path2

  • 默认没勾选,让path2透明度为0;
  • 鼠标悬停path2透明度为0.3;
  • 勾选path2透明度为1。

原理就这么多,实现起来也不困难,代码就不贴在这了。。。

效果见:http://lab.onbing.com/practice-1/index.html#checkbox

结语

以上实践代码见:https://github.com/yanbingbing/practice-1

是不是还意犹未尽呢,来个第二弹预告:

  • 你是不是经常继承EventEmitter来让一个类可以绑定事件呢,我们将推荐一种不继承,而且很优雅的实现;
  • 你是否被reflux、redux弄晕了呢,我们是否可以抛开各种框架,自己来架构。