最前端

Stay Hungry, Stay Foolish.

最前端

Stay Hungry, Stay Foolish.

软件也像人一样,具有生命力,从出生到死亡,会经历多种变化。软件架构设计也不是一蹴而就的,是不断地演进发展。每个程序员都可以从理解编程原则和模式中受益。

软件设计原则是一组帮助我们避开不良设计的指导方针。根据 Robert Martin 的理论,应该避免不良设计的以下三个重要特点:

  • 僵化:很难做改动,因为每一个细微的改动都会影响到系统大量的其他功能
  • 脆弱:每当你做一次改动,总会引起系统中预期之外的部分出现故障
  • 死板:代码很难在其他应用中重用,因其不能从当前应用中单独抽离出来

下面这些软件设计原则是我从一些书籍和网络中收集而来,并不完整,而且你也需要在一些有「冲突的原则」之间进行权衡和取舍。本文或许会对你的编程、程序设计、讨论或评审工作有所帮助。

2022/05/20 programsolid程序设计

无论是在注册流程、多视图步进器,还是在单调的数据输入界面中,表单都是数字产品设计中最重要的组成部分之一。本文着重介绍了表单设计中常见的该做和不该做的事情。请记住,这些都是一般准则,每个规则都有例外。

# 设计原则

# 单栏设计

单栏设计

多栏会破坏用户在垂直方向上的关注趋势。

2022/04/14 formdesign

调试 JavaScript 中的异步代码,有时会感觉像在趟雷。你不知道 console.log 何时何地会打印出来,你也不知道你的代码是如何执行的。

你很难正确地构造异步代码,使其按照你的意图以正确的顺序执行。

如果你在编写异步代码时有一些指导,并且在你即将犯错时得到一个有用的信息,那不是很好吗?

幸运的是,在我们将代码推送到生产中之前,我们有提示器来捕捉一些错误。下面是一个编译的提示规则列表,专门帮助你在 JavaScript 和 Node.js 中编写异步代码。

即使你最终没有在你的项目中使用这些规则,阅读它们的描述也会使你更好地理解异步代码,提高你的开发技能。

2022/04/08 eslintpromisenode

# 场景

当异步处理过多的时候,比如 Promise.all() 并发发起多个 Promise,假设 Promise 是 tcp 连接,并且数量达到几万个,会带来性能问题或触发系统限制。

2021/11/18 javascriptpromise

# 1 命令行体验

本节介绍有关创建漂亮且高价值用户体验的 Node.js 命令行应用程序最佳实践。

在本节中:

2021/08/02 nodejs
2021/07/01 sandboxmicro-app

# Generator

异步编程一直是 JS 的核心之一,业界也是一直在探索不同的解决方法,从「回调地狱」到发布订阅模式,再到 Promise,都是在优化异步编程。尽管 Promise 已经很优秀了,也不会陷入「回调地狱」,但是嵌套层数多了也会有一连串的 then,始终不能像同步代码那样直接往下写就行了。Generator 是 ES6 引入的进一步改善异步编程的方案,下面我们先来看看基本用法。

2021/05/26 generator

几乎所有前端项目中都有 yarn.lock / package-lock.json 文件(以下以 npm 为例)。打开浏览,你会发现它长得类似 package.json 的依赖,但是冗长得多。很多同学可能都不知道他们是干什么用的,甚至部分同学在项目跑不起来的时候还会暴力把 lock 文件给干掉,最后反而导致更严重的错误。

那么,lock 文件到底是干什么用的?为什么我们会需要 lock 文件?

2021/05/14 npmyarn

当前,稿定 H5 编辑器中的动画可分为翻页动画和元素动画。翻页动画是基于 Vue 内置的动画组件(<transition-group>)来实现。而元素动画则是基于标准的 Web Animation API(WAAPI)实现。

2020/08/25 offset-pathsvgcanvas

# 速度优化

  1. 减小文件搜索范围

    • 配置 resolve.modules:

    Webpack 的 resolve.modules 配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时,会去 node_modules 目录下找。但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个 node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径;同样,对于别名(alias)的配置,亦当如此:

    function resolve (dir) {
        return path.join(__dirname, '..', dir)
    }
    module.exports = {
        resolve: {
            extensions: ['.js', '.vue', '.json'],
                modules: [
                resolve('src'),
                resolve('node_modules')
            ],
            alias: {
                'vue$': 'vue/dist/vue.common.js',
                'src': resolve('src'),
                'assets': resolve('src/assets'),
                'components': resolve('src/components'),
                // ...
                'store': resolve('src/store')
            }
        },
        ...
    }
    
2019/12/20 webpack
1234567 下一页
author-avatar

jimco

70 文章
98 标签

分类


标签

全部301serverbigpipeangulardirectivebackbonebfclayoutdomcssomrenderbrowserslistcoffeescriptnpmnodeshellcssjavascriptpromisecookiesessioncrontabformdesignsambadockercentos7snippetoffsetxjqueryes6generatorjsfrontendgzipuglifyflexhtmlmetahttpcachebrowserhttpswaterflowimagethispatternasyncbitbinarycorsjsonpiframemvvmiifememoryooclassroutereventsortalgorithmeslintsandboxmicro-appoffset-pathsvgcanvasprogramsolid程序设计yarnmedia重定向pwaserviceWorkersetIntervalstandardsslubbvimwebpackfontserifsans-serifsocket.iocometyeomannginxrewritenodejs

友情链接