diff --git a/Cookie.md b/Cookie.md new file mode 100644 index 0000000..f02a845 --- /dev/null +++ b/Cookie.md @@ -0,0 +1,23 @@ +# cookie # + +Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。即用户A购买了一件商品放入购物车内，当再次购买商品时服务器已经无法判断该购买行为是属于用户A的会话还是用户B的会话了。要跟踪该会话，必须引入一种机制。 +Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前，基本上所有的网站都采用Cookie来跟踪会话。 + +cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。 + +cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。 + +（1）保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。 + +（2）跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便。 + +（3）定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。 + +（4）创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。 + +当然，上述应用仅仅是cookie能完成的部分应用，还有更多的功能需要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种： + +（1）cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能； +（2）cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的； +（3）cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除； +（4）cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。 \ No newline at end of file diff --git "a/JavaScript\346\250\241\345\235\227\345\214\226+JavaScript\346\225\260\346\215\256\346\216\250\351\200\201.docx" "b/JavaScript\346\250\241\345\235\227\345\214\226+JavaScript\346\225\260\346\215\256\346\216\250\351\200\201.docx" deleted file mode 100644 index 39865df..0000000 Binary files "a/JavaScript\346\250\241\345\235\227\345\214\226+JavaScript\346\225\260\346\215\256\346\216\250\351\200\201.docx" and /dev/null differ diff --git "a/JavaScript\346\250\241\345\235\227\345\214\226+JavaScript\346\225\260\346\215\256\346\216\250\351\200\201.md" "b/JavaScript\346\250\241\345\235\227\345\214\226+JavaScript\346\225\260\346\215\256\346\216\250\351\200\201.md" new file mode 100644 index 0000000..9738e27 --- /dev/null +++ "b/JavaScript\346\250\241\345\235\227\345\214\226+JavaScript\346\225\260\346\215\256\346\216\250\351\200\201.md" @@ -0,0 +1,24 @@ +## һ��JavaScriptģ�黯�ĸ����������Ա��ʣ� +2009�꣬Nodejs ����������������˵� JavaScript ����ģ�黯��д���ܿ�������������˵� JSer ��ţ���Ƿ׷׷�Ч������дģ��Ĺ淶Ҳ�Dz�����CommonJS ��ͳһǰ��˵�д����AMD ����Ϊ�Լ����ʺ�������˵ġ����ڵ� CMD �dz����졣 +��Դ��nodejs���Ѵ�������ģ�飬����require���á� +AMD��RequireJS���ƹ�����ж�ģ�鶨��Ĺ淶�������� +�첽����ģ�飬����ǰ�ã���ǰִ�С� +Define����ģ��define([��require��,��foo��],function(){return}); +Require����ģ�飨����ǰ�ã�require([��foo��,��bar��],function(foo,bar){}); +CMD��SeaJS���ƹ�����ж�ģ�鶨��Ĺ淶�������� +Define����exports����define(function(require,exports,module){}); +Module�ϴ洢�˵�ǰģ���һЩ���� +Require(./a)ֱ�����롣Requeir.async�첽���롣 +ͬ�����أ������ͽ����ӳ�ִ�С� +���ƵĻ���CommonJS Modules/2.0�淶�� +## ����JavaScript�������� +���������ڵ��·dz����ȣ����ǵ��ֻ�ÿ�춼���յ�����APP�ĸ�����Ϣ��JavaScript����������Ҫ������webapp���������ͷ��񣬲�������ÿ�ζ��������ȥ����Ajax�����������Server���������ݵ����ء������ڱ��뱣����һ�����Ӳ��ţ�����ͨ��ǰ�˲�ͣ�����˷�������H5���º�����WebSocket��������˫��͵����������ݵı����ԡ� +### 1.Comet������HTTP�����ӵķ��������ͼ��� +���� HTTP �����ӵķ��������ͼ�����Comet ��һ�� Web Ӧ�üܹ����������˻��������첽�ķ�ʽ��ͻ��˳����������ݣ�������Ҫ�ͻ�����ʽ�ķ�������Comet �ܹ��dz��ʺ��¼������� Web Ӧ�ã��Լ��Խ����Ժ�ʵʱ��Ҫ���ǿ��Ӧ�ã����Ʊ������������������Һ� Web ��������Ϸ�ȡ� +### 2.����WebSocket�����ͷ��� +����WebSocket �����ͷ��������������ͨ��http����ʵ�ֵ����ͨ��,comet����һ���̶���ģ��˫��ͨ��,��Ч�ʽϵ�,����Ҫ�������нϺõ�֧��; flash�е�socket��xmlsocket����ʵ��������˫��ͨ��,ͨ�� flex ajax bridge,������javascript��ʹ���������. ����Ԥ��,���websocketһ����������еõ�ʵ��,����������������,�õ��㷺��ʹ��.�������״����HTML5������WebSocketЭ�飬�ܸ��õĽ�ʡ��������Դ�ʹ������ﵽʵʱͨѶ�� +### 3.SSE(Server-Send Event)���������������ݵ��·�ʽ +�������������ݵ��·�ʽSSE����ͳ����ҳ����������������"��ѯ"���ݣ����Ǻܶೡ�ϣ�����Ч�ķ�ʽ�Ƿ������������"����"���ݡ����磬ÿ���յ��µĵ����ʼ�,�������������������һ��"֪ͨ",��Ҫ���������ʱ���������ѯ��polling������Ч�ʡ������������¼���Server-Sent Events�����SSE������Ϊ�˽��������⣬�������һ����API��������EventSource�����ϡ�Ŀǰ������IE�����������������֧�֡� +## ����JavaScript�� +obj array ��js���� ��Ϊ��������ʱΪ�����ô��� +string number boolean��Ϊ��������ʱΪ��ֵ���� diff --git "a/Koa\346\212\200\346\234\257\345\210\206\344\272\2532.0.docx" "b/Koa\346\212\200\346\234\257\345\210\206\344\272\2532.0.docx" deleted file mode 100644 index 5863683..0000000 Binary files "a/Koa\346\212\200\346\234\257\345\210\206\344\272\2532.0.docx" and /dev/null differ diff --git "a/Koa\346\212\200\346\234\257\345\210\206\344\272\2532.0.md" "b/Koa\346\212\200\346\234\257\345\210\206\344\272\2532.0.md" new file mode 100644 index 0000000..db3725c --- /dev/null +++ "b/Koa\346\212\200\346\234\257\345\210\206\344\272\2532.0.md" @@ -0,0 +1,401 @@ +### 学习交流 +项目同时部署在阿里云，访问地址[www.keepforward.xyz:3000](www.keepforward.xyz:3000) +gihub地址：[https://github.com/a1511870876/myblog](https://github.com/a1511870876/myblog)欢迎star +一些学习分享，大家共同交流，地址[https://github.com/a1511870876/studyFiles](https://github.com/a1511870876/studyFiles) +### 写在前面 +　　Koa使用了ES6规范的generator和异步编程是一个更轻量级Web开发的框架，Koa 的先天优势在于 generator。由于是我个人的分享交流，所以Node基础、ES6标准、Web开发基础以及Koa的"Hello World"程序都不在讨论，希望各位小伙伴提出意见和指导。 +　　PS：Koa 内核中没有捆绑任何中间件，但不用担心，Koa 拥有极其强悍的拓展性，正文所有中间件都可以在npm官网下载安装，但国内域名安装会有一些限制，提供一个国内镜像安装方法，速度非常快，在直接npm模块失败的时候非常好用，使用npm --registry=http://registry.npmjs.org install XXXXX –XX 命令安装，只需要在install后面加上要安装的中间件名称和相应的参数即可。 +### 一、使用Koa搭建Web项目流程 +**1、Koa项目创建** +　　个人认为不管任何框架，Web项目搭建必需的几个方面，页面、中间件、路由、会话和存储、日志、静态文件指定，以及错误的处理。当然，网站开发不止这些东西，还有许多主题，比如实时通讯，搜索引擎架构，权限控制，邮件优先队列，日志记录分析，对Web开发还刚刚入门属于菜鸟级别，这里就不做深入的讨论了。了解Express框架的小伙伴一定知道Express的部署过程，不管是通过express-generator生成还是WebStorm等编译器直接创建，它的目录结构大概是这样的： +``` +|——app.js +|——bin +|——node_modules +|——package.json +|——public +|——routes +|——views +``` +　　*app.js，是程序启动文件 +　　*bin，存放执行程序 +　　*node_modules，存放项目依赖库 +　　*package.json，是配置和一些相关信息 +　　*public，存放静态文件（css，js，img） +　　*routes，存放路由文件 +　　*views，存放前台页面文件 +　　这些结构基本包含了上述提到的Web项目搭建的要素，但是目前类似express-generator的Koa部署工具Koa-generator（非官方）并不完善并且个人测试存在些许错误。其实Koa-generator也是仿造上述express-generator生成的目录，既然这样还不如手动创建目录来的爽快（generator-k是另一款生成器，用上去感觉还行），在根目录新建app.js作为程序的启动文件，创建三个文件夹分别命名public、routes和views，最后新建package.json文件存放你的项目的一些信息。完成这些创建之后，用npm命令安装Koa，这样的话一个基本的Koa框架就搭建好了，非常的的轻量级，它的目录结构如下： +``` + |——app.js + |——node_modules + |——public + | |——img + | |——css + | |——js + | + |——routes + | |——index.js + | |——user.Js + | + |——views + | |——_layout.html + | |——index.html + | + |——package.json + Koa项目运行：node --harmony app.js + 必须加 --harmony ，这样才会支持 ES6 语法。 +``` +**2、Koa日志** +　　日志是项目error调试和日常维护的基本手段，Koa有日志模块Koa-logger，npm install Koa-logger后使用app.use(logger());命令程序就会在控制台自动打印日志，当然如果你对Koa-logger的风格不满意或者想要看到更多得信息也可以自己编辑代码实现有自己风格的日志打印。 +例如： +``` + auto map route -> [get]/authority/saveAddUser/ + auto map route -> [get]/authority/searchUserInfo/ + auto map route -> [get]/authority/updateUser/ + auto map route -> [get]/authority/deletedUser/ + auto map route -> [get]/authority/getSelectValues/ + auto map route -> [get]/authority/saveAuthority/ +``` +　　最后呢，如果有需要，要把日志进行存储。 +**3、Koa的错误处理** +　　Koa 有 error 事件，当发生错误时，可以通过该事件，对错误进行统一的处理。 +``` +var Koa = require('koa'); +var app = Koa(); +app.on('error', function(err,ctx){ + console.log(err); +}); +app.listen(3000); +``` +　　上面这段代码在如果捕获到错误，页面会打印出 “Internal Server Error” （这是Koa对错误的默认处理）。这个错误我们在综合监控系统中也经常见到，那么我们显然无法根据这条日志得到什么信息 +``` +TypeError: Cannot read property 'split' of undefined +at Object.Home.index (d:\test\route\home.js:143:31) +at GeneratorFunctionPrototype.next (native) +at Object.dispatch (d:\test\node_modules\koa-router\lib\router.js:97:44) +at GeneratorFunctionPrototype.next (native) +``` +　　这些错误信息是怎么报出来的的呢，其实是Koa-onerror 中间件，它优化错误信息，根据这些错误信息就能更好的捕获到错误。 +Koa-onerror使用方法： +``` + var onerror = require('Koa-onerror'); + onerror(app); +``` +**4、Koa静态文件指定** +　　Koa静态文件指定中间件Koa-static，npm install Koa-static之后就可以使用Koa-static负责托管 Koa 应用内的静态资源。映射了静态文件目录，引用的时候直接去该目录下寻找资源，会减少一些消耗。（不知道讲的准确不准确，只是个人的理解）指定public为静态文件目录的代码如下： +``` + var staticServer = require('koa-static'); + var path = require('path'); + app.use(staticServer(path.join(__dirname,'public'))); +``` +**5、ejs模板的使用** +　　渲染页面需要一种模板，这里选择风格接近html的ejs模板。npm install Koa-ejs后就可以在Koa框架中使用ejs模版。 +``` + var render = require('koa-ejs'); + render(app, { + root: path.join(__dirname, 'views'), + layout: '__layout', + viewExt: 'html', + cache: false, + debug: true + }); + app.use(function *(){ + yield this.render('index',{layout:false}); + }); +``` +**6、Koa路由设置** +　　Koa个极简的web框架，简单到连路由模块都没有配备。自己手写路由是这样的： +``` + app.use(function *(){ + //我是首页 + if(this.path==='/'){ + } + }); +``` +　　使用更加强大的路由中间件，Koa中设置路由一般安装Koa-router，Koa-router支持五种方法 +``` + router.get() + router.post() + router.put() + router.del() + router.patch() +``` +　　GET方法举例： +``` + var app = require('koa')(); + var Router = require('koa-router'); + var myRouter = new Router(); + myRouter.get('/', function *(next) { + yield this.render('index',{layout:false}); + }); + app.use(myRouter.routes()); + app.listen(3000); +``` +　　Koa-router 拥有丰富的 api 细节，用好这些 api ，可以让页面代码更为优雅与可维护。 +接收query参数 +``` + http://localhost:3000/?a=1(条件) + index.js + var router = require('koa-router')(); + router + .get('/',function *(next){ + console.log(this.query); + yield this.render('index',{layout:false}); + }) + .get('/home',function *(ctx,next){ + ctx.render('home'); + }); + //ctx为Koa2.0中支持 + ... ... + module.exports = router; + 控制台打印： + <-- GET /?a=1 + { a: '1' } + { a: '1' } + 接收params参数 + http://localhost:3000/users/123（参数） + router.get('/user/:id', function *(next) { + console.log(this.params.id); + }); +``` +　　param() 用于封装参数处理中间件，当访问 /detail/:id 路由时，会先执行 param() 定义的 generator function 逻辑。函数的第一个是路由参数的值，next 是中间件流程关键标识变量。 +yield next; +　　表示执行下一个中间件。 +``` + app.param('id',function *(id,next){ + this.id = Number(id); + if ( typeof this.id != 'number') return this.status = 404; + yield next; + }).get('/detail/:id', function *(next) { + //我是详情页面 + var id = this.id; //123 + this.body = id; + }); +``` +**7、Koa中间件** +　　Koa的中间件很像Express的中间件，也是对HTTP请求进行处理的函数，但是必须是一个Generator函数即 function \*(){} 语法，不然会报错。可以这么说，Nodejs的Web程序中任何请求和响应都是中间件在操作。 +``` + app + .use(logger()) //日志中间件 + .use(serve(__dirname + '/public')) //静态文件指定中间件 + .use(router.routes()) //路由中间件 + .use(router.allowedMethods()); //路由中间件 +``` +　　app.use 加载用于处理http请求的middleware（中间件），当一个请求来的时候，会依次被这些 middlewares处理。执行的顺序是你定义的顺序。中间件的执行顺序规则是类似“栈”的结构，所有需要执行的中间件都被一个一个放入“栈”中，当没有遇到next()的时候，“栈”里边的这些中间件被逆序执行。 +``` + app.use(function *(next){ + this; // is the Context + this.request; // is a Koa Request + this.response; // is a Koa Response + }); +``` +说明： +　　•this是上下文 +　　•\*代表es6里的generator +　　http模型里的请求和响应 +　　•this.request +　　•this.response +　　app.use() 究竟发生了什么不可思议的化学反应呢？ +其实 app.use() 就干了一件事，就是将中间件放入一个数组，真正执行逻辑的是：app.listen(3000); +Koa 的 listen() 除了指定了 http 服务的端口号外，还会启动 http server，等价于： +``` + var http = require('http'); + http.createServer(app.callback()).listen(3000); +``` +　　后面这种繁琐的形式有什么用呢？ +　　一个典型的场景是启动 https 服务，默认 app.listen(); 是启动 http 服务，启动 https 服务就需要： +``` + var https = require('https'); + https.createServer(app.callback()).listen(3000); +``` +### 二、异步编程 +**1、异步流程控制** +　　异步编程对 JavaScript 语言太重要。JavaScript 只有一根线程，如果没有异步编程，根本没法用，非卡死不可。 +　　以前，异步编程的方法，大概有下面四种。 +　　回调函数 +　　事件监听 +　　发布/订阅 +　　Promise 对象 +　　JavaScript 语言对异步编程的实现，就是回调函数。所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。它的英语名字 callback，直译过来就是"重新调用"。 +读取文件进行处理，是这样写的。 +``` + fs.readFile('/etc/passwd', function (err, data) { + if (err) throw err; + console.log(data); + }); +``` +　　上面代码中，readFile 函数的第二个参数，就是回调函数，也就是任务的第二段。等到操作系统返回了 /etc/passwd 这个文件以后，回调函数才会执行。回调函数本身并没有问题，它的问题出现在多个回调函数嵌套。假定读取A文件之后，再读取B文件，代码如下。 +``` + fs.readFile(fileA, function (err, data) { + fs.readFile(fileB, function (err, data) { + // ... + }); + }); +``` +　　不难想象，如果依次读取多个文件，就会出现多重嵌套。代码不是纵向发展，而是横向发展，很快就会乱成一团，无法管理。这种情况就称为"回调函数噩梦"（callback hell）。Promise就是为了解决这个问题而提出的。它不是新的语法功能，而是一种新的写法，允许将回调函数的横向加载，改成纵向加载。采用Promise，连续读取多个文件，写法如下。 +``` + var readFile = require('fs-readfile-promise'); + readFile(fileA) + .then(function(data){ + console.log(data.toString()); + }) + .then(function(){ + return readFile(fileB); + }) + .then(function(data){ + console.log(data.toString()); + }) + .catch(function(err) { + console.log(err); + }); +``` +　　上面代码中，我使用了 fs-readfile-promise 模块，它的作用就是返回一个 Promise 版本的 readFile 函数。Promise 提供 then 方法加载回调函数，catch方法捕捉执行过程中抛出的错误。可以看到，Promise 的写法只是回调函数的改进，使用then方法以后，异步任务的两段执行看得更清楚了，除此以外，并无新意。 +　　Promise 的最大问题是代码冗余，原来的任务被Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。 +　　那么，有没有更好的写法呢？ +　　ECMAScript 6 （简称 ES6 ）作为下一代 JavaScript 语言，将 JavaScript 异步编程带入了一个全新的阶段。异步编程的语法目标，就是怎样让它更像同步编程。 +　　Koa 的先天优势在于 generator。 +　　generator指的是 +``` + function* xxx(){ + } +``` +　　是es6里的写法。 +``` + var r = 3; + function* infinite_ap(a) { + for( var i = 0; i < 3 ; i++) { + a = a + r ; + yield a; + } + } + var sum = infinite_ap(5); + console.log(sum.next()); // returns { value : 8, done : false } + console.log(sum.next()); // returns { value : 11, done: false } + console.log(sum.next()); // returns { value : 14, done: false } + console.log(sum.next()); //return { value: undefined, done: true } +``` +　　yield语句就是暂停标志，next方法遇到yield，就会暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回对象的value属性的值。当下一次调用next方法时，再继续往下执行，直到遇到下一个yield语句。如果没有再遇到新的yield语句，就一直运行到函数结束，将return语句后面的表达式的值，作为value属性的值，如果该函数没有return语句，则value属性的值为undefined。当第一次调用 sum.next() 时 返回的a变量值是5 + 3，同理第二次调用 sum.next() ，a变量值是8 +3，知道循环执行结束，返回done:true标识。大家有没有发现个问题，Koa 中 generator 的用法与上述 demo 演示的用法有非常大得差异，那是因为 Koa 中的 generator 使用了 co 进行了封装。 +**2、co的使用** +　　Ps:(这里只是简单介绍，后续可以作为一个专题来讲) +　　co 函数库是著名程序员 TJ Holowaychuk 于2013年6月发布的一个小工具，用于 Generator 函数的自动执行。 +　　比如，有一个 Generator 函数，用于依次读取两个文件。 +``` + var gen = function* (){ + var f1 = yield readFile('/etc/fstab'); + var f2 = yield readFile('/etc/shells'); + console.log(f1.toString()); + console.log(f2.toString()); + }; +``` +　　co 函数库可以让你不用编写 Generator 函数的执行器。 +``` + var co = require('co'); + co(gen); +``` +　　上面代码中，Generator 函数只要传入 co 函数，就会自动执行。 +　　co 函数返回一个 Promise 对象，因此可以用 then 方法添加回调函数。 +``` + co(gen).then(function (){ + console.log('Generator 函数执行完成'); + }) +``` +　　上面代码中，等到 Generator 函数执行结束，就会输出一行提示。 +　　为什么 co 可以自动执行 Generator 函数？ +　　前面文章说过，Generator 函数就是一个异步操作的容器。它的自动执行需要一种机制，当异步操作有了结果，能够自动交回执行权。 +　　两种方法可以做到这一点。 +　　（1）回调函数。将异步操作包装成 Thunk 函数，在回调函数里面交回执行权。 +　　（2）Promise 对象。将异步操作包装成 Promise 对象，用 then 方法交回执行权。 +　　co 函数库其实就是将两种自动执行器（Thunk 函数和 Promise 对象），包装成一个库。使用 co 的前提条件是，Generator 函数的 yield 命令后面，只能是 Thunk 函数或 Promise 对象。 +　　参考：[http://www.ruanyifeng.com/blog/2015/05/co.html](http://www.ruanyifeng.com/blog/2015/05/co.html) +**3、Koa 中间件机制实现原理** +使用 Koa 的同学一定会有如下疑问： + +1. Koa 的中间件机制是如何实现？ +2. 为什么中间件必须是 generator function？ +3. next 实参指向是什么？为什么可以通过 yield next 可以执行下一个中间件？ +4. 为什么中间件从上到下执行完后，可以从下到上执行 yield next 后的逻辑？ + +　　通过实现简单的 Koa 框架（剥离除中间件外所有的逻辑）来解答上述问题，这个框架的名字叫 SimpleKoa： +``` + var co = require('co'); + function SimpleKoa(){ + this.middlewares = []; + } + SimpleKoa.prototype = { + //注入个中间件 + use: function(gf){ + this.middlewares.push(gf); + }, + //执行中间件 + listen: function(){ + this._run(); + }, + _run: function(){ + var ctx = this; + var middlewares = ctx.middlewares; + return co(function *(){ + var prev = null; + var i = middlewares.length; + //从最后一个中间件到第一个中间件的顺序开始遍历 + while (i--) { + //实际Koa的ctx应该指向server的上下文，这里做了简化 + //prev 将前面一个中间件传递给当前中间件 + prev = middlewares[i].call(ctx, prev); + } + //执行第一个中间件 + yield prev; + })(); + } + }; +``` +　　写个 demo 印证下中间件执行顺序： +``` + var app = new SimpleKoa(); + app.use(function *(next){ + this.body = '1'; + yield next; + this.body += '5'; + console.log(this.body); + }); + app.use(function *(next){ + this.body += '2'; + yield next; + this.body += '4'; + }); + app.use(function *(next){ + this.body += '3'; + }); + app.listen(); +``` +　　执行后控制台输出：123456，对照 Koa 中间件执行顺序，完全一致！寥寥几行代码，我们就实现了 Koa 的中间件机制！这就是 co 的魔力。 +### 三、Koa中涉及但本次没有讲的问题 +**1、Koa中的cookie和session（后续详细讲解）** +　　web应用程序都离不开cookie和session的使用，是因为Http是一种无状态性的协议。保存用户状态信息的一种方法或手段，Session 与 Cookie 的作用都是为了保持访问用户与后端服务器的交互状态。 +**2、Koa中nosql（后续技术分享会详细讲解）** +　　mongodb是一个基于文档的非关系型数据库，所有数据是从磁盘上进行读写的，其优势在于查询功能比较强大，能存储海量数据。 +　　redis是内存型数据库，数据保存在内存中，通过tcp直接存取，优势是速度快，并发高，缺点是数据类型有限，查询功能不强，一般用作缓存。它由C语言实现的，与 NodeJS工作原理近似，同样以单线程异步的方式工作，先读写内存再异步同步到磁盘，读写速度上比MongoDB有巨大的提升，当并发达到一定程度时，即可考虑使用Redis来缓存数据和持久化Session。 +``` + var mongoose = require('mongoose'); + // 引入 mongoose 模块 + mongoose.connect('mongodb://localhost/blog'); + // 然后连接对应的数据库：mongodb://localhost/test + // 其中，前面那个 mongodb 是 protocol scheme 的名称；localhost 是 mongod 所在的地址； + // 端口号省略则默认连接 27017；blog是数据库的名称 + // mongodb 中不需要建立数据库，当你需要连接的数据库不存在时，会自动创建一个出来。 + module.exports = mongoose; + // 导出 mongoose 模块 + var mongoose = require('../modules/db'); + // 引入 mongoose 模块 + var User = mongoose.model('User',{ + name: {type: String, match: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/}, + password: String + }); + //创建了一个名为 User 的 model + var user1 = new User({name:'12345@qqqqqq.com'}); + user1.password = 'a5201314'; + user1.save(function(err){ + if(err){ + console.log("save error"); + } + }); +``` \ No newline at end of file diff --git a/README.md b/README.md index dfb5150..cbc3aea 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,6 @@ # studyFiles -һЩNodeJS��ǰ�˵�ѧϰ�ʼǣ�Koa+MongoDB+MySQL+JavaScript+Bootstrap+React+jQuery�ȵ� \ No newline at end of file +一些NodeJS和前端的学习笔记，Koa+MongoDB+MySQL+JavaScript+Bootstrap+React+jQuery等等 + +*此目录均为原创文章*
+*转载请注明：*
+*转载自：https://github.com/a1511870876*
diff --git a/git.md b/git.md new file mode 100644 index 0000000..672db6b --- /dev/null +++ b/git.md @@ -0,0 +1,10 @@ +Create a new repository on the command line +touch README.md +git init +git add README.md +git commit -m "first commit" +git remote add origin https://github.com/a1511870876/secondWorks.git +git push -u origin master +Push an existing repository from the command line +git remote add origin https://github.com/a1511870876/secondWorks.git +git push -u origin master \ No newline at end of file diff --git a/git.txt b/git.txt deleted file mode 100644 index b8a49bf..0000000 --- a/git.txt +++ /dev/null @@ -1,10 +0,0 @@ -Create a new repository on the command line -touch README.md -git init -git add README.md -git commit -m "first commit" -git remote add origin git@github.com:teamtogether/TestProject.git -git push -u origin master -Push an existing repository from the command line -git remote add origin git@github.com:teamtogether/TestProject.git -git push -u origin master \ No newline at end of file diff --git "a/http\345\214\205\344\270\276\344\276\213.md" "b/http\345\214\205\344\270\276\344\276\213.md" new file mode 100644 index 0000000..d40f2f3 --- /dev/null +++ "b/http\345\214\205\344\270\276\344\276\213.md" @@ -0,0 +1,37 @@ +# HTTP协议 # +刚刚说到其实协议就是让浏览器跟服务器互相知道他们要什么，因此浏览器发给服务器的包就要带着一些用户操作信息，服务器发给浏览器的包就要带着用户想要的数据信息。 +当浏览器输入一个URL，相当于浏览器发起一个HTTP请求包出去，浏览器会把一些自身信息以及用户操作的信息写在包头上带到服务器，这样服务器才知道你在用什么浏览器想请求它的什么资源。 + +## HTTP请求包的常见包头如下 +GET / HTTP/1.1 +获取的路径以及HTTP版本 +Host: www.qq.com:8080 +服务器主机名字&端口号 +Connection: keep-alive +用于长连 +User-Agent: Chrome/35.0.1916.153 +浏览器基本信息 +Accept-Encoding: gzip,deflate,sdch +告诉服务器支持的编码 +Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,nl;q=0.4,zh-TW;q=0.2 +告诉服务器优先支持的语言 +Cookie: id=1;username=raphealguo; +解决HTTP无状态重要的Cookie，里边是key=value对 紧接着服务器收到HTTP请求，经过CGI处理之后回复一个HTTP响应包，服务器需要告诉你包里边是什么（Content-Type），包里边有多少东西 （Content-Length），服务器版本是什么等等。 + +## HTTP响应包常见的包头如下： + +HTTP/1.1 200 OK +HTTP版本以及状态码 +Server: nginx/1.4.1 +服务器版本 +Date: Mon, 30 Jun 2014 09:44:10 GMT +回包时间 +Content-Type: text/html; charset=UTF-8 +包里边的类型 +Content-Length: 14534 +包体的长度 +Connection: keep-alive +用于长连 +Cache-Control: no-cache, must-revalidate +用于缓存控制 +具体的HTTP协议的细节推荐阅读《HTTP权威指南》。 \ No newline at end of file diff --git "a/http\351\224\231\350\257\257\347\240\201.md" "b/http\351\224\231\350\257\257\347\240\201.md" new file mode 100644 index 0000000..6cef1e8 --- /dev/null +++ "b/http\351\224\231\350\257\257\347\240\201.md" @@ -0,0 +1,31 @@ +# 所有 HTTP 状态代码及其定义 + +## 2xx 成功 ## +200 正常；请求已完成。 +201 正常；紧接 POST 命令。 +202 正常；已接受用于处理，但处理尚未完成。 +203 正常；部分信息 — 返回的信息只是一部分。 +204 正常；无响应 — 已接收请求，但不存在要回送的信息。 + +## 3xx 重定向 ## +301 已移动 — 请求的数据具有新的位置且更改是永久的。 +302 已找到 — 请求的数据临时具有不同 URI。 +303 请参阅其它 — 可在另一 URI 下找到对请求的响应，且应使用 GET 方法检索此响应。 +304 未修改 — 未按预期修改文档。 +305 使用代理 — 必须通过位置字段中提供的代理来访问请求的资源。 +306 未使用 — 不再使用；保留此代码以便将来使用。 + +## 4xx 客户机中出现的错误 ## +400 错误请求 — 请求中有语法问题，或不能满足请求。 +401 未授权 — 未授权客户机访问数据。 +402 需要付款 — 表示计费系统已有效。 +403 禁止 — 即使有授权也不需要访问。 +404 找不到 — 服务器找不到给定的资源；文档不存在。 +407 代理认证请求 — 客户机首先必须使用代理认证自身。 +415 介质类型不受支持 — 服务器拒绝服务请求，因为不支持请求实体的格式。 + +## 5xx 服务器中出现的错误 +500 内部错误 — 因为意外情况，服务器不能完成请求。 +501 未执行 — 服务器不支持请求的工具。 +502 错误网关 — 服务器接收到来自上游服务器的无效响应。 +503 无法获得服务 — 由于临时过载或维护，服务器无法处理请求。 \ No newline at end of file diff --git "a/mongoose\344\275\277\347\224\250\345\277\203\345\276\227.docx" "b/mongoose\344\275\277\347\224\250\345\277\203\345\276\227.docx" deleted file mode 100644 index ffd3e66..0000000 Binary files "a/mongoose\344\275\277\347\224\250\345\277\203\345\276\227.docx" and /dev/null differ diff --git "a/mongoose\344\275\277\347\224\250\345\277\203\345\276\227.md" "b/mongoose\344\275\277\347\224\250\345\277\203\345\276\227.md" new file mode 100644 index 0000000..24be758 --- /dev/null +++ "b/mongoose\344\275\277\347\224\250\345\277\203\345\276\227.md" @@ -0,0 +1,41 @@ +### 主要是自己使用mongoose的一些有疑虑的地方简单介绍 +　　初次使用mongoose的过程中有很多的疑惑，MongoDB是文档型数据库，文档保存在集合中，所有的增删改查都是在集合中操作，而在mongoose中很多操作并没有集合的概念，因此在集合的创建、查询、删除等等操作的时候，我就会想Collections在哪？相信初学者都会有这样的疑惑。直到翻看了官方文档中的一句话，“With Mongoose, everything is derived from a Schema.”注意，是everything。记住这句话，我相信不管是学习还是使用mongoose，那么思考的方向已经对了。 +　　使用mongoose连接MongoDB就不多说了，直接上代码： +``` + var mongoose = require(‘mongoose’); + // 引入 mongoose 模块 + mongoose.connect(‘mongodb://localhost/test); + // 然后连接对应的数据库：mongodb://localhost/test + // 其中，前面那个 mongodb 是 protocol scheme 的名称；localhost 是 mongod 所在的地址； + // 端口号省略则默认连接 27017；test 是数据库的名称 + // mongodb 中不需要建立数据库，当你需要连接的数据库不存在时，会自动创建一个出来。 + var db = mongoose.connection; + db.on(‘error’, console.error.bind(console, ‘connection error:’)); + db.once(‘open’, function (callback) { + console.log(“MongoDB Opened!”); + }); + module.exports = mongoose; +``` +　　值得注意的是，考虑任何问题，尤其是我们码农在程序中考虑任何问题，都要考虑发生错误怎么办，使用mongoose也不例外。 +``` + var mongoose = require(’…/modules/db’); + var impressionSchema = mongoose.Schema({ + impression:{type:String}, + author:{type:String} + }); + var impressionModel = mongoose.model(‘friendimpression’,impressionSchema); + var impression = new impressionModel({impression:“fool”,author:“sweety”}); + impression.save(function (err) { + if (err) return console.error(err); + console.log(“Save Successful!”); + }); +``` +　　这段代码是保存一个文档的实例，在这段代码中我的疑虑是我们把文档保存在哪个Collection里边？答案仍然是“With Mongoose, everything is derived from a Schema.”，mongoose是通过model来创建mongodb中对应的collection的，mongoose在内部创建collection时将我们传递的collection名（‘friendimpression’）小写化，同时如果小写化的名称后面没有字母——s,则会在其后面添加一s,针对我们刚建的collection,则会命名为：friendimpressions。 +``` + impressionModel.find(function (err, docs) { + if (err) return console.error(err); + console.log(docs) + }); + }; +``` +　　查询的疑虑在于，我如果对存在的表进行查询怎么办？我必须先创建model？可是我不需要插入删除等操作，我只想查询一下就完事儿。看一下mongoose官方的查询方法Model.find、Model.findOne、Model.findById、Model.where、Model.$where等等，都是基于Model，Model又来自Schema，其实Schema就是你文档结构的规则，俗话说无规矩不成方圆，MongoDB也是一样，不关你是查询还是插入、删除都得有个规矩，所以即使是简单的查询也要从Schema开始，有了规矩增删改查起来也方便很多。 \ No newline at end of file diff --git a/nodejs+phantomjs+nodemailer.docx b/nodejs+phantomjs+nodemailer.docx deleted file mode 100644 index 2253a48..0000000 Binary files a/nodejs+phantomjs+nodemailer.docx and /dev/null differ diff --git a/nodejs+phantomjs+nodemailer.md b/nodejs+phantomjs+nodemailer.md new file mode 100644 index 0000000..fbe38be --- /dev/null +++ b/nodejs+phantomjs+nodemailer.md @@ -0,0 +1,196 @@ +### 功能 +每天定时截图，并把截到的图片自动通过邮件发送。 +### 说明 +代码注释已经非常详细，就不多做说明，需要的朋友自己查看代码即可，主文件Mail.js，截图文件capturePart1.js，capturePart2.js，capturePart3.js，这里只展示了capturePart1.js其他两个类似。值得注意的是有登录权限的网站一定要设置Cookie，需要截取高质量图片的话截取时间一定设置长一些。 +### Mail.js +``` + * 定时发送邮件功能说明： + * node.js必备安装模块：node_modules-->phantomjs，nodemailer，node-schedule，moment + * 涉及JS文件：route-->mail.js，public-->js-->capturePart1.js，capturePart2.js，capturePart3.js + * 截图保存地址：public-->images-->mainPage.jpeg(1600*4200) + * 截图url：http://www.***********.com + * 程序主要思路： + * （1）phantomjs截图-->参照http://phantomjs.org/ + * （2）nodemailer发送邮件-->参照https://www.npmjs.com/package/nodemailer + * （3）node-schedule定时-->参照https://www.npmjs.com/package/node-schedule + * 注意： + * 改变发件服务器请修改SMTP + * 改变收件人请修改变量receiver + * 改变邮件内容请修改变量html + * 改变邮件附加图片和附件请修改attachments + * 改变截图功能请修改public-->js-->server.js + * 改变定时功能请修改变量rule + * ------Sweety +//组件引入开始 +var schedule = require("node-schedule"); +var path = require('path'); +var childProcess = require('child_process'); +var phantomjs = require('phantomjs'); +var nodemailer = require("nodemailer"); +var moment = require("moment"); +//组件引入结束 +/*--------------------------------------------------------------------------------------------------------------------------------------------*/ +//变量定义开始 +var today; //今天开始时间 +var binPath = phantomjs.path; //获取phantomjs.exe路径 +var jsPath = process.cwd()+"/public/js/"; //获取server.js所在目录 +var childArgs; +//capturePart3(); +//capturePart1(); +//变量定义结束 +/*--------------------------------------------------------------------------------------------------------------------------------------------*/ +//主程序开始 +var rule = new schedule.RecurrenceRule(); //schedule定时器 +rule.hour = 11; +rule.minute = 0; +rule.second = 0; //定时器规则设定（每天11点触发事件） +var j = schedule.scheduleJob(rule, function(){ + var now = moment(); + today = now.clone().add(-1, 'days').format('YYYY-MM-DD'); + capturePart1(); //触发截图事件(邮件发送功能包含在截图事件里边) +}); +//主程序结束 +/*---------------------------------------------------------------------------------------------------------------------------------------------*/ +//phantomjs截图开始(第一张) +function capturePart1(){ + childArgs = [ + path.join(jsPath, 'serverPart1.js'), //server.js + ' https://www.hao123.com ' //要截图的url + ]; + childProcess.execFile(binPath, childArgs, function(err, stdout, stderr) { + if(err) + { + console.log(err); //打印错误信息 + }else{ + console.log("Captured Part1 Successful !!"); //打印正确信息 + capturePart2(); + } + }); +} +//phantomjs截图结束(第一张) +//phantomjs截图开始(第二张) +function capturePart2(){ + childArgs = [ + path.join(jsPath, 'serverPart2.js'), //server.js路径 + 'https://www.hao123.com ' //要截图的url + ]; + childProcess.execFile(binPath, childArgs, function(err, stdout, stderr) { + if(err) + { + console.log(err); //打印错误信息 + }else{ + console.log("Captured Part2 Successful !!"); //打印正确信息 + capturePart3(); + } + }); +} +//phantomjs截图结束(第二张) +//phantomjs截图开始(第三张) +function capturePart3(){ + childArgs = [ + path.join(jsPath, 'serverPart3.js'), //server.js路径 + ' https://www.hao123.com ' //要截图的url + ]; + childProcess.execFile(binPath, childArgs, function(err, stdout, stderr) { + if(err) + { + console.log(err); //打印错误信息 + }else{ + console.log("Captured Part3 Successful !!"); //打印正确信息 + sent(); // 触发发送邮件事件 + } + }); +} +//phantomjs截图结束(第三张) +/*-------------------------------------------------------------------------------------------------------------------------------------------------*/ +//nodemailer发送邮件开始 +function sent(){ + var imgPart1 = fs.readFileSync(process.cwd()+"/public/images/mainPagePart1.jpeg"); //图片来源 + var imgPart2 = fs.readFileSync(process.cwd()+"/public/images/mainPagePart2.jpeg"); //图片来源 + var imgPart3 = fs.readFileSync(process.cwd()+"/public/images/mainPagePart3.jpeg"); //图片来源 + var smtpTransport = nodemailer.createTransport("SMTP",{ //邮件SMTP设定（发送邮箱服务器必须开启SMTP） + host: "smtp.xxxxx.com", // 主机 + secureConnection: false, // 不使用 SSL + port: 587, // SMTP 端口 + auth: { + user: "xxxxx@xxxx.com", //用户名 + pass: "xxxxxx" //密码 + } + }); + var html = '' + + 'XX好:
'+ + '  下面为【XXXX】日报汇报（'+today+'）的内容,请参考
' + + '  （日报详细信息请点击此处登陆查看）'+ + '
' + + ''+ + ''+ + '';//邮件内容（html代码），img唯一指定地址对应cid（见mailOptions设定） + var receiver = "xxx@xxx.com";//收件人列表 + var cc = "xxxx@xxxx.com,xxx@xxx.com,xxx@xxxx.com"; //抄送人列表 + var bcc = "xxx@xxxx.com,xxx@xxxx.com"; //密抄送人列表 + var mailOptions = { //邮件内容选项设定 + from: "", //发件地址 + //to: "xxx@xxxx.com", + to: receiver, //收件人 + cc:cc, //抄送人 + bcc:bcc, //密抄送人 + subject:"【XXXX】日报汇报（"+today+"）", //邮件主题 + text: "【XXXX】日报汇报（"+today+"）", // plaintext body + html:html, //html内容 + attachments: [ + { + filename: 'mainPagePart1.jpeg', //图片名称 + contents: imgPart1, //图片来源 + cid: 'img1' //插入图片标识 + },{ + filename: 'mainPagePart2.jpeg', //图片名称 + contents: imgPart2, //图片来源 + cid: 'img2' //插入图片标识 + },{ + filename: 'mainPagePart3.jpeg', //图片名称 + contents: imgPart3, //图片来源 + cid: 'img3' //插入图片标识 + } + ] + }; + smtpTransport.sendMail(mailOptions, function(error, response){//发送邮件 + if(error){ + console.log(error); //打印错误信息 + }else{ + console.log("Sent Successful !!"); //打印正确信息 + } + }); +} +//nodemailer发送邮件结束 +function changeData(){ +} +/*---------------------------------------------------------------------------------------------------------------------------------------------*/ +``` + +### capturePart1.js + +``` +//phantomjs截图 +var page = require('webpage').create(), + system = require('system'), + address; +page.viewportSize = { width:1920, height: 1080}; +page.clipRect = { top: 200, left: 210, width: 1680, height: 1530 }; +page.customHeaders={"Cookie":"koa:sess=e*******=;koa:sess.sig=pjadZtLAVtiO6-Haw1vnZZWrRm8"}; +if (system.args.length === 1) { + phantom.exit(1); +} else { + address = system.args[1]; + page.open(address, function (status) { + }); +} +setTimeout(function() { + console.log(""); + console.log("### STEP 5: Close page and shutdown (with a delay)"); + page.render('./public/images/mainPagePart1.jpeg', {format: 'jpeg', quality: '100'}); + page.close(); + setTimeout(function(){ + phantom.exit(); + }, 3000); +}, 19000); +``` \ No newline at end of file diff --git "a/package\347\256\241\347\220\206.docx" "b/package\347\256\241\347\220\206.docx" deleted file mode 100644 index 96ef231..0000000 Binary files "a/package\347\256\241\347\220\206.docx" and /dev/null differ diff --git "a/package\347\256\241\347\220\206.md" "b/package\347\256\241\347\220\206.md" new file mode 100644 index 0000000..dbc912c --- /dev/null +++ "b/package\347\256\241\347\220\206.md" @@ -0,0 +1,30 @@ +## Package管理 +　　后台npm +　　（不多说） +　　前台bower +　　简介： +　　Bower的功能类似于Nodejs中的npm或者Python中的pip，用于web包管理，如果越来越多得开源项目都托管在github上，bower只需要将github上项目加上一个配置文件既可以使用bower方式使用安装包。作为包管理，bower能提供添加新web包，更新web包，删除web包，发布web包功能，管理包依赖。web包通常认为由html+css+javascript构成。使用： +　　根据上面的简介描述，bower依赖于nodejs，下载安装依赖库实际上是使用git进行下载，因此使用bower前确保安装了Node和Git环境，并且建议使用git bash命令行来执行bower install命令。 +　　（常用npm、node、大神略过此段）另外可能我们需要在任何目录使用bower命令的话，需要配置npm环境变量，这一步很重要，不然会提示“bower”不是内部或外部命令，配置npm环境变量就很简单了，在path目录下添加npm全局的包的安装路径但不包含node_modules目录，另外新建NODE_PATH，值为全局的包的安装路径包含node_modules目录，例如：path：D:\node，NODE_PATH：D:\node\node_modules，这样我们npm install XXX –g的安装包才能在全局使用，不会出现提示“XXX不是内部或外部命令”。 +　　好了，废话不多说，bower使用就很简单了： +　　安装bower +　　npm install bower -g +　　在项目目录中运行 +　　bower install jquery +　　运行成功之后项目中会多出components文件夹，文件夹中jquery文件夹，jquery文件夹里面就有最新的　　jquery文件。 +　　这还不能说明他NB的地方，试想下面的场景，jQuery升级了，是不是再down一次jQuery呢？bower可以这样做： +　　bower update jquery +　　就可以自动升级到最新版的jquery了。 +　　再假设我们需要使用bootstrap，bootstrap可不是一个文件，有css,js还有图片。js还依赖于jQuery，如果使用bower： +　　bower install bootstrap +　　bower会自动从github上down最新的代码，而且，会自动将依赖包jquery也down一次。 +　　如果你发布程序的时候不想把一些依赖的库发布上去（主要原因是太大了 – – ），可以在项目根目录下生成一个 bower.json 文件用来管理依赖。 +　　在项目目录下执行 +　　bower init +　　按照提示操作就好，这样子会生成一个bower文件 +　　安装 jquery +　　bower install jquery --save +　　这样子 bower.json 文件就会写入一个 Jquery的依赖项 +　　别人只要在项目目录下输入 +　　bower install +　　就会自动安装了 diff --git "a/python\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\345\255\246\344\271\240.md" "b/python\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\345\255\246\344\271\240.md" new file mode 100644 index 0000000..311cec0 --- /dev/null +++ "b/python\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217\345\255\246\344\271\240.md" @@ -0,0 +1,134 @@ +## 正则表达式学习 +\.就是一个占位符，匹配除'\n'之外的任意字符。 +\*匹配前面字符0次或任意次 +?匹配前一个字符0次或1次 +___ +上面的内容全部只需要了解即可，需要掌握的只有下面这一种组合方式(.*?) +.* 贪心算法，尽可能多的匹配，像一个胖子尽可能多的吃 +.*?非贪心算法，尽可能少的匹配，像一个婴儿少量多餐 +``` +例如：code = 'hhosahfoxxIxxohofhjosfhxxlovexxoruowhntlnmlxxyouxxljh' + re.findall('xx.*xx',code)匹配第一个xx到最后一个xx，即xxIxxohofhjosfhxxlovexxoruowhntlnmlxxyouxx + re.findall('xx.*?xx',code)匹配结果['xxIxx','xxlovexx','xxyouxx'] +(.*?)括号内的数据作为结果返回 +例如：d = re.findall('xx(.*?)xx',code) + for each in d + print each +打印结果： +I +love +you +``` +___ +re.S +``` +例如：code = 'hhosahfoxxI + xxohofhjosfhxxlovexxoruowhntlnmlxxyouxxljh' + d = re.findall('xx(.*?)xx',code) + print d +打印结果['ohofhjosfh','oruowhntlnml'] +解释：.号可以匹配任意字符，但除了换行符'\n' +这时候就需要re.S +例如：d = re.findall('xx(.*?)xx',code,re.S) + print d +打印结果['I\n','love','you'] +可以看出re.S的作用使.包括\n +其他： +重点掌握三个 +re.I 使匹配对大小写不敏感 +re.L 做本地化识别（locale-aware）匹配 +re.M 多行匹配，影响 ^ 和 $ +``` +___ +对比findall与search的区别 +``` +s2 = 'asdfxxIxx123xxlovexxdfdasdfxxIxx123xxlovexxdfd' +f = re.search('xx(.*?)xx123xx(.*?)xx',s2) +print f.group(2) +if not f: + print 'not' +else: + print 'yes' +输出结果： +love +yes +注：re.serch与re.match()区别是re.match()只匹配字符串的开始，则匹配失败，函数返回None +f2 = re.findall('xx(.*?)xx123xx(.*?)xx',s2) +print f2 +输出结果： +[('I', 'love'), ('I', 'love')] +注：findall返回一个list，有多次匹配在list中嵌套tuple(元组) +``` +___ +sub的使用 +``` +s = '123abccssfadjfdj123' +output = re.sub('123(.*?)123','123%d123%789',s) +print output +``` +___ +常用技巧 +``` +1、在确定只有一个内容时，使用search方法可以提高效率 +2、不要要使用compile +str = 'asdfxxIxx123xxlovexxdfdasdfxxIxx123xxlovexxdfd' +pattern = 'xx(.*?)xx' +new_pattern = re.compile(pattern,re.S) +output = re.findall(new_pattern,str) +3、匹配数字使用\d+ +a = 'asdsds123456fasd888fas' +b = re.findall('(\d+)',a) +print b +执行结果：['123456','888'] +``` +___ +总结 +``` +re.match 尝试从字符串的起始位置匹配一个模式。 +re.search 扫描整个字符串并返回第一个成功的匹配。 +re.match只匹配字符串的开始，如果字符串开始不符合正则表达式，则匹配失败，函数返回None；而re.search匹配整个字符串，直到找到一个匹配。 +re.sub用于替换字符串中的匹配项。 +re.split按照能够匹配的子串将string分割后返回列表。 +re.findall搜索string，以列表形式返回全部能匹配的子串。 +re.finditer搜索string，返回一个顺序访问每一个匹配结果（Match对象）的迭代器。 +re.I 使匹配对大小写不敏感 +re.L 做本地化识别（locale-aware）匹配 +re.M 多行匹配，影响 ^ 和 $ +re.S 使 . 匹配包括换行在内的所有字符 +re.U 根据Unicode字符集解析字符。这个标志影响 \w, \W, \b, \B. +re.X 该标志通过给予你更灵活的格式以便你将正则表达式写得更易于理解。 +. 匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用象 '[.\n]' 的模式。 +\d 匹配一个数字字符。等价于 [0-9]。 +\D 匹配一个非数字字符。等价于 [^0-9]。 +\s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。 +\S 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。 +\w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。 +\W 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。 +[Pp]ython 匹配 "Python" 或 "python" +rub[ye] 匹配 "ruby" 或 "rube" +[aeiou] 匹配中括号内的任意一个字母 +[0-9] 匹配任何数字。类似于 [0123456789] +[a-z] 匹配任何小写字母 +[A-Z] 匹配任何大写字母 +[a-zA-Z0-9] 匹配任何字母及数字 +[^aeiou] 除了aeiou字母以外的所有字符 +[^0-9] 匹配除了数字外的字符 +. 点 匹配单个任意字符 +[...] 字符组 匹配单个字符组出现的字符 +[^...] 排除型字符组 匹配单个未在字符组出现的字符 +\char 转义符 如果char是元字符或没有特殊含义， 则匹配char。 +? 问号 容许非必须的一次匹配 ++ 加号 匹配1次以上 +* 星号 匹配任意次 +{min,max} 区间量词 匹配min次到max次。 +^$ 脱字符和美元符 匹配一行文本的开头和结束。 +\b 边界符 匹配单词的边界 +| | 多选结构 +(...) 括号 用处有三，请看上面 +\1.\2 反向引用 对括号捕捉到的分组进行引用。 +括号 +如果需要使用分组，或者对一个分组进行量词限定，就可以使用它了。使用括号以后，可以： +在后面进行反向引用 +作为一个子表达式使用 +限制多选结构 +``` \ No newline at end of file diff --git "a/~$\346\227\245\350\256\26020160125.docx" "b/~$\346\227\245\350\256\26020160125.docx" deleted file mode 100644 index 03e6a50..0000000 Binary files "a/~$\346\227\245\350\256\26020160125.docx" and /dev/null differ diff --git "a/~$\346\227\245\350\256\26020160202.docx" "b/~$\346\227\245\350\256\26020160202.docx" deleted file mode 100644 index 4e117f4..0000000 Binary files "a/~$\346\227\245\350\256\26020160202.docx" and /dev/null differ diff --git a/~WRL2776.tmp b/~WRL2776.tmp deleted file mode 100644 index f16aca4..0000000 Binary files a/~WRL2776.tmp and /dev/null differ diff --git "a/\343\200\220\345\210\206\344\272\253\343\200\221koa-not-only-generator.pdf" "b/\343\200\220\345\210\206\344\272\253\343\200\221koa-not-only-generator.pdf" new file mode 100644 index 0000000..0d52da6 Binary files /dev/null and "b/\343\200\220\345\210\206\344\272\253\343\200\221koa-not-only-generator.pdf" differ diff --git "a/\350\256\251\344\275\240\347\232\204 Node.js \345\272\224\347\224\250\350\267\221\345\276\227\346\233\264\345\277\253\347\232\204 10 \344\270\252\346\212\200\345\267\247.md" "b/\350\256\251\344\275\240\347\232\204 Node.js \345\272\224\347\224\250\350\267\221\345\276\227\346\233\264\345\277\253\347\232\204 10 \344\270\252\346\212\200\345\267\247.md" new file mode 100644 index 0000000..c5f5d5d --- /dev/null +++ "b/\350\256\251\344\275\240\347\232\204 Node.js \345\272\224\347\224\250\350\267\221\345\276\227\346\233\264\345\277\253\347\232\204 10 \344\270\252\346\212\200\345\267\247.md" @@ -0,0 +1,108 @@ +### 让你的 Node.js 应用跑得更快的 10 个技巧 +引用地址：[http://www.oschina.net/translate/10-tips-make-node-js-web-app-faster](http://www.oschina.net/translate/10-tips-make-node-js-web-app-faster) +英文原文：[http://www.sitepoint.com/10-tips-make-node-js-web-app-faster](http://www.sitepoint.com/10-tips-make-node-js-web-app-faster) +个人技术分享GitHub地址：[https://github.com/a1511870876/studyFiles](https://github.com/a1511870876/studyFiles) + +　　Node.js 受益于它的事件驱动和异步的特征，已经很快了。但是，在现代网络中只是快是不行的。如果你打算用 Node.js 开发你的下一个Web 应用的话，那么你就应该无所不用其极，让你的应用更快，异常的快。本文将介绍 10 条，经过检验得知可大大提高 Node 应用的技巧。废话不多说，让我们逐条来看看。 +### 1. 并行 +　　创建 Web 应用的时候，你可能要多次调用内部 API 来获取各种数据。比如说，假设在 Dashboard 页面上，你要执行下面这几个调用: +　　用户信息 -getUserProfile(). +　　当前活动 -getRecentActivity(). +　　订阅内容 -getSubscriptions(). +　　通知内容 -getNotifications(). +　　为了拿到这些信息，你应该会为每个方法创建独立的中间件，然后将它们链接到 Dashboard 路由上。不过问题是，这些方法的执行是线性的，上一个没结束之前下一个不会开始。可行解决案是并行调用它们。 +　　如你所知由于异步性，Node.js 非常擅长并行调用多个方法。我们不能暴殄天物。我上面提到的那些方法没有依赖性，所以我们可以并行执行它们。这样我们可以削减中间件数量，大幅提高速度。 +　　我们可以用 async.js 来处理并行，它是一个专门用来调教 JavaScript 异步的 Node 模块。下面代码演示怎样用 async.js 并行调用多个方法的: +``` +function runInParallel() { + async.parallel([ + getUserProfile, + getRecentActivity, + getSubscriptions, + getNotifications + ], function(err, results) { + //This callback runs when all the functions complete + }); +} +``` +　　如果你想更深入了解 async.js ，请移步它的 GitHub 页面。 +### 2. 异步 +　　根据设计 Node.js 是单线程的。基于这点，同步代码会堵塞整个应用。比如说，多数的文件系统 API 都有它们的同步版本。下面代码演示了文件读取的同步和异步两种操作: +``` +// Asynchronous +fs.readFile('file.txt', function(err, buffer) { + var content = buffer.toString(); +}); +// Synchronous +var content = fs.readFileSync('file.txt').toString(); +``` +　　不过要是你执行那种长时间的阻塞操作，主线程就会被阻塞到这些操作完成为止。这大大降低你应用的性能。所以，最好确保你的代码里用的都是异步版本 API，最起码你应该在性能节点异步。而且，你在选用第三方模块的时候也要很小心。因为当你想方设法把同步操作从你代码中剔除之后，一个外部库的同步调用会让你前功尽弃，降低你的应用性能。 +### 3. 缓存 +　　如果你用到一些不经常变化的数据，你应该把它们缓存起来，改善性能。比如说，下面的代码是获取最新帖子并显示的例子: +``` +var router = express.Router(); +router.route('/latestPosts').get(function(req, res) { + Post.getLatest(function(err, posts) { + if (err) { + throw err; + } + res.render('posts', { posts: posts }); + }); +}); +``` +　　如果你不经常发贴的话，你可以把帖子列表缓存起来，然后一段时间之后再把它们清理掉。比如，我们可以用 Redis 模块来达到这个目的。当然，你必须在你的服务器上装 Redis。然后你可以用叫做 node_redis 的客户端来保存键/值对。下面的例子演示我们怎么缓存帖子: +``` +var redis = require('redis'), + client = redis.createClient(null, null, { detect_buffers: true }), + router = express.Router(); +router.route('/latestPosts').get(function(req,res){ + client.get('posts', function (err, posts) { + if (posts) { + return res.render('posts', { posts: JSON.parse(posts) }); + } + Post.getLatest(function(err, posts) { + if (err) { + throw err; + } + client.set('posts', JSON.stringify(posts)); + res.render('posts', { posts: posts }); + }); + }); +}); +``` +　　看到了吧，我们首先检查 Redis 缓存，看看是否有帖子。如果有，我们从缓存中拿这些帖子列表。否则我们就检索数据库内容，然后把结果缓存。此外，一定时间之后，我们可以清理 Redis 缓存，这样就可以更新内容了。 +### 4. gzip 压缩 +　　开启 gzip 压缩对你的 Web 应用会产生巨大影响。当一个 gzip 压缩浏览器请求某些资源的时候，服务器会在响应返回给浏览器之前进行压缩。如果你不用 gzip 压缩你的静态资源，浏览器拿到它们可能会花费更长时间。 +　　在 Express 应用中，我们可以用内建 express.static() 中间件来处理静态内容。此外，还可以用 compression 中间件压缩和处理静态内容。下面是使用例: +``` +var compression = require('compression'); +app.use(compression()); //use compression +app.use(express.static(path.join(__dirname, 'public'))); +``` +### 5. 如果可以，在用客户端渲染 +　　现在有超多功能强劲的客户端 MVC/MVVM 框架，比如说 AngularJS, Ember, Meteor, 等等，构建一个单页面应用变得非常简单。基本上，你只要公开一个 API，返回 JSON 响应给客户端就可以了，而不需要在服务端渲染页面。在客户端，你可以用框架来组织 JSON 然后把它们显示在 UI 上。服务端只发送 JSON 响应可以节省带宽，改善性能，因为你不需要在每个响应里面都返回布局标记了，对吧，你只需要返回纯 JSON，然后在客户端渲染它们。 +　　看下我的这个教程，它是关于怎样用 Express 4 公开一个 RESTful APIs的。我还写了另一篇教程，演示了怎样把这些 APIs 和 AngularJS 结合起来。 +### 6. 不要在 Sessions 存储太多数据 +　　典型的 Express 页面应用， Session 数据默认是保存在内存中的。当你把太多数据保存在 Session 的时候，会导致服务器开销显著增大。所以，要么你切换到别的储存方式来保存 Session 数据，要么尽量减少存储在 Session 中的数据量。 +　　比如说，当用户登录到你的应用的时候，你可以只在 Session 中保存他们的 ID 而不是整个用户数据对象。还有，对于那些你能够从 id 拿到对象的查询，你应该会喜欢用 MongoDB 或者 Redis 来存储 session 数据。 +### 7. 优化查询 +　　假设你有个博客，你要在主页上显示最新帖子。你可能会通过 Mongoose 这样取数据: +``` +Post.find().limit(10).exec(function(err, posts) { + //send posts to client +}); +``` +　　不过问题是 Mongoose 的 find() 方法会把对象的所有字段都查询出来，而许多字段在主页上并不要求。比如说，commentsis 保存的是特定帖子的回复。我们不需要显示文章回复，所以我们可以在查询的时候把它给剔除掉。这无疑会提高速度。可以像这样优化上面那条查询: +``` +Post.find().limit(10).exclude('comments').exec(function(err, posts) { + //send posts to client +}); +``` +### 8. 用标准的 V8 方法 +　　集合上的一些操作，比如 map，reduce，和 forEach 不一定支持所有浏览器。我们可以通过前台的库解决部分浏览器兼容性问题。但对于 Node.js，你要确切知道 Google 的 V8 JavaScript 引擎支持哪些操作。这样，你就可以在服务端直接用这些内建方法来操作集合了。 +### 9. 在 Node 前面用 Nginx +　　Nginx 是个微小型轻量 Web 服务器，用它可以降低你的 Node.js 服务器的负载。你可以把静态资源配置到 nginx 上，而不是在 Node 上。你可以在 nginx 上用 gzip 压缩响应，让所有的响应都变得更小。所以，如果你有个正在营运的产品，我觉得你应该会想用 nginx 来改善运行速度的。 +### 10. 打包 JavaScript +　　最后，你还可以大大提高页面应用速度，通过把多个 JS 文件打包。当浏览器在页面渲染中碰到 元素的时候会被堵塞，直到拿到这个脚本才继续运行(除非设置了异步属性)。比如，如果你的页面有五个 JavaScript 文件，浏览器会发出五个独立的 HTTP 请求来获取他们。如果把这五个文件压缩打包成一个，整体性能将可以大幅提升。CSS 文件也是一样。你可以用诸如 Grunt/Gulp 这样的编译工具来打包你的资源文件。 +### 结论 +　　上面 10 条技巧肯定可以提高你的 Web 应用的速度的。不过，我知道还有改善和优化的空间。如果你有任何改善性能的技巧的话，在回复里告诉我。 \ No newline at end of file diff --git "a/\350\267\250\345\237\237.md" "b/\350\267\250\345\237\237.md" new file mode 100644 index 0000000..4cc1bb8 --- /dev/null +++ "b/\350\267\250\345\237\237.md" @@ -0,0 +1,68 @@ +一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。 + +二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器： +``` +'/proxy?url=http://www.sina.com.cn' +``` +代理服务器再把结果返回，这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。 + +第三种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源： + +`` +`` +`` +`` +`` +`` +`` + + +JSONP通常以函数调用的形式返回，例如，返回JavaScript内容如下： + +`foo('data');` +这样一来，我们如果在页面中先准备好foo()函数，然后给页面动态加一个节点，相当于动态读取外域的JavaScript资源，最后就等着接收回调了。 + +以163的股票查询URL为例，对于URL：http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice，你将得到如下返回： + +`refreshPrice({"0000001":{"code": "0000001", ... });` +因此我们需要首先在页面中准备好回调函数： +``` +function refreshPrice(data) { + var p = document.getElementById('test-jsonp'); + p.innerHTML = '当前价格：' + + data['0000001'].name +': ' + + data['0000001'].price + '；' + + data['1399001'].name + ': ' + + data['1399001'].price; +} +``` +当前价格： + +刷新 + +最后用getPrice()函数触发： +``` +function getPrice() { + var + js = document.createElement('script'), + head = document.getElementsByTagName('head')[0]; + js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice'; + head.appendChild(js); +} +``` +就完成了跨域加载数据。 + +CORS + +如果浏览器支持HTML5，那么就可以一劳永逸地使用新的跨域策略：CORS了。 + +CORS全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源。 + +了解CORS前，我们先搞明白概念： + +Origin表示本域，也就是浏览器当前页面的域。当JavaScript向外域（如sina.com）发起请求后，浏览器收到响应后，首先检查Access-Control-Allow-Origin是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。 + +可见，跨域能否成功，取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin，决定权始终在对方手中。 + +上面这种跨域请求，称之为“简单请求”。简单请求包括GET、HEAD和POST（POST的Content-Type类型 +仅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出现任何自定义头（例如，X-Custom: 12345），通常能满足90%的需求。 \ No newline at end of file diff --git "a/\350\276\223\345\205\245\347\275\221\345\235\200\345\220\216\345\217\221\347\224\237\344\272\206\344\273\200\344\271\210.md" "b/\350\276\223\345\205\245\347\275\221\345\235\200\345\220\216\345\217\221\347\224\237\344\272\206\344\273\200\344\271\210.md" new file mode 100644 index 0000000..05ea6da --- /dev/null +++ "b/\350\276\223\345\205\245\347\275\221\345\235\200\345\220\216\345\217\221\347\224\237\344\272\206\344\273\200\344\271\210.md" @@ -0,0 +1,96 @@ +# 输入网址之后发生了什么 # +## 1.首先是输入网址 ## +　　以www.facebook.com为例 +## 2.浏览器查找域名对应IP ## +### 2.1 DNS查找过程： +　　浏览器缓存——浏览器会记录DNS一段时间（2-30分钟不等，视浏览器而定） +　　系统缓存——浏览器里没找到DNS缓存，此事浏览器做一个系统调用（window下是gethostbyname）。如发现匹配则采用。（与此对应有host恶意劫持更改攻击） +　　路由器缓存——路由器也会有DNS缓存（缓存你上过的网站，所以有时路由器需要进行DNS刷新） +　　ISP DNS缓存——接下来是在ISP（互联网服务提供商）的DNS服务器的缓存上查找。 +　　递归查找——DNS缓存里没有的话，ISP DNS服务器会先后从根域名服务器（root）、.com顶级域名服务器、Facebook域名服务器获取IP（一般缓存内都会有，所以这一步一般不会发生） +### 2.2 多IP域名DNS查询解决方案 +　　循环DNS——单个域名、多个IP列表循环应对DNS查询 +　　负载均衡器——一个特定IP的负载均衡服务器（例如：反向代理服务器）负责监听请求并转发给后面的多个服务器集群的某一个，实现多个服务器负载均衡 +　　地理DNS——根据用户所处地理位置，返回不同的IP（应用：CDN） +　　anycast——一个IP地址映射多个物理主机的路由技术 +## 3.发送请求 + +　　得到域名对应的IP后，就开始发送HTTP(S)请求了. +　　请求头详解： +　　GET [http://facebook.com/](http://facebook.com/) HTTP/1.1 +　　Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...] +　　User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...] +　　Accept-Encoding: gzip, deflate +　　Connection: Keep-Alive +　　Host: facebook.com +　　Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...] + +　　请求告诉服务器： +　　1. 我要获取（GET） [http://facebook.com/](http://facebook.com/) （GET的URL）这个页面 +　　2. Accept：我能接受这些类型的文件 +　　3. 我使用的是何种操作系统上的哪个类型那个版本的浏览器 +　　4. 承认接受何种方式的压缩文件 +　　5. 连接类型：短连接？长连接？ +　　6. 主机域名 +　　7. 发送存储在本机的cookies信息给服务器 + +　　除了发送获取请求，还能发送提交响应请求（如：搜索时要把搜索的内容一并发给服务器进行处理（在请求URL后面增加特定的用户参数），以获取特定的内容） +　　注意：URL后面加斜杠与不加斜杠的区别(文件夹与单个文件的区别) +　　[http://www.facebook.com](http://facebook.com) +　　[http://www.facebook.com/](http://facebook.com/) +　　当我们输入[http://www.facebook.com](http://facebook.com) 时，浏览器会自动添加斜杠，保证URL的严谨。 +　　当我们输入：[http://www.facebook.com/folderOrFile](http://www.facebook.com/folderOrFile) 时，因为浏览器不清楚folderOrFile到底是文件夹还是文件，所以不能自动添加 斜杠。这时，浏览器就不加斜杠直接访问地址，服务器会响应一个重定向，结果造成一次不必要的握手。 +## 4.重定向 +　　当我们输入不完整的网址[http://www.facebook.com](http://facebook.com) 时，或者网站迁移做了重定向设置时，服务器会进行一次重定向响应。 +　　下面是重定向之后返回的响应头： +　　HTTP/1.1 301 Moved Permanently +　　Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,pre-check=0 +　　Expires: Sat, 01 Jan 2000 00:00:00 GMT +　　Location: [http://www.facebook.com/](http://facebook.com/) +　　P3P: CP="DSP LAW" +　　Pragma: no-cache +　　Set-Cookie: made_write_conn=deleted; expires=Thu, 12-Feb-2009 05:09:50 GMT; +　　path=/; domain=.facebook.com; httponly +　　Content-Type: text/html; charset=utf-8 +　　X-Cnection: close +　　Date: Fri, 12 Feb 2010 05:09:51 GMT +　　Content-Length: 0 + +　　1. 301 永久重定向 +　　2. 新的Location：…… + +　　为什么要重定向，而不直接返回用户想看的内容呢？（既然服务器已经经过重定向知道了用户需要什么） + +　　答：原因之一：与搜索引擎排名有关。你看，如果一个页面有两个地址，就像[http://www.igoro.com/](http://www.igoro.com/) 和[http://igoro.com/](http://igoro.com/)，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是 什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。 +## 5.新的请求 +　　重定向之后会发布一个新的获取请求 +## 6.服务器处理请求 +### 6.1 web服务器软件 +　　服务器操作系统种类：Linux（一般是厂家根据开源定制）、windows server系列（微软） +　　主要的服务器软件：IIS、Apache、Tomcat、JBOSS、Nginx、lighttpd、Tetty +　　服务器软件的作用：接收、处理与响应请求（了解CGI的作用） +### 6.2 处理流程： +　　web服务器软件（如IIS或者Apache）接收到HTTP请求 +　　确定执行那个请求处理程序（一个能读懂请求并且能生成HTML来进行响应的程序）（例如：Asp.Net,PHP,RUBY……）来处理它 +　　请求处理器阅读请求头的参数和cookies信息 +　　更新服务器上的信息：例如更新数据库信息、服务端cookies +　　生成HTML，压缩（gzip或其他），响应请求发送给用户 +## 7.服务器发回一个HTML响应 +　　响应包括响应头（响应参数与信息）、响应包（主体文件） +　　响应包采用特定方法压缩，整个响应以blob类型传输，响应头指示响应包以何种方式压缩 +　　这个响应头与重定向的响应头不太一样，这个响应头还包含着缓存选项，cookies设置和隐私信息等 +## 8.浏览器开始显示HTML +　　浏览器在没有完整接收全部HTML文件，就已经开始显示页面了 +## 9.浏览器获取其他文件 +　　浏览器解析HTML遇到需要下载的文件时，便再次向服务器（CDN）发送获取文件的请求。 +　　注意： +　　1. 动态页面无法缓存，静态文件允许浏览器进行缓存。 +　　2. 静态文件本地有缓存时直接从本地读取 +　　3. 请求响应头内包含着静态文件保存的期限，浏览器知道下载的静态文件要静默保留多久。 +　　4. 响应头还会有静态文件的ETag（相当于版本号），当浏览器发现请求的静态文件的响应头的ETag与现有的缓存文件不符时，便会再次向服务器获取静态文件。 +## 10.浏览器发送异步（AJAX）请求 +　　web 2.0的一大特征就是页面显示完全后客户端仍旧与服务器端保持联系（keep-alive） +　　浏览器执行特定的JS代码会给服务器发送异步请求，获取最新的动态消息，使得页面能保持较新的状态。 +　　HTTP是一个请求-响应协议，只有在客户端发送请求，服务器端才能做出响应，而不能主动把消息或者文档发给客户所以，要想保持页面处于最新的状态，需要定时进行轮询（定时发送AJAX请求以更新页面内容） +　　AJAX请求十分容易更改，且用户十分容易自己制造和发送AJAX请求，所以没有验证码的没有IP限制条件的投票就是一个小游戏了（参照工作室两次刷票：自己定义IP，自己定时发送AJAX请求，然后票就哗哗的上了）。 +　　优化小方案：如果服务器被轮询时没有新消息，它就不理这个客户端。而当请求尚未超时的情况下如果收到了该客户的新消息，服务器就找到未完成的请求，把新消息作为响应发送给客户端（这样就无需频繁地响应请求了） \ No newline at end of file diff --git "a/\351\207\215\345\255\246JS.md" "b/\351\207\215\345\255\246JS.md" new file mode 100644 index 0000000..c8e1f62 --- /dev/null +++ "b/\351\207\215\345\255\246JS.md" @@ -0,0 +1,76 @@ +# 重学JS # +## 1、'use strict'; ## +在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。 +## 2、字符串 ## +- toUpperCase()把一个字符串全部变为大写； +- toLowerCase()把字符串全部变为小写； +- indexOf()会搜索指定字符串第一次出现的位置，并返回下标，没找到返回-1； +- substring(0,5);回指定索引区间的子串； +## 3、数组 ## +1. arr.length; +取得数组的长度，请注意，直接给Array的length赋一个新的值会导致Array大小的变化： +2. Array索引 +可以通过索引把对应的元素修改为新的值，请注意，如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化。 +3. indexOf() +用法类似字符串。 +4. slice() +就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array，只传递一个参数，会截取该参数到数组末尾的所有元素，不传递参数截取全部元素==复制数组。 +5. push()和pop() +push()是向array末尾添加若干元素，pop()是把array最后一个元素删除掉。 +6. unshift和shift +和push()和pop()相反，unshift向array头部添加若干元素，shift()是把array第一个元素删除掉。 +7. sort +对array进行排序它会直接修改当前Array的元素位置 +8. reverse +反转数组 +9. splice +方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素。 +``` +arr.splice(2, 3, 'Google', 'Facebook'); +// 从索引2开始删除3个元素,然后再添加两个元素: +// 从索引2开始删除3个元素,然后再添加两个元素: +``` +10. concat +拼接数组，并返回一个新的数组，不修改原数组。 +11. join +join()方法是一个非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串： +``` +var arr = ['A', 'B', 'C', 1, 2, 3]; +arr.join('-'); // 'A-B-C-1-2-3' +``` +练习：在新生欢迎会上，你已经拿到了新同学的名单，请排序后显示：欢迎XXX，XXX，XXX和XXX同学！： +``` +'use strict'; +var arr = ['小明', '小红', '大军', '阿黄']; +alert('欢迎'+arr.sort().slice(0, arr.length-1) +'和'+arr.pop()+'同学'); +``` +## 4、对象 ## +对象是一种无序的集合数据类型，它由若干键值对组成。 + +1. 由于JavaScript的对象是动态类型，你可以自由地给一个对象添加或删除属性： +``` +var xiaoming = { + name: '小明' +}; +xiaoming.age; // undefined +xiaoming.age = 18; // 新增一个age属性 +xiaoming.age; // 18 +delete xiaoming.age; // 删除age属性 +xiaoming.age; // undefined +delete xiaoming['name']; // 删除name属性 +xiaoming.name; // undefined +delete xiaoming.school; // 删除一个不存在的school属性也不会报错 +``` +2. in操作符 +检查object是否拥有某一属性（key） +## 5、判断 ## +avaScript使用if () { ... } else { ... }来进行条件判断。 +如果if的条件判断语句结果不是true或false怎么办？例如： +``` +var s = '123'; +if (s.length) { // 条件计算结果为3 + // +} +``` +JavaScript把null、undefined、0、NaN和空字符串''视为false，其他值一概视为true，因此上述代码条件判断的结果是true。 +## 6、Map和Set ## \ No newline at end of file diff --git "a/\351\207\215\345\255\246html+css+js.md" "b/\351\207\215\345\255\246html+css+js.md" new file mode 100644 index 0000000..d6799f1 --- /dev/null +++ "b/\351\207\215\345\255\246html+css+js.md" @@ -0,0 +1,138 @@ +## Html ## +``` +1、短文本引用，自动加双引号，语义是引用。 +2、
长文本引用，自动两端缩进。 +3、

为换行， 为空格，
为水平横线。 +4、
地址。 +5、当代码为一行代码时，你就可以使用标签了。 +6、
语言代码段，多行。
+7、，
+8、click here!新建浏览器窗口中打开链接。
+9、发送
+（第一个参数用？隔开后边参数用&隔开，cc：抄送。Bcc：密抄送。Subject：标题。Body：内容）
+10、” src为图片地址；alt为下载不成功时描述性文本；title为图像可见时图像的描述。
+11、
+12、文本域。
+13、单选框、复选框。同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
+14、下拉框。multiple="multiple"使用下拉列表框进行多选。
+15、按钮，重置按钮。
+16、
标题文本
、
、
 、
+常用的内联元素有：
+、、
、、、、