20180713 前端开发日报

这一次,我要弄懂javascript的模块化;面试官:请手写一个webpack4.0配置;JavaScript异步图像上传;懂这些,你将能构建更安全的Web应用;web前端基于vue的大型项目分模块开发;手把手教你封装 Vue 组件,并使用 npm 发布;基于vue.js的dialog插件art-dialog-vue2.0发布;模仿 egg.js 使用 koa2 搭建项目

  1. 这一次,我要弄懂javascript的模块化 随着前端js代码复杂度的提高,js模块化是必然趋势,不仅好维护,同时依赖很明确,不会全局污染,今天整理一下模块化的几个规范吧~ 首先梳理一下模块化的发展情况~ 无模块化–>CommonJS规范–>AMD规范–>CMD规范–>ES6模块化 1. 无模块化 script标签引入js文件,相互罗列,但是被依赖的放在前面,否…
  2. 面试官:请手写一个webpack4.0配置 确认过眼神,你还是没有准备秋招的人?时间仓促。自京东6月8号开启管培生的招聘,就意味着秋招的开始。然而你还在等着秋天的到来?今年形势应该更为严峻,随着各大技术(vue,webpack,react,微信小程序)生态越来越成熟,这也意味着我们要更加深入的去了解他们
  3. JavaScript异步图像上传 当向服务器上传图像时,根据服务器操作的复杂性和服务器性能,需要几秒钟到几分钟的时间来完成。本文的重点是在图像上传至服务器时使用JavaScript立即显示图像。 介绍 当使用JavaScript将图像上传到服务器时,根据服务器操作的复杂性,可能需要几秒到几分钟来完成操作。在某些情况下,即使图像上传成功,也需要花…
  4. 懂这些,你将能构建更安全的Web应用 浏览器安全 同源策略(Same Origin Policy) 同源策略限制了一个源(origin)中加载的文档或脚本与其他源(origin)中的资源交互的方式。这是一种用来隔离潜在恶意文档的关键安全机制。源的定义:如果两个页面的协议、域名、端口
  5. web前端基于vue的大型项目分模块开发 众所周知,在webpack和单页面应用出现之后,前端工程师从开发到打包已经是一站式解决方案,由之前繁琐的很多个js,css,html文件到现在打包成1个或几个,可以说是一个进步。但是随着项目越来越大,团队的人越来越多,需要开发的模块也越来越多。这样传统的单页面
  6. 手把手教你封装 Vue 组件,并使用 npm 发布 源码地址,如果对你有帮助的话希望不要吝啬你的 Star 本文主要记录一下如何基于 Vue 开发组件,并在 npm 上发布。废话不多说,进入正题 Vue 开发插件 开发之前先看看官网的 开发规范 我们开发的之后期望的结果是支持 import、require 或者
  7. 基于vue.js的dialog插件art-dialog-vue2.0发布 art-dialog-vue —— 经典、优雅的网页对话框控件 优点 支持普通与 12 方向气泡状对话框 支持 ARIA 标准 面向未来:基于 HTML5 Dialog 的 API
  8. 模仿 egg.js 使用 koa2 搭建项目 最开始学 koa,惊讶其简洁,甚至是简陋的语法,觉得自己好像什么都能干,可是好像又什么也干不了。 其中最头疼不是其洋葱模型,而是常用的组件,比如路由和session就有好几个推荐的,官方也调皮,一次维护两,视图组件现在都是自己瞎写凑合着用,个人项目没人管,随便瞎搞了。 后面接触了基于 koa 开发的框架egg.js…
  9. 5分钟学会Vue动画效果 1.哪些元素/那些组件适合在那些条件下实现动画效果 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 简单经典例子:(文字隐藏到显示效果) <div> <button @click="show =
  10. vue项目技术随笔 最近都在做vue相关的项目,在公司推行前后端分离,重构以前的项目,真的好忙,一个项目接着一个,爬不完的坑,不说了,说多了都是眼泪。开始正文了!!! Vue 路由切换时页面内容没有重新加载 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个
  11. 分享一个 vue 轻量级的轮播组件 A swipe (touch slide) component for Vue2.x in mobile device. Only support touch event now. 中文文档
  12. 前端实现弹幕效果的方法总结(包含css3和canvas的实现方式) 之前在一个移动端的抽奖页面中,在抽奖结果的展示窗口需要弹幕轮播显示,之前踩过一些小坑,现在总结一下前端弹幕效果的实现方式。 css3实现乞丐版的弹幕 css3弹幕性能优化 canvas实现弹幕 canva弹幕的扩展功能 本文原文地址: 原文地址 1. css3实现乞丐版的弹幕 (1)如何通过css3实现弹幕 …
  13. 使用 git hook 实现服务器代码自动部署 前几天把 Hexo 博客部署到了阿里云服务器,但发现每次推送文章都需要去服务器同步代码。最终寻找到 git hook 来解决了这个问题 更新于 2017.11.14 首发于夏味的博客: xiaweiss.com/ 1. 说明 在服务器,要建一个相当于 gi
  14. vue项目通过命令行传参实现多环境配置(基于@vue/cli) 大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run serve //默认本地开发环境 npm run serve
  15. js异步加载顺序执行 前言 前端优化有个原则,叫资源懒加载。 对于某些js资源,我们在页面load前并不需要用到,加载反而会影响到首屏速度。 把这些js放到 load 后进行加载,我们称之为js异步加载。 异步加载的手段 1.最简单的做法:Script Dom var script = document.createElement("script") script.src="xxx.js…
  16. 2018年6月前端面试经历(下) 前言 这是6月前端面试最后一篇文章了,因为我的技术栈是react,下面都是面试官面对面问的一些问题的记录~ react react的生命周期 MOUNTING: mountComponent 负责管理生命周期中的 getInitialState、compon
  17. 周大侠啊 进击的 JavaScript(三) 之 函数执行过程 原文链接:周大侠啊 进击的 JavaScript(三) 之 函数执行过程 理解js 的执行过程是很重要的,比如,作用域,作用域链,变量提升,闭包啊,要想明白这些,你就得搞懂函数执行时到底发生了什么! 一、执行环境(Execution Context)又称执行上
  18. 多人协同开发如何保证代码质量看看这篇《理想中的Jenkins+Sonar+Github代码质量管理》前阵子老美的Audit要求各个开发组截图各自repository的Sonar Analysis Report,我跑去Sonarqube一看。。。好家伙!全是红灯,简直惨不忍睹
  19. 谈谈JavaScript中的this机制 this是JavaScript中比较复杂的机制之一,本篇文章希望可以带大家了解this相关的知识。本文内容来自书籍《你不知道的JavaScript(上卷)》,只是自己稍微整理一下。 ☕️为什么使用this 问题来了,既然this比较复杂,我们为什么还要使用呢?
  20. WebGL入门与进阶1 改革开发40年以来,世界日新月异,无论从生活到精神上都有了颠覆性的变化,曾经教授还是教书的,砖家还叫专家,太阳还不叫日,菊花还是一种花,老王还没那么多,Web还只需要做IE,XHR还没出生的时候,怎么能想到现在浏览器会提供如此丰富多彩的多媒体生活,无论是音频、视频、以及各种漂亮的页面都在让用户更好的拥抱着…
  21. 在Bootstrap开发中解决Tab标签页切换图表显示问题 在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其他页面的时候显示内容没有发生动态的调整,本篇随笔介绍解决Tab标签页切换图表显示问题,以及图表控件可以…
  22. node之HTTP 从服务端感受ajax和form ajax发送请求,需要传输数据,数据有不同的类型,所以也是靠请求头告诉后台处理逻辑 传输数据的方式有很多种 http: 1.0,1.1(keep-alive) 复用连接, 2.0 https 新特点双向通信,多路复用 数据交互的方式 客户端主动发送请求给服务端,服务端返回数据,我们叫单向通信 表单 (会页面跳转,如果是get会加个?,如果是po…
  23. JavaScript中发出HTTP请求最常用的方法 JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求。在本文中,我们将介绍一些在JavaScript中发出HTTP请求的流行方法。 Ajax Ajax是发出异步HTTP请求的传统方式。可以使用HTTP POST方法发送
  24. 前端全(无)埋点之JS异常上报 前端全(无)埋点之JS异常上报 左鹏飞 2017.11.29 相关阅读 前端全(无)埋点之页面操作路径可视化
  25. 浅谈JavaScript错误 本文主要从前端开发者的角度谈一谈大多数前端开发者都会遇到的js错误,对错误产生的原因、发生阶段,以及如何应对错误进行分析、归纳和总结,希望得到一些有益的结论用来指导日常开发工作。 概念辨析 错误(Error)和异常(Exception) 对于Java来说错误和异常是两个相近但是不同的概念,而在JavaScript中可以认为…
  26. Promise到底解决了什么问题? 我的github github.com/zhuanyongxi… 大家都知道Promise解决了回调地狱的问题。说到回调地狱,很容易想到下面这个容易让人产生误解的图片: 可回调地狱到底是什么?它到底哪里有问题?是因为嵌套不好看还是读起来不方便? 首先我们要想
  27. vue中extend,mixins,extends,components,install的几个操作 前言 你知道extend,mixins,extends,components,install用法吗? 你知道他们的区别吗? 你知道他们的执行顺序嘛? 下面都能找到这些答案. 1.Vue.extend 1.使用vue构造器,创建一个子类,参数是包含组件选项的
  28. CSS预编译器三剑客及PostCSS 这篇文章包含两个部分,第一部分是个CSS预编译器:Sass、Less、Stylus,他们之间的对比,第二部分是现在大火的PostCSS。 为什么会出现CSS预编译器这个东西呢?这就要谈到CSS的不足了:没有变量(新的规范已经支持了),不支持嵌套,编程能
  29. TS+Nodejs+Express构建用于前端调试的WEB服务器 本文将简述如何使用 vscode 开发工具来搭建一套 TypeScript 的开发环境,其中我们会使用 Express 这套灵活的web应用开发框架来提高我们的编码效率,另外我们还会增加 nodemon 这个程序来自动监控你源代码的改变并自动重新启动服务器…

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流