Vue 3.0 源码开放，看看都有哪些新特性；ajax跨域问题我只学一种解决方案；国庆献礼之ThreeJs实现3D上海外滩全景；Vue 使用中需要注意回避的地方；现代 JavaScript 教程 — 重学变量；网上最全的原创 nodejs 深入系列文章；Vue3.0数据响应式原理；前端面试每日 3+1 —— 第174天
-
ajax跨域问题我只学一种解决方案 Ajax跨域问题的jsonp解决方案 在前端我们经常会使用Ajax来向服务器发送请求和接收服务器响应回来的数据,一般来说在同一个服务器的数据来往是没有什么问题的,但是有时使用Ajax请求数据并不局限于同一个服务器,跨服务器请求就会遇到跨域问题,下面我们探讨一下跨域问题是怎么产生的,最优的解决方案是什么? 同源策略 …
-
国庆献礼之ThreeJs实现3D上海外滩全景 最近入了three.js的坑，想用three.js做一些demo以便巩固自己最近所掌握的知识点，而且正好赶上国庆放假，随，有了这篇~ 预览地址：Three.js之上海外滩 Tip1: 打开后浏览器一直转圈 建筑物的贴图不显示 是网络问题 等一会儿就好 毕竟是github… Tip2: 如果打开后帧数过低 比较卡的话，可以调整代码中的SHADOW_MA…
-
Vue 使用中需要注意回避的地方 20191009 前端开发日报 Vue 使用中需要注意回避的地方;JavaScript类型转换的有趣应用;前端面试每日 3+1 ——第174天;2019.10 / JavaScript 月刊 – W3…
-
现代 JavaScript 教程 — 重学变量 大多数情况下，JavaScript 应用需要处理信息。这有两个例子： 一个网上商店 —— 这里的信息可能包含正在售卖的商品和购物车。 一个聊天应用 —— 这里的信息可能包括用户和消息等等。 变量就是用来储存这些信息的。 变量 变量 是数据的“命名存储”。我们可以使用变量来保存商品、访客和其他信息。 在…
-
网上最全的原创 nodejs 深入系列文章 耗时两个月，终于赶在国庆节前把这一系列的文章(大部分文章是别的年份写的，因为跟这个系列也有关联，所以一起展示。这两个月写的大概有6篇，未来还有几篇)作为献给大家()，为了让大家可以一键收藏阅读，这里做一个合集，欢迎大家收藏评论。其中还有待完成的文章也罗列在里面，年底前更新完成。 nodejs …
-
Vue3.0数据响应式原理 先把vue-next仓库的代码clone下来，安装依赖然后构建一下，vue的package下的dist目录下找到构建的脚本，引入脚本即可。 下面一个简单计数器的DEMO： <!DOCTYPE html> <html lang="en"> <body> <div id=’app’></div> </body> <script src="./dist/vue.global….
-
前端面试每日 3+1 —— 第174天今天的知识点 (2019.10.07) —— 第174天 [html] img、input标签它们是行内元素还是块级元素？ [css] css3和css2的区别是什么？ [js] 你知道断点续传的原理吗？用js怎么实现？ [软技能] 你想当技术总监吗？你觉得技…
-
Vue 3 源码开放，今天你学习了吗？正在海边浪的思否小姐姐一觉睡醒发现，国庆假期都不休息的尤雨溪大大在昨天凌晨发布了 Vue 3 源代码，源码地址：[链接] ——
-
Javascript ES6 专栏 | 解构赋值 解构赋值，是ES6中给变量赋值的一种方法。顾名思义，他是通过某一语法规则，解析某一事物的结构来进行赋值。结构的对象通常有数组，对象，函数参数等。 二、解构赋值 类型 （一）解构赋值-数组 1.基本语法及原理 = //目标解构数组 var person=["jk&q…
-
Vue中的项目优化 对于vue的性能，其本身已经相当OK啦！现在我会针对以下几个方面对Vue中的项目优化进行简单的总结。当然也仅仅是几个小小的注意点哦！ 一、书写习惯 1，不需要做响应式的数据，不要放在data中 响应式数据：每个Vue实例都会代理其data对象里所有的属性，只有这些被代理的数据是响应式的，在其数据改变时视图也会随…
-
《你不知道的 JavaScript》笔记（一） 用了一个星期把《你不知道的JavaScript》看完了，但是留下了很多疑惑，于是又带着这些疑惑回头看JavaScript的内容，略有所获。 第二遍阅读这本书，希望自己能够有更为深刻的理解。 词法作用域 ……如果是 有状态 的解析过程，还会赋予单词语义…… 这本书是以编…
-
JavaScript类型转换的有趣应用 背景 可以访问这个网站提前预览： https://knightyun.github.io/magic-expression/ 先来看一串代码： (!(~+ ]* ]+~~!+ +({}+ ]*~+ 也许你在其他地方看见过这种黑科技操作，那么不妨猜一下上面的代码的值等于多少，实在猜不到可以复制它粘贴到浏览器 console 中回车看看； …
-
Three.js + GreenSock 模拟简单随机动画 Three.js封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染，相对于webGL，Three.js封装了底层的图形接口，在不了解图形学的情况下，也能用简单的代码实现三维场景的渲染 预览地址 开始使用 CDN引入 <script src="https://cdnjs.cloudfla…
-
庖丁解牛之 Flutter for Web Flutter for Web 在2018年冬的Flutter 1.0伦敦发布会上，Flutter产品经理Tim Sneath通过一个滑动拼图的例子介绍了如何让Flutter运行在Web之上。这一当时代号HummingBird的项目后来被重命名为flutter_web，并最终合入了master分支。 Flutter Web想在单代码库的情况下，使Flutter应用拥有Web支持…
-
抖音抖一抖：SVG 和 CSS 视觉故障艺术小赏 故障艺术，英文名称叫glitch，在很多赛博朋克作品中经常看到，其实就是故意表现一种显示设备的小故障效果，抖音的图标其实就是这种的效果，我们看下这个图标 这个图标中的红色和蓝色的偏移其实就是一种故障艺术，看到这个，我就能想到早年我家还没有有线电视时，摇天线对电视信号的场景，信号一差…
-
javascript 中 AOP 那些事 最近在忙着阅读 megalo 的代码 (未来会出一个系列专门讲 megalo 的源码，还是挺有意思的，大家可以期待一下)。感觉 megalo 、 mpvue 等小程序的跨端框架也好， weex 跨平台框架也好，本质都差不多，都是 fork 了一份 vue 过来改了改，借助了 vue 的能力，在平台具体的 api 上换成了自己的。 其中，有一段代码…
-
使用 Proxy 实现 Vue.js 3 中的响应式思想 我们知道，Vue.js 2 是通过 Object.defineProperty() 函数来实现的响应式。这个月 5 号尤大发布了 Vue.js 3 的源码，社区马上出现了很多源码分享的文章。 大家早就得知新版的响应式是用 Proxy 实现的，现在我们来利用 Proxy 实现一个基本的响应式骨架。 基础 关于 Proxy 的基础知识，可以去MDN学习直达链接。 …
-
解决webapck多页面内存溢出 因为自己的项目是基于 vue-cli3 进行开发，所以这里只讨论这种情况下的解决办法 在进行多页面开发的时候，项目刚开始阶段，因为文件较少，所以代码编译速度还行，但是随着项目逐渐增大， webpack 编译的速度越来越慢，并且经常出现内存溢出的情况。 下面就是几种尝试的方法，加快编译的速度 增加 Node …
-
nginx反向代理、负载均衡配置及vue项目部署 nginx配置文件结构 Nginx的配置文件是一个纯文本文件，它一般位于Nginx安装目录的conf目录下，整个配置文件是以block的形式组织的。每个block一般以一个大括号“{”来表示。block可以分为几个层次，整个配置文件中Main命令位于最高层，在Main层下面可以有Events、 HTTP等层级，而在HTTP层中又包含Server层，即server blo…
-
Vue3 watch函数执行过程 Vue.watch(() => { console.log("watch OK!!!"); app.querySelector(‘p’).textContent = count.value; }); 复制代码 调用watch // 简化后 export function watch(effectOrSource, effectOrOptions,options) { if (isFunction(effectOrOptions)) { } else { // 执行这里 return doWatc…
-
记一次 JavaScript 浮点型数字误差引发的问题 车间的工人在生产出来产品后，需要完成初步的自检，并通过手机上报。在实际生产中，用户（工人）不方便进行数值的输入，因而表单中的一些项设计成 picker 模式以供选取数值。数值的取值范围，根据允许的误差范围生成。示例如下： 示例一 // 误差 0.01mm ~ 0.06mm // picker 展示的数值 0.01, 0.02, 0.03, 0.04, 0.05, 0…
-
一张图理清 Vue 3.0 的响应式系统随着 Vue 3.0 Pre Alpha 版本的公布，我们得以一窥其源码的实现。Vue 最巧妙的特性之一是其响应式系统，而我们也能够在仓库的 packages/reactivity 模块下找到对应的实现。虽然源码的代码量不多，网上的分析文章…
-
实践实现纯前端下的音频剪辑处理最近在做一个项目，需要对webRTC录制的音频进行处理，包括音频的裁剪、多音频合并，甚至要将某个音频的某一部分替换成另一个音频。
-
使用lerna管理复杂的js包依赖 最近在学习antd的项目生态，打算等大致脉络理清了就开始更点博客，顺带的开始照着antd的样子一点点的搭一个生态。antd的项目内部光集成环境就搞了多个，从文档的集中推送，到测试发包的持续集成，想学习做基础应用还是一个很好的项目。lerna是在内部的cli，bisheng上看到的。方案还是比较好的，虽然我们已经有一个packag…
-
Vue 开发必须知道的 36 个技巧【近1W字】Vue 3.x 的Pre-Alpha 版本。后面应该还会有 Alpha、Beta 等版本,预计至少要等到 2020 年第一季度才有可能发布 3.0 正式版;所以应该趁还没出来加紧打好 Vue2.x 的基础;Vue基本用法很容易上手,但是有很多优化的写法…
-
记一次vue+nuxt性能优化 硬件环境： MacPro2018 i7+512G硬盘 16g内存+100M带宽 wifi连接 网站是一个电商网站,这次主要针对优化的是网站的首页 这次优化的网站是基于vue+nuxt开发的,nuxt是一个vue的SSR框架(它也可以生成一些纯静态的SPA),得益于nuxt本身框架的优化加上服务器端渲染,基于nuxt开发的网站性能已经能达到不错的水平,在正常的WiF…
-
webpack4 中如何实现资源内联？ 本篇文章会系统的介绍下 Webpack4 里面资源内联(HTML/CSS/JS/Image/Font)的正确姿势 首先，我们一起了解下什么是资源内联。 什么是资源内联？ 资源内联（inline resource），就是将一个资源以内联的方式嵌入进另一个资源里面，我们通过几个小例子来直观感受一下。 HTML 内联 CSS，这个其实就是我们通常说的 内…
-
Vue核心梳理 我们的开发都是围绕着 options 来的 <template> <div> name: {{ name }} <br /> type: {{ type }} <br /> list: {{ list }} <br /> isVisible: {{ isVisible }} <br /> <button @click="handleClick">…
-
利用跨域资源共享（CORS）实现ajax跨域调用 前几天看了一篇E文说部署 CORS 的 文章 ，CORS是一中跨域的方式，于是上网找了下Nicholas C. Zakas 的文章《 Cross-domain Ajax with Cross-Origin Resource Sharing 》，并且找到了中文的翻译，感觉不错，转来分享之。 几年前，网站开发者都因为ajax的 同源策略 而撞了南墙。当我们惊叹于XMLHttpRequest对象跨浏…
-
Javascript闭包（Closure） 闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 一、变量的作用域 要理解闭包，首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种：全局变量和局部变量。 Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 var n=999; function …
-
JSON工具类的构建(前端版本) 前言 在前后端交互的选择上，之前一直采用的是模板引擎(因为我只负责后端)。 而这次的一个算是作业吧，前后端都是我，所以就研究了一下JSON交互在java web的应用(主要是前端)。 优缺点 因为我是先写后端版本的，所以优缺点部分请跳转至 JSON工具类的构建(后端版本) 查看。 对比 因为我对js也是几天速成系…
-
JavaScript 数组常用方法 整理和分享一些数组中常用到的方法 大纲: 如何清空数组 如何将数组转换为字符串 如何将数组转换为指定格式字符串 如何将两个数组拼接为一个数组 如何对数组汇总的内容进行反转 如何截取数组中指定范围内容 如何查找元素在数组中的位置 如何判断数组中是否包含某个元素 如何把字符串转换为数组 …
-
React Hooks 你真的用对了吗？从 React Hooks 正式发布到现在，我一直在项目使用它。但是，在使用 Hooks 的过程中，我也进入了一些误区，导致写出来的代码隐藏 bug 并且难以维护。这篇文章中，我会具体分析这些问题，并总结一些好的实践，以供…
-
es6-认识Set和Map 在es5中经常用对象来实现集合 set 和映射 map 的数据结构，但是这种方式有一些弊端。比如实现集合时，我们不能用 if(set.count) 判断某个元素是否确切存在。在集合中，属性5和’5’会被当作同一个键，还有不能使用对象作为键，因为会转为 。所以，es6提供了两种新的数据解构： Set 集合和 Map 映射…
-
Vue 3 原理剖析：数据响应系统 这是我的剖析 Vue 3 原理的第一篇文章。这篇将会带着大家学习数据响应相关的内容，并且尽可能的 脱离源码来了解原理 ，降低大家的学习难度。 文章相关资料 Vue 3 目前的状态其实很适合阅读，因为代码量不多，并且核心功能是不会有什么大的变动的。 因此笔者 fork 了目前的源码，并且加以注释。同时为了照顾不怎么…
-
webpack常用加载器、插件总结，看这一篇就够了webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块…
-
函数式+状态管理探索前端开发不管是用主流的前端框架业务开发还是在写一些 sdk,通常的编程范式都是面向对象的,尤其 es6 新增 Class 语法糖后，功能模块的划分都基于类的力度。在写过和维护过不少代码后,渐渐觉的在状态复杂的应用中,按局部状…
-
Node.js到底是什么接触前端也有一段时间了，逐渐开始接触Node.js，刚刚接触Node.js的时候一直都以为Node.js就是JavaScript，当对Node.js有一定的了解之后，其实并不然两者之间有关系，其中的关系又不是必然的，对Node.js进行的一些…
-
Vue3响应式系统源码解析(上) 注意：在我写文章的时候，可能代码已有变更。在您读文章的时候，代码更有可能变更，如有不一致且有会对源码实现或理解产生重大不一致，欢迎指出，万分感谢。 10.5号，国庆佳节，小右男神发布了vue@3.0.0的alpha版代码。反正也没啥事干，最近也在学TypeScript，正好看看男神的代码，学习一下。 从入口文件packages/…
-
webpack 系列：10 分钟搞定 style-loader原文地址 前言 webpack loaders 系列文章： 10 分钟搞定 file-loader 10 分钟搞定 url-loader 搞定 style-loader 什么是 style-loader style-loader 的功能就一个，在 DOM 里插入一个 <style> 标签，并且将…
-
javascript：with的用法以及延长作用域链详见：[链接]
-
JavaScript中常用的数组操作方法 concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本。 var arr1 = ; var arr2 = ; var arr3 = arr1.concat(arr2); console.log(arr1); // console.log(arr3); // 复制代码 二、join() join() 方法用于把数组中的所有元素放入一个字…
-
初探Cordova结合Vue cordova : 可以把 html css js 写的代码打包成 app ，还可以让 js 调用原生的 api 。 cordova 非常成熟、插件也非常多、扩展性也强，10年的历史 打包App有几个方案 ionic reactNative weex flutter cordova+vue cordova+react cordova+angular 二、环境搭建 2.1 用cordova开发android 应用 安装jdk 、…
-
精读《用 Babel 创造自定义 JS 语法》前端精读已经写到第 123 篇了，大家已经不必担心它突然停止更新，因为我已养成每周写一篇文章的习惯，而读者也养成了每周看一篇的习惯。所以我想说的其实是一种更有生命力的自媒体运作方式，定期更新。一个定期更…
-
从 ECMA 规范看 JavaScript 类型转换 前言 JavaScript 中的类型转换一直都是让前端开发者最头疼的问题。前阵子，推特上有个人专门发了一张图说 JavaScript 让人不可思议。 除了这个，还有很多经典的、让 JavaScript 开发者摸不着头脑的类型转换，譬如下面这些，你是否知道结果都是多少？ 1 + {} === ? {} + 1 === ? 1 + [] === ? 1 + ‘2’ === ?…
-
Vue项目 使用拦截器和JWT验证 完整案例 几乎在所有的项目中都离不开 拦截器 和 登录验证 ，这是必需的，如果你学会了这个demo，那么几乎所有网站的登录验证，加载动画就都会了 所以本章以一个demo为例，来帮助大家理解 拦截器 和 登录验证控制 文章后面有源码，可以下载下来运行一下 先来看看效果： 功能： 当你访问首页的时候，…
-
es6-生成器Generator 迭代器是es6中一个重要的概念，很多新特性都是基于迭代器概念而铺开的。为了更加方便的创建自定义的迭代器，es6引入了生成器 (Generator) 的概念。它是一种可以返回迭代器的特殊函数。有了生成器及它的特性可以让我们创建更加简洁的异步代码。 基本概念 通过 function 关键字后面的星号 (*) 来表示，函数体用 yiel…
-
vue.js快速上手开发知识梳理 再此之前先扫盲一下 区分框架和类库等 类库 jQuery、Zepto、underscore… 类库提供的是真实项目中常用到的方法，它是一个工具包，基于这个工具包可以快速开发任何的项目 插件 TAB选项卡插件、BANNER轮播图插件、DIALOG模态框插件、DRAG拖拽插件… iscroll局部滚动插件、jquery中有很多的插件 插…
-
JavaScript中定义函数的方法 一般来说，函数是一串指令或是一段可以被该函数内部或外部代码调用的“子程序”，本质上，函数“封装”了一个特定的任务。函数是JavaScript中一个基础模块，真正理解函数可以帮助理解JavaScript的一些奇怪的点。 JavaScript中的函数 需要注意的是，函数是JavaScript的重要的一类对象，这意味着JavaScript中的函数可以像其…
-
JavaScript 模块化探索 前端模块化的实现意味着要将一个模块中的数据，逻辑和渲染合并在一个单元中，往往这个单元是一个 JS 文件。本文采用的方法也是如此。 React.js 的实现 React.js 采用单向的数据流：通过 mudule 层上的数据更新，触发 view 层的更新。使用state保存数据状态。React.js 会算出那些 view 需要重新渲染，然后再…
-
前端数值展示的思考与实践 前端如何友好的展示数值？本文基于实践总结了一些原则，介绍封装的工具库 Number Display ，并分析源码的实现。 Number Display 有适用于 Web 的 JavaScript 版和适用于 Flutter 的 Dart 版。 JavaScript 版 Dart 版 在前端开发中，数值展示是一个常见的需求。不同于统计或实验报表对精确性和规范性的注重，前…
-
this详解＋ES6中对象功能的扩展 在学习对象这部分的内容时候我更加明显的感觉到原生js的重要性。所以我又把js里面的this知识点给复习了一下。 关于this，这个关键字在很多语言中都会出现，但是this的指向很多初学者模棱两可。在JavaScript中，this一般的指向在函数定义的时候是确定不了的，至于在函数执行的时候才能确定，实际上this指向的是最终调用自…
-
Vue3.0 中的数据侦测 在10月05日凌晨Vue3.0的源代码正式发布了，来自官方的消息： 目前的版本是 Pre-Alpha ， 仓库地址： Vue-next ， 可以通过Composition API了解更多新版本的信息， 目前版本单元测试相关情况vue-next-coverage。 文章大纲： Vue 的核心之一就是响应式系统，通过侦测数据的变化，来驱动更新视…
-
MobX or Redux? 在过去的项目中一直用的都是Redux，觉得挺不错的，按照官方推荐的一些写法，再加上团队风格，打造了一套关于Redux的架构，但是，现在觉得写Action、Reducer太繁琐，随着业务不断的增量，相应的文件和代码也会不断的增加，而且对新人来说不是非常友好(理解Redux比较困难)，听说一方诸侯MobX非常不错，所以在尝试使用了，…
-
《深入浅出webpack》有感对于前端仔来说，相信大家对webpack都再熟悉不过了，但是你对webpack的了解程度又有多深呢，笔者花了几天时间看了一下《深入浅出webpack》，虽然说书中大部分介绍的是配置和使用相关的，但是如果你对webpack的配…
-
详解 http 报文 总算在节前晚上完成了，祝大家国庆快乐！ 摘要 作为一个web开发者，每天都在使用者Http协议，却总是一知半解。本文参看Http RFC7230规范，梳理了http报文部分。 http 报文构成 start-line: 起始行,描述请求或响应的基本信息 *( header-field CRLF ): 头 CRLF header …
-
教你用开源 JS 库快速画出 GitHub 章鱼猫 本文作者：HelloGitHub-kalifun 文中涉及的示例代码，已同步更新到 HelloGitHub-Team 仓库 点击本文最下方的“阅读原文”即可获取 在上一篇文章我们介绍了 Zdog 如何使用，接下来这篇文章我将带领各位利用 Zdog 画出一个 GitHub 章鱼猫（和官方的还是有些差别的）。 …
-
JavaScript 数组计数排序 计数排序是一个非基于比较的排序算法,它的优势在于在对一定范围内的整数排序时，快于任何比较排序算法 计数排序实现图 目录 第一版 思路 代码实现 第二版 思路 代码实现 第一版 思路 例如我现在有 一组 5 个数的数组需要进行排序 let arr = [2,6,3…
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
