JavaScript 函数防抖了解一下；vuex中的四大金刚；Babel是什么？；提前使用Vue 3.0新特性，vue-function-api尝鲜；9102，Promise 和 Async 你会真的会用了吗？；公司内部分享——D3.js的简单使用；3D Three.js初探 + 广告业务的关联思考；抛弃 JS，使用 TypeScript
-
JavaScript 函数防抖了解一下 说到防抖，想必多数人首先想到的是相机的防抖。因为我们并不是机器人，所以拿手机拍照的时候，手都会有不易察觉的抖动，这样的抖动会影响相片的质量。手机对这些情况做的一些补偿操作，减小了手抖对成像造成的影响。 我们都知道，JavaScript 是一门编程语言，不是人类也不是机器人。那什么情况下，会产生“抖动”呢？ …
-
vuex中的四大金刚 vuex常常让我这样的初学者摸不着头脑，刚学完vuex的我想用下面几个简单通俗的栗子来进行小小的分享 什么是vuex？ Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。(vuex是以插件的方式存在的) 复制代码 什么情…
-
提前使用Vue 3.0新特性，vue-function-api尝鲜 Vue3.0的预告已经快一年了，本月的Vue Conf大会上尤雨溪放出了Vue 3.0最重要的RFC，即Function-based API，有不少的小伙伴对此提出质疑。对此，我也想知道这样的一个升级究竟能带来怎样的改变。 正好VueJs的开发团队放出了基于Vue2.0的vue-function-api插件，可以在Vue2.0上进行function-api的尝鲜，作为新技术的狂热追…
-
9102，Promise 和 Async 你会真的会用了吗？ 遥想当年刚接触 JavaScript 时被回调地狱支配的恐惧，:joy::joy::joy:！ 解救之道，就在其中啊 — Promise 和 Async/await 推荐 vscode 插件 Code Runner，可以运行代码片段。学习利器啊。不过是基于 Node 运行环境 Promise 一个 Promise有以下几种状态: 状态一旦改变，便不能更改。 pending: 初始状态，既不是成…
-
公司内部分享——D3.js的简单使用 本篇是入门中的入门，甚至不会涉及svg，因为d3并不会帮我们去屏蔽svg和canvas的相关知识，只是让你更好的控制它们，所以为了快速了解d3的使用，这里用dom做渲染。 一、概述 官方定义: D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来….
-
3D Three.js初探 + 广告业务的关联思考 随着5G大浪潮越演越烈，越发越感觉到VR、裸眼3D、全息投影等技术体验离我们普通人的生活越来越近。作为广告部门的一只前端程序猿，也在思考Three.js在业务中能有什么用。好在之前在大学做项目的时候接触过OpenGL,渲染原理基本上都差不多，在初步学习完之后，列出一些自己的初步思考。这篇文章的前半部分会简单介绍一下Th…
-
Node.js + Express + TypeScript 最佳实践（一） 初始化服务 很多时候，我们在学习了某个新东西以后，却不知道如何在项目中运用自己学到的新东西。本篇旨在使用 Node.js + TypeScript 实现一个简单的登陆注册后台服务器，以此更加深入的理解 ts 在实际开发中的运用。 基础知识 阅读本篇专栏前，你需要掌握以下知识： 掌握 JavaScript 基础； 了解 Node.js 及 Express …
-
爬虫爬不到数据？试试puppeteer（Node.js） 前不久，在学校仿微博鲜知微信小程序的时候，正愁数据从哪来，翻到了数据一样的页面微博新鲜事（需退出登录状态），接着用cheerio爬取数据。结果翻车了，检查了一下发现发出请求拿到的body是空的，到微博新鲜事的网页源代码一看，发现…人家的html是js渲染的，应该是还有一次跳转。哇，好狠！ 本着只要思想不滑坡，…
-
使用vue中的混入mixin优化表单验证插件 之前写了一篇介绍在vue项目中，如何使用自定义指令开发表单验证插件的博客。时隔一个多月的时间，我来更新上一篇文章中所遗留的问题了。这段时间开发的时候使用到了这个表单校验插件，用起来比较麻烦就不说了，还有较严重的缺陷。自己最终还是抽空把这个插件进行了一些优化，虽然优化的方式和当初自己定下的方向不怎么相…
-
jQuery $ 原理及extend函数源码实现 jQuery在页面直接通过$调用 $ 就是jQuery的别称 通过 $() 创建jQuery的实例对象 实现 (function(root){ var jQuery = function(){ return new jQuery() } root.$ = root.jQuery = jQuery })(this) console.log($) 复制代码 一开始的思考是这样实现，打印$可以直接打印出jQuery构造函数…
-
一文搞清楚前端 polyfill polyfill 在英文中有垫片的意思，意为兜底的东西。在计算机科学中，指的是对未能实现的客户端上进行的"兜底"操作。打补丁在前端 er 是件习以为常的事情，结合笔者日常工作经验，总结出 3 种打补丁方式。涉及 @babel/preset-env 、 @babel/polyfill 、 @babel/transform-runtime 、 @babel/runtime 以及 core-j…
-
自动处理对象解构中 null 字段的 babel 插件 日常撸码过程中，我们不免会遇到类似这种报错， Uncaught TypeError: Cannot read property ‘a’ of null ，而出错的原因很明确，我们错误地从某个值为 null 或者 undefined 的变量读取属性 a 。数据的来源也多重多样，例如无意中声明的变量，或者接口返回的字段。 现有解决方案 常见的避免上述问题的解决方案主要有…
-
支付宝玉伯：从前端到体验，如何把格局做大？ 阿里妹导读：国内的前端行业，是一个群星璀璨，同时又有些纷纷扰扰的圈子。很多初出茅庐的年轻人怀着改变世界的梦想，谁也不服谁。不过，有一些为前端领域做出贡献的拓荒者几乎受到所有人的尊敬，玉伯就是这些拓荒者中的一员。正值毕业季，很多同学在面临新的抉择，今天就跟阿里妹一起了解玉伯的职业发展和他的一些思考…
-
学习笔记-HTML截图 最近项目需求总是有HTML页面生成图片功能，所以就想记录一下自己在过程中遇到的问题，并加深印象，日后如果忘了也可以回顾。我们项目使用的是html2canvas插件，还有其他插件，例如dom-to-image、rasterizehtml，可以根据需求使用。 html2canvas使用问题汇总 项目中引入的是0.5.0-beta4版本的cdn链接,直接调用方法htm…
-
一张图教你快速玩转vue-cli3 本文系统的梳理了vue-cli3搭建项目的常见用法，目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点： 如何安装项目插件 添加浏览器支持 如何配置scss/stylus共享全局变量 如何整合eleemntUI等第三方框架并实现按需引入 配置单/多页面 如何配置自定义环境变量 如何在vue.config.j…
-
nodejs实现远程桌面监控 最近使用node实现了一个远程桌面监控的应用，分为服务端和客户端，客户端可以实时监控服务端的桌面，并且可以通过鼠标和键盘来控制服务端的桌面。 这里因为我是用的同一台电脑，所以监控画面是这样的，当然使用两台电脑一个跑 客户端 ，一个跑 服务端 才有意义。 原理 其实这个应用的功能…
-
面试准备 | HTML/HTML5相关知识点 准备面试，扎实基础，知识点将持续更新与修改，如有错误，欢迎提出。 HTML 1 – 浏览器 | 浏览器页面构成 2 – 浏览器 | 浏览器内核相关知识点 3 – W3C | 对WEB标准以及W3C的理解与认识? 4 – 标签 | Doctype相关知识点 5 – 标签 | meta相关知识点 6 – 标签 | label相关知识点 …
-
一文速览Webpack 入口，Webpack执行构建的第一步将从entry开始，可抽象成输入； module.exports = { entry: ‘./main.js’ }; 复制代码 output 输出结果，在Webpack经过一系列处理并得到最终想要的代码后输出结果； module.exports = { entry: ‘./main.js’, output: { filename: ‘bundle.js’, path: path.resolve(__dirn…
-
学习vue源码—mvvm 这一篇主要是讲解一下vue里mvvm的原理，以及如何理解vue实现mvvm。 稍微有去了解过vue是如何双向绑定的我们都很容易知道vue是通过 Object.defineProperty 劫持 data 属性的 setter 和 getter ，但是这仅仅只是实现的一部分，在这个实现里我们还要理解 dep （订阅中心）和 watcher （订阅者）的概念。 dep —…
-
vue-router 源代码全流程分析「长文」 import Vue from ‘vue’; import VueRouter from ‘vue-router’; Vue.use(VueRouter); const Home = { template: ‘<div>home</div>’ }; const Foo = { template: ‘<div>foo</div>’ }; const Bar = { template: ‘<div>bar</div>’ }; const Child = { template: ‘<div>Child<…
-
探索Angular,React,Vue的趋势比较 小啰嗦 笔者从15年初识用node.js搭建Web前端，后又因老东家接了一些国内的外包项目，慢慢偏向了移动端。16年初有幸因带我的技术大佬的机会，偶然接触了前端框架并在公司推广那时候发展最成熟的Angular。对于我们这种从Web服务端搬迁过来做移动端的来说，Angular这个成熟的框架确实拯救了我们。以至于现在我都对它有一…
-
深入理解 JavaScript 中的Async and Await 原文： blog.bitsrc.io/understandi… 作者：Arfat Salman 翻译：前端小白 首先我们来讨论下回调函数，回调函数没什么特别的，只是在将来的某个时候执行的函数。由于JavScript的异步特性，在许多不能立即获得结果的地方都需要回调 这是一个Node.js异步读取文件的例子： fs.readFile(__filename,…
-
浅谈ES6中基本数据类型的操作方法在Javascript中，数据类型分为基本数据类型和引用数据类型两大类，其中，Array和Function在本质上仍然是一种特殊的对象:
-
花椒前端基于 GitLab CI/CD 的自动化构建、发布实践 在公司搭建内部 GitLab 平台后，前端活动项目从 SVN 迁移到 GitLab。本文介绍如何基于 GitLab CI/CD 实现自动化构建及发布。 在从 SVN 迁移到 GitLab 和接入 GitLab CI/CD 的过程中，特别感谢发布系统和服务端同学的大力支持。 一、目前的构建、发布流程 在这部分，我们先给…
-
深入理解vue响应式原理 【51CTO.com原创稿件】 前言 Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。—-官方文档 本文将针对响应式原理做一个详细介绍，并且带你实…
-
你不知道的Vue.nextTick源码系列 前言 众所周知，随着 Vue 技术的越来越热，大量的前端开发者开始探究这门神奇的框架，笔者也是从 JQuery 时代一脚迈进了 Vue 的世界。谈到 Vue ，在这呢，就不得不提一下笔者在研究一个 Vue 项目的时候碰到的问题，父组件修改标志位变量，而子组件的相应组件并没有显示，后来通过多方研究，发现了 Vue.nextTick 这个…
-
Koa 本地搭建 HTTPS 环境 openssl 首先本地需要安装 openssl，用于生成自签名证书。 $ brew install openssl 检查安装： $ openssl version LibreSSL 2.6.5 生成证书 执行以下命令生成证书： openssl req -nodes -new -x509 -keyout server.key -out server.cert Generating a 2048 bit RSA private key 执行后会提示输入一些信…
-
Vue手把手带你撸项目系列之动态面包屑 面包屑应该是我们在项目中经常使用的一个功能，一般情况下它用来表示我们当前所处的站点位置，也可以帮助我们能够更快的回到上个层级。 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能。以下案例都是使用 Element-UI 进行实现。 最笨的方式 首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好。 …
-
# Grunt 快速入门 Grunt 是JS的任务自动化工具。假设我们使用它来做js文件的混淆，我们需要如下组件： grunt-cli 命令行 grunt grunt组件 grunt-contrib-uglify-es 代码混淆组件 复制代码 首先安装在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中，把另外两个加入到本地开发依赖中： npm install -g grunt-cli npm in…
-
为vue3学点typescript(1), 体验typescript 看了 vue conf 2019 的视频, 特别兴奋, vue3要来了! vue3是用typescript开发的, 我揣测在vue的带领下typescript会成为主流呢, 要不先学点. 19年最酷的前端技术 我是19年初开始使用的 typescript , 自从开始用上了就喜欢上了, 真的爱不释手, 最爱他几点: 很多小错误比如: 对象的 字段不存 …
-
nodejs 二进制与Buffer javascript 中对数据处理都是以字符串的形式，而对于二进制数据就不便于处理，所以 Buffer 便是用于读取或操作二进制数据都对象。 一句话概括： Buffer 类是一个全局变量，用于直接处理二进制数据，提供工具类方法。 官网上关于 Buffer 解释的非常清楚，所以就不再拷贝官网，这里列举一些使用较为频繁的场景。 …
-
使用 Typescript 加强 Vuex 使用体验 Vuex 使用了统一的 dispatch / commit 方法去触发 Action 和 Mutation, 如果使用嵌套的 module, Vuex 还会解析命名空间，以找到正确的 Action/Mutation 函数。 对于组件来说很友好，但是对于项目维护来说可能就稍显痛苦。虽然对状态的更改都从视图逻辑里分离出来放在了 store 文件夹下，一目了然，但是对于触发 Actio…
-
前端规范之vue 项目规范 ├── index.html 入口页面 ├── favicon.ico 页面图标 ├── .babelrc babel规则 ├── .editorconfig 编辑器配置 ├── .eslintignore eslint忽略规律 ├── .eslintrc.js eslint规则 …
-
大白话理解和初步使用vuex 单向数据流是state => view => action => state，而view是不能直接改变state的 vuex就是数据管理，所有数据的修改都必须写成方法，放在mutations，只能通过 store.commit(‘xxmutation’) 修改数据 state/getters/mutations/actions，state注意没有s，代码里 mapState/mapGetters/mapMutations/mapActio…
-
前端模块化总结 开发者可以只需要实现业务逻辑，其他可加载别人写好的公共模块。 一、 script 引入文件 <script src="jquery.js"></script> <script src="jquery_scroller.js"></script> <script src="bootstarp.js"></script> <script src=&quo…
-
@pika/web 现在前端开发已经离不开webpack. 虽然webpack带来很多好处,但是它繁琐的配置以及较高的学习成本成为了开发人员的负担.vue-cli为我们做了一些基础配置,但是会带来另外一个问题.我们可能只是写一个小demo,但是需要安装一大堆没用的第三方依赖. @pika/web在一定程度上可以解决这些问题 开发模式的变换 在nodejs还没有问…
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
