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样式，实现了响应式的网格布局。