Roadster

Roadster 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

Roadster 赞了回答 · 11月22日

解决无效的import 会对打包有印影响吗?

首先明确下这个 “无效的” 的定义,是路径不对,加载不到的资源,还是引进来了资源,但是实际上在代码中没有用到。

如果是前者
可以理解为对打包几乎没有影响,只是在打包的时候会去查找这个资源,但是查不到,因此对最后的打包体积不会有影响,对打包速度会有轻微影响,可以忽略不计(因为多了去查找资源的过程)

如果是后者
会对打包的速度和体积有影响,webpack的打包过程会对从入口文件开始,依次读取依赖,碰到 require 和 import的资源,最终都会打包到最后的产出bundle中。不过这个问题可以通过webpack的配置 tree shaking 来解决,打包时会删除没用到的方法和文件。

关注 2 回答 1

Roadster 提出了问题 · 11月21日

解决无效的import 会对打包有印影响吗?

code时,我们import很多无效的module,这除了不雅观外,对webpack打包会有影响吗?

关注 2 回答 1

Roadster 赞了回答 · 3月17日

什么叫“硬编码耦合”?

简单啊,redux 或者 vuex 用过没?里面关于 action 或者 mutation 的编写示例代码,都会建议使用者独立维护一个导出若干常量的文件,比如:

export const SET_STAFF_TOTAL = 'SET_STAFF_TOTAL'
export const SET_STAFF_LIST = 'SET_STAFF_LIST'
export const SET_STAFF_TOTAL_LIST = 'SET_STAFF_TOTAL_LIST'

这就算是防止硬编码耦合的方式,你每次修改某个名称时,使用这个常量的地方就统一都得到更改了,如果不这么做,你项目中出现10次这个常量,你需要修改10次。

耦合的产生的条件是由于依赖关系的产生,而依赖关系会因多种原因而产生,硬编码是其中一种而已。

关注 4 回答 3

Roadster 赞了回答 · 1月10日

解决react router是否可以实现多级跳转?

import React, { useEffect } from 'react';
import { HashRouter as Router, Link, Route, Switch, useHistory } from 'react-router-dom';

const PageB = () => {
  const history = useHistory();
  useEffect(() => {
    return () => {
      history.push('/home/pagea');
      console.log('回退');
    };
  }, []);

  return <h1>PageB</h1>;
};

const App = () => {
  return (
    <>
      <Router>
        <Link to='/home/pagea/pageb'>page-b</Link>

        <Switch>
          <Route path='/home' exact>
            <h3>home</h3>
          </Route>
          <Route path='/home/pagea/pageb'>
            <PageB />
          </Route>
          <Route path='/home/pagea'>
            <h3>page-a</h3>
          </Route>
        </Switch>
      </Router>
    </>
  );
};

export default App;

关注 2 回答 1

Roadster 提出了问题 · 1月9日

解决react router是否可以实现多级跳转?

场景:

  1. 在Home页点击某个活动专题页,从/Home跳转至/Home/PageA/PageB.
  2. 当我在PageB点击某个按钮回退时,直接pop至/Home/PageA,而不是pop至Home页面。

望指教,谢谢!

关注 2 回答 1

Roadster 赞了文章 · 2019-07-09

Node中间层实践(一)——基于NodeJS的全栈式开发

版权声明:更多文章请访问我的个人站Keyon Y,转载请注明出处。

前言

近期公司有个新项目,由于后端人手不足,我果断的提议用node中间层的方案,得到了老大的支持,所以一次大单尝试就来了。
Node中间层允许前端来做网站路由页面渲染SEO优化,对以往从来不接触这些内容的前端选手来说,正是锻炼我们网站架构的好机会。
另外,这也是一次深入了解Node的好机会,准备好迎接即将到来的前端工程化时代。

为什么选择node中间层

在说这个话题之前,先给大家分享一篇文章(【探索】NodeJS中间层搭建),它让我对node中间层的理解更加深刻,特别是最后的来自淘宝的PPT。

现有开发模式的适用场景

玉伯提到的几种开发模式,各有各的适用场景,没有哪一种完全取代另外一种。

  • 比如后端为主的MVC,做一些同步展现的业务效率很高,但是遇到同步异步结合的页面,与后端开发沟通起来就会比较麻烦。
  • Ajax为主SPA型开发模式,比较适合开发APP类型的场景,但是只适合做APP,因为SEO等问题不好解决,对于很多类型的系统,这种开发方式也过重。

前后端分离

从职责上划分,node中间层实现了前后端分离:

  • 前端:负责View和Controller层
  • 后端:只负责Model层,业务处理/数据等

拿我们公司来说,之前的网站前台的项目,是基于后端的MVC,在遇到同步和异步结合的页面时候,和后端频繁沟通,对前后端来说都是很痛苦的。

对前端来说,发挥的空间十分的有限,例如:性能优化,只在前端做是很有限的,是需要和后端配合才能实现的,比如 随后的部分我会写道的无刷新加载

前端掌握了Controller,就可以做路由设计、网站目录结构、网站前端架构。
掌握了View,就可以通过后端模板引擎(jade/pug,Ejs,swig等),边写边绑数据。更别提,pug之流 还有mixin,让我们对 html进行函数化,大大提高效率。

NodeJS让前端无需学习一门新的语言,就能做到这些事情。

基于NodeJS“全栈”式开发

下面的这张图很简单形象的说明了Node中间层

中间层的性能问题

多加了一层通讯,肯定会有一定的性能损耗。但分层带来的损失,一定能在其他方面的收益弥补回来,而且合理的分层能让职责清晰、方便协作,大大提升开发效率。也可以通过优化通讯方式和协议,尽可能把损耗降到最低。

拿我公司的网站举例:一个静态化的详情页面上有很多(动态)的数据,用户资料、评论信息、订单等等,需要5、6个异步请求,node中间层可以代理这些请求,轻松实现Bigpipe。
在PC上你觉得发5,6个异步请求也没什么,但是在无线端,在客户手机上建立一个HTTP请求开销很大,有了这个优化,性能一下提升好几倍。

Node什么都能做,为什么还要JAVA/PHP?

我们的初衷是做前后端分离,如果考虑这个问题就有点违背我们的初衷了。即使用Node替代Java/PHP,我们也没办法保证不出现今天遇到的种种问题,比如职责不清。我们的目的是分层开发,专业的人,专注做专业的事。基于JAVA/PHP的基础架构已经非常强大而且稳定,而且更适合做现在架构的事情。

前端的任务更重要了

常见的前后端分离的开发模式中,后端为前端提供了路由结构和页面的数据绑定,前端只需要切页面和少量的逻辑。

在node中间层中,前端不仅仅要切页面和做页面逻辑,还要做url design、页面数据绑定、联调与沟通,还要考虑SEO的问题,伪静态页面、title/keyword设置、网站地图,甚至包括错误日志等等。

虽然前端的工作量增加了不少,但是基于模块化的开发,让总体的效率提升了。
对于后端程序员,接口整合的工作交给了前端服务器进行处理,同时和前端耦合度大大降低,工作量和工作效率都减少了。

另外,由于前后端分离,测试都可以分开来了,专门测试接口的和专门测试ui层。

总结

我觉得,以后基于NodeJs的全栈式开发的模式将会越来越流行,这也会引领前端步入工程化时代。但是要把Node全栈开发变成一个稳定的、方便的开发工具,还有很多路要走。这次公司的交易平台项目就是一个很好的实践,接下来,请继续关注我对这个项目的总结,希望能给各位带来灵感。

欢迎继续关注本博的更新
Node中间层实践(一)——基于NodeJS的全栈式开发
Node中间层实践(二)——搭建项目框架
Node中间层实践(三)——webpack配置
Node中间层实践(四)——模板引擎pug
Node中间层实践(五)——express-中间层的逻辑处理

查看原文

赞 72 收藏 70 评论 2

Roadster 赞了文章 · 2019-07-09

Node中间层实践(一)——基于NodeJS的全栈式开发

版权声明:更多文章请访问我的个人站Keyon Y,转载请注明出处。

前言

近期公司有个新项目,由于后端人手不足,我果断的提议用node中间层的方案,得到了老大的支持,所以一次大单尝试就来了。
Node中间层允许前端来做网站路由页面渲染SEO优化,对以往从来不接触这些内容的前端选手来说,正是锻炼我们网站架构的好机会。
另外,这也是一次深入了解Node的好机会,准备好迎接即将到来的前端工程化时代。

为什么选择node中间层

在说这个话题之前,先给大家分享一篇文章(【探索】NodeJS中间层搭建),它让我对node中间层的理解更加深刻,特别是最后的来自淘宝的PPT。

现有开发模式的适用场景

玉伯提到的几种开发模式,各有各的适用场景,没有哪一种完全取代另外一种。

  • 比如后端为主的MVC,做一些同步展现的业务效率很高,但是遇到同步异步结合的页面,与后端开发沟通起来就会比较麻烦。
  • Ajax为主SPA型开发模式,比较适合开发APP类型的场景,但是只适合做APP,因为SEO等问题不好解决,对于很多类型的系统,这种开发方式也过重。

前后端分离

从职责上划分,node中间层实现了前后端分离:

  • 前端:负责View和Controller层
  • 后端:只负责Model层,业务处理/数据等

拿我们公司来说,之前的网站前台的项目,是基于后端的MVC,在遇到同步和异步结合的页面时候,和后端频繁沟通,对前后端来说都是很痛苦的。

对前端来说,发挥的空间十分的有限,例如:性能优化,只在前端做是很有限的,是需要和后端配合才能实现的,比如 随后的部分我会写道的无刷新加载

前端掌握了Controller,就可以做路由设计、网站目录结构、网站前端架构。
掌握了View,就可以通过后端模板引擎(jade/pug,Ejs,swig等),边写边绑数据。更别提,pug之流 还有mixin,让我们对 html进行函数化,大大提高效率。

NodeJS让前端无需学习一门新的语言,就能做到这些事情。

基于NodeJS“全栈”式开发

下面的这张图很简单形象的说明了Node中间层

中间层的性能问题

多加了一层通讯,肯定会有一定的性能损耗。但分层带来的损失,一定能在其他方面的收益弥补回来,而且合理的分层能让职责清晰、方便协作,大大提升开发效率。也可以通过优化通讯方式和协议,尽可能把损耗降到最低。

拿我公司的网站举例:一个静态化的详情页面上有很多(动态)的数据,用户资料、评论信息、订单等等,需要5、6个异步请求,node中间层可以代理这些请求,轻松实现Bigpipe。
在PC上你觉得发5,6个异步请求也没什么,但是在无线端,在客户手机上建立一个HTTP请求开销很大,有了这个优化,性能一下提升好几倍。

Node什么都能做,为什么还要JAVA/PHP?

我们的初衷是做前后端分离,如果考虑这个问题就有点违背我们的初衷了。即使用Node替代Java/PHP,我们也没办法保证不出现今天遇到的种种问题,比如职责不清。我们的目的是分层开发,专业的人,专注做专业的事。基于JAVA/PHP的基础架构已经非常强大而且稳定,而且更适合做现在架构的事情。

前端的任务更重要了

常见的前后端分离的开发模式中,后端为前端提供了路由结构和页面的数据绑定,前端只需要切页面和少量的逻辑。

在node中间层中,前端不仅仅要切页面和做页面逻辑,还要做url design、页面数据绑定、联调与沟通,还要考虑SEO的问题,伪静态页面、title/keyword设置、网站地图,甚至包括错误日志等等。

虽然前端的工作量增加了不少,但是基于模块化的开发,让总体的效率提升了。
对于后端程序员,接口整合的工作交给了前端服务器进行处理,同时和前端耦合度大大降低,工作量和工作效率都减少了。

另外,由于前后端分离,测试都可以分开来了,专门测试接口的和专门测试ui层。

总结

我觉得,以后基于NodeJs的全栈式开发的模式将会越来越流行,这也会引领前端步入工程化时代。但是要把Node全栈开发变成一个稳定的、方便的开发工具,还有很多路要走。这次公司的交易平台项目就是一个很好的实践,接下来,请继续关注我对这个项目的总结,希望能给各位带来灵感。

欢迎继续关注本博的更新
Node中间层实践(一)——基于NodeJS的全栈式开发
Node中间层实践(二)——搭建项目框架
Node中间层实践(三)——webpack配置
Node中间层实践(四)——模板引擎pug
Node中间层实践(五)——express-中间层的逻辑处理

查看原文

赞 72 收藏 70 评论 2

Roadster 关注了标签 · 2018-04-23

区块链

区块链(英语:Blockchain 或 Block chain)是一种分布式数据库,起源自比特币。区块链是一串使用密码学方法相关联产生的数据块,每一个数据块中包含了一次比特币网络交易的信息,用于验证其信息的有效性(防伪)和生成下一个区块。该概念在中本聪的白皮书中提出,中本聪创造第一个区块,即“创世区块”。

区块链在网络上是公开的,可以在每一个离线比特币钱包数据中查询。比特币钱包的功能依赖于与区块链的确认,一次有效检验称为一次确认。通常一次交易要获得数个确认才能进行。轻量级比特币钱包使用在线确认,即不会下载区块链数据到设备存储中。

比特币的众多竞争币也使用同样的设计,只是在工作量证明上和算法上略有不同。如,采用权益证明和 SCrypt 算法等等。

关注 51200

Roadster 关注了标签 · 2018-04-23

前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端优化
  1. 尽量减少HTTP请求 (Make Fewer HTTP Requests)
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  3. 避免重定向 (Avoid Redirects)
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  10. 杜绝 http 404 错误 (No 404s)

关注 156560

Roadster 关注了标签 · 2018-04-23

程序员

一种近几十年来出现的新物种,是工业革命的产物。英文(Programmer Monkey)是一种非常特殊的、可以从事程序开发、维护的动物。一般分为程序设计猿和程序编码猿,但两者的界限并不非常清楚,都可以进行开发、维护工作,特别是在中国,而且最重要的一点,二者都是一种非常悲剧的存在。

国外的程序员节

国外的程序员节,(英语:Programmer Day,俄语:День программи́ста)是一个俄罗斯官方节日,日期是每年的第 256(0x100) 天,也就是平年的 9 月 13 日和闰年的 9 月 12 日,选择 256 是因为它是 2 的 8 次方,比 365 少的 2 的最大幂。

1024程序员节,中国程序员节

1024是2的十次方,二进制计数的基本计量单位之一。程序员(英文Programmer)是从事程序开发、维护的专业人员。程序员就像是一个个1024,以最低调、踏实、核心的功能模块搭建起这个科技世界。1GB=1024M,而1GB与1级谐音,也有一级棒的意思。

从2012年,SegmentFault 创办开始我们就从网络上引导社区的开发者,发展成中国程序员的节日 :) 计划以后每年10月24日定义为程序员节。以一个节日的形式,向通过Coding 改变世界,也以实际行动在浮躁的世界里,固执地坚持自己对于知识、技术和创新追求的程序员们表示致敬。并于之后的最为临近的周末为程序员们举行了一个盛大的狂欢派对。

2015的10月24日,我们SegmentFault 也在5个城市同时举办黑客马拉松这个特殊的形式,聚集开发者开一个编程大爬梯。

特别推荐:

【SF 黑客马拉松】:http://segmentfault.com/hacka...
【1024程序员闯关秀】小游戏,欢迎来挑战 http://segmentfault.com/game/

  • SF 开发者交流群:206236214
  • 黑客马拉松交流群:280915731
  • 开源硬件交流群:372308136
  • Android 开发者交流群:207895295
  • iOS 开发者交流群:372279630
  • 前端开发者群:174851511

欢迎开发者加入~

交流群信息


程序员相关问题集锦:

  1. 《程序员如何选择自己的第二语言》
  2. 《如何成为一名专业的程序员?》
  3. 《如何用各种编程语言书写hello world》
  4. 《程序员们最常说的谎话是什么?》
  5. 《怎么加入一个开源项目?》
  6. 《是要精于单挑,还是要善于合作?》
  7. 《来秀一下你屎一般的代码...》
  8. 《如何区分 IT 青年的“普通/文艺/二逼”属性?》
  9. 程序员必读书籍有哪些?
  10. 你经常访问的技术社区或者技术博客(IT类)有哪些?
  11. 如何一行代码弄崩你的程序?我先来一发
  12. 编程基础指的是什么?
  13. 后端零起步:学哪一种比较好?
  14. 大家都用什么键盘写代码的?

爱因斯坦

程序猿崛起

关注 114793

认证与成就

  • 获得 0 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-04-23
个人主页被 91 人浏览