前端代码集
HTML5
使用FileReader实现前端图片预览
<input type= "file" ><br>
<img src= "" height= "200" alt= "Image preview area..." title= "preview-img" >
var fileInput = document.querySelector( 'input[type=file]' );
var previewImg = document.querySelector( 'img' );
fileInput.addEventListener( 'change' , function () {
var file = this .files[0];
var reader = new FileReader();
reader.addEventListener( 'load' , function () {
previewImg.src = reader.result;
}, false );
reader.readAsDataURL(file);
}, false );
|
取到页面中所有的checkbox怎么做?(不使用第三方框架)
var doc = document,
domList = doc.getElementsByTagName( 'input' ),
checkBoxList = [],
len = domList.length;
while (len--) {
if (domList[len].type === 'checkbox' ) {
checkBoxList.push(domList[len]);
}
} |
JavaScript模版引擎小实例
<div class= "result" ></div>
<script type= "template" id= "template" >
<h2>
<a href= "{{href}}" >
{{title}}
</a>
</h2>
<img src= "{{imgSrc}}" width= "300" height= "100" alt= "{{title}}" />
</script> |
数据
var data = [
{
title: "" ,
href: "" ,
imgSrc: ""
},
...
]; |
方法一:
var doc = document,
template = doc.querySelector( '#template' ).innerHTML,
result = doc.querySelector( '.result' ),
fragment = '' ;
for ( var i = 0, len = data.length; i < len; i++) {
fragment += template
.replace(/{{title}}/, data[i].title)
.replace(/{{href}}/, data[i].href)
.replace(/{{imgSrc}}/, data[i].imgSrc)
} result.innerHTML = fragment; |
方法二:
var doc = document,
template = doc.querySelector( '#template' ).innerHTML,
result = doc.querySelector( '.result' ),
attachTemplateToData;
attachTemplateToData = function (template, data) {
var i = 0,
len = data.length,
fragment = '' ;
function replace(obj) {
var t, key, reg;
for (key in obj) {
reg = new RegExp( '{{' + key + '}}' , 'ig' );
t = (t || template).replace(reg, obj[key]);
}
return t;
}
for (; i < len; i++) {
fragment += replace(data[i]);
}
return fragment;
}; result.innerHTML = attachTemplateToData(template, data); |
JavaScript
实现JS函数重载
var people = {
values: [ "Dean Edwards" , "Sam Stephenson" , "Alex Russell" , "Dean Tom" ]
}; function addMethod(object, name, fn) {
var old = object[name];
object[name] = function () {
if (fn.length === arguments.length) {
return fn.apply( this , arguments);
} else if ( typeof old === 'function' ) {
return old.apply( this , arguments);
}
}
} addMethod(people, "find" , function () {
return this .values;
}); addMethod(people, "find" , function (firstName) {
var ret = [];
for ( var i = 0; i < this .values.length; i++) {
if ( this .values[i].indexOf(firstName) === 0) {
ret.push( this .values[i]);
}
}
return ret;
}); addMethod(people, "find" , function (firstName, lastName) {
var ret = [];
for ( var i = 0; i < this .values.length; i++) {
if ( this .values[i] === (firstName + ' ' + lastName)) {
ret.push( this .values[i]);
}
}
return ret;
}); console.log(people.find()); console.log(people.find( "Sam" ));
console.log(people.find( "Dean Edwards" ));
|
JS跨浏览器绑定事件函数
常规实现方法
//跨浏览器添加事件 function addHandler(target, eventType, handler) {
//检测浏览器类型,并且重写addHandler方法
if (target.addEventListener) {
addHandler = function (target, eventType, handler) {
target.addEventListener(eventType, handler, false );
}
} else { //IE
addHandler = function (target, eventType, handler) {
target.attachEvent( "on" + eventType, handler);
}
}
//调用新的函数
addHandler(target, eventType, handler);
} //跨浏览器移除事件 function removeHandler(target, eventType, handler) {
//检测浏览器类型,并且重写addHandler方法
if (target.addEventListener) {
removeHandler = function (target, eventType, handler) {
target.removeEventListener(eventType, handler, false );
}
} else { //IE
removeHandler = function (target, eventType, handler) {
target.detachEvent( "on" , eventType, handler);
}
}
target.detachEvent( "on" + eventType, handler);
} |
优化方法
//绑定事件 var addHandler = document.body.addEventListener ?
function (target, eventType, handler) { //DOM2
target.addEventListener(eventType, handler, false );
} :
function (target, eventType, handler) { //IE
target.attachEvent( "on" + eventType, handler);
};
//移除事件 var removeHandler = document.body.removeEventListener ?
function (target, eventType, handler) {
target.removeEventListener(eventType, handler, false );
} :
function (target, eventType, handler) {
target.detachEvent( "on" + eventType, handler);
};
|
JS单体模式
var shoppingCar = ( function () {
//这个是由购物车构造器所创建的实例
var instance;
//购物车的构造器函数
function Trolley() {
this .date = new Date().getDate(); //实例属性,当前日期
}
//原型属性,一个返回当前日期的方法
Trolley.prototype.getDate = function () {
return this .date;
};
//暴露出去的公共API
return function () {
//如果实例不存在,那么就调用Trolley构造器实例化一个
if (!instance) {
instance = new Trolley();
}
//将实例返回外部
return instance;
}
}()); var a = new shoppingCar();
var b = new shoppingCar();
console.log(a === b); //true
|
使用prototype属性定义的对象方法
var dom = function () {};
dom.Show = function () {
alert( "Show Message" );
}; dom.prototype.Display = function () {
alert( "Property Message" );
}; dom.Display(); //error
dom.Show(); //Show Message
var d = new dom();
d.Display(); //Property Message
d.Show(); //error
|
1、不使用prototype属性定义的对象方法,是静态方法,只能直接用类名进行调用!另外,此静态方法中无法使用this变量来调用对象其他的属性!
2、使用prototype属性定义的对象方法,是非静态方法,只有在实例化后才能使用!其方法内部可以this来引用对象自身中的其他属性!
闭包实现结果缓存
var CachedSearchBox = ( function () {
var cache = {},
table = [];
return {
attachSearchBox: function (dsid) {
if (dsid in cache) { //如果结果在缓存中
return cache[dsid]; //直接返回缓存中的对象
}
var fsb = new uikit.webctrl.SearchBox(dsid); //新建
cache[dsid] = fsb; //更新缓存
if (count.length > 100) {
delete cache[shift()];
}
return fsb;
},
clearSearchBox: function (dsid) {
if (dsid in cache) {
cache[dsid].clearSelection();
}
}
}
})(); CachedSearchBox.attachSearchBox( 'input' );
|
我们开发中会碰到很多情况,设想我们有一个处理过程很耗时的函数对象,每次调用都会花费很长时间,
那么我们就需要将计算出来的值存储起来,当调用这个函数的时候,首先在缓存中查找,如果找不到,则进行计算,然后更新缓存并返回值,如果找到了,直接返回查找到的值即可。闭包正是可以做到这一点,因为它不会释放外部的引用,从而函数内部的值可以得以保留。
闭包实现封装
var person = function () {
var name = "Default" ;
return {
getName: function () {
return name;
},
setName: function (newName) {
name = newName;
}
}
}(); console.log(person.name); //undefined
console.log(person.getName()); //Default
person.setName( "GoodMan" );
console.log(person.getName()); //GoodMan
|
闭包实现类和继承
function Person() {
var name = "default" ;
return {
getName: function () {
return name;
},
setName: function (newName) {
name = newName;
}
}
} var p = new Person();
p.setName( 'Tom' );
console.log(p.getName()); var Jack = function () {
}; Jack.prototype = new Person(); //继承自Person
Jack.prototype.Say = function () { //添加私有方法
console.log( "Hello,my name is Jack" );
}; var j = new Jack();
j.setName( "Jack" ); //Tom
j.Say(); //Hello,my name is Jack
console.log(j.getName()); //Jack
|
如何判断某变量是否为数组数据类型
if ( typeof Array.isArray === "undefined" ) {
Array.isArray = function (arg) {
return Object.prototype.toString.call(arg) === "[object Array]"
};
} |
Javascript继承-借用构造函数
var Widget = function (name) {
this .messages = [];
}; Widget.prototype.type = 'Widget' ;
var SubWidget = function (name) {
Widget.apply( this , Array.prototype.slice.call(arguments));
this .name = name;
}; SubWidget.prototype = Widget.prototype; var sub1 = new SubWidget( 'foo' );
var sub2 = new SubWidget( 'bar' );
sub1.messages.push( 'foo' );
sub2.messages.push( 'bar' );
console.log(sub1.messages); //foo
console.log(sub2.messages); //bar
|
Javascript原型-封装
var Dialog = ( function () {
function Dialog() {
}
Dialog.prototype = {
init: function () {
console.log( "ok" );
}
};
return Dialog;
}()); var d = new Dialog();
d.init(); //ok
|
通过闭包修正函数的上下文(浏览器不支持解决方案)
if (!( 'bind' in Function.prototype)) {
Function.prototype.bind = function () {
var fn = this ,
context = arguments[0],
args = Array.prototype.slice.call(arguments, 1);
return function () {
return fn.apply(context, args.concat(arguments));
}
}
} 优化JavaScript的构造函数( new 关键字的使用)
方法一: function User(name, age) {
if ( typeof Object.create === 'undefined' ) {
Object.create = function (prototype) {
function C() {
C.prototype = prototype;
return new C();
}
}
}
var self = this instanceof User ? this : Object.create(User.prototype);
self.name = name;
self.age = age;
return self;
} 方法二: function Programmer(name, company, expertise) {
if (!( this instanceof Programmer)) {
return new Programmer(name, company, expertise);
}
this .name = name;
this .company = company;
this .expertise = expertise;
this .writeCode = function () {
console.log( "Writing some public static thing.." )
}
} |
柯里化
var curry = function (fn) {
var limit = fn.length;
return function judgeCurry(...args) {
return function (...args) {
if (args.length >= limit) {
return fn.apply( null , args);
} else {
return function (...args2) {
return judgeCurry.apply( null , args.concat(args2))
}
}
}
}
}; var currySingle = fn => judgeCurry = (...args) => args.length >= fn.length ? fn.apply( null , args) : (...args2) => judgeCurry.apply( null , args.concat(args2));
|
对象拷贝与赋值
var obj = {
name: 'xiaoming' ,
age: 23
}; var newObj = obj;
newObj.name = 'xiaohua' ;
console.log(obj.name); //xiaohua
console.log(newObj.name); //xiaohua
|
我们将obj对象赋值给了newObj对象,从而改变newObj的name属性,但是obj对象的name属性也被篡改,这是因为实际上newObj对象获得的只是一个内存地址,而不是真正的拷贝,所以obj对象被篡改。
var obj = {
name: 'xiaoming' ,
age: 23
}; var newObj = Object.assign({}, obj, {color: 'blue' });
newObj.name = 'xiaohua' ;
console.log(obj.name); //xiaoming
console.log(newObj.name); //xiaohua
console.log(newObj.color); //blue
|
利用Object.assign()方法进行对象的
深拷贝
可以避免源对象被篡改的可能。因为Object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。
var obj = {
name: 'xiaoming' ,
age: 23
}; var newObj = Object.create(obj);
newObj.name = 'xiaohua' ;
console.log(obj.name); //xiaoming
console.log(newObj.name); //xiaohua
|
我们也可以使用Object.create()方法进行对象的拷贝,Object.create()方法可以创建一个具有指定原型对象和属性的新对象。
CSS
居中
#main { width : 440px ;
margin : 0 auto ;
position : relative ;
text-align : center ;
} |
菜单栏下拉
.menu > li { display : block ;
float : left ;
position : relative ;
} |
JQuery
Q设置等高的列
<div class= "equalHeight" style= "border: 1px solid" >
<p>First Line</p>
<p>Second Line</p>
<p>Third Line</p>
</div> <div class= "equalHeight" style= "border: 1px solid" >
<p>Column Two</p>
</div> $( function () {
equalHeight( ".equalHeight" );
}); var maxHeight = 0;
function equalHeight(col) {
col = $(col);
col.each( function () {
if ($( this ).height() > maxHeight) {
maxHeight = $( this ).height()
}
});
col.height(maxHeight);
|