0x01 开局

编程道拓扑(bcd.top)是一个前端从业者的思考和总结, 如果你喜欢, 欢迎关注!

作者是一个前端从业者, 本系列会总结作者在工作和学习中的一些思考, 会有具体的技术点, 也会有关于编程的一些鸡汤思考。 开局第一篇, 先来点思考!

编程道核心是什么

笔者观点: 复用世界, 但是不要复制自己

我现在的观点是, 编程就是复用, 复用别人的工作, 复用别人的经验,当然, 请不要简单的理解成 粘贴复制, 粘贴复制在笔者或者大部分的从业者看来应该都是没有什么技术含量的, 笔者这里的观点是, 要站在巨人的肩膀上。

复用这个世界
    别人造好的轮子, 就要用起来,特别是流行的轮子, 比如说 lodash , rxjs 这种在github上start很多的轮子,把他们用在工作中, 事半功倍。当然, 肯定会有读者认为造轮子的才是大神, 用轮子的都是平庸之辈。您的观点前半段是对的, 造轮子的确实是大神, 但是用轮子的不一定是平庸之辈, 这些轮子使用者可以把大神的轮子用在自己的工作中, 迅速解决需求, 满足公司的业务, 这是很值得肯定的, 至少公司肯定了。况且如果没有众多的轮子使用者, 谁来称托造轮子的是大神呢。

不要复制自己 - do not repeat yourself
    亲爱的读者, 您可以复用大神的轮子, 甚至复用整个世界, 但是 do not repeat yourself, 着里说的不要重复, 就是不要粘贴代码, 尽量不要再您的代码钟出现重复的代码, 所有编程语言发明了各种各样的技术, 让您可以复用自己的代码, 比如 变量(var) 方法(function)  类(class), 这些技术发明出来, 本质上就是给您复用您代码的工具

模块化

没有绝对正确, 只有相对合适
**
模块化也是为了复用, 但是模块化是一个双刃剑, 模块化是理想化的, 会让代码优雅, 可读性高, 但是在工作中,不一定适用。特别是前端。

模块化是好东西, 这个毋庸置疑, 但是在特殊场景下, 比如说后台管理系统开发层面, 刚好您在的团队人员流动比较强, 如果你模块化做的很细,有以下缺点:

  • 当新人来接手代码的时候, 需要不断的跳转, 看起来很累
  • 需要移植的时候, 要拷贝多个文件, 如果大部分逻辑在一个文件里面,那么只需要粗暴的拷走一个即可。
  • 逻辑在同一个文件里面开发, 速度快

看吧, 这里细致的模块化就成了缺点。但是笔者需要再次强调, 模块化是一个很好的东西, 可以让您的代码组织更紧凑,也更优雅。但是也请记得, **没有绝对正确的技术, 只有相对合适的方案, **在必要时候, 我们也要做一些妥协和让步。

GET 请求url的处理

// solution 1
axios.get(`you/path/?para1=value1&para2=value2`) // solution 2
axios.get({
url: "your/path",
params: {
para1: value1,
para2: value2
}
})

我们开上面的伪代码,两个方案的目的都是向服务器发送get请求, 第一种方案采用的是直接拼写完整的url, 第二个方案采用的是结构化的方案。

方案1的优点是只管, 就算刚入行的前端从业者, 也能知道这个药干嘛的, 方案二的优点是 结构化, 我们可以使用对象的方法, 和你方便的处理params, 而不是去处理这个字符串。丧失的就是直观。

再次抛出上节的观点, 没有绝对正确的技术, 只有相对合适的方案, 到底选那个, 看您的团队接收成都吧, 但是, 强烈建议, 要统一, 一个团队的风格要统一。

prototype 原型链上挂在方法

前端从业者, 肯定遇到过这种选择吧, 在原型链上挂在方法, 确实很香, 用起来特别顺手, 这里我们简单讨论一下吧

prototype 挂在方法 import 方式引入
使用便捷 毋庸置疑, 这种事方便的 需要单独引入, 再使用
优化成都 无法做摇树优化 很方便左摇树优化(rxjs 为了左摇树优化, 后来的版本就取消了prototype挂在的方式)
侵入性 对全局有侵入性 没有

所有, 如果您挂在原型链上的方法很少, 不用考虑性能, 也不担心侵入性对其他实例的影响, 您可以放心大胆的选择原型链挂在的方法, 如果这些条件不满足, 那还是忘掉便利性, 使用import单独引入的方式吧。

注意: 笔者不建议在共有对象原型链上挂在方法, 比如在 Object Error Date 等对象上, 因为这个影响太大了, 您可以在您自己写的对象原型链上挂载, 或者三方流行lib上挂在, 比如 vue。

esm 使用风格

笔者在工作中发现部分同事不是很注重代码风格和统一性问题, 当然很多时候确实是太忙了, 没有时间注意这些, 下面是笔者建议的风格

import a from "a"
import { b1, b2 } from "b" // variable block // function block // main logic export default e;
export {
e1,
e2,
e3
}
  • 导入始终在文件头
  • 然后是依次是 变量 方法 主逻辑
  • 导出统一放在文件末尾

站在大神的肩膀上

当使用大神们的轮子的时候, 尽量按照他们设计的方式去使用。

最近笔者的一个同事在使用element-ui(老版本) 的table的时候, 她希望在table外面有个过滤, 灵活的控制表格中行的显示与隐藏, 当时他一直想着能否把filter方法使用起来, 甚至想过要去更改element-ui的源代码, 但是在公司, 哪里有那么多时间去研究。

最后公司一个老同事给了一个方案,无研究成本解决问题。 不要想那么多, 直接修改传入el-table的的 数据, 不想显示的行, 直接去掉, 想显示的时候, 再插回来, 在去掉数据的时候甚至可以把该条数据当前位置记录下俩, 插回来的时候插回原来的位置, 效果更棒, 和tabel原生的方案更好。
    当时笔者也想到一个方案, 那就是不要使用el-table, 自己定制一个组件,使用v-for循环列表, 然后再行数据里面加一个flag用于标识是否显示, 当不需要显示的时候, 直接修改改行的flag,  对数据的处理更少, 但是就要多一个组件,最快的还是老同事给的方案。

下一遍写什么

准备把笔者这些年遇到的好资源分享一下

编程道拓扑bcd.top 0x01/ 开局第一篇: 随便聊聊/ 随笔的更多相关文章

  1. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

  2. linux shell编程之变量和bash配置文件(第一篇)

    编程语言有两类 强类型:如C语言.数据具有其特定的类型,先声明定义后才能使用.数据运算时必须符合类型要求(如不能把字符串类型数据直接与整型数据做算数运算) 弱类型:如shell.数据默认为字符型,不用 ...

  3. C#语法糖系列 —— 第一篇:聊聊 params 参数底层玩法

    首先说说为什么要写这个系列,大概有两点原因. 这种文章阅读量确实高... 对 IL 和 汇编代码 的学习巩固 所以就决定写一下这个系列,如果大家能从中有所收获,那就更好啦! 一:params 应用层玩 ...

  4. 入园的第一篇--where、where

    这篇是入园的第一篇随便,后面我会将自己几年前写的博文都转到这里.哎,其实说到博文的事情,我就很郁闷,甚至有些恼火,后面我会详细说说这中间的过程,也许能帮助某些人避免遇到类似的事情.突然想起<西游 ...

  5. 【转载】COM编程入门不得不看的文章 :第一部分 什么是COM,如何使用COM

    原文:COM编程入门不得不看的文章 :第一部分 什么是COM,如何使用COM 原文:http://www.codeproject.com/Articles/633/Introduction-to-CO ...

  6. Python编程笔记(第一篇)Python基础语法

    一.python介绍 1.编程语言排行榜 TIOBE榜 TIOBE编程语言排行榜是编程语言流行趋势的一个指标,每月更新,这份排行榜排名基于互联网有经验的程序员.课程和第三方厂商的数量. 2.pytho ...

  7. LINQ to XML LINQ学习第一篇

    LINQ to XML LINQ学习第一篇 1.LINQ to XML类 以下的代码演示了如何使用LINQ to XML来快速创建一个xml: public static void CreateDoc ...

  8. Swing:LookAndFeel 教程第一篇——手把手教你写出自己的 LookAndFeel

    本文是 LookAndFeel 系列教程的第一篇. 是我在对 Swing 学习摸索中的一些微薄经验. 我相信,细致看全然系列之后.你就能写出自己的 LookAndFeel. 你会发现 Swing 原来 ...

  9. 在net中json序列化与反序列化 面向对象六大原则 (第一篇) 一步一步带你了解linq to Object 10分钟浅谈泛型协变与逆变

    在net中json序列化与反序列化   准备好饮料,我们一起来玩玩JSON,什么是Json:一种数据表示形式,JSON:JavaScript Object Notation对象表示法 Json语法规则 ...

随机推荐

  1. MongoDB一些应用知识点

    1.在生产环境中至少需要三个节点的复制集架构. 2.在多数的场景中WT引擎比MMAPv1更加出色. 3.要想达到极致的速度,那么一定要给MongoDB足够的内存. 4.避免使用短链接,充分利用连接池, ...

  2. Win10安装3 —— U盘启动工具安装

    本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12364593.html 一:准备一个空U盘 U盘容量推荐至少8个G,先提前备份好 ...

  3. 【剑指Offer】39:平衡二叉树

    题目描述: 输入一棵二叉树,判断该二叉树是否是平衡二叉树 题解:递归 /*最直接的做法,遍历每个结点,借助一个获取树深度的递归函数,根据该结点的左右子树高度差判断是否平衡,然后递归地对左右子树进行判断 ...

  4. 机器学习作业(五)机器学习算法的选择与优化——Matlab实现

    题目下载[传送门] 第1步:读取数据文件,并可视化: % Load from ex5data1: % You will have X, y, Xval, yval, Xtest, ytest in y ...

  5. vue报错[Vue warn]: The data property "record" is already declared as a prop. Use prop default value instead.

    当我写了一个子组件,点击打开子组件那个方法时报了一个错 这句话说明意思呢?谷歌翻译一下↓ 数据属性“record”已声明为prop. 请改用prop默认值. 感觉翻译的有点怪,通过最后修改代码后大概意 ...

  6. rm -rf

    inux反选删除文件 最简单的方法是 # shopt -s extglob      (打开extglob模式) # rm -fr !(file1)  如果是多个要排除的,可以这样: # rm -rf ...

  7. hdu1716--全排列(dfs+有重复数字+输出格式)

    Ray又对数字的列产生了兴趣: 现有四张卡片,用这四张卡片能排列出很多不同的4位数,要求按从小到大的顺序输出这些4位数.  Input每组数据占一行,代表四张卡片上的数字(0<=数字<=9 ...

  8. git的安装方法

    下载:https://git-scm.com/downloads

  9. V8 是怎么跑起来的 —— V8 中的对象表示

    V8 是怎么跑起来的 —— V8 中的对象表示 ThornWu The best is yet to come 30 人赞同了该文章 本文创作于 2019-04-30,2019-12-20 迁移至此本 ...

  10. Java传(2)

    __________________________夜夜都是魂牵梦绕. 题目: 有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月有生一对兔子,假如兔子都不死,问每个月的兔子 ...