获取数据方式

前后端数据交互的方式通常有。

  • xmlHttpRequest
  • formData
  • webSocket
  • promise
  • fetch

slider

如果框架中需要用原生javascript来写的话,会涉及到 xmlHttpRequest 这个对象。
通过这个对象我们能与后台进行交互,获取数据。

```javascript
function ajax(options) {
      options = options || {};
      options.type = (options.type || "GET").toUpperCase();
      options.dataType = options.dataType || "json";
      let params = this.formatParams(options.data);
  let xhr;

      if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
      } else { //IE6及其以下版本浏览器
          xhr = new ActiveXObject('Microsoft.XMLHTTP');
      }

      xhr.withCredentials = true;
      //接收 - 第三步
      xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
              let status = xhr.status;
              if (status >= 200 && status < 300 || xhr.status == 304) {
                  options.success && options.success(xhr.responseText, xhr.responseXML);
              } else {
                  options.fail && options.fail(status);
              }
          }
      };
      //连接 和 发送 - 第二步
      if(options.type == "GET") {
          xhr.open("GET", options.url + "?" + params, true);   
          xhr.send(null);
      }else if (("POST") == options.type ) {
          xhr.open("POST", options.url, true);
          xhr.setRequestHeader("Content-Type", options.contentType || "application/x-www-form-urlencoded");
          if(options.header){
              options.header.map(function(hd){
                  xhr.setRequestHeader(hd.title, hd.value);
              });
          }
          xhr.send(params);
      }
  }

function formatParams(data){
  var arr = [];
  for (var name in data) {
      //参数通过编码,来避免 GET 请求时发生错误
      arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
  }
  return arr.join("&");
}

以上代码,是我们熟悉的xmlHttpRequest封装的请求后台方法。包括了解析参数、新建连接、发送数据、接受部分数据、接受数据等步骤。

GET 方式发送数据
xhr.open(‘GET’, url , true) 如果没有用绝对路径,打开的方式是相对地址。所以如果配置的链接中没有包含 http 头可能会引起错误。

其中 xhr.withCredentials = true; 是为了发送认证数据,如 cookie 为了防止跨域时候请求失败。

在发送数据 xhr.send()之前需要完成对 xhr 的一系列操作。

优点 : 局部刷新,不影响用户的体验
缺点 : 跨域问题,只能访问同域下的资源

formData

XHR2规范中的内容,最近做了个图片上传就用到 formData。

目的是用于表单数据序列化

在 chrome的控制台下可以看到formData详细的 API,提供了新增、删除和遍历的方法。

当然在添加值之前需要初始化 formData.

//我们可以直接通过构造方法添加 formData
var data1 = new FormData(document.forms[0]);

//方法二,通过 append 方法
var data2 = new FormData();
data2.append(key,value) 需要两个参数,键和值。

//使用 FormData上传
var xhr = new XMLHttpRequest();
xhr.open('POST',url,true);
xhr.send(data); //写入数据
  • progress()
    通过该方法我们可以监听该上传数据的进程,可以通过返回的参数能用进度条更好地进行交互。

    xhr.progress = function(pe){

    if(pe.lengthComputable){
    
    }
    

    }

    当 我们通过头部信息 content-length 知道 后,lengthComputable会被
    优点: 我们不需要去设置请求头部,XHR 对象能够识别数据类型是否是 formData 的实例。
    缺点: 目前IE 浏览器需要 10+ 支持(真是坑)

webSocket

在 web 端建立 socket来进行通信,刚开始学习java 时通过进行 client 和 server 类,通过 socket来进行通信。

  • 使用入门

    var connection = new WebSocket(‘ws://html5rocks.websocket.org/echo’, [‘soap’, ‘xmpp’]);

react-freshman

简述

随着react的快速发展,越来越多的公司在项目中的前端技术上都会考虑react,并且有越来越多成熟的应
用和项目证明了 react的优势所在,而目前蚂蚁金服开发的 ant-design 也被开发者使用,目前在 github
的排名还是挺高的。目前我们公司就是使用的技术栈是 react + antd + es6!

概念

作为新手,首先还是需要了解几个概念的。

  • state
    每个组件有自己对应的状态,里面通常保存一些需要进行动态交互的变量。如表单中控制输入框的字数
var input = React.createClass({
  getInitailState : function(){
    return {
      inputValue: ''
    }
  },
  onChange : function(e){
    this.setState({
       inputValue = e.target.value
    })
  },
  render: function(){
    return (
        <div className='h'>
          <input type='textarea' value={this.state.inputValue} onChange={this.onChange}>
        </div>
    )
  }
})

Read More

internship-summary

实习总结

4个月的实习时间就这么完了,期间有过快乐,难过,彷徨,不过我对自己的实习比较满意,不过还是留下了自己的遗憾!

项目

作为一个在学校实验室做过项目的童鞋本以为可以轻松上手,但是远远超出了我的想象。从严格意义上来说,我进入微店才知道什么是一个前端开发者。其中华哥对我的帮助特别大,一手带我进入项目,并在平时的开发中给了我很多好的建议和意见,在这里我非常地感谢他。

微店大多数是移动端下的,而我又处在分销项目组下,分销顾名思义就是你作为一个中间角色把商品卖出去。说来也巧,我爸作为一个私体经营户正好承担的这个角色,所以我在理解业务这块还是比较快。

微店和其他很多公司一样作为一个三方平台,在这之前我一直在想这些电子商务互联网公司是怎么来获取利润的?在华哥给我讲解后,以及我在开发过程中一点点明白,而我做的内容就是其中盈利的一部分吧!我主要做的是活动页面的开发,其中有两个地方在开始的时候有些阻碍,也让我犯了很多错!
1、分销逻辑
分销并不是单纯的买与卖的关系,它服务于供应商与分销商,而分销商代理后,用户可以进入店铺购买。(PS:华哥很耐心地给我讲了至少3次)!有一次犯了很低级的错误。

在分销商在自己的朋友圈分销商品出去后,发出的链接却是供应商

我在想如果分销商知道后,还不把我骂死,分销这么多次结果却没有一元佣金。像这种错误就是没有在实际开发中联系业务逻辑造成的。

2、开发流程重要性
这个是个非常严重的错误,害的那几天都不怎么敢说话,睡觉也没睡好。虽然不是我直接造成,当我也有很大的责任。没有把开发者的职责尽到,没有严格按照开发流程来作业,导致了日常、线上环境链接混发。在开发工程需要细心,细心,再细心。

现在活动被vms代替了,我很喜欢这样高效直接的方式,让我们有更多的时间去做有意义的事。另外,分销前端的项目需要重构,而在这个节骨眼上,我们又回学校了,估计又要延迟一段时间。(PS:感觉自己有点坑,哈哈)

Read More

css3-animation-performance

动画与性能

在前端的活动开发中经常会遇到动画。在pc端往往看到的“正常”的动画在移动端却不正常。有的会出现“卡顿”和闪烁的现象。
在了解动画之前,首先了解一些概念

动画名词概念

  • 帧: 在动画过程中,每一幅静止画面即为一“帧”
  • 帧率:即每秒钟播放的静止画面的数量,单位是fps(Frame per second)
  • 帧时长:即每一幅静止画面的停留时间,单位一般是ms(毫秒)
  • 跳帧(掉帧/丢帧):在帧率固定的动画中,某一帧的时长远高于平均帧时长,导致其后续数帧被挤压而丢失的现象
  • 图层:用html片段放置在常规页面的页面。css layers 通过z-index属性来控制重叠的顺序。 常见的层模型有 relative 和 absolute(fixed)等几种。
合成层(图层)

那么动画是如何播放的,我们就涉及到了合成层。每个合成层对应了一个GPU纹理,所以它和内存息息相关。在超过一定范围,可能引起浏览器崩溃,观察数量是我们了解的最直接的方法。

  • chrome?
    其中chrome有很多层,包括了RenderLayer(负责 DOM 子树),GraphicsLayer(负责 RenderLayer 的子树)。
    chrome中如何显示层,打开chrome://flags/#composited-layer-borders启用,然后打开开发工具勾选Show composited layer borders。

Read More

移动端web思考

问题

做移动端也已经快两个月了,东西不能算是学得很多,而且也没有着手项目,主要负责的是活动的开发,我们主要是在微信开发,然后app中植入h5页面。所以,期间对webapp最大的感受就是页面内容比较少,但是设计到兼容性的比较多。

这当中有几个问题。

Read More

css3-flex-grid

css3-flex

弹性盒子自找工作的时候才知道这个名词,但是并没有怎么深入。今天打算好好研究一下,同时关注一下css3(4)的栅栏布局grid,貌似更强大。

主流的浏览器大多是支持的, 而现在开发移动端web,android4.4以上也是完全支持的。

http://7xklhg.com1.z0.glb.clouddn.com/caniuse-flex.png

Read More

我的2016

曾记得2014也冲动过一次,写下了2014想要完成的目标,但是后来那张纸缺不见了,但是那些目标中还是完成了几个的。现在在新的一年,写下自己的目标,踏踏实实滴过好每一天。

人丑当然多读书

Read More

第二章-选择器

我认为css的选择器目的就是我们提供了一个快捷的方式,而我们常用的无非就是元素、类、ID等几种选择器,而其他的几种使用的真的是不多。但是在有的情况下使用这些选择器,你会发现效率大大提高。

(PS: 尼玛,才发现之前写过总结过一次)

选择器种类

  • 元素选择器
#css代码
div{background:#ccc;}
zc{background:#ccc;}

#html代码
<div>
    <span>这是一段文字</span>
</div>
<zc>这是自定义标签</zc>

展示如下

这是自定义标签
这是一段文字

Read More