typescript结合react+electron桌面应用程序的实践(二)—路由篇

或许我们已经学会了最基本的配置,如何配置react路由、如何启动electron+react项目、typescript的描述文件、如果能掌握一点typescript的基本知识,再配置一点webpack【之前的博客】的基本loader,webpack的开发环境、生产环境配置,最最最基本的骨架已经可以修改和配置了,只需要在需要的时候查缺补漏就可以,剩下的事情或许就是写页面了。

react-router 4版本还是有很多注意的地方,代码就像情人,一段时间不见,就没感觉了,所以还是再熟悉一遍了。

本篇文章主要是转发,然后在原来的基础上进行实践和补充,原文链接

继续阅读“typescript结合react+electron桌面应用程序的实践(二)—路由篇”

typescript结合react+electron桌面应用程序的实践

本篇博客会记录从零开始构建react+electron+typescript的应用实例,源码地址

react是前端的热门框架,我们会练习使用组件,以及使用路由来分模块页面,封装简单的公用组件。内部的组件都是tsx后缀,加入了typescript的使用

electron是让我们实现桌面应用的框架,你可以理解为一个桌面应用的壳,在这个壳里面用HTML,CSS和JavaScript来构建跨平台桌面应用程序,Electron通过将ChromiumNode.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的

typescript是我们javascript的超集,这也是第一次结合使用,希望可以顺利了

继续阅读“typescript结合react+electron桌面应用程序的实践”

webapck入门学习【一】

我们在以往的项目中可能使用grunt或者是gulp来对我们的前端项目来做一个资源管理,比如上线发布之前,先执行一下gulp脚本来压缩一下图片或者混淆一下js和css,来让上线发布的文件变得尽量小一些,这样在请求的时候也会更快一些。或许你觉得够了,但是对于我这种不会gulp和grunt的人,还懒的学的来说。。。好像不够啊!而且这俩个在渐渐的落伍,那我不选webpack的话,好像会很傻的样子

继续阅读“webapck入门学习【一】”

【前端】webpack如何多入口配置多页面

现在前端SPA单页面这么流行,比如一套脚手架,我们在用到的时候连vue+vue-router等,甚至连webpack或者gulp等一套就集成了,里面只需要修改一些简单的配置,就可以解决跨域问题,但是,当我们项目慢慢大起来的时候,总要用到多页面的时候,那我们如何修改vue-cli或者是create-react-app这种脚手架中的默认配置呢?

继续阅读“【前端】webpack如何多入口配置多页面”

关于js数组去重的一些小九九

实际上点进来的时候,你就会大吃一惊的发现,这里集合了多少种javascript数组去重的方法,为了让点进来的人爱上这个博客,我可谓是撸尽了脑汁才整理了好久好久好久好久,还一个个的试验了一遍这些方法,不管是简单的[1,2,3,4]还是数组对象,还是根据数组对象的某一个元素来去重,可谓是煞费苦心啊!

我好想多bb几句,可是我严谨的爱学习的精神不允许我这样了。

继续阅读“关于js数组去重的一些小九九”

JavaScript 格式化日期时间

function datestr(fmt, d) {
    var fmt = fmt || 'yyyy-MM-dd hh:mm:ss';
    var d = d || (new Date());
    var o = {
        'M+': d.getMonth() + 1,
        'd+': d.getDate(),
        'h+': d.getHours(),
        'm+': d.getMinutes(),
        's+': d.getSeconds(),
        'qq+': Math.floor((d.getMonth() + 3) / 3),
        'S+': Math.round(d.getMilliseconds() / 10)
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, 
            (d.getFullYear() + '').substr(4 - RegExp.$1.length));
    for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt))
            fmt = fmt.replace(
                RegExp.$1, 
                RegExp.$1.length == 1 ? 
                    o[k] : ('00' + o[k]).substr(('' + o[k]).length)
            );
    }
    return fmt;
}
console.log(datestr()); // 2018-07-26 22:05:14