在传统项目中使用 babel 编译 ES6 场景 曾经吾辈以为 ES6 早已推广开来,然而事实上远比想象中更加复杂。传统后台的项目就是要兼容性,兼容 2 年前的浏览器,没有 babel,全程 jQuery 一把梭做到底。 之前的项目基本上都是前后端分离的模式,最近新公司的项目却是使用的传统的模板视图的模式。所以,一些东西发生了变化 thymeleaf 模板里面直接有 Java 的代码,在服务端直接编译 html 代码而非是纯粹的 API 2020-02-02 #wiki #工程化
在 VSCode 中使用路径别名也有提示 场景最近在学 ReactJS,遇到了一个很奇怪的问题。当吾辈在 webpack 配置中配置了路径别名之后,VSCode 再输入路径便没有了提示。 路径别名配置 123456alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with- 2020-02-02 #vscode
前端使用工具强制实行代码规范(Vue) 场景 GitHub Demo 非强制性的规范都不会成为真正的规范。在之前,我们也会在团队内编写一些开发规范文档,却总是不能真正有效的执行下去,原因何在? 其一,人是健忘的,就算真正看完了规范文档,也不可能记住每一条规范,并且在代码中正确实践。 其二,人是懒惰的,即便有着规范,但只要写代码的时候没有强制性,那总是不会在意的。 那么,使用自动化的工具是为首选,而前端恰好有了一些可用的工具来帮助我 2020-02-02 #工程化 #vue
使用 vue-cli 创建模板项目 场景吾辈曾经只是个 Java 后端开发人员,原本对前端的了解大致只有 HTML/CSS/JavaScript/JQuery 级别,后来接触到了 nodejs。不仅是工作之需,吾辈个人而言也非常想要了解现代前端技术。然而天可怜见,吾辈刚入门 nodejs 并没有发现什么,但发现想要构建一个项目,需要用到前端工具链实在太多了。配置文件的数量甚至远远超过后端。所以为了快速开发,入门之后遇到问题再去解决, 2020-02-02 #vue
使用 rollup 打包 JavaScript SDK 吾辈已经写了一个 TypeScript/JavaScript Cli 工具 liuli-cli,如有需要可以使用这个 Cli 直接生成一个开箱即用 SDK 项目,然后就可以直接开始写自己的代码,不需要太过关心下面的内容了 – 因为,它们都已然集成了。 场景为什么要使用打包工具如果我们想要写一个 JavaScript SDK,那么就不太可能将所有的代码都写到同一个 js 文件中。当然了,想做的话 2020-02-02 #javascript #工程化
使用 ESDoc 生成文档 esdoc 官网, 博客地址, 示例项目 场景在尝试过使用 markdown, jsdoc, docz 之后,吾辈终于找到了一个比较满意工具 – esdocs。 期望 开箱即用: 毫无疑问, js 正在把一切事情变得复杂,到处都是大量的配置,永远都学不会开箱即用 支持 jsdoc 注释: 已经熟悉了 jsdoc,所以不太希望切换到其他的注释规范了呢 可配置自定义页: 作为文档 API 列表还算 2020-02-02 #javascript #工程化
使用 GreaseMonkey 解除网页复制粘贴限制 吾辈发布了一个油猴脚本,可以直接安装 解除网页限制 以获得更好的使用体验。 场景在浏览网页时经常会出现的一件事,当吾辈想要复制,突然发现复制好像没用了?(知乎禁止转载的文章)亦或者是复制的最后多出了一点内容(简书),或者干脆直接不能选中了(360doc)。粘贴时也有可能发现一直粘贴不了(支付宝登录)。 问题欲先制敌,必先惑敌。想要解除复制粘贴的限制,就必须要清楚它们是如何实现的。不管如何,浏览 2020-02-02 #javascript #经验
vue data 属性中的 this 指向问题 场景之前在封装 table 组件 Vue 表格封装 BasicTableVue 的时候遇到的问题,在 data 属性中无法使用 this.** 调用 methods 中的函数。例如下面的代码 12345678910111213141516171819202122232425262728293031323334353637class BasicTableData { constructor({ 2020-02-02 #vue
vue 使用 v-model 双向绑定父子组件的值 场景今天在使用 v-model 进行组件双向数据绑定的时候遇到了一个奇怪的问题,网页本身运行正常,浏览器一直出现警告信息。 1[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a d 2020-02-02 #vue
vue 使用 git-rev-sync 确定线上发布版本号 场景目前公司仍然没有做 CI 持续集成,而是使用手动方式(脚本)部署项目。有时候,已经修改了代码,而线上(测试环境)却还没有部署,导致测试人员认为问题仍然没有修复。那么,怎么确定线上部署的代码版本呢?难道是打开线上网站查看某个功能是否完成了么?有没有更高效的方法呢?吾辈找到的解决方案便是 git-rev-sync。 简介官网描述只有一句话: 同步获取当前的 git commit 哈希,标签,计数, 2020-02-02 #工程化 #vue
react 受控表单必须初始化 场景这些天在学习 React 的时候遇到了一个奇怪的问题,明明受控表单的双向绑定已经成功了,然而控制台还是会出现 react 的警告: 1Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from un 2020-02-02 #react
react 入坑思考 场景吾辈为什么要学 react 呢?难道 HTML+CSS+JavaScript 已经满足不了了?是的,传统前端确实满足不了吾辈了,前端在快速发展,而后端手中(甚至眼中)的前端仍然是只有 HTML+CSS+JavaScript+JQuery 的世界。吾辈不想就这样下去,所以想要了解、学习、使用现代前端的内容。谜之音:难道 vuejs 还不够么?vuejs 既是国产(阿里),所以文档(中文)相对而言 2020-02-02 #react