小试NodeJS的express进行前后端数据交互

2017-03-14

今儿小试了一下NodeJs的express框架，在这说一说如何通过express进行前后台的数据交互。

这几年nodeJs大火，有很多原因。其中最重要的我想就是和前台同为JS语言，在交互上比其他后台语言配合起来更爽一些。

这里就简要的讲一下通过express框架进行前后端数据交互。
express是一个很轻量级的nodeJS框架。使用起来也比较简单。
要运用这个框架首先我们需要先将它下载下来：

1	npm install express --save

（后面加了–save，是为了把模块保存到配置文件中，当项目移植的时候只需要npm install 就会把所有依赖的模块下载下来）

之后就是搭建服务器了。
创建一个js文件
1, 首先引入框架

1	const express=require('express');

more >>

展开全文 >>

深入理解javascript原型和闭包笔记总结

2017-03-12

这两天发现一系列很好很棒的javascript原型和闭包深入理解的文章。
http://www.cnblogs.com/wangfupeng1988/p/3977924.html

在javascript的学习中，个人认为最容易犯错，坑最多的就是原型链和闭包这一块。
原型链这一块也算是js的一大特色，闭包捏则是大量运用于JQ的源码中。
很有必要好好总结学学习一番。
由于很重要，也绕不开。结合文章，总结了一波这一块的知识点，由于都记
在了本本上，这里来一波图片，随时可以参考。

more >>

展开全文 >>

icomoon图标

2017-02-27

周末研究布局，遇到了获取图标的问题。在之前遇到图标第一时间想到的是切图，在页面放图片。在慕课网看了关于性能优化的雅虎军规之后发现这样很不好。遂翻了翻大厂们的页面，使用的都是字体图标（大家都知道，字体图标相比图片省了太多资源大大减少请求数量不说，任意缩放也不会失真。）搜索了一下发现了icomoon这个好东西。

使用icomoon借用的是一个在线生成网站：
https://icomoon.io/app/#/select
里面有已经存在的可以直接选用，当然也可以添加.svg图片。
在这里，我使用了它现有的一个搜索放大镜小图标。

more >>

展开全文 >>

JSONP的原生实现和JQ实现(下)

2017-02-23

JQ实现方式：

JQ实现JSONP的时候看起来和ajax调用方式很像，目的也一样，都是请求url，染过获得服务器的数据之后进行处理。但两者完全是两个不同的东西。只是JQ这个框架将jsonp作为ajax的一种形式进行了封装。
实质上：ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。

ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。
话不多说，下边是jq的实现，用过console.log得到目标数据：

$(function () {
          $('#inp').keypress(function () {
              var str = $(this).val();
              $.ajax({
                  url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
                  data: {
                      wd: str
                  },
                  dataType: 'jsonp',
                  jsonp: 'cb',
                  success: function (data) {
                      console.log(data);
                  },
                  error: function () {
  
                  }
  
              });
          });
      });

以上！

展开全文 >>

JSONP的原生实现和JQ实现(上)

2017-02-23

JSONP

JSONP，全称：JSON with padding乍一看应该是和用来数据解析描述的JSON的某个远房亲戚。通过学习，这两者本质上完全是不同的东西。

JSONP的概念在这就不赘言。自己的理解，由于Ajax直接请求文件数据时，跨域无权访问（为了安全）。为了解决跨域问题，我们发现在页面调用JS文件时不受跨域影响（例如，我们在任意文件中都可以引入jq文件，从而使用jq开发页面），因此通过把数据装在一个js格式文件里，在客户端进行处理。这就是JSONP的原理。JSONP允许用户传递一个callback参数给服务器，之后服务器返回数据时通过这个参数的函数包裹上数据传给客户端。

下面不多说废话，下面用原生和jq分别写两个小获取baidu联想词条的小demo。
想要的效果就是当我在搜索条输入‘a’时，出现下拉联想列表（baidu的）

more >>

展开全文 >>

JS中的cookie,localStorage和sessionStorage

2017-02-21

说到cookie通俗一点就是服务器留在用户计算机中的小文件。
在JS中创建cookie很简单，比如：document.cookie=123 这样就存储了一条没有名字的cookie。
cookie的存储都是字符串，如果存储一条名字是name，值是‘lac’的cookie只需要：document.cookie=’name=lac’即可！取出存储的cookie也只需要：
document.cookie就可以取出全部的cookie字符串了。
cookie里除了名字和值还有expires和path很重要。

expires 默认是session：浏览器和服务器进行的一次通话浏览器关闭一次会话结束。
当然也可以设置时间。expires=事件对象；

path cookie存储的位置需要注意的是：内层文件存的cookie外层文件取不到，内层文件中可以取到外层文件的cookie在一般工作中，一套cookie存储在一层目录中便于管理。即：path=/；
下面是自己封装的setCookie(),getCookie()以及removeCookie();

more >>

展开全文 >>

css3 伪类：hover 特性小探索

2017-02-18

伪类在css3中相对还是很容易理解，也正是因为他很容易理解，平时也不纠结。不过前两天看到这个写法，还是小懵逼了一下：

1 2	.a .b:hover{...........}; .a:hover .b{...........};

这两个有什么去别捏，不费事就写了两个demo：
more >>

展开全文 >>

JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

2017-02-17

alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

展开全文 >>