前端代码集

HTML5

1. 使用FileReader实现前端图片预览
2. 获取到页面中所有的checkbox怎么做？(不使用第三方框架)
3. JavaScript模版引擎小实例

Javascript

1. 实现JS函数重载
2. JS跨浏览器绑定事件函数
3. JS单体模式
4. 使用prototype属性定义的对象方法
5. 闭包实现结果缓存
6. 闭包实现封装
7. 闭包实现类和继承
8. 如何判断某变量是否为数组数据类型？
9. Javascript继承-借用构造函数
10. Javascript原型-封装
11. 通过闭包修正函数的上下文（bind 浏览器不支持解决方案）
12. 优化JavaScript的构造函数(new关键字的使用)
13. 柯里化
14. 对象拷贝与赋值

CSS

1. 居中
2. 菜单栏下拉

JQuery

1. JQ设置等高的列

HTML5

使用FileReader实现前端图片预览

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模版引擎小实例

数据

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 { //IEaddHandler = 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 { //IEremoveHandler = function (target, eventType, handler) {target.detachEvent("on", eventType, handler);}}target.detachEvent("on" + eventType, handler);
}

优化方法

//绑定事件
var addHandler = document.body.addEventListener ?function (target, eventType, handler) {//DOM2target.addEventListener(eventType, handler, false);} :function (target, eventType, handler) {//IEtarget.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;};//暴露出去的公共APIreturn 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

JQ设置等高的列

First Line
Second Line
Third Line

Column Two

$(function () {equalHeight(".equalHeight");
});var maxHeight = 0;function equalHeight(col) {col = $(col);col.each(function () {if ($(this).height() > maxHeight) {maxHeight = $(this).height()}});col.height(maxHeight);
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！