Giter Club home page Giter Club logo

daijinma.github.io's People

Contributors

daijinma avatar

Watchers

 avatar

daijinma.github.io's Issues

IM即时通信表情回显

aaaaa[:]
aaaaa<i class="icon-panda-emoji icon-panda-emoji-20"></i>

希望部分不被转译

<a href="https://baidu.com">baidu</a>[:]
<a href="https://baidu.com">baidu</a><i class="icon-panda-emoji icon-panda-emoji-20"></i>
<script  type="text/html">
<a href="https://baidu.com">baidu</a>
</script>
<i class="icon-panda-emoji icon-panda-emoji-20"></i>
script{
    display:none;
}
script.template{
    display:inline-block;
}

just as
image

in my code
image

Angular in ie8 WTF

1.directice can not writre element “E” ,can't resolve in html, especially with transclude,ie8 需要用attribute 属性来支持transclude

image

2.$scope.$apply() 多了容易报错,不明白,可以 $timeout(function(){ //code here },10) 延时等待即可

3.$sce服务可以将文本变为浏览器解析的DOM,

$sce.trustAsHtml(str);

推荐写法

<span class="chat_msg" ng-bind-html="TrustDangerousSnippet(item.lastmsg)"></span>

handlebars judge helper 增加判断(比较方法)

想要想疯了

之前内置方法只有 if

{{ if Boolean}} //

只能那个判断有无,每次都是 render数据之前自己先过滤一遍,增加多余的 json 来控制状态

然后duang~

/**
 * 增加判断 替代 if
*  //  “” 双引号 在函数中会 会再次 eval  所以外双内单 双花括号都是需要的
 * {{#judge "{{state}}==='submiting'"}} //      
 *      <i class="icon cross-danger">1</i>
 * {{else}}
 *      <i class="icon cross-success">2</i>
 * {{/judge}}
 * --------------------------
 * {{#judge "{{shop.name}}==='小铺'"}}            ///// 注意这里  支持 多层  但是 aaa.[0].bb 没测过
 *  1
 * {{else}}
 *      2
 * {{/judge}}
 * */   
Handlebars.registerHelper('judge', function(str, options) {
    var reg = /\{\{.*?\}\}/g;
    var result = false;
    var variables = str.match(reg);
    var context = this;
    $.each(variables, function(i,v){
      var key = v.replace(/{{|}}/g,"");
      var arr = key.split(".");
      var forThis = context;
      var value = '';
      for(i=0,len=arr.length;i<len;i++){
          var key = arr[i];
          var obj = forThis[key];
          var type = (typeof obj);
          if(!(type=='object')){
              value = '"'+obj+'"';
              break;
          }else{
              forThis = obj;
          }
      }
      str = str.replace(v, value);
    });
    try{
      result = eval(str);
      if (result) {
        return options.fn(this);
      } else {
        return options.inverse(this);
      }
    }catch(e){
      console.log(str,'--Handlerbars Helper "judge" deal with wrong expression!');
      return options.inverse(this);
    }
});

IE8+ 跨域AJAX方案

IE8+ 跨域AJAX方案

不要跟我提IE67,再做自杀。
因为浏览器安全问题而报错无回调是另外一个浏览器安全策略问题请移步他出。
jsonp方案出门左拐

  1. 不会携带cookies数据,无法获取身份和登录状态
  2. IE89在跨域(包括子域),时存在跨域无法发起ajax请求的问题;
  3. IE89发起请求无法携带cookies;

先说cookies的问题:
XMLHttpRequest 支持withCredentials 属性

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.xxx.com/api');
xhr.withCredentials = true;

jquery版

$.ajaxSetup({
   xhrFields: {
      withCredentials: true
   }
});

至此,cookies 放心啦!再也不怕过海关啦!

那IE89又弄啥嘞?

XMLHttpRequest 并不被 IE89 支持,它们自己又玩另外一套 IE89的版本跨域提交需要使用XDomainRequest对象,更可气的是 jquery并没有对这种状况作出处理,然后打补丁

var xdr = new XDomainRequest();

然后问题就出来了,XDR并没有 withCredentials 这个属性,那发请求就带不上cookies,
至于为什么XDomainRequest Vs XMLHttpRequest on IE8 and IE9
现在为止,不携带cookies可以跨域,推荐使用jquery.xdomainrequest.js+jquery,效果还是可以!

总归还是要带cookies

这里就要拿出最佳实践(最不最佳我不知道,反正我们自己用着好使)XDomain,
几个概念需要细说下:

1.master && slave

理解为 主动 被动,(master)主动发起请求,(slave)被请求的网址

2.proxy.html 文件

这个需要放在 被请求,即接口服务器根目录下

<!DOCTYPE HTML>
<script src="//cdn.rawgit.com/jpillora/xdomain/0.7.4/dist/xdomain.min.js" master="http://abc.example.com"></script>

3.postMessage

此方案是通过iframe + postMessage 实现,所以IE7 就say goodBye了

大致实现原理就是,提前加载xDomain文件,劫持掉浏览器原先的 ajax,然后在页面创建iframe打开对应slave服务器的proxy.html文件,然后坚挺postMessage的回调事件,ajax就由proxy.html去完成,cookies也自然携带。
详细用法看git:XDomain

image

HTML解析标签

xmp 不解析html 不转译&nbsp;等符号

image
image

wbr 可以自动转译 &nbsp; 等符号 直接的 html标签会解析

image

plaintext 网传标签 直接输出 貌似没什么特别

image

script 同wbr

一定要写css,script 的默认display是none,但是 ie8 下解析为空。

<script class='scripthtml' type='text/html'> text here </script>
.scripthtml{
  display:inline-block;
  word-wrap: break-word;
}

image
ie8...WTF
image

DocumentFragment 方案

function (string) {
            var hasEmijo = /\[:(.+?)\]/g;
            var FragmentArray =  string.split(hasEmijo);
            var HTML = document.createDocumentFragment();
            FragmentArray.forEach(function(item,index){
                if(!item){return};
                var nodeTag;// = document.createDocumentFragment();
                var obj = filterEmoji(item);
                if(obj.emoji){
                    nodeTag = document.createElement("i");
                    nodeTag.className = obj.nodeHtml;
                }else{
                    nodeTag = document.createTextNode(obj.nodeText);
                }
                HTML.appendChild(nodeTag);
            })
            //console.log(HTML);
            return HTML;            

纯jsDOM生成

var _ = function (type, props, children, callback) {
        var elem = null;
        if (type === "text") {
            return document.createTextNode(props);
        } else {
            elem = document.createElement(type);
        }
        for(var n in props){
            if(n !== "style" && n !== "className"){
                elem.setAttribute(n, props[n]);
            }else if(n === "className"){
                elem.className = props[n];
            }else{
                for(var x in props.style){
                    elem.style[x] = props.style[x];
                }
            }
        }
        if (children) {
            for(var i = 0; i < children.length; i++){
                if(children[i] != null)
                    elem.appendChild(children[i]);
            }
        }
        if (callback && typeof callback === "function") {
            callback(elem);
        }
        return elem;
    };

placeholder兼容ie8

哦,目前依赖于jquery

自用,估计以后再也不想做这么多兼容性了,
熊猫tv直播大厅项目

if(!("placeholder" in document.createElement("input"))){
  jQuery('[placeholder]').each(function(){

    var input = jQuery(this);
    var text = input.attr('placeholder');
    var div = $("<div class='placeholder'>"+text+"</div>");
    input.after(div);
    input.blur(function() {
    var input = jQuery(this);
    var text = $.trim(input.val());
    if(!text){
      input.siblings(".placeholder").css("display","block")
    }
  });
  })


  $("body").on("click",".placeholder",function() {
    $(this).css("display","none");
    var input = $(this).siblings("[placeholder]").focus();
  });
}

面向对象-继承方法怎么写

作用域,原型链,闭包 感觉像是突然开窍了是的懂了

1.前言

因为要写service 原型嘛,或者说只有还有其他原型,总之现在是需要一个好用的 inherits 的方法

2.=。=

目前我常用的有两种

1. 是最早 做的 inherits 的
function Service(){
    this.action="data";
    this.async = true;
};

inherits(Service, events);

----------------------------------------------------------
//写法
if(typeof Object.create!== 'function'){
    Object.create = function(o){
        var F = function(){};
        F.prototype = o;
        return new F();
   };
}

module.exports = function(ctor, superCtor){
    if (ctor === undefined || ctor === null)
        throw new TypeError('The constructor to "inherits" must not be ' +
                            'null or undefined');

  if (superCtor === undefined || superCtor === null)
    throw new TypeError('The super constructor to "inherits" must not ' +
                        'be null or undefined');

  if (superCtor.prototype === undefined)
    throw new TypeError('The super constructor to "inherits" must ' +
                        'have a prototype');
  /*
   * 原型链链接
   * */   
  ctor.prototype = Object.create(superCtor.prototype, {
    constructor: {
      value: ctor,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });

};
2. 我更喜欢的 Class.extend();
var Class = (function() {
  var _mix = function(r, s) {
    for (var p in s) {
      if (s.hasOwnProperty(p)) {
        r[p] = s[p]
      }
    }
  }

  var _extend = function() {

    //开关 用来使生成原型时,不调用真正的构成流程init
    this.initPrototype = true
    var prototype = new this()
    this.initPrototype = false

    var items = Array.prototype.slice.call(arguments) || []
    var item

    //支持混入多个属性,并且支持{}也支持 Function
    while (item = items.shift()) {
      _mix(prototype, item.prototype || item)
    }


    // 这边是返回的类,其实就是我们返回的子类
    function SubClass() {
      if (!SubClass.initPrototype && this.init)
        this.init.apply(this, arguments)//调用init真正的构造函数
    }

    // 赋值原型链,完成继承
    SubClass.prototype = prototype

    // 改变constructor引用
    SubClass.prototype.constructor = SubClass

    // 为子类也添加extend方法
    SubClass.extend = _extend

    return SubClass
  }
  //超级父类
  var Class = function() {}
  //为超级父类添加extend方法
  Class.extend = _extend

  return Class
})()

图片自动缩放

图片自动缩放

万一哪天用上呢?#抱歉俺是做企业站的#

//图片自动缩放

//图片自动缩放
function initDrawImage(ImgD,iwidth,iheight){
    //参数(图片,允许的宽度,允许的高度)
    var image=new Image();
    image.onload = function (){
        if(image.width>0 && image.height>0){
            if(image.width/image.height>= iwidth/iheight){
                if(image.width>iwidth){
                    ImgD.width=iwidth;ImgD.height=(image.height*iwidth)/image.width;
                }else{
                    ImgD.width=image.width;ImgD.height=image.height;
                }
            }else{
                if(image.height>iheight){
                    ImgD.height=iheight;ImgD.width=(image.width*iheight)/image.height;
                }else{
                    ImgD.width=image.width;ImgD.height=image.height;
                }
            }
        }
        //IE7 以下 图片居中处理
        if($.browser.msie && $.browser.version <=7){
            var wrapHeight = $(ImgD).parent().height();
            var imgHeight = $(ImgD).height();
            var mTop = parseInt((wrapHeight - imgHeight)/2);$(ImgD).css("margin-top",mTop);
        }
    }
    image.src=ImgD.src;
};

js分享 ==》sina,qq空间,人人,开心网,msn,腾讯微博

然并卵

/*title是标题,rLink链接,summary内容,site分享来源,pic分享图片路径,分享到新浪微博*/ 
//新浪 
function shareTSina(title, rLink, site, pic) { 
    title = "标题。"; 
    // pic = $(".p-img img").attr("src"); 
    rLink = "http://www.abc.com/heeh.html"; 
    window.open("http://service.weibo.com/share/share.php?pic=" + encodeURIComponent(pic) + "&title=" + encodeURIComponent(title.replace(/ /g, " ").replace(/<br \/>/g, " ")) + "&url=" + encodeURIComponent(rLink), "分享至新浪微博", "height=500,width=600,top=" + top + ",left=" + left + ",toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no"); 
} 
/*分享到qq空间*/ 
function shareQzone(title, rLink, summary, site, pic) { 
    title = "标题。"; 
    rLink = "http://www.abc.com/heeh.html"; 
    site = "http://www.abc.com/heeh.html"; 
    window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + encodeURIComponent(title) + '&url=' + encodeURIComponent(rLink) + '&summary=' + encodeURIComponent(summary) + '&site=' + encodeURIComponent(site), '_blank', 'scrollbars=no,width=600,height=450,left=' + left + ',top=' + top + ',status=no,resizable=yes'); 
} 
/*,分享到人人*/ 
function shareRR(title, rLink, summary) { 
    title = "标题。"; 
    summary = "内容。"; 
    rLink = "http://www.abc.com/heeh.html"; 
    window.open('http://share.renren.com/share/buttonshare/post/1004?title=' + encodeURIComponent(title) + '&url=' + encodeURIComponent(rLink) + '&content=' + encodeURIComponent(summary), '_blank', 'scrollbars=no,width=600,height=450,left=' + left + ',top=' + top + ',status=no,resizable=yes'); 
} 
//开心网 
function shareKX(title, rLink, summary) { 
    title = "标题。"; 
    rLink = "http://www.abc.com/heeh.html"; 
    window.open('http://www.kaixin001.com/repaste/bshare.php?rtitle=' + encodeURIComponent(title) + '&rurl=' + encodeURIComponent(rLink) + '&rcontent=' + encodeURIComponent(summary), '_blank', 'scrollbars=no,width=600,height=450,left=' + left + ',top=' + top + ',status=no,resizable=yes'); 
} 
//腾讯微博 
function shareToWb(title, rLink, site, pic) { 
    title = "标题。"; 
    rLink = "http://www.abc.com/heeh.html"; 
    window.open('http://v.t.qq.com/share/share.php?url=' + encodeURIComponent(rLink) + '&title=' + encodeURI(title) + '&appkey=' + encodeURI(site), '_blank', 'scrollbars=no,width=600,height=450,left=' + left + ',top=' + top + ',status=no,resizable=yes'); 
} 
/*分享到msn*/ 
function shareToMSN(imgUrl) { 
    var title = "标题。"; 
    var content = "内容"; 
    var productUrl = "http://www.abc.com/heeh.html"; 
    window.open("http://profile.live.com/badge/?url=" + productUrl + "&title=" + encodeURI(title) + "&screenshot=" + encodeURIComponent(imgUrl)); 
}

service原型-http替代品

一个service原型,内部调用 ajax ,替代在页面上写 $.ajax

1.前言

现在公司还是纯粹的 jquery 时代,构建,自动化,模块化这种东西完全用不上,我学起来也吃力,野生前端也懵比。
自从一个同水平的前端走了,另一个生孩子,新招了三个小弟,我就整天头疼,不想那么费劲,只能自己开始造东西啦!
一开始的想法是能使用 统一 页面上所有的 http 请求,不至于后台改一个接口,前端就又要费半天劲。
虽然 jquery 有 ajax 全部配置。。。

2.所以现在出来的东西

Service 的 原型 :core.service
继承了 EventEmitter2
定义 send ready 方法
前端没有明确的规范咯,我需要什么就加上而已,任性!

后来又往上添加了 filter 方法,来传递过滤函数 和 去掉 空json
send 支持返回数据预过滤,主要为了修改data数据结构 更适合前端,增加 status 的 statusMsg

var events = require("core/EventEmitter2").EventEmitter2;
var inherits = require("core/inherits");
var http = require("common/http");
var serverMsg = require("utils/State").getServerMsg;

function Service(){
    this.action="data";
    this.async = true;
};

inherits(Service, events);

/**
 * send 方法,发送http
 * @param json
 * @return promise 对象
 * */
Service.prototype.send = function(callback){
    var _this = this;

    var postData = {
        url:domainUrl+this.path,
        method:this.method,
        async:this.async,
        dataType:"json"
    };
    if(this.data){
        postData.data = this.data;
    };
    http.ajax(postData)
    .then(function(data){
        var result = data;
        if(callback){
            callback(result);
        };
        if(result.status && (!result.statusMessage)){
            var message = serverMsg(result.status);
            if(message){
                result.statusMessage = message;
            }else{
                console.warn("no current code in utils/State")
            }
        }
        _this.emit(_this.action,result);
    });
    return this;
};
/**
 * ready 方法 用于回调
 * @param 回调  function
 * @return null
 * */
Service.prototype.ready = function(callback){
    this.on(this.action,function(data){
        callback(data);
    });
}

/**
 * ready 方法 用于回调
 * @param 回调  function
 * @return null
 * */
Service.prototype.filter = function(action,boo){
    if(action){
        this.data = action(this.data);
    }
    if(boo){
        for(i in this.data){
            if((!this.data[i]) || (this.data[i]===null) || (this.data[i]===undefined)){
                delete this.data[i]
            };
        };
    }
}

module.exports = Service;

写 accountService.js

var Service = require("core/prototype.Service");

    function account() {};

    /**
     * 账务概览-资金情况
     * */
    account.prototype.account = function(param){
        var service = new Service;
        service.path = "/dealer/statis/account"; // url
        service.method="GET"; // method
        //if param?
        service.data=param;
        //if filter 过滤空项
        service.filter(fn,Boolean)//过滤回调 ,是否删除空项 //service.filter(null,true)
        return service.send(fn); // 发送请求 ,fn为回掉函数 过滤函数
    };

    module.exports = new account;

调用

var accountService = require("manage/service/account");
accountService.account(param).ready(function(data){
    console.log(data); //ajax 返回数据
})

object.watch shim

/*
* object.watch v0.0.1: Cross-browser object.watch
*
* By Elijah Grey, http://eligrey.com
*
* A shim that partially implements object.watch and object.unwatch
* in browsers that have accessor support.
*
* Public Domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/

// object.watch
if (!Object.prototype.watch)
    Object.prototype.watch = function (prop, handler) {
        var oldval = this[prop], newval = oldval,
        getter = function () {
            return newval;
        },
        setter = function (val) {
            oldval = newval;
            return newval = handler.call(this, prop, oldval, val);
        };
        if (delete this[prop]) { // can't watch constants
            if (Object.defineProperty) // ECMAScript 5
                Object.defineProperty(this, prop, {
                    get: getter,
                    set: setter
                });
            else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__) { // legacy
                Object.prototype.__defineGetter__.call(this, prop, getter);
                Object.prototype.__defineSetter__.call(this, prop, setter);
            }
        }
    };

// object.unwatch
if (!Object.prototype.unwatch)
    Object.prototype.unwatch = function (prop) {
        var val = this[prop];
        delete this[prop]; // remove accessors
        this[prop] = val;
    };

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.