保存成功
保存失败,请重试
提交成功
Meathill

Meathill

严肃技术分享者/OpenResty 前端工程师
大家好,我叫翟路佳,花名“肉山”,这个名字跟 Dota 没关系,从高中起伴随我到现在。 我热爱编程,喜欢学习,喜欢分享,从业十余年,投入的比较多,学习积累到的也比较多,对前端方方面面都有所了解,希望能与大家分享。 我兴趣爱好比较广泛,尤其喜欢旅游,欢迎大家相互交流。 你可以在这里找到我: 博客:https://blog.meathill.com 微博:https://weibo.com/meathill GitChat:https://gitbook.cn/gitchat/author/593cb520ef8d9c2863173543...更多
文章6

使用 Nuxt.js 发布纯静态网站

前阵子公司官网升级,我尝试用 Webpack 多页配置,成功完成了项目,收获了不错的效果。不过接下来又有新的想法:用 SSR,通过 Vue 项目生成静态页部署。我想研究下这套方案,搞个最小用例,将来官网升级 3.0 的时候可以考虑。 我选择 Nuxt.js 作为 SSR 工具。本以为只是举手之劳,最多 1,2 个小时就能搞定,没想到最后折腾了大半天才基本理顺。Nuxt.js 作为 SSR 框架,生成静态页只是它的衍生功能,相关文章不多,文档里也不很清晰。 所以我觉得,很有必要再写一篇 Chat,分享这个过程中的收获。本篇 Chat,会分享以下内容: 1. 网页形态的历史 2. Vue CMS 思路介绍 3. 了解 Nuxt.js 4. Nuxt.js 生成静态页的配置 5. 生成静态页,添加 SEO 关键信息 6. 利用 Hooks 注入静态页 JS 本文已参加 GitChat「我的技术实践」有奖征文活动,活动链接:[ GitChat「我的技术实践」有奖征文活动](https://gitbook.cn/gitchat/activity/5d5e3d9d877aaf2c49e5c87e)
104 订阅

升级工具链吧!使用 Webpack 开发企业官网

在 SPA 项目中,使用 Webpack 很爽;但是做企业官网项目,就显得很鸡肋: 1. 企业官网重展示轻功能,基本都是静态 HTML 2. 很多页面不需要 JS 3. 需要 i18n 我之前选用 Gulp 工具链,逻辑并不复杂,但是全部资源都要自己管理,代码很多,维护起来比较麻烦,团队协作也不容易。这次下定决心用 Webpack 重构,踩了不少坑,摸索了不少新方式,最终效果比较理想。我希望分享出来: 1. Webpack 基础和进阶,如何配置多页面项目 2. 使用 Pug 编写页面逻辑,完成 i18n 3. 使用 Stylus 写样式,响应式 4. 优化页面 5. 创建插件自动优化页面 面向读者: 1. 网页重构工程师 2. 想要学习完整网页制作知识 3. 想充分了解前端工具链
严选
249 订阅

从 jQuery 里学习设计模式

现在,整个前端界会选择 jQuery 搭建新产品的人寥寥无几。一方面,MVVM 已经证明了架构方面的巨大优势;另一方面,大量优秀的设计被原生 JS 吸收,甚至连 jQuery 都放弃 Sizzle 改用原生选择器。但是,jQuery 十几年的积淀绝非 QuerySelector 就能取代。 我想结合自身的开发经验,以大家都熟悉的 jQuery 为例,教大家理解和使用更多设计模式,尤其是那些帮助 jQuery 取得卓越成就的设计模式,让大家在面试时不至于只知道单例和观察者,也能在工作中更加无往不利。 面向受众: 1. 中级开发者,熟悉原生 JS 2. 希望用设计模式武装自己 分享大纲: 1. 设计模式介绍 2. 享元模式 3. 外观模式 4. 组合模式 5. 工厂模式 6. 桥接模式
严选
222 订阅

走出 Vue 新手村

Vue 的学习曲线平缓,入门很简单,所以后发夺人,争取到一大批支持者,我也是其中之一。但是因为隐蔽了很多细节,所以我也没少踩坑,挠头拍桌,不厌其烦。如今,我终于突破屏障,遇到大部分问题,都能举一反三,快速定位、快速解决。这段过程,难免追本溯源,穷究细节。我希望通过这次分享,把我的经验和收获传达给大家。 面向听众: 1. 有一定 Vue 开发经验,希望进一步提升; 2. 平时业务代码写得多,想学习技术细节。 本次分享大纲: 1. 响应式的解析的陷阱(解决页面不更新) 2. DOM 操作(弹窗组件的实现) 3. 用户身份认证(Vuex、Vue-Router 全家桶) 4. 全局事件 5. 多层组件数据传递 6. 组件插槽的使用 7. 组件库开发
383 订阅

用 Vue 改造 Bootstrap,渐进提升项目框架

Vue 横空出世,以迅雷不及掩耳之势横扫前端界,俨然有当年 jQuery 之势。我认为 Vue 成功的关键在于三点: 1. 学习曲线平缓,有点经验的前端基本上一天就能看完文档,然后就可以上手操作 2. 上升空间很大,组件化/路由/Vuex/Ajax,生态完整,架构强壮,用它构建中大型项目也很容易 3. API 设计优雅,并且和标准很友好 但是在我看来,很多 Vue UI 组件库反倒走在一条错误的道路上:过分追大求全。比如说,第一个组件多半是 Grid,CSS 能搞定的事情为什么要做成组件?前端本来就是 HTML/CSS/JS 的集合,我们理应把合适的技术用在合适的地方。所以我希望做这样一场 Chat: 1. 以 Bootstrap 为基础 2. 对其进行有限的改造,让它能渐进地获得提升 3. CSS 的归 CSS,JS 的归 JS 适合的读者:1. 初中级前端,希望学习 Vue 和组件式开发;2. 后端,用过 Bootstrap 基础,想升级改造框架。
226 订阅

JavaScript 异步开发攻略

为解决异步函数的回调陷阱,开发社区不断摸索,终于折腾出 Promise/A+。它不增加新的语法,可以适配几乎所有浏览器;以队列的形式组织代码,易读好改;捕获异常方案也基本可用。这套方案在迭代中逐步完善,最终被吸收进 ES2015。不仅如此,ES2017 中还增加了 Await/Async,可以用顺序的方式书写异步代码,甚至可以正常抛出捕获错误,维护同一个栈。可以说彻底解决了异步回调的问题。 现在大部分浏览器和 Node.js 都已原生支持 Promise,很多类库也开始返回 Promise 对象,更有各种降级适配策略。Node.js 7+ 则实装了 Await/Async。如果您现在还不会使用,那么我建议您尽快学习一下。本场 Chat 我准备结合近期的开发经验,全面介绍 现代化的 JavaScript 异步开发。大纲如下: 1. 什么是 Promise? 2. 异步回调有哪些问题? 3. Promise 详解 4. 使用范例全面解析 5. 常见错误 6. 更好的解决方案:Await/Async 7. Tips:在全平台使用 8. Tips:在小程序使用 9. Tips:使用 util.promisify 改进现有代码 难度:了解 JavaScript,最好有异步开发经验。 **实录提要:** - 异步函数如何在 Gulp 里应用? - 异步函数如何在 H5 项目中应用? - promise 有什么缺陷,await 是怎么解决的? - 模拟实现一个 promise,有没有好的仓库源码推荐? - 异步编程在前后端分离的场景下,主要有哪些作用?前后端分离下的 API 该如何管理才合理? - 有了 Async 还有必要学习 Generator 吗? - “启用一个新栈”,可以理解为 eventloop 吗? - JS 引擎返回的回调函数的结果,不会 push 到原程序运行的栈内吗?
严选
678 订阅
微信扫描登录