
web开发从PC到手机
文章平均质量分 83
web开发,从基础出发。从PC端到移动端,注重javascript基础,研究各种流行web框架,深入浅出研究每个细节。
Faremax
web开发,一直在努力
展开
-
前端开发 VS Code 上手使用
如果想配置vim 开发工具所谓网红编辑器,我觉得比vim来的更爽,因为vim的所有操作和插件,对于vs code 来说也就是一个插件就能无缝兼容。比如我之前是一直在使用 sublime 的,使用vs code 之后明显感觉 vscode 无论是配置还是使用都更顺手一点,学习成本很小。当然本文不是谈哪个编辑器更好的问题,每个软件都在发展,相互学习和补充才是重点。作为一个前端开发,vs code...原创 2019-03-10 01:50:15 · 1468 阅读 · 0 评论 -
全解跨域请求处理办法
为什么会有跨域问题我们试想一下以下几种情况:我们打开了一个天猫并且登录了自己的账号,这时我们再打开一个天猫的商品,我们不需要再进行一次登录就可以直接购买商品,因为这两个网页是同源的,可以共享登录相关的 cookie 或 localStorage 数据;如果你正在用支付宝或者网银,同时打开了一个不知名的网页,如果这个网页可以访问你支付宝或者网银页面的信息,就会产生严重的安全的问题。如果该未知...原创 2018-10-04 16:42:50 · 631 阅读 · 0 评论 -
阿里巴巴2018秋招总结
这是去年8月份秋招的面试,五面都面完了,给大家贡献干货吧。我没写问题的答案,有什么问题可以留言区问我。一面 电话面(1小时) 电话面问题不多,但是十分考验对相关知识熟悉程度,面试官是 P7(不理解这个就去百度吧)以前做过什么项目?使用了什么技术?(balabala…) 继续上一个问题,为什么使用 gulp 不用 webpack? 你都使用过哪些框架?(就说熟练XXX框架,用过了解XX...原创 2018-05-04 23:11:39 · 1916 阅读 · 0 评论 -
快应用开发快速上手及简明教程
博主的开发及调试环境是 macOS 10.13.4 + Chrome/65.0.3325.181 + honorV9 EMUI8.0.0(Android8.0.0) 本文适合有一定前端开发经验的小伙伴(有一定经验看原文档太累赘了,而且环境配置部分原文写的太零碎了),最后总结了一些开发过程中遇到的坑。附文档链接:https://doc.quickapp.cn/ 本文没有提到...原创 2018-05-02 14:05:48 · 3914 阅读 · 1 评论 -
JSON数据格式及其在WEB开发中的应用
JSON是什么?JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。RFC: http://www.rfc-editor.org/rfc/rfc4627.tx...原创 2018-05-02 14:04:17 · 1808 阅读 · 0 评论 -
Javascript模块化开发基础
认识模块export 和 import模块整体加载export default模块的继承ES6 模块加载的实质循环加载认识模块JS 作为一名编程语言,一直以来没有模块的概念。严重导致大型项目开发受阻,js 文件越写越大,不方便维护。其他语言都有模块的接口,比如 Ruby 的 require,python 的 import,C++ 天生的 #includ...原创 2018-02-25 16:43:40 · 562 阅读 · 0 评论 -
React 快速入门
本文采用 es6 语法,完全参考 https://reactjs.org/docs/ 本文完全参考 React 官方 Quick Start 部分,除了最后的 thinking-in-react 小节安装首先你需要点击安装 nodejs(npm)。然后执行:npm install -g create-react-app如果上述命令执行失败可以运行以下命令:npm原创 2018-01-21 13:45:19 · 5272 阅读 · 1 评论 -
简述 React 组件生命周期
详解 React 生命周期整个 React 生命周期有3个阶段:创建、更新、卸载,每个阶段有对应的工作和方法,我们可以看下面这个经典的图研究一下:第一阶段这是虚拟 DOM 创建的阶段,会依次执行 5 个方法,这 5 个方法中除了 render 方法,其余四个方法在整个生命周期中只调用 1 次,而且一定会调用 1 次:getDefaultProps() 这个方法在组件实例创建前,也就是构造函数执行原创 2017-12-17 13:42:59 · 906 阅读 · 0 评论 -
SPA 中前端路由基本原理与实现方式
通常 SPA 中前端路由有2中实现方式,本文会简单快速总结这两种方法及其实现:修改 url 中 Hash利用 H5 中的 historyHash我们都知道 url 中可以带有一个 hash, 比如下面 url 中的 page2https://www.abc.com/index.html#page2window 对象中有一个事件是 onhashchange,以下几种情况都会触发这个事件:直接更原创 2017-12-13 10:09:35 · 5572 阅读 · 0 评论 -
快速搭建 webpack + react 环境
安装首先你需要点击这里安装 nodejs(npm)。然后执行:建立一个目录作为项目根目录并初始化:mkdir react-webpackcd react-webpack/npm init安装相关组件这里包括了本文所需要的全部组件npm i --save-dev react react-dom react-transform-hmr webpack webpack-dev-server babel原创 2017-11-10 19:22:58 · 2164 阅读 · 2 评论 -
算法基础之二叉树
本文主要包括树相关的算法,二叉树结点基本结构如下function TreeNode(x) { this.val = x; this.left = null; this.right = null;}本文还会继续更新。二叉树的深度function depth(pRoot){ if(!pRoot){ return 0; } var depth = 0;原创 2017-10-12 11:39:13 · 812 阅读 · 0 评论 -
算法基础之简单线性算法
本文包括简单的线性算法和一些数值计算,还会继续更新rgb 和 16进制互相转换function rgb2hex(r,g,b){ return "#" + ((r<<16)+(g<<8)+b).toString(16);}function hex2rgb(str){ var arr = str.match(/[0-9a-f]{2}/ig); return { r: parseI原创 2017-10-12 11:33:53 · 1611 阅读 · 0 评论 -
剑指offer--JavaScript版
本文为8月牛客网《剑指 offer》刷题做得,现整理出来作为参考。 虽然是算法题,但本文用 JavaScript 编写,看了《剑指 offer》以后发现很多问题处理的过程并不是最好的,所以本文仅供参考。以前全部代码 AC 通过,但即便是 AC 的代码也不见得就是最好的,比如有的内存分配了却没有释放,这样的问题牛客网是查不出来的。剑指 offer1.在一个二维数组中,每一行都按照从左到右递增的顺序排原创 2017-09-24 17:49:07 · 2808 阅读 · 0 评论 -
前端开发中的基础思考题
前些日子在忙着面试,拿了心仪的 offer 以后闲下来整理了一些面试相关的基本概念。由于很多关于代码细节的东西之前的博客都有更详细的解释,所以本文涉及代码细节比较少,主要是面试相关的概念,也是前端比较零碎的一些知识。 以下内容包括我面试过程遇到的以及有些仅复习时遇到的内容,有不对的地方欢迎指正。什么是盒子模型?在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元原创 2017-09-19 11:35:42 · 4106 阅读 · 0 评论 -
六个Async/Await取代Promises的原因
原文链接:https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9如果你错过了,那么 Node 7.6 开始支持 async/await 了。如果你还没有尝试过它,这里有一大堆理由和例子告诉你为什么要不顾一切的直接使用它。[更新]:Node 8 LTS翻译 2017-09-18 14:40:32 · 2141 阅读 · 0 评论 -
浏览器常用事件解析
之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。表单事件键盘事件当 <input>, `“ 的值发生变化时触发。此外,打开 contenteditable 属性的元素,只要值发生变化,也会触发 input 事件。input 事件的一个特点,就是会连续触发,比如用户每次按下一次按键,就会触发一次input事件。此类事件包原创 2017-08-22 14:49:20 · 4475 阅读 · 0 评论 -
2017年校招全国统一模拟笔试(第三场)编程题集合(Javascript版)
地址:2017年校招全国统一模拟笔试(第三场)编程题集合变换次数 (AC)牛牛想对一个数做若干次变换,直到这个数只剩下一位数字。 变换的规则是:将这个数变成 所有位数上的数字的乘积。比如285经过一次变换后转化成2*8*5=80. 问题是,要做多少次变换,使得这个数变成个位数。 输入描述: 输入一个整数。小于等于2,000,000,000。输出描述: 输出一个整数,表示变换次数。输入例子原创 2017-08-14 19:40:30 · 1225 阅读 · 0 评论 -
2017年校招全国统一模拟笔试(第五场)编程题集合(Javascript版)
地址:2017年校招全国统一模拟笔试(第五场)编程题集合偶串 (AC)如果一个字符串由两个相同字符串连接而成,就称这个字符串是偶串。例如”xyzxyz”和”aaaaaa”是偶串,但是”ababab”和”xyzxy”却不是。 牛牛现在给你一个只包含小写字母的偶串s,你可以从字符串s的末尾删除1和或者多个字符,保证删除之后的字符串还是一个偶串,牛牛想知道删除之后得到最长偶串长度是多少。输入描述:原创 2017-08-14 19:42:06 · 1553 阅读 · 2 评论 -
透彻研究Javascript类型转换
Javascript 中有5种基本类型(不包括 symbol),以及对象类型,他们在不同的运算中会被系统转化为不同是类型,当然我们也可以手动转化其类型。Javascript 类型转换中坑点极多,就连 Douglas Crockford 在 《Javascript: The Good Parts》一书中也极力 ‘吐槽’ 。下面我们来自习研究一下这个部分,希望不要把自己绕晕。typeof 运算在解释各个原创 2017-08-05 12:46:10 · 2747 阅读 · 0 评论 -
Javascript数据类型与基本运算
标识符命名规则对于变量名,键值对中的键名应满足如下要求:开头必须是字母、下划线(_)或美元符号($)除了开头以外的字符也可以是数字不可以是关键字和保留字最好不要和全局变量/函数同名,会把原有变量/函数覆盖的风险这里,关键字就是在 js 中有特殊意义的单词,而保留字是为了以后使用预留的词语。但不要求背它们,随着学习的深入,自然就都记住了。常见的关键字有:break、delete、functi原创 2017-08-04 14:16:18 · 1003 阅读 · 0 评论 -
个人博客主页搭建随笔
经常在各种论坛、博客还有 github 上活跃的朋友不难发现,许多大牛都有自己的网站,也多以博客为主。博主作为一个立志前端的大白,难道不应该和大牛学习么? 说干就干,前端部分和 web 开发博主做了很多学习和总结,不少也写成了博客。对于后端,博主不敢说完全没有经验,但接触的也都比较简单。于是乎,博主六月底开始看 Node 和 Express,利用空闲时间做了自己的博客,现阶段还有许多不足,原创 2017-07-29 19:03:49 · 4331 阅读 · 1 评论 -
less 和 sass 配置
由于博主通常使用是都是 Sublime , 所以本文有点倾向这款编辑器。 文本配置在 mac 环境, linux 和 windows 环境也一样,因为用到的都是命令行和 sublime 插件 本文需要有 npm, 没有安装的请安装 nodejs 必步骤需要 root 权限,mac 和 Linux 用户使用 sudo, windows 用户请用管理员权限运行 cmdless 配置全原创 2017-07-18 16:14:33 · 1687 阅读 · 0 评论 -
ECMAScript6(19):Module 模块
相关文章ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 ECMAScript6 (4):字符串类型扩展 ECMAScript6 (5):函数的扩展 ECMAScript6 (6):数组的扩展 ECMAScript6 (7):二进制数组 ECMAScript6 (8):对象的扩展 ECMAScript6原创 2017-06-21 16:19:24 · 856 阅读 · 0 评论 -
ECMAScript6(18):Decorator修饰器
相关文章ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 ECMAScript6 (4):字符串类型扩展 ECMAScript6 (5):函数的扩展 ECMAScript6 (6):数组的扩展 ECMAScript6 (7):二进制数组 ECMAScript6 (8):对象的扩展 ECMAScript6原创 2017-06-20 10:13:37 · 3605 阅读 · 0 评论 -
ECMAScript6(17):Class类
class声明class 是 ES6 模仿面向对象语言(C++, Java)提出的定义类的方法。形式类似 C++ 和 Java (各取所长), 下面例子展示了 class 是如何定义构造函数、对象属性和对象动/静态方法的:class Point{ constructor(x, y){ //定义构造函数 this.x = x; //定义属性x this.y =原创 2017-06-19 17:22:22 · 2364 阅读 · 0 评论 -
ECMAScript6(16):异步编程
ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 ECMAScript6 (4):字符串类型扩展 ECMAScript6 (5):函数的扩展 ECMAScript6 (6):数组的扩展 ECMAScript6 (7):二进制数组 ECMAScript6 (8):对象的扩展 ECMAScript6 (9)原创 2017-06-18 15:37:08 · 1102 阅读 · 0 评论 -
ECMAScript6(15):Promise 对象
相关文章ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 ECMAScript6 (4):字符串类型扩展 ECMAScript6 (5):函数的扩展 ECMAScript6 (6):数组的扩展 ECMAScript6 (7):二进制数组 ECMAScript6 (8):对象的扩展 ECMAScript6原创 2017-06-16 10:38:10 · 1510 阅读 · 0 评论 -
ECMAScript6(14):iterator 迭代器
相关文章ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 ECMAScript6 (4):字符串类型扩展 ECMAScript6 (5):函数的扩展 ECMAScript6 (6):数组的扩展 ECMAScript6 (7):二进制数组 ECMAScript6 (8):对象的扩展 ECMAScript6原创 2017-06-15 11:14:24 · 1285 阅读 · 0 评论 -
ECMAScript6(13):Generator 函数
相关文章ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 ECMAScript6 (4):字符串类型扩展 ECMAScript6 (5):函数的扩展 ECMAScript6 (6):数组的扩展 ECMAScript6 (7):二进制数组 ECMAScript6 (8):对象的扩展 ECMAScript6原创 2017-06-14 10:33:51 · 1007 阅读 · 0 评论 -
ECMAScript6(12):Proxy 和 Reflect
相关文章ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 ECMAScript6 (4):字符串类型扩展 ECMAScript6 (5):函数的扩展 ECMAScript6 (6):数组的扩展 ECMAScript6 (7):二进制数组 ECMAScript6 (8):对象的扩展 ECMAScript6原创 2017-06-13 10:36:28 · 1265 阅读 · 0 评论 -
ECMAScript6(11):Set 与 Map
相关文章ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 ECMAScript6 (4):字符串类型扩展 ECMAScript6 (5):函数的扩展 ECMAScript6 (6):数组的扩展 ECMAScript6 (7):二进制数组 ECMAScript6 (8):对象的扩展 ECMAScript6原创 2017-06-12 08:52:00 · 1104 阅读 · 0 评论 -
ECMAScript6(10):Symbol基本类型
ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 ECMAScript6 (4):字符串类型扩展 ECMAScript6 (5):函数的扩展 ECMAScript6 (6):数组的扩展 ECMAScript6 (7):二进制数组 ECMAScript6 (8):对象的扩展 ECMAScript6 (9)原创 2017-06-11 08:44:53 · 1058 阅读 · 0 评论 -
ECMAScript6(9):正则表达式的扩展
相关文章ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 ECMAScript6 (4):字符串类型扩展 ECMAScript6 (5):函数的扩展 ECMAScript6 (6):数组的扩展 ECMAScript6 (7):二进制数组 ECMAScript6 (8):对象的扩展正则表达式的扩展主要包括以原创 2017-06-10 16:40:30 · 1381 阅读 · 0 评论 -
ECMAScript6(8):对象的扩展
基本扩展允许使用已有对象赋值定义对象字面量,并且只写变量名即可var name = "Bob";var getName = function(){console.log(this.name);};var person = {name, getName};//相当于//var person = {//name: "Bob",//getName: function(){console.lo原创 2017-06-09 11:12:30 · 1323 阅读 · 0 评论 -
ECMAScript6(7):二进制数组
相关文章ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 ECMAScript6 (4):字符串类型扩展 ECMAScript6 (5):函数的扩展 ECMAScript6 (6):数组的扩展这个部分如果没有C语言和计算机基础会比较难理解,如果实在理解不了可以收藏它,日后再看。二进制数组其实很早就有了,不过为原创 2017-06-08 11:16:50 · 1950 阅读 · 0 评论 -
ECMAScript6(6):数组的扩展
相关文章 ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 ECMAScript6 (4):字符串类型扩展 ECMAScript6 (5):函数的扩展数组的扩展Array, from() 将类数组对象和可遍历对象转化为真正的数组。var arrayLike = { '0' : 'a', '1' :原创 2017-06-07 17:39:10 · 1537 阅读 · 0 评论 -
ECMAScript6(5):函数的扩展
参数默认值ES5中设置默认值非常不方便, 我们这样写:function fun(a){ a = a || 2; console.log(a);}fun(); //2fun(0); //2fun(1); //1以上写法, 如果传入了参数, 但这个参数对应值的布尔型是 false, 就不起作用了。当然你也可以判断 arguments.length 是否为0来避免这个问题, 但每个原创 2017-06-06 09:49:21 · 1272 阅读 · 0 评论 -
ECMAScript6(4):字符串类型扩展
相关文章 ECMAScript6 (1):块级作用域 ECMAScript6 (2):解构赋值 ECMAScript6 (3):数值类型扩展 由于 优快云 不支持 utf-32 字符集,本文 unicode 部分存在一些乱码,全文中的”��” 表示一个汉字(上土下口),非乱码文章请查看 githubunicodejavascript 本可以表示 unicode, ES5 可以直接表示 u原创 2017-06-05 12:24:51 · 1403 阅读 · 0 评论 -
ECMAScript6(3):数值类型扩展
支持二进制和八进制 二进制用 0b 或 0B 开头, 八进制用 0o 或 0O 开头:Number('0b1101'); //13Number('0o107'); //71新加 Number.isFinite() 方法判断一个数字是否有限, Number.isNaN() 方法判断一个变量是否 NaN。值得注意的是, 如果将非数值传入这两个函数, 一律返回 false。将原有的 w原创 2017-06-03 11:36:16 · 1278 阅读 · 0 评论 -
ECMAScript6(2):解构赋值
解构赋值解构赋值简单来说就是 对应位置(数组)或对应键名(对象)的变量匹配过程。如果匹配失败, 对于一般变量匹配不到结果就是 undefined, 对于具有展开运算符(…)的变量结果就是空数组。数组的解构赋值var [a, b, c] = [1, 2, 3]; //a=1, b=2, c=3var [, , c] = [1, 2, 3]; //c=3var [x, , y] = [1,原创 2017-06-02 09:29:27 · 908 阅读 · 0 评论