y口米

y口米 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

y口米 关注了问题 · 2019-05-17

url中的#在react中顯示的效果,有效?無效?

问题描述

一般 html 在 component 中加入id 。ex: id = test1
接著在網址列中 最後輸入 #test1
載入網址後畫面便會移動至 id=test1這個物件處

但我這次使用的是react寫component
在最外層有個Page
在往內有數個component名為QAComponent
我分別為他們添上了id:q1,q2,q3......q10

理論上 應該要移動至指定id的物件處
但有時候會成功,有時候卻會失效
請問這是因為component render的速度問題嗎?
亦或者根本不是這樣使用的

想問問有沒有哪位大大寫過這樣的功能

預計期望是 url#id
載入時會滑動至指定id物件的位置
然後使用history.push('url/#id')
也能滑動至指定id物件的位置
但目前兩種都沒效果

关注 1 回答 0

y口米 提出了问题 · 2019-05-16

url中的#在react中顯示的效果,有效?無效?

问题描述

一般 html 在 component 中加入id 。ex: id = test1
接著在網址列中 最後輸入 #test1
載入網址後畫面便會移動至 id=test1這個物件處

但我這次使用的是react寫component
在最外層有個Page
在往內有數個component名為QAComponent
我分別為他們添上了id:q1,q2,q3......q10

理論上 應該要移動至指定id的物件處
但有時候會成功,有時候卻會失效
請問這是因為component render的速度問題嗎?
亦或者根本不是這樣使用的

想問問有沒有哪位大大寫過這樣的功能

預計期望是 url#id
載入時會滑動至指定id物件的位置
然後使用history.push('url/#id')
也能滑動至指定id物件的位置
但目前兩種都沒效果

关注 1 回答 0

y口米 收藏了文章 · 2019-04-08

《前端面试手记》之JavaScript基础知识梳理(下)

👇 内容速览 👇

  • 实现ES5继承的4种方法
  • 原型和原型链
  • 作用域和作用域链
  • Event Loop
  • 执行上下文
  • 闭包的理解和分析

🔍查看全部教程 / 阅读原文🔍

ES5继承

题目:ES5中常用继承方法。

方法一:绑定构造函数

缺点:不能继承父类原型方法/属性

function Animal(){
  this.species = '动物'
}

function Cat(){
  // 执行父类的构造方法, 上下文为实例对象
  Animal.apply(this, arguments)
}


/**
 * 测试代码
 */
var cat = new Cat()
console.log(cat.species) // output: 动物

方法二:原型链继承

缺点:无法向父类构造函数中传递参数;子类原型链上定义的方法有先后顺序问题。

注意:js中交换原型链,均需要修复prototype.constructor指向问题。

function Animal(species){
  this.species = species
}
Animal.prototype.func = function(){
  console.log('Animal')
}

function Cat(){}
/**
 * func方法是无效的, 因为后面原型链被重新指向了Animal实例
 */
Cat.prototype.func = function() {
  console.log('Cat')
}

Cat.prototype = new Animal()
Cat.prototype.constructor = Cat // 修复: 将Cat.prototype.constructor重新指向本身

/**
 * 测试代码
 */
var cat = new Cat()
cat.func() // output: Animal
console.log(cat.species) // undefined

方法3:组合继承

结合绑定构造函数和原型链继承2种方式,缺点是:调用了2次父类的构造函数。

function Animal(species){
  this.species = species
}
Animal.prototype.func = function(){
  console.log('Animal')
}

function Cat(){
  Animal.apply(this, arguments)
}

Cat.prototype = new Animal()
Cat.prototype.constructor = Cat 

/**
 * 测试代码
 */
var cat = new Cat('cat')
cat.func() // output: Animal
console.log(cat.species) // output: cat

方法4:寄生组合继承

改进了组合继承的缺点,只需要调用1次父类的构造函数。它是引用类型最理想的继承范式。(引自:《JavaScript高级程序设计》)

/**
 * 寄生组合继承的核心代码
 * @param {Function} sub 子类
 * @param {Function} parent 父类
 */
function inheritPrototype(sub, parent) {
  // 拿到父类的原型
  var prototype = Object(parent.prototype) 
  // 改变constructor指向
  prototype.constructor = sub
  // 父类原型赋给子类
  sub.prototype = prototype
}

function Animal(species){
  this.species = species
}
Animal.prototype.func = function(){
  console.log('Animal')
}

function Cat(){
  Animal.apply(this, arguments) // 只调用了1次构造函数
}

inheritPrototype(Cat, Animal)

/**
 * 测试代码
 */

var cat = new Cat('cat')
cat.func() // output: Animal
console.log(cat.species) // output: cat

原型和原型链

  • 所有的引用类型(数组、对象、函数),都有一个__proto__属性,属性值是一个普通的对象
  • 所有的函数,都有一个prototype属性,属性值也是一个普通的对象
  • 所有的引用类型(数组、对象、函数),__proto__属性值指向它的构造函数的prototype属性值

:ES6的箭头函数没有prototype属性,但是有__proto__属性。

const obj = {};
// 引用类型的 __proto__ 属性值指向它的构造函数的 prototype 属性值
console.log(obj.__proto__ === Object.prototype); // output: true

原型

题目:如何JS中的原型?
// 构造函数
function Foo(name, age) {
    this.name = name
}
Foo.prototype.alertName = function () {
    alert(this.name)
}
// 创建示例
var f = new Foo('zhangsan')
f.printName = function () {
    console.log(this.name)
}
// 测试
f.printName()
f.alertName()

但是执行alertName时发生了什么?这里再记住一个重点 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的prototype)中寻找,因此f.alertName就会找到Foo.prototype.alertName

原型链

题目:如何JS中的原型链?

以上一题为基础,如果调用f.toString()

  1. f试图从__proto__中寻找(即Foo.prototype),还是没找到toString()方法。
  2. 继续向上找,从f.__proto__.__proto__中寻找(即Foo.prototype.__proto__中)。因为Foo.prototype就是一个普通对象,因此Foo.prototype.__proto__ = Object.prototype
  3. 最终对应到了Object.prototype.toString

这是对深度遍历的过程,寻找的依据就是一个链式结构,所以叫做“原型链”。

作用域和作用域链

题目:如何理解 JS 的作用域和作用域链。

①作用域

ES5有”全局作用域“和”函数作用域“。ES6的letconst使得JS用了”块级作用域“。

为了解决ES5的全局冲突,一般都是闭包编写:(function(){ ... })()。将变量封装到函数作用域。

②作用域链

当前作用域没有找到定义,继续向父级作用域寻找,直至全局作用域。这种层级关系,就是作用域链

Event Loop

单线程

题目:讲解下面代码的执行过程和结果。
var a = true;
setTimeout(function(){
    a = false;
}, 100)
while(a){
    console.log('while执行了')
}

这段代码会一直执行并且输出"while..."。JS是单线程的,先跑执行栈里的同步任务,然后再跑任务队列的异步任务

执行栈和任务队列

题目:说一下JS的Event Loop。

简单总结如下:

  1. JS是单线程的,其上面的所有任务都是在两个地方执行:执行栈和任务队列。前者是存放同步任务;后者是异步任务有结果后,就在其中放入一个事件。
  2. 当执行栈的任务都执行完了(栈空),js会读取任务队列,并将可以执行的任务从任务队列丢到执行栈中执行。
  3. 这个过程是循环进行,所以称作Loop

执行上下文

题目:解释下“全局执行上下文“和“函数执行上下文”。

全局执行上下文

解析JS时候,创建一个 全局执行上下文 环境。把代码中即将执行的(内部函数的不算,因为你不知道函数何时执行)变量、函数声明都拿出来。未赋值的变量就是undefined

下面这段代码输出:undefined;而不是抛出Error。因为在解析JS的时候,变量a已经存入了全局执行上下文中了。

console.log(a);
var a = 1;

函数执行上下文

和全局执行上下文差不多,但是多了thisarguments和参数。

在JS中,this是关键字,它作为内置变量,其值是在执行的时候确定(不是定义的时候确定)

闭包的理解和分析

题目:解释下js的闭包

直接上MDN的解释:闭包是函数声明该函数的词法环境的组合。

而在JavaScript中,函数是被作为一级对象使用的,它既可以本当作值返回,还可以当作参数传递。理解了:“Js中的函数运行在它们被定义的作用域,而不是它们被执行的作用域”(摘自《JavaScript语言精粹》) 这句话即可。

题目:闭包优缺点

闭包封住了变量作用域,有效地防止了全局污染;但同时,它也存在内存泄漏的风险:

  • 在浏览器端可以通过强制刷新解决,对用户体验影响不大
  • 在服务端,由于node的内存限制和累积效应,可能会造成进程退出甚至服务器沓机

解决方法是显式对外暴露一个接口,专门用以清理变量:

function mockData() {
  const mem = {}
  
  return {
    clear: () => mem = null, // 显式暴露清理接口

    get: (page) => {
      if(page in mem) {
        return mem[page]
      }
      mem[page] = Math.random()
    }
  }
}

更多系列教程

⭐在GitHub上收藏/订阅⭐

《前端知识体系》

《设计模式手册》

《Webpack4渐进式教程》

⭐在GitHub上收藏/订阅⭐

查看原文

y口米 收藏了文章 · 2019-04-08

【连载】前端个人文章整理-从基础到入门

image

个人前端文章整理

从最开始萌生写文章的想法,到着手开始写,再到现在已经一年的时间了,由于工作比较忙,更新缓慢,后面还是会继更新,现将已经写好的文章整理一个目录,方便更多的小伙伴去学习。

JavaScript 基础知识 - 入门篇(一)

JavaScript 基础知识 - 入门篇(二)

JavaScript 基础知识 - DOM篇(一)

JavaScript 基础知识 - DOM篇(二)

JavaScript 基础知识 - BOM篇

JavaScript 进阶知识 - 特效篇(一)

JavaScript 进阶知识 - 特效篇(二)

JavaScript 进阶知识 - Ajax篇

JavaScript 进阶知识 - 高级篇

jQuery 入门详解(一)

jQuery 入门详解(二)

HTML5 入门详解

CSS3 入门详解(一)

CSS3 入门详解(二)

three.js 入门详解(一)

three.js 入门详解(二)

---------------------------------------- 未完待续----------------------------------------

1. JS 基础篇

1.1 入门基础概念

本篇文章主要讲的是js最基础的知识点,从变量说起,到什么是数组,什么是函数...

JavaScript 基础知识 - 入门篇(一)

JavaScript 基础知识 - 入门篇(二)

1. 初识JS
    1.1 什么是JS语言
    1.2 JS的三个组成部分
    1.3 script 标签
    1.4 js中输入输出语句
    1.5 注释
2. 变量
    2.1 变量的声明与赋值
    2.2 变量的命名规则与规范
    2.3 交换两个变量的值
3. 数据类型
    3.1 如何查看数据类型
    3.2 Number 类型
    3.3 String 类型
    3.4. boolean 类型
    3.5 undefined类型与null类型
4. 简单数据类型转换
    4.1 转字符串类型
    4.2 转数值类型
    4.3 转布尔类型
5. JS小数运算精度丢失
    5.1 JS数字精度丢失的一些典型问题
    5.2 JS数字丢失精度的原因
    5.3 JS数字丢失精度的解决方案
6. 运算符
    6.1 一元运算符
    6.2 逻辑运算符
    6.3 运算符的优先级
7. 选择语句
    7.1 if..else语句
    7.2 switch..case
    7.3 三元运算符
8.循环语句
    8.1 while 循环
    8.2 do..while 循环
    8.3 for 循环
    8.4 break 和 continue
    8.5 循环语句练习
9. 数组
    9.1 创建数组
    9.2 数组的下标与长度
    9.3 数组的赋值与取值
    9.4 数组的遍历
    9.5 数组综合练习
10. 冒泡排序
    10.1 冒泡排序的思路
    10.2 按性能等级冒泡排序分3个等级
11. 函数
    11.1 函数的基础知识
    11.2 函数的声明与调用
    12.3 声明函数的两种方式
    11.4 函数的参数
    11.5 函数的返回值
    11.6 函数三要素
    11.7 文档注释
    11.8 函数综合练习
    11.9 函数的作用域
    11.10 预解析
    11.11 递归函数
    11.12 回调函数
12. 对象
    12.1 对象的基本概念
    12.2 创建对象
    12.2.1 通过构造函数创建
    12.2.2 通过对象字面量
    12.2.3 关于 this
    12.3 操作对象的属性
    12.3.1 "." 语法
    12.3.2 "[]"语法
    12.3.3 两种方法的区别
    12.4 遍历对象
    12.5 查看对象的类型
    12.6 批量创建对象
    12.7 值类型与引用类型
    12.8 基本包装类型
    12.9 伪数组(类数组)
    12.10 arguments 对象
    12.11 JSON 对象
13. 内置对象
    13.1 Math 对象
    13.2 Date对象
        13.2.1 创建一个日期对象
        13.2.2 日期格式化
        13.2.3 获取日期的指定部分
        13.2.4 时间戳
    13.3 Array 对象
        13.3.1 数组转换成字符串 join()
        13.3.2 数组的增删操作
        13.3.3 数组的翻转与排序
        13.3.4 数组的拼接与截取
        13.3.5 数组查找元素
        13.3.6 清空数组
        13.3.7 数组的综合练习
    13.4 String 对象
        13.4.1 字符串大小写转换的方法
        13.4.2 indexOf 查找指定字符串
        13.4.3 trim 去除空白
        13.4.4 slice 截取字符串
        13.4.5 substring 截取字符串
        13.4.6 字符串的 substr方法
        13.4.7 match 查找字符串
        13.4.8 replace 替换字符串
        13.4.9 split 切割字符串转为数组
    13.5 Array对象 与 String对象综合练习

1.2 DOM操作

认识什么是DOM,通过什么样的方法去对页面元素进行增删改查...

JavaScript 基础知识 - DOM篇(一)

JavaScript 基础知识 - DOM篇(二)

1. DOM 基本概念
2. 查找 DOM 对象
    2.1 根据id获取元素
    2.2 根据标签名获取元素
3. 注册事件
    3.1 事件三要素
    3.2 注册事件的两种方式
    3.3 鼠标点击事件
    3.4 鼠标经过、离开事件
    3.5 表单获得、失去焦点事件
    3.6 其他触发事件汇总
4. 优雅降级和渐进增强
5. 属性操作
    5.1 普通标签属性
    5.2 表单属性操作
    5.3 标签自定义属性
        attribute系列
    5.4 排他思想(tab栏的主要思想)
    5.5 tab 栏切换
6. 标签内容
    6.1 innerHTML
    6.2 innerText
    6.3 innerText 的兼容性问题
7. 节点操作
    7.1 节点的属性
    7.2 节点层次
        7.2.1 孩子节点
        7.2.2 兄弟节点
        7.2.3 父节点
8. 样式操作
    8.1 样式操作注意点
    8.2 样式操作案例
9. 动态创建元素
    9.1 克隆节点
    9.2 添加节点
        9.2.1 appendChild
        9.2.2 insertBefore
    9.3 创建节点
        9.3.1 document.write(基本不用)
        9.3.2 innerHTML
        9.3.3 createElement
    9.4 删除节点
    9.5 动态创建元素综合练习

1.3 BOM操作

本篇最主要的知识点就是“定时器”,后面不管是动画还是轮播图特效都会用到定时器。

JavaScript 基础知识 - BOM篇

1. BOM 基本概念
2. window 对象
    2.1 window.onload
    2.2 window.open
    2.3 window.close
3. 定时器
    3.1 延时定时器
    3.2 间歇定时器
    2.3 定时器综合练习
4. Location对象
    4.1 常用的属性和方法
5. Navigator 对象
6. Screen 对象
7. History 对象
8. javascript 弹框
9. javascript Cookie

2. JS 进阶篇

2.1 原生 js 特效

通过原生js实现动画,再去拓展一些特效:“轮播图”、“手风琴”...

JavaScript 进阶知识 - 特效篇(一)

JavaScript 进阶知识 - 特效篇(二)

1. offset 系列
    1.1 offsetWidth 和 offsetHeight
    1.2 offsetParent
    1.3 offsetLeft与offsetTop
2. 匀速动画框架
    2.1 匀速动画初体验
    2.2 匀速动画函数封装
3. 轮播图
    3.1 简单轮播图
    3.2 左右焦点轮播图
    3.3 无缝轮播图
    3.4 完整版轮播图
4. 缓动动画框架
    4.1 缓动动画初体验
    4.2 缓动动画函数封装
    4.3 获取元素计算后的样式
    4.4 缓动动画修改多个样式
    4.5 缓动动画修复定时器bug
    4.6 缓动动画兼容其它样式属性
    4.7 缓动动画添加回调函数
5. 筋斗云案例
6. 右下角关闭广告案例
7. 手风琴案例
8. 旋转木马案例
9. 三大系列
    9.1 offset 系列
    9.2 scroll 系列
    9.3 client 系列
    9.4 screen 系列
    9.5 三大系列的区别
10. 事件对象
    10.1 事件对象的概述
    10.2 获取事件对象
    10.3 事件对象的常用属性
    10.4 pageX与pageY的兼容性
    10.5 案例:鼠标跟随
    10.6 案例:拖拽效果
    10.7 案例:放大镜
11. 注册事件
    11.1 on + 事件名称 方式
    11.2 addEventListener 方式
12. 事件冒泡和事件捕获
    12.1 事件冒泡
    12.2 阻止事件冒泡
    12.3 事件捕获
    12.4 事件流
    12.5 键盘事件
    12.6 案例:弹幕效果
13. 瀑布流
    14. 正则表达式
    14.1 创建正则表达式
    14.2 元字符
    14.3 正则内部类
    14.4 正则边界
    14.5 量词
    14.6 括号总结
    14.7 正则表达式综合案例
    14.8 正则补充知识点

2.2 深入理解 Ajax

简单介绍什么是服务器,并且教你怎么搭建一台本地运行的服务器,最后详细介绍Ajax的操作过程。

JavaScript 进阶知识 - Ajax篇

1. 服务器端技术基础
    1.1 服务器
    1.2 客户端
    1.3 软件开发架构
    1.4 网络基础
2. Web 服务器
    2.1 Web服务器的作用
    2.2 AMP 集成环境
    2.3 Web服务器软件的安装
    2.4 安装的建议与问题
    2.5 Wamp服务器的使用
    2.6 Wamp服务器的简单配置
3. HTTP传输协议
    3.1 请求报文
    3.2 响应报文
4. Ajax 编程
    4.1 Ajax的基本概念
    4.2 创建Ajax
    4.3 Ajax实现一个简单的聊天室
    4.4 复杂的数据格式介绍
    4.4.1 XML数据格式
    4.4.2 JSON数据格式
    4.5 Ajax代码的封装
5. jQuery中的Ajax操作
6. 模板引擎的使用
    6.1 模板引擎的使用步骤
    6.2 模板引擎的其他用法
    6.3 模板引擎原生语法
    6.4 案例:Ajax模拟请求json数据案例
    6.5 案例:Ajax提供数据实现瀑布流
7. Ajax请求模拟软件
8. 同源策略
    8.1 什么是同源策略
    8.2 同源策略的目的
    8.3 限制范围
9. 跨域
    9.1 JSONP
    9.2 WebSocket

2.3 js 高级知识

本篇文章主要介绍的是js高级阶段的知识点,主要有:面向对象编程思想、原型、闭包、递归。函数的applycall调用模式...

JavaScript 进阶知识 - 高级篇

1.异常处理
    1.1异常捕获
    1.2抛出异常
    1.3异常的传递机制
2.面向对象编程
    2.1 面向过程和面向对象的的对比
    2.2 面向对象编程举例
    2.3 面向对象的三大特性
    2.4 创建对象的方式
    2.5 面向对象案例
3.原型
    3.1 传统构造函数存在问题
    3.2 原型的概念
    3.3 原型的使用
    3.4 __proto__属性
    3.5 constuctor属性
    3.6 原型继承
4.原型链
    4.1 什么是原型链
    4.2 原型链的拓展
    4.3 属性的搜索原则
5.Object.prototype成员介绍
    5.1 constructor 属性
    5.2 hasOwnProperty 方法
    5.3 isPrototypeOf 方法
    5.4 propertyIsEnumerable 方法
    5.5 toString 和 toLocalString 方法
    5.6 valueOf 方法
6.静态方法和实例方法
7.作用域
    7.1 块级作用域
    7.2 词法作用域
    7.3 变量提升(预解析)
    7.4 作用域链
8.Function
    8.1 创建函数的几种方式
    8.2 Function 构造函数创建函数
    8.3 Function 的使用
    8.4 Function 的原型链结构
    8.5 完整的原型链
9.arguments对象
10. 函数的四种调用模式
    10.1 函数模式
    10.2 方法模式
    10.3 构造器模式
    10.4 上下文(借用方法)模式
    10.5 面试题分析
11.递归
    11.1 什么是递归
    11.2 化归思想
    11.3 递归练习
12. JS 内存管理
    12.1 内存生命周期
    12.2 垃圾回收
13. 闭包
    13.1 闭包的概念
    13.2 闭包模型
    13.3 闭包的使用
    13.4 闭包里的缓存
14. 沙箱模式
    14.1 沙箱模式的作用
    14.2 沙箱模式模型
    14.3 沙箱模式应用
    14.4 沙箱模式的说明
15. 工厂模式

2.4 jQuery 使用方法详解

虽然说jQuery的黄金时代已经过去了,但是不缺乏一些公司还在使用,本篇作为一篇“速查字典”还是可以的。

jQuery 入门详解(一)

jQuery 入门详解(二)

1. jQuery基本概念
    1.1 什么是 jQuery?
    1.2 jQuery 的版本
    1.3 jQuery 初体验
    1.4 jQuery对象 和 DOM对象
    1.5 jQuery对象 和 DOM对象相互转换
2. jQuery 选择器
    2.1 基本选择器
    2.2 层级选择器
    2.3 过滤选择器
    2.4 表单选择器
    2.5 筛选选择器
    2.6 几个小案例
3. jQuery 节点操作
    3.1 查找节点
    3.2 创建节点
    3.3 添加节点
    3.4 删除节点
    3.5 克隆节点
    3.6 替换节点
    3.7 包裹节点
    3.8 遍历节点
    3.9 节点操作案例
4. jQuery 属性操作
    4.1 attr 操作
    4.2 prop 操作
    4.3 属性操作案例
5. jQuery 样式操作
    5.1 css 操作
    5.2 class 操作
    5.4 常见的样式
    5.5 关于元素定位的常用方法
    5.6 样式操作案例
6. jQuery 设置和获取HTML、文本和值
    6.1 html()方法
    6.2 text()方法
    6.3 val()方法
7. jQuery 里的事件机制
    7.1 加载 DOM
    7.2 事件绑定
    7.3 合成事件
    7.4 事件冒泡
    7.5 事件对象的属性
    7.6 移除事件
    7.7 模拟操作
    7.8 事件委托
    7.9 其他用法
8. jQuery 动画
    8.1 show()方法 和 hide()方法
    8.2 fadeIn()方法 和 fadeOut()方法
    8.3 slideUp()方法 和 slideDown()方法
    8.4 自定义动画方法 animate()
    8.5 其他动画方法
    8.6 jQuery 动画案例
9. jQuery 里的 Ajax 操作
    9.1 load()方法
    9.2 $.get()方法和$.post()方法
    9.3 $.ajax()方法
    9.3 jQuery中的serialize和serializeArray方法
10. jQuery 插件的使用
    10.1 颜色插件-jQuery.color.js
    10.2 懒加载插件- jquery.lazyload.js
    10.3 jQuery UI 插件
    10.4 jQuery自定义插件
    10.5 jQuery自定义插件-瀑布流插件

3. HTML5 & CSS3

3.1 HTML5 详解

介绍了新增的一些特性,一些操作音频视频的API,以及网络状态、地理位置和WEB存储。

HTML5 入门详解

1. 认识HTML5
2. 语法规范
3. 语义化标签
4. HTML5 浏览器支持
5. 表单
    5.1 表单控件
    5.2 表单元素
    5.3 表单属性
    5.4 表单事件
    5.5 表单样式
6. 多媒体标签
    6.1 音频
    6.2 视频
    6.3 音频/视频方法
7. DOM 扩展
    7.1 获取元素
    7.2 类名操作
    7.3 自定义属性
8. 网络状态
9. 地理定位
    9.1 获取地理信息方式
    9.2 隐私
    9.3 使用地理定位
    9.4 百度地图的用法
10. WEB 存储
    10.1 特性
    10.2 方法详解
    10.3 sessionStorage
    10.4 localStorage
    10.5 差异性
11. 文件读取
12. 拖拽

3.2 CSS3 详解

css2的升级,添加了媒体查询、Flex布局、2D & 3D转换等新特性。

CSS3 入门详解(一)

CSS3 入门详解(二)

1.选择器
    1.1 属性选择器
    1.2 伪类选择器
    1.3 伪元素选择器
2. 颜色
    2.1 RGBA
    2.2 HSLA
    2.3 关于 CSS 的透明度
3. 文本阴影
4. 盒模型
5. 边框
    5.1 边框圆角
    5.2 边框阴影
6. 背景
    6.1 background-size
    6.2 background-origin
    6.3 background-clip
    6.4 多背景
7. 渐变
    7.1 线性渐变
    7.2 径向渐变
8. 过渡
    8.1 帧动画
    8.2 补间动画
9. 2D转换
    9.1 位移
    9.2 缩放
    9.3 旋转
    9.4 倾斜
    9.5 矩阵
10. 3D 转换
    10.1 3D 坐标轴
    10.2 透视(perspective)
    10.3 3D呈现(transform-style)
    10.4 3D呈现案例:3D轮播图
    10.5 backface-visibility
11. 动画
    11.1 如何实现动画
    11.2 动画关键属性
    11.3 动画案例
12. 伸缩布局
    12.1 什么是伸缩布局
    12.2 基本概念
    12.3 flex-direction属性
    12.4 flex-wrap 属性
    12.5 flex-flow 属性
    12.6 justify-content 属性
    12.7 align-items 属性
    12.8 align-content 属性
    12.9 Order 属性
    12.10 flex-grow 属性
    12.11 flex-shrink 属性
    12.12 flex-basis 属性
    12.13 flex 属性
    12.14 align-self 属性

4. 前端框架

4.1 three.js 框架

canvas的升级框架,功能更加强大。

three.js 入门详解(一)

three.js 入门详解(二)

1. 概述
    1.1 什么是WebGL?
    1.2 初识three.js
    1.3 前期准备
        1.3.1 下载地址
        1.3.2 目录结构
        1.3.3 配置开发环境
2. 开始使用Three.js
    2.1 渲染器(renderer)
    2.2 场景(scene)
    2.3 照相机(camera)
    2.4 创建一个物体
    2.5 渲染
    2.6 完整代码
3. Three.js功能概览
4. 照相机
    4.1 什么是照相机?
    4.2 正交投影和透视投影
    4.3 正交投影照相机
        4.3.1 参数介绍
        4.3.2 示例代码
    4.4 透视投影照相机
        4.4.1 参数介绍
        4.4.2 示例代码
5. 点、线、面
    5.1 3D世界的组成
    5.2 在Three.js中定义一个点
    5.3 点的操作
    5.4 绘制一条线段
    5.5 线条的深度理解
    5.6 绘制网格线
6. 几何形状
    6.1 基本几何形状
        6.1.1 立方体
        6.1.2 平面
        6.1.3 球体
        6.1.4 圆形
        6.1.5 圆柱体
        6.1.6 正四面体、正八面体、正二十面体
        6.1.7 圆环面
        6.1.8 圆环结
    6.2 文字形状
        6.2.1 下载使用
        6.2.2 参数介绍
        6.2.3 示例代码
    6.3 自定义形状
7. 材质
    7.1 基本材质
    7.2 Lambert 材质
    7.3 Phong材质
    7.4 法向材质
    7.5 材质的纹理贴图
        7.5.1 单张图像应用于长方体
        7.5.2 六张图像应用于长方体
        7.5.3 棋盘
8. 网格
    8.1 创建网格
    8.2 修改属性
        8.2.1 材质
        8.2.2 位置、缩放、旋转
9. 动画
    9.1 实现动画效果
        9.1.1 动画原理
        9.1.2 setInterval方法
        9.1.3 requestAnimationFrame方法
    9.2 使用stat.js记录FPS
    9.3 弹球案例
10. 外部模型
    10.1 支持格式
    10.2 无材质的模型
    10.3 有材质的模型
        10.3.1 代码中设置材质
        10.3.2 建模软件中设置材质
11. 光与影
    11.1 环境光(AmbientLight)
    11.2 点光源(PointLight)
    11.3 平行光(DirectionalLight)
    11.4 聚光灯(SpotLight)
    11.5 阴影
补充问题
    本地服务器
查看原文

y口米 收藏了文章 · 2019-04-08

JavaScript大师必须掌握的12个知识点

译者按: 前端技术涉及的越来越多!

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

既然你对这篇文章感兴趣,我想你应该是一位前端开发,也许你有一份不错的工作、自主创业甚至是一位自由从业者。不知你的前端技术如何,也许你是一位新手,亦或是一位资深开发。
如果你想让自己成为一个 JavaScript 大师,在此我列出 12 条必备知识:

1. 控制流(Control Flow)

我们从最基础的开讲。当然,它也是最重要的一个知识点。如果你连这个都没有整明白的话,那你的代码生活将会很艰难。

  • if else : 如果连这个都不知道,之前怎么码代码的?
  • switch : 当有很多的情况要处理(>2)的时候,用它准没错。
  • for: 不要去编写重复的代码,请使用 for。for offor in都十分便利。一个很大的优势在于 for 循环是阻塞式的,可以配合async await使用。
  • 高阶的条件语句: 使用三元运算符或则逻辑判断。如果想把代码写得简洁,甚至不需要存储中间值的话,可以这么做。
// ternary
console.log(new Date().getHours() < 12 ? "Good Morning!" : "Time for a siesta");

// logical operators
const isJsMaster = prompt("Are you a JavaScript master?") === "true";
console.log(isJsMaster && "proficient coder");

2. 异常处理

不管前端还是后端工程师,作为一个新手,经常会使用console.log或则console.error来处理错误。为了写出健壮的应用,则需要改掉到处使用 console.log 的习惯,构建自己的异常处理器,然后优雅地处理异常。
你也许对如何处理异常很感兴趣,可以看看我写的这篇文章

3. 数据模型

需要想清楚如何组织数据(合并或则分离),这不仅仅关乎在数据库里如何定义其模型,同时也包含了函数参数,定义的变量、对象等等。

const calcShape = (width, height, depth, color, angle) => {...}
const calcShape = ({width, height, depth, color, angle}) => {...}

4. 异步性

这个是 JavaScript 非常重要的一个特性,要么需要从服务器获取数据或则在服务器端异步去处理请求。几乎在所有的情况下,都要面对异步。如果搞不清楚异步,可能会遇到非常奇怪的报错,以至于要花费几个小时去搞定它。如果你知道异步,但是没有完全理解,那么可能掉入“回调地狱”。如今,最好的方法是使用 Promises 和async await

5. 操作 DOM

对于开发者来说,通常已经学会了 jQuery,似乎不需要再去了解如何直接操纵 DOM 的技巧。甚至直接使用前端框架,根本不需要去操纵 DOM 了。但是,我认为对于理解前端 JavaScript,这是必不可少的一环。知道 DOM 的工作原理以及如何操纵 DOM 元素会让你对网页的工作机制有更加清楚的理解。而且,尽管使用了前端框架,总有些情况下你需要直接操纵 DOM。打个比方,如果仅仅只是想访问某个元素,你肯定不想把整个 jQuery 都导入到项目中吧。

6. Node.js / Express

作为一名前端开发,依然需要学习一点 Node.js。最好懂得如何用 Express 快速搭建一个服务器,并且使用路由功能。JavaScript 作为一门“脚本”语言,很适合定义各种自动化任务,因此知道如何读取文件,操纵 Buffer 可以助你构建工作流。

7. 函数式编程

函数式编程和面向对象编程哪个更好的争论由来已久。其实,你可以使用任何一种编程方式达到相同的目的。在 JavaScript 中,事情变得简单,两种方式任你挑选。像lodash就以函数式的角度提供了非常多的工具函数。如今,甚至很多函数已经内置实现,无需导入外部库,比如map,reduce,filter,forEach,find

8. 面向对象编程

和函数式编程类似,你同样需要熟悉面向对象的 JavaScript 编程。我曾经很长一段时间拒绝在 JavaScript 中使用面向对象,但是后来发现使用对象/类/实例的方式确实会更加合适。类(class)广泛使用于 React, Mobx 或则一些自定义的构造函数中。

9. 前端框架

当今最流行的三大框架:React.js,Angular 和 Vue.js。如果你在找一个前端的工作,在简历上面至少需要列出它们其中之一。尽管它们更新很快,你需要理解它们总体的工作原理。而且,对底层原理的理解可以让你更好地使用框架编写应用。如果还不确定上哪辆车,我建议学习 React.js。我已经使用了好些年,并且不后悔当初的选择。(译者建议 Vue.js,简单好用上手快)

10. 编译(transpilation)/打包

很不幸,在 Web 开发中这一工作占了很大比重。一方面我又不能说不幸,它使得我们可以用最新的特性来编写代码。我说不幸是因为我们需要时刻注意新的特性在某些旧版本的浏览器不支持,需要将其翻译到低版本浏览器解释的代码。业界的通用标准是babel.js,你需要熟悉它。对于打包,可以使用老大哥Webpack ,或则后起之秀parcel。我倾向于使用 parcel,尽管不完美,但是它性能很好,而且配置方便。

11. 正则表达式

不仅仅针对 JavaScript,但是真的非常有用,也很容易让人迷惑。掌握正则表达式会花点时间,不需要记住所有的情况,可以边查边用。

12. 测试

正如Paul Kamma指出,在软件开发中,测试真的是一个非常重要的部分。JavaScript 也不例外,在发布新功能前,最好是(一定要)对代码进行充分的测试。甚至某些情况下需要手动操作,也是值得的。当然,使用自动化测试工具才能一劳永逸,测试包括:单元测试、端到端测试、加载速度测试、安全测试或则前端测试(组件是否加载)。目前市面上已经有很多用于测试的工具,比如 enzyme, jasmine, mocha, chai 等等。我现在最喜欢的是ava.js

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用

版权声明

转载时请注明作者Fundebug以及本文地址:
[https://blog.fundebug.com/201...

查看原文

y口米 关注了问题 · 2019-03-29

圖片在手機上的轉換,壓縮,轉向

情境如下

備註:使用的是react.js
使用者上傳圖片,會給使用者做裁切、轉向的動作,後再上傳

問題一:
為何會出現轉向功能。
主要是因為iphone手機 在拍照時,手持橫向或直向,會因為 exif 參數。
導致上傳圖片後照片會被強制轉向。
因此決定新增轉向功能。
轉向功能:
將圖片讀取後,使用canvas轉向後繪圖出來,再轉成base64再設置回去

const image = new Image();
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = height;
        canvas.height = width;
        image.onload = () => {
          ctx.rotate(Math.PI / 2);
          ctx.translate(0, -height);
          ctx.drawImage(image, 0, 0);
          const fileUrl = canvas.toDataURL('image/jpeg', 0.3);
          this.setState({
            AvatarLoading: false,
            Avatar: fileUrl,
            rotate: 0,
          });
        };
        image.src = Avatar;

此時問題出現了,程式是正確的,在電腦也跑得很順。
但是!!!
在手機跑得並不迅速!
求大神不要叫我換手機OAO
請問有哪位大神時做過這類的功能嗎?或是我這還能再如何修改呢
備註:這段是向右轉的部分

关注 2 回答 1

y口米 关注了问题 · 2019-03-29

圖片在手機上的轉換,壓縮,轉向

情境如下

備註:使用的是react.js
使用者上傳圖片,會給使用者做裁切、轉向的動作,後再上傳

問題一:
為何會出現轉向功能。
主要是因為iphone手機 在拍照時,手持橫向或直向,會因為 exif 參數。
導致上傳圖片後照片會被強制轉向。
因此決定新增轉向功能。
轉向功能:
將圖片讀取後,使用canvas轉向後繪圖出來,再轉成base64再設置回去

const image = new Image();
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = height;
        canvas.height = width;
        image.onload = () => {
          ctx.rotate(Math.PI / 2);
          ctx.translate(0, -height);
          ctx.drawImage(image, 0, 0);
          const fileUrl = canvas.toDataURL('image/jpeg', 0.3);
          this.setState({
            AvatarLoading: false,
            Avatar: fileUrl,
            rotate: 0,
          });
        };
        image.src = Avatar;

此時問題出現了,程式是正確的,在電腦也跑得很順。
但是!!!
在手機跑得並不迅速!
求大神不要叫我換手機OAO
請問有哪位大神時做過這類的功能嗎?或是我這還能再如何修改呢
備註:這段是向右轉的部分

关注 2 回答 1

y口米 提出了问题 · 2019-03-29

圖片在手機上的轉換,壓縮,轉向

情境如下

備註:使用的是react.js
使用者上傳圖片,會給使用者做裁切、轉向的動作,後再上傳

問題一:
為何會出現轉向功能。
主要是因為iphone手機 在拍照時,手持橫向或直向,會因為 exif 參數。
導致上傳圖片後照片會被強制轉向。
因此決定新增轉向功能。
轉向功能:
將圖片讀取後,使用canvas轉向後繪圖出來,再轉成base64再設置回去

const image = new Image();
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = height;
        canvas.height = width;
        image.onload = () => {
          ctx.rotate(Math.PI / 2);
          ctx.translate(0, -height);
          ctx.drawImage(image, 0, 0);
          const fileUrl = canvas.toDataURL('image/jpeg', 0.3);
          this.setState({
            AvatarLoading: false,
            Avatar: fileUrl,
            rotate: 0,
          });
        };
        image.src = Avatar;

此時問題出現了,程式是正確的,在電腦也跑得很順。
但是!!!
在手機跑得並不迅速!
求大神不要叫我換手機OAO
請問有哪位大神時做過這類的功能嗎?或是我這還能再如何修改呢
備註:這段是向右轉的部分

关注 2 回答 1

认证与成就

  • 获得 0 次点赞
  • 获得 5 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 5 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-04-09
个人主页被 134 人浏览