我只是文字的搬运工
本文旨在对web前端,涉及到的javascript相关知识进行一个广而泛的普及。
JSON是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式。
json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构
对象:对象在js中表示为“{}”括起来的内容,数据结构为 {key:value,key:value,…}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key 获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种。
数组:数组在js中是中括号“[]”括起来的内容,数据结构为 [“java”,”javascript”,”vb”,…],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。
AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
HTTP是一个客户端和服务器端请求和应答的标准(TCP)
典型的请求消息:
Host: download.*******.de
Accept: */*
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/4.04[en](Win95;I;Nav)
Range: bytes=554554-
User-Agent头域的内容包含发出请求的用户信息。
典型的响应消息:
HTTP/1.0200OK
Date:Mon,31Dec200104:25:57GMT
Server:Apache/1.3.14(Unix)
Content-type:text/html
Last-modified:Tue,17Apr200106:46:28GMT
Etag:"a030f020ac7c01:1e9f"
Content-length:39725426
Content-range:bytes55******/40279980
Content-Range实体头用于指定整个实体中的一部分的插入位置,他也指示了整个实体的长度。在服务器向客户返回一个部分响应,它必须描述响应覆盖的范围和整个实体长度。 一般格式:Content-Range:bytes-unitSPfirst-byte-pos-last-byte-pos/entity-legth 例如,传送头500个字节次字段的形式:Content-Range:bytes0-499/1234
世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一。它快速、可靠并且可通过简单的API扩展,将Perl/Python等解释器编译到服务器中。
一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器
一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。
一个可扩展的开源Node.js 框架。基于express之上。 它可以让我们:
一个基于nodejs简单的零配置命令行 http 服务器。
npm install http-server -g
http-server [path] [options]
一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
Node.js 的包管理器,是全球最大的开源库生态系统。
核心模块#
这些核心模块被编译成二进制文件,可以require(‘模块名’)去获取; 核心模块具有最高的加载优先级(有模块与核心模块同名时会体现)
文件模块
访问方式通过require(‘/文件名.后缀’); require(‘./文件名.后缀’); requrie(‘../文件名.后缀’) 去访问,文件后缀可以省略;以”/”开头是以绝对路径去加载,以”./”开头和以”../”开头表示以相对路径加载,而以”./”开头表示同级目录下文件,
node_modules
如果require()中的模块名不是一个本地模块,也没有以’/’, ‘../’, 或是 ‘./’开头,那么node会从当前模块的父目录开始,尝试在它的/node_modules文件夹里加载相应模块。
获取操作html节点(Element)属性(prototype)样式(style)
native:
var div=document.createElement('div'); //创建div
var p=document.createElement('p'); //创建div
div.id='inativediv';修改属性id
div.innerHtml="div"
div.style.background='red';修改样式背景色
div.style.width="100px";设置宽度
div.style.height="100px";设置高度
//get
document.getElementById('inativediv');
var div=$("<div id='ijQuerydiv'></div>");
div.css({width:"200px",height:"200px"});
//get
$("#dijQuerydiv")
进行数据校验,逻辑判断等
var outData=[];
var jsonData=[{id:0,name:'n0'},{id:1,name:'n1'}];
for(var i=0;i<jsonData.length;i++){
var jData=jsonData[i];
if(jData.id=0){
outData.push(jData.name);
}
}
与服务器端交互,ajax,websocket
native:
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera,Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://www.baidu.com",true);
xmlhttp.send();
jQuery#:
$.ajax({
url:"http://www.baidu.com",
success:function(resData){
}
})
捕获事件,页面响应 native:
var div=document.getElementById('inativediv');
div.onClick=function(){
alert("click")
}
div.onchange
div.onfocus
jquery#
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
window.open() // 打开新窗口
window.close() // 关闭当前窗口
window.moveTo() // 移动当前窗口
window.resizeTo() // 调整当前窗口的尺寸
alert
confirm
prompt
window.navigator
Window.history
window.location
window.screen
document.cookie
指有权访问另外一个函数作用域中的变量的函数。 创建闭包的常见方式就是在一个函数内部创建另外一个函数。 在javascript中没有块级作用域,一般为了给某个函数申明一些只有该函数才能使用的局部变量时,我们就会用到闭包,这样我们可以很大程度上减少全局作用域中的变量,净化全局作用域。 使用闭包有好处,也有坏处,滥用闭包会造成内存的大量消耗。
不依赖其他类库,能基于其上进行组件开发,例如 jquery Yahoo! UI Library (YUI) Prototype extjs
每个组件由模板(hbs)、样式(LESS)、脚本(JS)三部分组成。 脚本处理大致包含以下内容
几个典型UI库、框架:jqueryUI,ligerui,extjs,Yahoo! UI Library (YUI)、Dojo、Sencha(extjs)
软件总体结构体现模块化思想,即把软件划分为一些独立命名的部件,每个部件称为一个模块,当把所有模块组装在一起的时候,便可获得问题的一个解。 模块化以分治法为依据,但是否意味着我们把软件无限制的细分下去。事实上当分割过细,模块总数增多,每个模块的成本确实减少了,但模块接口所需代价随之增加。要确保模块的合理分割则须了解信息隐藏,内聚度及耦合度。
信息隐藏
模块应设计的使其所包含的信息(过程和数据)对于那些不需要用到它的模块不可见。每个模块只完成一个独立的功能,然后提供该功能的接口。模块间通过接口访问。JavaScript中可以用函数去隐藏,封装,而后返回接口对象。如下是一个提供事件管理的模块event。
信息隐藏对于模块设计好处十分明显,它不仅支持模块的并行开发,而且还可减少测试或后期维护工作量。如日后要修改代码,模块的隐藏部分可随意更改,前提是接口不变。如事件模块开始实现时为了兼容旧版本IE及标准浏览器,写了很多IE Special代码,有一天旧版本IE消失了(猴年马月),只需从容删去即可。
内聚度
内聚是来自结构化设计的一个概念,简单说内聚测量了单个模块内各个元素的联系程度。最不希望出现的内聚就是偶然性内聚,即将完全无关的抽象塞进同一个模块或类中。最希望出现的内聚是功能性内聚,即一个模块或类的各元素一同工作,提供某种清晰界定的行为。
内聚度指模块内部实现,它是信息隐藏和局部化概念的自然扩展,它标志着一个模块内部各成分彼此结合的紧密程度。好处也很明显,当把相关的任务分组后去阅读就容易多了。设计时应该尽可能的提高模块内聚度,从而获得较高的模块独立性。
耦合度
耦合也是来自结构化设计,Stevens、Myers和Constantine将耦合定义为「一个模块与另一个模块之间建立起的关联强度的测量。强耦合使系统变得复杂,因为如果模块与其它模块高度相连,它就难以独立的被理解、变化和修正」
内聚度是指特定模块内部实现的一种度量,耦合度则是指模块之间的关联程度的度量。耦合度取决于模块之间接口的复杂性,进入或调用模块的位置等。与内聚度相反,在设计时应尽量追求松散耦合的系统。
CommonJS就是为JS的表现来制定规范,因为js没有模块的功能所以CommonJS应运而生,它希望js可以在任何地方运行,不只是浏览器中。NodeJS是这种规范的实现。
它就主要为前端JS的表现制定规范。 AMD就只有一个接口:define(id?,dependencies?,factory); 它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中,像这样:
define(['dep1','dep2'],function(dep1,dep2){});
要是没什么依赖,就定义简单的模块,下面这样就可以啦:
define(function(){
var exports = {};
exports.method = function(){...};
return exports;
});
RequireJS就是实现了AMD规范的呢。
seajs,就是遵循的CMD规范。与AMD蛮相近的,不过用起来更加方便些,最重要的是中文版
define(function(require,exports,module){...});
#### 总结
JavaScript语言是弱结构性的,通过CommonJS定义一些规范,CMD和AMD得定义模块的方式对代码进行管理,使得更易维护;此外,NodeJS的诞生,对模块的规范定义,和包(npm)的概念的引入,让JS管理不再困难
Model–View–Controller (MVC)是一种把信息展现逻辑和用户交互分离的计算机用户界面开发模式;Model包含应用的数据和业务逻辑;Controller负责把用户的输入,转换为命令传递给Model和View。 MVC给我们带来的好处:
Model管理应用的数据。当model数据发生改变的时候,会通知它的监听者【可能是view】,收到通知后,监听者会做相应的变化。
View是当前状态的model的视觉展现,view会观察模型的变化,当模型改变的时候被通知,同时允许view来更新自己。一般情况下我们会在view中使用模版引擎渲染model;
Controllers是位于models和views的之间的调解人,它的工作是当model改变时来更新view和当用户操作view时来更新Model。
担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法(Action)。
Backbone的Model把服务器端的数据模型映射到浏览器端,绑定数据验证机制,并与相应的REST操作绑定,这样每个数据模型都变成了独立体,方便REST操作,却限制REST的灵活性。 Backbone的Model没有与UI视图数据绑定,而是需要在View中自行操作DOM来更新或读取UI数据。
Model直接与UI视图绑定,数据双向绑定。
一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍。
npm install -g bower
{
"directory" : "js/lib"
}
bower init
会提示你输入一些基本信息,根据提示按回车或者空格即可,然后会生成一个bower.json文件,用来保存该项目的配置,如下:
{
"name": "XXX",
"version": "0.0.1",
"authors": [
],
"moduleType": [
"amd"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"js/lib",
"test",
"tests"
],
"dependencies": {
}
}
包的安装
对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。
npm install -g grunt-cli
上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。
一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力。
npm install --global gulp
npm install --save-dev gulp
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
gulp
webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
npm install webpack -g
每个项目下都必须配置有一个 webpack.config.js ,它的作用如同常规的 gulpfile.js/Gruntfile.js ,就是一个配置项,告诉 webpack 它需要做什么。
一个很精干的库,压缩后只有4KB。它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程。MVC框架Backbone.js就将这个库作为自己的工具库。除了可以在浏览器环境使用,Underscore.js还可以用于Node.js。
一个用于网页作图、生成互动图形的JavaScript函数库。它提供一个d3对象,所有方法都通过这个对象调用。