js片段

前端常用代码合集

声明:所有文章都是转载整理的,只是为了自己学习,方便自己观看,如有侵权,请立即联系我,谢谢~
1.使用 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);
  1. 取到页面中所有的 checkbox 怎么做？(不使用第三方框架)
var doc = document,
    domList = doc.getElementsByTagName('input'),
    checkBoxList = [],
    len = domList.length;
while (len--) {
    if (domList[len].type === 'checkbox') {
        checkBoxList.push(domList[len]);
    }
}

3.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 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);
  1. 实现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"));
  1. 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);
    };
  1. 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
  1. 使用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来引用对象自身中的其他属性！

  1. 闭包实现结果缓存
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');

我们开发中会碰到很多情况， 设想我们有一个处理过程很耗时的函数对象， 每次调用都会花费很长时间，
那么我们就需要将计算出来的值存储起来， 当调用这个函数的时候， 首先在缓存中查找， 如果找不到， 则进行计算， 然后更新缓存并返回值， 如果找到了， 直接返回查找到的值即可。 闭包正是可以做到这一点， 因为它不会释放外部的引用， 从而函数内部的值可以得以保留。

  1. 闭包实现封装
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
  1. 闭包实现类和继承
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
  1. 如何判断某变量是否为数组数据类型
if (typeof Array.isArray === "undefined") {
    Array.isArray = function (arg) {
        return Object.prototype.toString.call(arg) === "[object Array]"
    };
}
  1. 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
  1. Javascript原型 - 封装
var Dialog = (function () {
    function Dialog() {}
    Dialog.prototype = {
        init: function () {
            console.log("ok");
        }
    };
    return Dialog;
}());
var d = new Dialog();
d.init(); //ok
  1. 通过闭包修正函数的上下文（ 浏览器不支持解决方案）
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));
        }
    }
}
  1. 优化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..")
    }
}
  1. 柯里化
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));
  1. 对象拷贝与赋值
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
  1. 拷贝
    利用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() 方法可以创建一个具有指定原型对象和属性的新对象。

  1. 设置等高的列
<div class="equalHeight" style="border: 1px solid" >
    <p> First Line </p> <p> Second Line </p> <p> Third Line </p>
</div>
<script>
    $(function () {
        equalHeight(".equalHeight");
    });
    var maxHeight = 0;

    function equalHeight(col) {
        col = $(col);
        col.each(function () {
            if ($(this).height() maxHeight) {
                maxHeight = $(this).height()
            }
        });
        col.height(maxHeight);
    }
</script>

声明:所有文章都是转载整理的,只是为了自己学习,方便自己观看,如有侵权,请立即联系我,谢谢~

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,319评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,801评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,567评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,156评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,019评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,090评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,500评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,192评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,474评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,212评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,572评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2赞 335