• 前端代码合集


    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对象,从而改变newObjname属性,但是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 {

        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);

    }

  • 相关阅读:
    Winform自定义窗体样式,实现标题栏可灵活自定义
    肿瘤转录组数分析CRN:Cancer RNA-Seq Nexus
    TCGA系列--miRNA数据分析
    TCGA系列--甲基化神器mexpress
    R:reshape2包中的melt
    TCGA系列--GDCRNATools
    R软件中排序:sort(),rank(),order()
    TCGA系列--TCGA长链非编码RNA的可视化工具TANRIC
    记一次RabbitMQ解决分布式事务问题
    RabbitMQ整合Spring Booot【死信队列】
  • 原文地址:https://www.cnblogs.com/lcc1995/p/7691069.html
Copyright © 2020-2023  润新知