WuShaolin

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

0%

XMLHttpRequest JSON AJAX CORS 四个名词来开会

** http://shaolin.com:8002

如何发请求

在前端的世界里也逛荡了不少日子了,目前已经get到大约5种发起请求的方式,主流的、非主流的。

何种方式 请求方法
最常见的form表单 默认GET,多用POST,只此两种 会刷新页面或者新开页面
a 标签 GET请求 也会刷新页面或者新开页面
imgsrc属性 GET 只能以图片的形式展现
link标签 GET 只能以CSSfavicon的形式展现
script标签 GET 只能以脚本的形式运行

可是

  • 我们可能想用GET POST PUT DELETE 方法
  • 不想刷新整个页面,想用一种更易于理解的方式来响应
阅读全文 »

本文是在了解了浏览器的同源规则之后,学习了破解这个规则的一个简单有效的方法->JSONP。主要通过阮一峰老师的博客学习

浏览器的同源规则

  • 有这样一个背景,如果你通过银行的网站进行的取钱的交易,而其他用户可以通过某个渠道获得你在银行网站的信息,那将是很可怕的。

阅读全文 »

记录一下安装node-sass的过程.关于CSS是不是一门编程语言,这里不讨论,但是它没有变量 语句 函数(反正我觉得他不是编程语言).于是程序员们发明了CSS预处理器(css preprocessor),它是一种专门的编程语言,可以使用你会的基本的编程知识进行编程,然后再转化成css文件.

12月更新

本次重新安装node-sass是因为电脑换了固态重装系统了,在新系统下很长时间内没有用过sass,一切都是那个风平浪静,直到11月的最后一晚,想折腾一下博客,看到一个好看的主题,这个主题需要安装两个插件,其中有一个需要node-sass的加持。

$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-pug --save
$ npm install hexo-renderer-sass --save  #就是这货

不出意外的,国内不采取特殊途径,hexo-renderer-sass安装报错,根据log日志,很容易的发现,他需node-sass@4.10.0支持,但是下载失败。

  1. 解决方案1:先在global下安装node-sass

    • 重装后我全是采用的nvm管理的node版本,所有的包都在.nvm目录下,避免权限不够的错误(或者采取分割线以下的阮一峰老师的方法避免包权限的问题)。
    • 配置.npmrc,先touch ~/.npmrc。这次直接采取node-sass官方推荐的方式npm install -g mirror-config-china --registry=http://registry.npm.taobao.org,所有的国内有问题的包全都避免了。
    • 结果竟然无法下载,log日志提醒我可能是代理的问题,可能是我的FQ的系统代理有问题,去控制台一看,果然SOCKETS 有个错误,尝试使用npm添加代理的方式,均告失败,毕竟以后也不能总靠代理过日子,这个方式不可取。这次想找个一劳永逸的方式彻底解决这个垃圾问题。
    • 终于发现了,直接使用下载好的Realease包去安装,先去node-sass主页下载系统需要的类型,这个完全可以解决系统不同的问题,很具用普适性。
    • 到底你的系统需要那个具体的包呢,这个就是最关键的了,我的方式是:先安装,失败后会提示你哪个版本的node包无法下载,这个时候再去下载这个包。通过如下代码去安装:
    npm i -g node-sass@4.9.3 --sass_binary_path=/home/wsl/Downloads/chromeDownloads/linux-x64-64_binding.node
    # path需要替换成你系统的那个包名字

    But我以为下载成功了,就万事大吉了呢,发现我真是太天真了。安装完后第一件事就是检验安装的包能不能用,node-sass -v一下,最不济出现个node-sass not found这种类似的初级错误啊,结果报了个无语的错误。

    找不到vendor目录

    这个目录是node-sass规定的

    node-sass-package.json

    为啥没有这个目录呢,因为通过 我采用的是设置本地下载路径,没有通过网上的下载。所以需要手动建立一个vendor目录(issues里面通过npm rebulid node-sass可以解决,但是我没生效),接着会报第二个新错误,这就很合理了,报错一点不可怕,能看懂并解决掉就很是进步。

找不到binding文件

新的错误是需要binding.node文件,刚才建立的vendor是个空目录所以找不到,在其内部建立二级目录,并把刚才下载的包改名为binding.node,即vendor/linux-X64-64/binding.node

至此,本地安装node-sass完毕,以后可以随便玩node-sass了,管你能不能翻墙,能不能设置镜像。

  1. 本来以为全局安装完毕就可以在博客目录下直接安装hexo-renderer-sass,竟然还是报错。没办法,在newBlog目录下又按照上述的方法安装了一个node-sass@4.10.0,因为hexo-render-sass需要4.10.0版本。最后终于成功了。

安装成功

分割线以下为传统解决方法,尤其针对Linux用户


介绍

主流的CSS预处理器有8种,我们今天介绍sass.它的官网,不过需要安装ruby.

阅读全文 »

本文探索一下Event的冒泡过程和初学遇到的几个小bug

DOM Event概述

Event接口是检测在DOM中的发生的所有事件,我们一直在用,而且从DOM的很早的版本就一直在用着。早期的网景(后来的火狐)和IE是各自为战,直到W3C一统江湖,DOM版本一路发展而来,经历了DOM-0(洪荒时代)、DOM-1(只有两章核心内容)、DOM-2(划时代的一个版本,我们学的Event就在这个版本,而且目前的用的也是这个版本)、DOM-3、DOM-4(草案阶段)。

阅读全文 »

  • 终于换到liunx啦

原生DOM接口挺多的,需要花点时间研究下,不过先把基础整好,后面框架估计好学点。

1. DOM是啥

1.1 知识回顾

先回顾一下HTML的基本结构

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
</head>
<body>
</body>
</html>

以上就是最简单的HTML 5的结构。一般我们会把它处理成一棵树,一棵节点树。

阅读全文 »

什么是函数

函数是对象的一种,也是一段可以重复使用的代码块,开发人员为了完成某项功能,把相关代码块放到一起。

函数内部可以传参,也可以被当做参数传递

阅读全文 »

学习任何编程语言,数组都是绕不过去的坎,每个编程语言都在其标准库里面内置了功能强大的Array对象。通过参考阮一峰教程和MDN,我把数组常见的方法以及一些误区总结如下,内容较多,而且会继续补充,希望这一篇文章可以把数组的知识一网打尽。

阅读全文 »

引子

  • 解决一个问题的关键在于马上着手去解决这个问题。我们都觉得CSS难学,那么就抓紧时间去学,去学,去学

    margin的概念

    margin是盒模型中一个很重要的概念,是border之外的区域,我们通常称作外边距,有margin-top,margin-right,margin-bottom.moargin-left四个外边距。注意我书写的顺序是从上开始顺时针的顺序。
阅读全文 »

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

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

先上完美运行的代码

以下是我亲测可以运行的代码。连我这种前端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