前端集合(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客戶端必不可少的一環