前端代码集

头像
寒青
    阅读 11 分钟
    4

    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实现前端图片预览

    <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

    JQ设置等高的列

    <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);
}
    javascripthtml5cssjquery
    寒青
    10.4k 声望3.8k 粉丝
    « 上一篇
    JS常用方法函数
    下一篇 »
    Vue方法函数备案

    引用和评论

    推荐阅读
    头像
    我的技能树

    寒青阅读 273

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.5k

    头像
    100个React最佳实践小技巧

    夕水赞 27阅读 6.8k评论 4

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    前端开发工具

    寒青赞 19阅读 5.3k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    0 条评论
    得票最新