20200416 前端开发日报

socket–vue-socket.io前端-express服务端；浅谈webpack+vue从零开始的后台管理项目(三) —–项目整理及代码书写规范；一键初始化新页面 npm script — 实践技能总结；淘系前端校招负责人直播答疑文字实录；为什么能快乐的在 esm 中使用 cjs 模块；编码面试题：从零开始实现数组方法来学习JavaScript；这些优化技巧可以避免我们在 JS 中过多的使用 IF 语句；使用 github action 自动化构建 OpenWrt docker 镜像

1. socket–vue-socket.io前端-express服务端

   import VueSocketIO from ‘vue-socket.io’; connetFun(); function connetFun(){ Vue.use(new VueSocketIO({ //研发环境会打印socket初始化过程+socket中定义的事件 debug: true, //我们的鉴权是拼接在query的 这个根据自己项目的实际情况来 connection: `http…

2. 浅谈webpack+vue从零开始的后台管理项目(三) —–项目整理及代码书写规范

   上一篇讲完了vue基本功能的完善, 这一篇就讲一讲关于项目的整理与代码的书写规范, 这一部分的话, 样式是参照bootstrap的css规范, 其他都采用见名知意的规则.当然, 还是那句话, 每个人自身理解的不同, 我这边就是分享下关于我的见解, 希望能给到大家参考帮助, 也希望有不足的地方能够在评论区给出, 一起学习, 一起进步 …

3. 一键初始化新页面 npm script — 实践技能总结

   业务的 h5 工程是基于 Koa 封装的 node 应用，前端采用的是多页面的方式，目录大概如下： ├── bin ├── app │ ├── controllers │ ├── routes │ └── views ├── src │ ├── pages │ ├── common 复制代码 在新增一个页面的时候，需要这样做： app/routes 中增加路由 app/controllers 中增加路由对应的中间…

4. 淘系前端校招负责人直播答疑文字实录

   3 月 25 日晚，面向 21 届学生，淘系前端团队举办直播活动，由淘系前端技术专家大果带来「淘系前端技术体系揭秘」和「校招问题答疑」，答疑环节更是邀请了淘系前端校招负责人、淘系高级技术专家元彦，直播回答问…

5. 为什么能快乐的在 esm 中使用 cjs 模块

   对于我们现在的 web 开发项目中，我们快乐的使用着 export/import 来进行模块化开发。好像一切原本就这么简单~ 但是我们也知道， esm 是es6 才在规范中引入。在此之前 js 语言规范中并没有模块化一说（当然，以前 web 也没有那么复杂）。 cjs 就是在没有 esm 之前的一个产物。正是 cjs 简单而又高效的模块化设计， 使得…

6. 编码面试题：从零开始实现数组方法来学习JavaScript

   本文将介绍一些JavaScript数组问题，通过从零开始实现数组方法来学习更多关于JavaScript数组的知识，并练习使用它们进行常见的操作。

7. 这些优化技巧可以避免我们在 JS 中过多的使用 IF 语句

   最近在重构代码时，我发现早期的代码使用太多的 if 语句，其程度是我从未见过的。这就是为什么我认为分享这些简单的技巧是非常重要的，这些技巧可以帮助我们避免过多的使用 if 语句。 接下来会介绍6种方式来代替 if 的使用，这样做不是坚决不使用 if 偏执狂，而是换个方式思考我们的编码思路。 1. 三元运算符 …

8. 使用 github action 自动化构建 OpenWrt docker 镜像

   README.md OpenWrt Docker镜像构建 为了在Docker中运行OpenWrt系统，我们需要用到OpenWrt的docker镜像,网上有很多人分享已经制作好的镜像。但是，每个人都有自己不同的需求，自己学会制作镜像就显得特别重要了。 其实使用OpenWrt的固件, 可以…

9. 「JS-Learning」理解this关键字

   《JavaScript高级程序设计（第3版）》 ： this 对象是在运行时基于函数的执行环境绑定的：在全局函数中， this 等于 window ，而当函数被作为某个对象的方法调用时， this 等于那个对象。（P182） 《你不知道的JavaScript（上）》 ： this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时…

10. 一篇文章带你浅入webpack的DLL优化打包

    我们在使用第三方包的时候，一般内部的代码都不会变，但是当webpack打包的时候，还是回去处理第三方包。我们是否可以利用一些方法来改进呢？我们可以先对第三方包处理，然后再打包。 二、实战 1、初始化 npm init 复制代码 2、局部安装webpack npm i -D webpack 复制代码 3、编辑package.json 加入一行代…

11. vue-cli设置publicPath小记

    几种设置 publicPath 后，再对比打包后的 index.html 文件 测试背景： 每次打包build完后，都单独生成一个 /dist 文件夹，且 dist 中每次都只有相同文件目录 部署的时候，是部署在服务器的一个 /test 文件夹下 打包后的文件目录： ├─dist ├─css ├─img └─js index.html 复制代码 一…

12. 写给新手同学的vuex快速上手指北

    //store.js import Vue from ‘vue’ import Vuex from ‘vuex’ Vue.use(Vuex) const store = new Vuex.Store({ state: {…}, mutations: {…}, actions: {…} }) export default store //main.js … import store from ‘./store’ Vue.prototype.$store = store const app = new Vue({ store,… }) …

13. webpack–基于vue-cli搭建一个多项目使用的工程（1）

    这个博文内容是基于vue-cli搭建一个多项目使用的工程（webpack版本3x）, 可以让多个项目用同一个组件。实现一个工程对特定的项目运行开发环境和打包环境 纯小白教程，如果你和我一样都不懂webpack，那就进来吧 推荐文章 不懂webpack推荐看这个浅入浅出webpack(很短的，不多内容，但是可以有基本的了解)，看完了…

14. Nodejs之实现路由和中间件

    我们首先起一个服务 const http = require("http"); const url = require("url"); http .createServer(function(req, res) { const pathname = url.parse(req.url).pathname; res.end(req.method.toLowerCase() + ": " + pathname); }) .listen(3000); 访…

15. 一文读懂JS中类、原型和继承

    很多前端小伙伴，包括我自己在开始学习JS时对__proto__和ptototype这两个概念时都是一脸懵逼，面试时遇到原型链的问题总是瑟瑟发抖；不过真正的勇士敢于直面难题，经过对原型链不断的探索，本文对JS中类和原型的概念进行了深入的讲解，同时从原型方面来了解JS中继承是什么。 构造函数和对象 首先让我们看一下，在其…

16. 一节课彻底弄懂promise、async、await（三）完结篇

    之前聊了异步编程的回调函数和promise，上一篇文章也说了，用promise解决异步编程，如果多个调用，就会看起来不那么舒服。 es6除了提供了promise还为我们提供了更加强大的async和await，async、await是Generator函数的语法糖，如果想要完全掌握async、await的用法，必须要掌握Generator函数的使用。 一、Generator 函…

17. Node.js 源码解析 util.promisify 如何将 Callback 转为 Promise

    Nodejs util 模块提供了很多工具函数。为了解决回调地狱问题，Nodejs v8.0.0 提供了 promisify 方法可以将 Callback 转为 Promise 对象。 工作中对于一些老项目，有 callback 的通常也会使用 util.promisify 进行转换，之前更多是知其然不知其所以然，本文会从基本使用和对源码的理解实现一个类似的函数功能。 1. Prom…

18. Nodejs之实现一个模版引擎

    最近看完了朴大的 《深入浅出nodejs》 这本书，在里面学到了许多，推荐大家可以去看一下，看完感觉可以写几篇文章记录总结一下，提升一下印象，毕竟学到的东西感觉不记下来过不久就容易忘记，大家也要养成学习记录的习惯，方便以后重温，今天来实现一个 node 的模版引擎，当然这个模版引擎在前端也可以用。 借鉴ejs标…

更多内容请关注公众号【前端开发博客】每日更新