shaolin

悟已往之不谏,知来者之可追!

0%

这篇文章主要记录最近实习工作中遇到的前端检查图片尺寸的问题,在这个过程明白的一些道理。

我由于目前的水平有限,只能借助网络来完成这个功能。在这个查找的过程中,发现很多博客都写的有问题,虽然表面完成了,但是一测试,很多不对的地方,感觉都是抄的别人的,没抄完整。
那么我希望我写的文章,读者都是可以完美复写的。

先上完美运行的代码

以下是我亲测可以运行的代码。连我这种前端0.1年的人都能学会。

阅读全文 »

这次的内容是研究JS里面的对象

在研究对象之前,我们先研究一下全局对象。

那么什么是全局对象呢?ECMAScript规定全局对象是global,但是浏览器有规定window是全局对象。

window就是一个hash表。

window的属性就是全局变量。

两种全局变量

  • 第一种是ECMAScript规定的,常见的有如下几种
    • global.parseInt
    • global.parseFloat
    • global.Number
    • global.String
    • global.Boolean
    • global.Obejct
  • 第二种是浏览器规定的
    • window.alert
    • window.prompt
    • window.comfirm
    • window.console.log
    • window.console.dir
    • window.document 要格外注意这是window的,是由W3C规定的。
    • window.document.createElement
    • window.document.getElementById

先认识一下第一种的全局函数

  • Number

    搞清楚var a = 1 和 var a = new Number(1)的区别是啥

    var a = 1
    typeof a
    "number"
    var a = new Number(1)
    typeof a
    "object"

    使用了Number全局函数了,就要画上节课的内存图,来分析

  • String

    ‘hello’ 与 new String(‘hello’) 的区别是什么

  • Boolean

    true 与 new Boolean(true) 的区别是什么

  • Object

    var o1 = {}和var o2 = new Object()的区别是什么

上面的区别都是简单类型和对象的区别,那到底有区别呢?

原型链的调用

上图就是以Number全局函数为例的具体调用过程,String() Boolean Object() 都是类似的过程

公有属性藏到哪里了呢

通过上图我们发现,JS把一些大家都公有的东西抽离出来,放到一个单独的地方,谁想调用,就通过自己的一个proto的属性去调用,可以省的每个对象自己都存 toString() valueOf() 这种公共的方法。

在调用的过程中,自己的特有属性又放到自己的对应的公有属性里面。

由此形成了原型链。

一个伟大的等式

  • var 对象 = new 函数()

  • 那么必然有 对象.proto === 函数.prototype

  • 而函数.prototype又可以看做一个对象,那么 函数.prototype.proto === Function.prototype

  • 而Function 也是对象啊,那么 又有 Function.proto === Function.prototype

  • 而 Function.prototype又可以被看做对象,那么 Function.prototype.proto === Object.prototype

    以上几个式子中要格外注意Function的那个式子,自己的proto又指向了自己的prototype

f.__proto__ === Function.prototype
true
f.__proto__ === Object.prototype
false
f.__proto__.__proto__ === Object.prototype
true

最有一点要强调的是Object.proto 是真的指向了null

margin会受到border和display的影响

以div元素为例
三个并列的div,必然是上下排列,外边距是10px,也就是我们通常说的上下间隔10px
demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .demo{
      border: 1px solid red;
      height: 100px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="demo"></div>
  <!-- <div class="demo2" style="border: 0.1px solid green"></div> -->
  <div style="display: flex" class="demo2"></div>
  <div class="demo"></div>
  <div class="demo"></div>
</body>
</html>
阅读全文 »

从今天开始用重新认识JS,毕竟前端是靠JS吃饭的,开始深挖一下细节,在这个过程中也反思了一下,为啥java没学好。果然是基础不牢,地动山摇啊,古人诚不欺我也!

1. JS的数据类型有哪几种?

以前一直说会JS,却连这个问题没好好搞过,给自己两耳光……

数据类型 名称
1. 基本数据类型(也叫简单数据类型) number string boolean symbol undefined null
2. 复杂数据类型 object
  • 注意,array和function属于object类型;symbol是ES6的内容。
阅读全文 »

JS一定要抠细节,逻辑性。我们这次探讨 内存 的问题、一个IE的BUG以及深拷贝和浅拷贝,和typeof运算符的小技巧

在第一集里面知道了7个基本的数据类型
number string boolean symbol null underdefined object
那么这七个数据类型如何转换呢

其他数据类型转string

  • String()函数
String(0)
"0"
String(true)
"true"
String(false)
"false"
String(null)
"null"
String(undefined)
"undefined"
String({})
"[object Object]"
String({name: 9})
"[object Object]"
  • toString()属性
    注意null和undefined只是两个值,没有toString()属性
null.toString()
VM371:1 Uncaught TypeError: Cannot read property 'toString' of null
    at <anonymous>:1:6
(anonymous) @ VM371:1
undefined.toString()
VM400:1 Uncaught TypeError: Cannot read property 'toString' of undefined
    at <anonymous>:1:11
(anonymous) @ VM400:1

还有一个要注意的

{}.toString()
VM91:1 Uncaught SyntaxError: Unexpected token .
({}).toString()
"[object Object]"

其他的都可以

var a = 8;
a.toString()
"8"
var a = true
a.toString()
"true"
var a = {}
a.toString()
"[object Object]"
  • 最常见的方法 ‘ ‘+
    无敌的方法
'' +1
"1"
''+ true
"true"
''+ null
"null"
''+ undefined
"undefined"

其它数据类型转number

  • Number()函数
Number('fff')
NaN
Number('30')
30
Number(null) //注意是0
0
Number(undefined) //注意是NaN
NaN
Number(true)
1
Number(false)
0
  • parseInt()和parseFloat()属性
    parseInt()有个大坑,是从左边第一个字符开始看,不是数字,就停下了,而不是我理解 的有几个数字就打印几个数字
parseInt('122') //默认是十进制
122
parseInt('011')
11
parseInt('011', 2) //规定是二进制
3
parseInt('123', 10)
123
parseInt('011', 8) //规定是八进制
9
parseInt('A09') //发现第一个字符就不是数字,不往后面判断了
NaN
parseInt('09A12')
9
parseFloat('11.4')
11.4
  • 没见过的操作 其他数据类型-0
null-0
0
undefined-0
NaN
'91' - 0
91
'91.09' - 0
91.09
'str' - 0
NaN
var a = {}
a-0
NaN
var a = '123'
a-0
123
  • 又是一个没见过的操作 + ''
+'124'
124
+'12.4'
12.4
+false
0
+true
1
+null
0
+undefined
NaN

其它数据类型转成boolean

注意5个特殊的falsey值,当然了false必然也是falsey值


0
NaN
‘ ‘ 这是空字符串,啥也没有,空格也没有
null
undefined


除了以上6个falsey值,其他的都是true

  • Boolean()函数
Boolean('')
false
Boolean(' ')
true
Boolean(0)
false
Boolean(NaN)
false
Boolean(null)
false
Boolean(undefined)
false
Boolean([])
true
Boolean({})
true
Boolean(9)
true
Boolean('pp')
true
  • !!的操作
    怎么理解呢,一个!是取反的操作,再加一个就是双重取反,就是我们想要的结果了
!0
true
!1
false
!!0
false
!!NaN
false
!!''
false
!!null
false
!!undefined
false
!!1
true
!!'pp'
true
!![]
true
!!{}
true

四个经典的内存题

  • 粗糙的内存图的引入
    var a = 1 和var a = new Number(1)分别发生了什么
    简单数据类型存在stack中,存储位置是连续的,像弹匣一样,与数据结构中的栈一样,先进后出(FILO),而复杂数据类型存储在heap中,存储位置不连续,与数据结构中的堆一样,是树状的发散结构,这一点超级重要啊。时时刻刻要记着数据结构啊。

  • 第一个题 简单数据类型的判断 a=?

    var a = 1
    b = a
    b = 2
    

a
1

答案是a=1
![第一题.png](http://upload-images.jianshu.io/upload_images/5422064-0560e23bd6357f1c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


- 第二个题 复杂数据类型 的判断 a =?

var a = {name: ‘wushao’}
b =a
b={name: ‘shao’}

a
{name: “wushao”}

答案是a={name: 'wushao'},结果不变
![第二题.png](http://upload-images.jianshu.io/upload_images/5422064-156139ea55efe504.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 第三个题 复杂数据类型 的判断 a.name=?

var a = {name: ‘wushao’}
b =a
b.name = ‘qwert’

a.name
“qwert”

答案是a.name = 'qwert',已经被b.name改变了
![第三题.png](http://upload-images.jianshu.io/upload_images/5422064-95dccf49795dfd5b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 第四个题 复杂数据类型 的判断 a=?

var a = {name: ‘a’}
var b = a
b = null

a
{name: “a”}

答案是 a  = {name: "a"} 不受b的影响
![第四题.png](http://upload-images.jianshu.io/upload_images/5422064-2f71c0ad29ba7a84.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

如图所示

### 一个很贱的面试题

var a = {n: 1}
var b = a
a.x = a = {n: 2}

alert(a.x) //是啥呢 undefined
alert(b.x) //是啥呢 [object Object]

![面试题.png](http://upload-images.jianshu.io/upload_images/5422064-535a5ce55e971e93.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

大坑之处在于那个a.x一开始浏览器先从左边看的

### IE6 的关于垃圾回收机制的一个BUG

有以下情形

var fn = function( ){ }
document.body.onclick = fn
fn = null
问你 function(){}是不是垃圾

- 第一种情况,你没有关闭这个tab页
  那么function不是垃圾
  ![是否是一个垃圾.png](http://upload-images.jianshu.io/upload_images/5422064-c2d28691f8e0081c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 第二种情况,我关闭了这个tab页,那么function就是垃圾了
  ![关闭网页后就是一个垃圾了.png](http://upload-images.jianshu.io/upload_images/5422064-e569b8f33c9d0b08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

IE6的BUG在于,你关闭了网页,但是蓝色圆里面的他不认为是垃圾,除非你关闭浏览器。所以你要在网页关闭的时候手动加上一个

//onunload不加载,就是关闭了嘛
window.onunload = function(){
document.body.onclick = null; //所有的都要有
}

### 由以上几个题引出深拷贝和浅拷贝 的问题
深拷贝是你改变了,原来的不受改变的影响,而浅拷贝会改变原来的属性。
对于简单类型的数据来说,赋值就是深拷贝。
对于复杂类型的数据(对象)来说,才要区分浅拷贝和深拷贝。
![深拷贝.png](http://upload-images.jianshu.io/upload_images/5422064-ced7663ffb4f6530.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

右边蓝色框才是一个完整的复制

### typeof运算符的坑

> JavaScript有三种方法,可以确定一个值到底是什么类型。
> typeof 运算符
> instanceof 运算符
> Object.prototype.toString方法

typeof运算符可以判断你要的值得数据类型,有如下结果
先看大坑

typeof null
“object”
typeof Function
“function”
function f(){}
typeof f
“function”


函数竟然是function类型的数据,坑爹啊。
null竟然是object,尼玛,吓坏了,一查原来是历史遗留问题。

> 1995年JavaScript语言的第一版,所有值都设计成32位,其中最低的3位用来表述数据类型,object对应的值是000。当时,只设计了五种数据类型(对象、整数、浮点数、字符串和布尔值),完全没考虑null,只把它当作object的一种特殊值,32位全部为0。这是typeof null返回object的根本原因。
> 为了兼容以前的代码,后来就没法修改了。这并不是说null就属于对象,本质上null是一个类似于undefined的特殊值。

你只需要记住,null不是对象 !null不是对象! null不是对象!就是一个值null。
其他的类型是符合预期的

typeof 123
“number”
typeof ‘123’
“string”
typeof true
“boolean”
typeof []
“object”
typeof {}
“object”


### 一个小技巧

typeof undefined
“undefined”
typeof a
“undefined”


上面的a未声明,直接使用会报错

a
VM412:1 Uncaught ReferenceError: a is not defined
at :1:1


但是用了typeof就可以啦
可以用来判断某个变量是否声明了

if (typeof v === “undefined”) {
// …
}


- 第二个小技巧
  既然typeof对数组(array)和对象(object)的显示结果都是object,那么怎么区分它们呢?instanceof运算符可以做到。

var o = {};
var a = [];

o instanceof Array // false
a instanceof Array // true
```

引子

今天在实习工作中看到了两个新属性,其实一直就在,但是一直眼瞎,没去MDN去搜搜,今天搜了一下。明白了这俩属性。
在这个表单里面的两个以前没见的属性

<form name="upFileForm" method="post" action="/cgi-bin/action" onsubmit="return isUploadLogo();" target="returnMsg" enctype="multipart/form-data">
    <input type="hidden" name="action" value="uploadfile" />
    <input type="file" id="uploadLogo" name="TAGET_FILENAME" value="logo.gif" />
    <input type="submit" id="immUpdate" class="newButtonStyle" name="uploadLogo" value="立即更新" />
</form>
阅读全文 »

07年就有很多人问的大坑,我今天遇到啦


神奇的传送门 书籍


1. 简介、基本语法基本没啥问题,和以前的认知相同

2. 强制转换 知识

主要指使用NumberStringBoolean三个构造函数,手动将各种类型的值,转换成数字、字符串或者布尔值。

2.1 Number()函数

例如

//数值还是数值
Number(42)//42
//字符串 能全转 才能全转
Number('42') //42
//空字符串转为0
Number(' ')//0
// 布尔值:true 转成1,false 转成0
Number(' true')//1
Number(' false')//0
// undefined:转成 NaN
Number(undefined) // NaN
// null:转成0
Number(null) // 0

Number()很严格,比parseInt()严格。

阅读全文 »

这只是一篇让我重新认识CSS的文章,写这篇文章的时候还未搞明白原理,只知其然,不知其所以然。我的这篇文章的小demo让我信心倍增。

一、CSS(Cascading Style Sheets)是个啥?

惯例是先了解了解历史,请点击这俩链接。

  • 中文百科 英文百科
  • CSS从2.1流行,现在主流的是CSS 3,还有更简练、功能更强的LESS、SASS
    好了,历史了解完了,你肯定还是啥也不会,因为我曾经学了都还是啥也不会。
    所以 这个系列的原则就是 先做出来,做多了,有感觉了才有资格喷人
  • 学习资源
    • CSS-Tricks 你就模仿吧,全是你想不到的
    • Codrops 我长这么大,可能这是第一次知道原来能把网页显示的这么漂亮,难道你不心动吗?
      你可以看模拟选座,各种进度条的显示
    • 张鑫旭 是真的牛
    • 阮一峰,你就看吧
阅读全文 »

通过重点标签的学习前进

一、 iframe 的学习

iframe通俗的的理解就是,可以在页面里面嵌套新的页面
它的使用会使页面变卡,一般会有一个固定的尺寸,默认的。他也属于可替换元素行列。我们可以通过CSS来改变尺寸
frameborder消除边框
name属性与a标签结合

<!-- <iframe name=iframe src="http://qq.com" ></iframe> -->

<iframe name="000" src="" ></iframe>
<a target="000" href="http://qq.com">aaaa</a>

a标签的链接会在iframe的内嵌窗口里面打开

阅读全文 »


我们都知道李爵士建立了第一个网页、第一个浏览器、第一个服务器。前面两个,我们都见过了,但是服务器我们目前没有亲自实现过,所以有必要了解一下,服务器的一些基础知识。


以下是手写服务器脚本的必备知识

  • HTTP是建立在TCP/IP的基础之上的
    • TCP是什么
      TCP 传输控制协议(Transmission Control Protocol)
      面试必问的两道题
      1、TCP和UDP的区别
      TCP是可靠的、面向连接的,相对UDP速度慢,UDP是不可靠的,不是面向连接的,速度快。可靠是指你的请求成不成功都会有响应,成功了就告诉你ok,失败了也告诉你访问失败,面向连接是指每次必须发起一个请求,这端是浏览器,另一端是你要访问的地址
      TCP可以看成是把石子扔到水里,UDP是把石头扔进草垛里面
      2、TCP的三次握手是啥
      第一次 客户端问服务器,我能连接吗
      第二次 服务器回答说,我准备好了,可以连接啦
      第三次 客户端说,那我就真的连接喽
      上述两个面试题可以仔细阅读这两篇文章 TCP与UDP的区别TCP三次握手详解
阅读全文 »


李爵士发明了万维网,从此世界上的人便可以一起上网了

主要包含三个概念 URI、HTTP(HyperText Transfer Protocol)、HTML(HyperText Markup Language)
他还发明了以下技术:
1、发明了第一个服务器
2、发明了第一个浏览器
3、写出了第一个网页

名称 作用
URI 俗称网址,通常用它得孩子URL
HTTP 让你能够下载这个网页
HTML 让你能看懂这个网页
阅读全文 »