前端集合(1)

 “点透”是什么

你可能碰过在列表页面上建立一个弹出框，弹出层有个关闭的按钮，你点击了按钮关闭弹出层后，这个按钮正下方的节点也会被触发（或者打开连接）。

我暂时定义为这是一个“点透”现象

直接在touchend处阻止浏览器默认事件便可

document.addEventListener('touchend',  function (e) {
    t = e.timeStamp;

     var event = createEvent('tap')
     // 触发tap事件
    el.dispatchEvent(event);

     // 触发click
     var cEvent = createEvent('click');
    el.dispatchEvent(cEvent);

    e.preventDefault();

}); 

详见叶道友：http://www.cnblogs.com/yexiaochai/p/3451045.html 

grunt 文件合并

1，编译压缩源码，好比less和coffee

2，执行语法检查和单元测试，好比jshint和qunit

3，拼接sprite，若是没有合适的工具，这一直是一个很繁琐很费时的操做，还好咱们有glue。

4，部署代码，好比上传图片到cnd，上传压缩后的代码到线上。这个由于每一个公司甚至每一个项目都不一样，很难统一处理。

 

 

 

推荐下面三篇

http://m.blog.csdn.net/blog/larrywangsun/27428093

http://www.cnblogs.com/yexiaochai/p/3594561.html

http://blog.sina.com.cn/s/blog_65c2ec5e0101ji33.html

 

Gruntfile.js

module.exports =  function (grunt) {
  grunt.initConfig({
  concat: {
    options: {
    },
    dist: {
      src: ['src/**/*.js'], // src文件夹下包括子文件夹下的全部文件
      dest: 'dist/built.js' // 合并文件在dist下名为built.js的文件
    }
  },
  uglify: {
     build: {
        src: 'dist/built.js', // 压缩源文件是以前合并的buildt.js文件
        dest: 'dist/built.min.js' // 压缩文件为built.min.js
      }
   }
});
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  
  grunt.registerTask('default', ['concat','uglify']);

} 

package.json

{
  "name": "demo",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-concat": "~0.5.0",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

来算算结果

var b="221";
  function a(){
     console.log( this.b); 
} 
var c={
     d: function(fn){
     a();
     arguments[0]();
     setTimeout(a,0);
      var e=setInterval(a,0); clearInterval(e); } };
     c.d(a);
// 结果是 221 undefined 221(这个221是setInterval的产物)

说一些APP 布局兼容策略（微信开发必备）

这里字体我建议rem来设置，由于这样的话只须要关注body总体的字体，想变大就变大，想变小就变小。

1.兼容状况IE9+ 1.弹性盒子布局 display:flex(box-inline)

有点：简单易用

缺点：这种实现方式很难实现所有设备兼容的可能性

2.流式布局：

用百分比布局，而后经过调控max-width来实现相似栅格系统 这种方式布局调试兼容性的适合会蛋疼，适用于一些特别简单的页面

3.响应式布局：

用媒体查询的方式media的方式来布局，对各个分辨率的屏幕进行细化结构

优势：理论上能够兼容全部设备的应用

缺点：这种布局方式很蛋疼，在改兼容性的适合，会改的蛋疼，几种媒体集合来回切换

4.js布局：

用js经过设置页面的css属性来达到兼容的效果

优势：理论上能够兼容全部设备的应用

缺点：会产生复杂的判断，使运行效率降低，对于网卡的用户，用户体验会极致的降低

JSONP

JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

咱们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给本身同志时使用的接头方式。

看到没？一个是描述信息的格式，一个是信息传递双方约定的方法。 JSON的优势：

一、基于纯文本，跨平台传递极其简单；

二、Javascript原生支持，后台语言几乎所有支持；

三、轻量级数据格式，占用字符数量极少，特别适合互联网传递；

四、可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进以后仍是很容易识别的；

五、容易编写和解析，固然前提是你要知道数据结构；  实现方式直接上代码

<script type="text/javascript">
     var flightHandler =  function(data){
    };
     var url = "http://www.lagou.com/js/list_count.js?v=1.5.6_2015062918";     //  建立script标签，设置其属性
     var script = document.createElement('script');
    script.setAttribute('src', url);     //  把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script);
</script>
script type="text/javascript">
     var url_show = “XXX";
    function reqHotwords(json){
        console.log(json);
    }
    function postoA(params){
        $.ajax({
            url: url_show,
            data:params,
            dataType: 'jsonp',
            success: function(rs){
                console.log(rs);
            },
            error: function(rs){ console.log('aerror');}
        });
    }
    postoA(url_show);

</script> 

显示调用 由于Script文件必定是后加载的因此加载起来会直接调用现成的JS文件中的方法 因此不论是传输JSON数据 仍是实现方法，都要先定义方法 h

ttp://www.kankanews.com/ICkengine/archives/96670.shtml 

 

Cookie 和 localStroage 的区别

1.Cookie 是基于请求的， LocalStorage 是基于配置的(这是本质区别)

2.Cookie 基本存在各个浏览器差别具体来说：

IE6如下 最多20个

IE7 最多支持50个

FIREFOX 最多支持50个

Opera 最多支持30个

Safari 和 Chrome 对此无上限

LocalStorage 不兼容IE6/7

3.文件大小

Cookie 其实只有4095B~2K 大小

LocalStorage 基本无上限

 

javascript 基础类型

undefined null function boolean number string object?

 

javascript 重定向跳转 

location.href

location.replace

  

xmlhttprequest

xmlhttprequest 又称做 超文本传输请求  

 它是实现ajax的基本类，能够实现post，get等等类型的请求，

 完成客户端，服务端之间的交互实现，它已经被归入标准（IE浏览器对于xmlhttprequest有本身的实现方式）使用时注意IE浏览器的兼容

简单的事例有 jquery的ajax内部封装是由它完成，能够实现客户端的局部刷新，能够实现对于各类资源的请求，xmlhttprequest 已是web客户端必不可少的一环