javascript

typescript开发工具库入门

写了这么久前端，一起来学习一下如何开发一个自己的工具库吧。我们可以将经常使用的一些业务逻辑封装成通用的函数库，并发布到 npm 上。本文适合阅读对象为入门级前端工程师，需要具有一定的 typescript 基础，建议先学习typescript 选择 Typescript 是因为其具有完善的类型系统，编译后也能够自动生成声明文件（.d.ts 文件），为使用者提供类型提示，不用再去手写声明文件。同时静态的类型检查能降低代码的出错率，提高开发效率。本文以一个简单的示例来学习一个 JavaScript 工具库的创建、开发、测试、发布的全生命周期。相关技术本文的示例中将使用到以下技术，如有不熟悉的需自行查阅相关文档 typescript rollup - 打包工具创建项目创建一个名为’natulu’的空目录，你也可以自己起个名字。然后打开终端进入目录下，执行npm init初始化 npm 包，一阵回车之后，得到一个自动创建的文件package.json { "name": "natulu", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } 先不管里面这里面的内容，接下来我们先组织一下目录结构目录结构一般情况都建议将核心的源码放到src目录下管理，我们采用常见的目录结构 natulu ├─ dist ├─ src │ └─ index.ts ├─ package.json ├─ rollup.config.js └─ tsconfig.json src 中存放核心的源码，dist 里面为编译打包后的产物，是直接提供给用户使用的代码。上面的目录中有两个文件，分别是 rollup 配置文件和 ts 配置文件，这两个文件会在后续的步骤中创建。...

Vue Composition API 初探

Composition API是 vue-next 中的逻辑复用解决方案，它是一组基于函数式编程的组合式 API。与之前的逻辑复用方案mixin相比，带来了更友好的类型检查，更方便的测试等优点。 Composition API的详细用法和 API 可以参考官方文档，这里我们做一个简单的初步的上手体验。安装 Composition API被单独抽离为一个库，让我们可以在 vue2.x 中体验该特性。 npm install @vue/composition-api # or yarn add @vue/composition-api 在Vue中注册@vue/composition-api // main.js import Vue from 'vue' import CompositionApi from '@vue/composition-api' Vue.use(CompositionApi) 得益于 vue 的插件机制，通过一行简单的代码，我们就给项目添加了Composition API特性。开始 Composition API给 vue 组件增加了一个名为setup的生命周期函数，它要早于befororeCreate执行，在 vue-next 中是最早执行的生命周期钩子。注意: 和befororeCreate一样，setup实例还没创建，因此无法使用this。 <template>  <div>{{message}}<div>  <div>{{message.value}}</div> </template> <script> import { ref } from '@vue/composition-api' export default { setup () { const message = ref('hello vue') return { message, setMessage: (msg) => initialMessage....

sequelize-typescript-auto

从mysql数据库自动生成sequelize-typescript风格的models，最初用于nestjs项目，同时也适用与其它使用sequelize-typescript的项目。项目地址：https://github.com/YES-Lee/sequelize-typescript-auto 使用 // 安装 npm install -g sequelize-typescript-auto // 使用 sequelize-typescript-auto -H localhost -d test -u root -x 123456 -p 3306 -f test_ -o ./_models 选项使用: sequelize-typescript-auto [选项] 选项: -V, --version 版本 -H, --host <host> 数据库地址 -d, --database <database> 数据库名称 -u, --username <username> 用户名 -x, --password <password> 密码 -p, --port <port> 数据库端口，默认为3306 -o, --output <dir> model输出文件夹 -f, --prefix <prefix> 在文件名和model类名中过滤数据库前缀 -h, --help 显示帮助信息 Features 支持 mysql 命令行使用编程方式使用生成外间约束关系检查文件哈希值生成计数器支持 SQL Server 支持 PostgreSQL

nestjs快速开发项目

整合了nestjs项目通用架构、常用功能集成的一个快速开发项目。项目地址：https://github.com/YES-Lee/nest-seed-proj 集成功能 ORM: sequelize API: restful api, graphql 认证：passport 文档：swagger 安全：helmet 日志：nest-pino 功能不断完善，将来或提供可插拔的开发体验快速开始 # 拉取代码 git clone https://github.com/YES-Lee/nest-seed-proj.git cd nest-seed-proj yarn install # or npm intall yarn start:dev # or npm run start:dev 项目结构 src ├─ config // 配置模块 ├─ database // 数据库模块 │ └─ models // 存放sequelize/graphql数据库模型 ├─ decorators // 自定义装饰器目录 ├─ dto // restful 接口模型目录 ├─ graphql // graphql 模块 ├─ enums // 枚举目录 ├─ filters // error filters ├─ interceptors // interceptors ├─ pipes // pipes └─ modules // 业务逻辑模块目录，所有业务相关逻辑都放到该目录对应的模块接口格式 { error_code: number // 错误码，只在异常时返回 error_message: string // 错误信息，只在异常时返回 data: any timestamp: any // 时间戳 path: string // 请求路径 } dtc/support中提供了ApiResponse类，提供了success, error两个静态方法。...

jQuery源码学习-构造函数

jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（或 JavaScript 框架）。jQuery 设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。如此优秀的一个代码库，即便没有以前流行，也是有很多地方值得学习的。本文并非讲解jquery源码，而是记录从源码学习到的思想、技术等构造函数与继承 JavaScript是一门面向对象的编程语言，但是与传统面向对象语言不同的是，JavaScript没有提供class关键字，并且JavaScript的是基于原型继承的面向对象语言。那么，在JavaScript中编写类的过程，必定与传统的面向对象语言有所区别。传统的类与继承在ES6之前，都是通过创建构造函数的方式来创建一个类，比如： // Book类的原型 const BookPrototype = { getName() { return this.name }, } // Book类 function Book(name, author, content) { this.name = name this.author = author this.content = content } // Book类继承自 BookPrototype Book.prototype = BookPrototype const book = new Book('金瓶梅', '佚名', '此处省略999999999字') console.log(book.getName()) BookPrototype为Book类的原型（基类），使用new关键字创建的Book实例，都会包含BookPrototype里面的属性和方法。这里刚开始然我有些迷惑，参考经典的面向对象语言，基类应该也是一个类，这里却是一个对象字面量。首先，需要深刻明白一点: JavaScript 中，一切皆是对象。比如一个函数，我们可以给它加上任何的属性...