Web学习笔记

javascript

js跨平台，从web到App到后台都可以胜任，而且从当前市场对js开发的需求来看，刷刷js技能很有必要。

js无需编译，解释运行，弱类型，面向对象，运行在浏览器或者nodejs等平台上。

js基本数据类型、运算符

js中的数据类型有number, string, boolean, object, function, undefined。

delete删除对象的一个属性，不能删除一个函数名。

in判断属性是否在某个对象中。

js错误处理

编写js代码容易出错的地方个人觉得一个是大小写，另一个就是把方法当作属性或者把属性当作方法用。而且不同浏览器对于js代码的错误提示不太一样，不过随着html5和ECMAStript5的广泛应用，这种情况会越来越少。

js中throw错误可以是不同类型的对象（数值、字符串、对象等），浏览器抛出的错误是一个对象，但是对象的类型取决于浏览器的具体实现。

js属性

js中的属性有3个特性：Configurable（可修改或删除）、Enumerable（可枚举）和Writable（可写）。

js函数

js函数中的变量声明会提前，意思是所有函数中使用的变量已经在函数作用域中，但是给变量赋值之前变量的值是undefined。自调函数比较适合执行执行一次的或初始化的操作。函数也是一种数据类型，所以函数作用域中可以有私有函数，函数内部可以重写自己，可以在第一次调用后重写自己，这样可以保证某些操作不会重复执行。

var a = function () {
    function someSetup() {
        var setup = "done";
    }

    function actualWork() {
        alert("Worky-worky");
    }

    someSetup();
    return actualWork;
};

a();

私有函数

浏览器探测技术：相同的任务在不同浏览器中可能是不同的，所以函数可以先检测浏览器然后重写自己。

js中的作用域（scope）可以理解成词法作用域（lexical）和执行上下文。词法作用域包括全局作用域以及函数定义的作用域，决定了代码中是否可以访问变量，会不会出现语法错误；执行上下文指运行时内存中的变量存储，变量名和变量值会以键值对的形式存储其中。程序开始运行之前，解释器会创建一个全局的执行上下文，之后每一个函数的执行会创建一个新的执行上下文。函数创建执行上下文的位置在其被定义的作用域对应的执行上下文中。闭包是指有权访问另一个函数作用域中的变量的函数。

js函数中的this是一个特殊参数，在运行时绑定（简单来说大多数情况即点号前面的对象），默认的绑定对象是global，call和apply可以重载默认的绑定。

js面向对象

js中没有类、继承等概念，但是可以利用原型链建立对象之间的联系来模拟继承。原型链最顶端的对象是object（拥有hasOwnProperty, constructor, toString等方法或属性）。

js中伪类的实现：

var Car = function (loc) {
    this.loc = loc;
};

Car.prototype.move = function () {
    this.loc++;
};

var amy = new Car(1);
amy.move();

伪类

js中父类和子类的实现：

var Car = function (loc) {
    this.loc = loc;
};

// 自动属性Car.prototype.constructor会指向Car()
Car.prototype.move = function () {
    this.loc++;
};

var Van = function (loc) {
    Car.call(this, loc);
};

Van.prototype = Object.create(Car.prototype);

// 需要重新指定constructor因为prototype是自己创建
Van.prototype.constructor = Van;

Van.prototype.grab = function () {
};

父类和子类

js模块化

js的模块管理器Browserify、webpack、Duo等。浏览器中加载不同js模块需要实现模块的异步加载避免使网页失去响应，另外需要根据模块的依赖关系按顺序加载。js中实现模块化的规范有AMD、CommonJS以及CMD等。服务器端Node.js遵循CommonJS，浏览器端需要异步加载所以遵循AMD或者CMD。

js宿主内置对象

BOM：浏览器对象模型，目前了解的几个window、document、navigator（可以获取浏览器和系统信息，名称是历史遗留）、screen、location等。

HTMLInputElement：输入元素对应的DOM对象。

window.localStorage：存储在其中的数据浏览器被关闭之后也不会被清除，这与window.sessionStorage是不同的。

AJAX

ajax是一种不需要重新加载页面与后台服务器交换数据的技术。

js库

jQuery

js工具

自动化构建工具：Grunt

js代码校验工具：JSHint

js桌面化技术

开源项目electron

事件处理

一般将事件处理程序添加到事件流的冒泡阶段，可以最大限度的兼容各种浏览器，除非需要在事件到达目标之前截获它才在捕获阶段处理。

HTML

H5中的新增元素比如figure（文档中的一小节）、header、section以及footer等等，能够让文档结构更清晰，但是会变得复杂不宜理解，另外，要怎么处理浏览器不支持时的情况？还是要尝试使用，对搜索引擎的识别有好处。

CSS

flex布局模型可以很方便的实现响应式布局；bootstrap提供的预定义css样式，实现了响应式的网格布局。