daijinma / daijinma.github.io Goto Github PK
View Code? Open in Web Editor NEWdaijinma的日志
daijinma的日志
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;
}
1.directice can not writre element “E” ,can't resolve in html, especially with transclude
,ie8 需要用attribute 属性来支持transclude
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>
之前内置方法只有 if
{{ if Boolean}} //
只能那个判断有无,每次都是 render数据之前自己先过滤一遍,增加多余的 json 来控制状态
/**
* 增加判断 替代 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);
}
});
不要跟我提IE67,再做自杀。
因为浏览器安全问题而报错无回调是另外一个浏览器安全策略问题请移步他出。
jsonp方案出门左拐
先说cookies的问题:
XMLHttpRequest 支持withCredentials 属性
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.xxx.com/api');
xhr.withCredentials = true;
jquery版
$.ajaxSetup({
xhrFields: {
withCredentials: true
}
});
至此,cookies 放心啦!再也不怕过海关啦!
XMLHttpRequest
并不被 IE89 支持,它们自己又玩另外一套 IE89的版本跨域提交需要使用XDomainRequest
对象,更可气的是 jquery并没有对这种状况作出处理,然后打补丁
var xdr = new XDomainRequest();
然后问题就出来了,XDR并没有 withCredentials
这个属性,那发请求就带不上cookies,
至于为什么XDomainRequest Vs XMLHttpRequest on IE8 and IE9
现在为止,不携带cookies可以跨域,推荐使用jquery.xdomainrequest.js
+jquery
,效果还是可以!
这里就要拿出最佳实践(最不最佳我不知道,反正我们自己用着好使)XDomain
,
几个概念需要细说下:
理解为 主动 被动,(master)主动发起请求,(slave)被请求的网址
这个需要放在 被请求,即接口服务器根目录下
<!DOCTYPE HTML>
<script src="//cdn.rawgit.com/jpillora/xdomain/0.7.4/dist/xdomain.min.js" master="http://abc.example.com"></script>
此方案是通过iframe + postMessage 实现,所以IE7 就say goodBye了
大致实现原理就是,提前加载xDomain文件,劫持掉浏览器原先的 ajax,然后在页面创建iframe打开对应slave服务器的proxy.html
文件,然后坚挺postMessage
的回调事件,ajax就由proxy.html
去完成,cookies也自然携带。
详细用法看git:XDomain
等符号
等符号 直接的 html标签会解析一定要写css,script 的默认display是none,但是 ie8 下解析为空。
指
<script class='scripthtml' type='text/html'> text here </script>
.scripthtml{
display:inline-block;
word-wrap: break-word;
}
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;
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;
};
自用,估计以后再也不想做这么多兼容性了,
熊猫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();
});
}
因为要写service 原型嘛,或者说只有还有其他原型,总之现在是需要一个好用的 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
}
});
};
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;
};
/*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));
}
现在公司还是纯粹的 jquery 时代,构建,自动化,模块化这种东西完全用不上,我学起来也吃力,野生前端也懵比。
自从一个同水平的前端走了,另一个生孩子,新招了三个小弟,我就整天头疼,不想那么费劲,只能自己开始造东西啦!
一开始的想法是能使用 统一 页面上所有的 http 请求,不至于后台改一个接口,前端就又要费半天劲。
虽然 jquery 有 ajax 全部配置。。。
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 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;
};
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.