2022-07-31 Vue项目学习

项目中大多会遇到公用组件和方法,可以通过mixins混入对象,将通用的方法添加到Vue中。

官方文档中mixins的介绍:混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

选项合并

                            var mixin = {
                                data: function () {
                                    return {
                                        message: 'hello',
                                        foo: 'abc'
                                    }
                                }
                            }
                                
                            new Vue({
                                mixins: [mixin],
                                data: function () {
                                    return {
                                        message: 'goodbye',
                                        bar: 'def'
                                    }
                                },
                                created: function () {
                                    console.log(this.$data)
                                    // => { message: "goodbye", foo: "abc", bar: "def" }
                                }
                            })
                        

全局混入

                            // 为自定义的选项 'myOption' 注入一个处理器。
                            Vue.mixin({
                                created: function () {
                                var myOption = this.$options.myOption
                                if (myOption) {
                                    console.log(myOption)
                                }
                                }
                            })
                            
                            new Vue({
                                myOption: 'hello!'
                            })
                            // => "hello!"
                        

刚接触代码,发现公用的组件是用全局混入的方式写的,又学习到了一点。Vue还是不够熟悉,没有使用过,真正认真读代码的时间太少,以后要努力!!

今天代码,发现打包的文件名和我自学webpack的名称不一样,就在网上查找学习webpack打包命名方法。

在output中添加filename属性,根据filename打包对应的名称。方法如下:

                            var webpack = {
                                output: {
                                    path: build.assetsRoot,
                                    filename: utils.assetsPath('js/[name].[chunkhash].js'), // 'js/[name].[chunkhash].js' 这里的name是chunkname,chunkhash是哈希值
                                    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js'),
                                    publicPath: build.assetsPublicPath
                                }
                            }
                        
使用的HtmlWebpackPlugin插件设置chunkName。

打包出来的文件名称是根据entry入口文件设置的chunk, HtmlWebpackPlugin的chunks的意思是只打包chunkname为app的chunk

                            entry = {
                                app: './src/app.js'
                            }

                            new HtmlWebpackPlugin({
                                filename: dev.index,
                                template: 'index.html',
                                chunks: ['app'],
                                inject: true
                            })
                        

最后打包出来的结果就是app.[hash].js和app.[hash].css两个文件。

对于webpack的学习也是不够深入,以后要在工作中不断的学习和使用。

2022-08-01 java如何给时间格式化

利用RegExp的特性,匹配需要format的值;

下面的实现方式是:首先正则匹配需要format的值,再用RegExg.$1拿到匹配到的值进行替换。

                            function formatDate(date, format) {
                                let o =
                                    {
                                        "M+": date.getMonth() + 1, //month
                                        "d+": date.getDate(),    //day
                                        "h+": date.getHours(),   //hour
                                        "m+": date.getMinutes(), //minute
                                        "s+": date.getSeconds(), //second
                                        "q+": Math.floor((date.getMonth() + 3) / 3),  //quarter
                                        "S": date.getMilliseconds() //millisecond
                                    }
                                if (/(y+)/.test(format))
                                    format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                                for (var k in o)
                                    if (new RegExp("(" + k + ")").test(format))
                                        format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
                                return format;
                            }
                        

之前写格式化日期时,用的是switch或if/else,没怎么想过利用正则进行格式化,正则确实非常强大。

无论传那些值 ,只要与o对象中的属性名和y对应,都可格式化

2022-08-22 学习记录

通过当天的时间计算出这周的所有日期,并实现上一周和下一周的所有日期

                            (function(w){
                                function WeekDate(){
                                    this.weekDate = []; //记录周的日期与星期
                                    let _date = new Date();
                                    let _weekName = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']; //星期名称
                                    let _currentWeek = 0; //0:今天的这周 1:下一周 -1:上一周
                                    /* 获取周的日期,未传opt默认为当天 */
                                    WeekDate.prototype.getWeekDate = (opt = {date: null, n: null}) => {
                                        let _weekDate = [];
                                        let _week = 0; 
                                        if(opt.date){
                                            _date = new Date(opt.date);
                                            _week = formatWeek(_date.getDay());
                                        }else{
                                            _date = opt.date = new Date();
                                            _week = formatWeek(_date.getDay());
                                        }
                                        if(opt.n){
                                            _currentWeek = opt.n;
                                        }else{
                                            _currentWeek = opt.n = 0;
                                        }
                                        for(let i = 1; i <= 7; i++){
                                            let date = new Date(opt.date),
                                                now = i - _week; // 0
                                            date.setDate(date.getDate() + now + opt.n * 7);
                                            _weekDate.push({
                                                week: _weekName[i-1],
                                                date: formatDate(date, 'yyyy-MM-dd')
                                            })
                                        }
                                        this.weekDate = _weekDate;
                                        return _weekDate;
                                    }
                                    /* 下一周的日期 */
                                    WeekDate.prototype.next = () => {
                                        return this.getWeekDate({date: _date, n: ++_currentWeek})
                                    }
                                    /* 上一周的日期 */
                                    WeekDate.prototype.prev = () => {
                                        return this.getWeekDate({date: _date, n: --_currentWeek});
                                    }
                                    this.getWeekDate();
                                    /* 格式化日期 */
                                    let formatDate = (date, format) => {
                                        date = new Date(date);
                                        let o =
                                            {
                                                "M+": date.getMonth() + 1, //month
                                                "d+": date.getDate(),    //day
                                                "h+": date.getHours(),   //hour
                                                "m+": date.getMinutes(), //minute
                                                "s+": date.getSeconds(), //second
                                                "q+": Math.floor((date.getMonth() + 3) / 3),  //quarter
                                                "S": date.getMilliseconds() //millisecond
                                            }
                                        if (/(y+)/.test(format))
                                            format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                                        for (let k in o)
                                            if (new RegExp("(" + k + ")").test(format))
                                                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
                                        return format;
                                    }
                                    
                                    let formatWeek = (week) => {
                                        return week == 0 ? 7 : week;
                                    }
                                }
                                w.WeekDate = new WeekDate();
                            })(window)
                        

2022-08-23 学习记录

Vue.extend(options)的官方介绍

使用基础Vue构造器,创建一个'子类'。参数是一个包含组件选项的对象。

例子:

                            
                            let Profile = Vue.extend({
                                template: '

{{name}}, {{message}}

', data() { return { name: '张三', message: '你好!' } }, methods: { sayHi() { this.name = '李四'; this.message = '早上好!'; } } }) let vueInstance = new Profile({ el: '#mount-point' }) setTimeout(() => { vueInstance.sayHi(); }, 1000)

2022-08-24 学习记录

在做项目的时候,将输入框的样式重置后,添加border样式后,在安卓上面显示正常,但在IOS上面上边框下面会出现一条阴影,百度查询之后需要设置在input上面"-webkit-appearance: none",去除系统默认appearance的样式,常用于IOS下移出原生样式。

appearance介绍 -webkit-appearance介绍
                            
                        

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。

详情
                            
                        

2022-09-03 学习记录

JS 深拷贝

Object.prototype.extend = function () {
	var arg = arguments,
		i = 0,
		len = arg.length;
	for (; i < len ; i++) {
		var obj = arg[i];
		for (var p in obj) {
			if (p === 'extend') continue;
			var item = obj[p],
				itemType = checkType(item);
			if (itemType === 'object' || itemType === 'array') {
				this[p] = itemType == 'object' ? {} : [];
				this[p].extend(item);
            } else {
				this[p] = item;
			}
		}
	}
	function checkType (item) {
		return Object.prototype.toString.call(item).replace(/\[object |]/g,'').toLocaleLowerCase();
	}
	return this;
}
                        

2022-09-04 Java基础知识点

记录有用链接

WebKit的css扩展(WebKit是私有属性)
前端文档工具大全
印象笔记工具