前端开发项目实战经验(1)

web前端开发工具idea|前端页面属于开发还是|web前端开发需要考研吗

1.分享QQ好友

商品详情页有一个需求就是分享商品链接到qq好友,对于这种需求果断百度,很快就找到了一段分享的js,还真能用,不过,分享到qq空间,微博这些都正常,可是分享到QQ好友的貌似有点不正常,比如移动端分享到qq好友打开的是PC端的页面,更加不对的是分享给qq好友,对面QQ里面显示的却是来自QQ的分享,我想要分享的商品名称,网站描述什么的都没有,这让人不能接受。下面是当时的分享代码。

javascript 代码

var $settings = {
    url: encodeURIComponent(window.location.href), // 网址,默认使用 window.location.href
    site: encodeURIComponent(document.title), // 来源(QQ空间会用到), 默认读取head标签:<meta name=”site” content=”http://overtrue” />
    title: encodeURIComponent(oThis.goodsName), // 标题,默认读取 document.title
    description: encodeURIComponent($(document.head).find(‘[name=”description”]’).attr(‘content’)), // 描述,
    image: encodeURIComponent(imgUrl), // 图片
    target: ‘_blank’ //打开方式
};
// QQ
$(document).on(‘click’, ‘.qq’, function () {
    $(‘.share-box’).hide();
    window.open(“http://connect.qq.com/widget/shareqq/index.html?url=” + $settings.url + “&title=” + $settings.title + “&source=” + $settings.site + ‘&pics=’ + $settings.image, ‘_blank’);
});

后面经过研究发现之所以对方的qq上面没有显示商品名称以及描述是因为商品详情页的window.location.href里面是有参数的,我这里的参数是商品Id以及商品名称,这2个参数是必须的,再看分享的url,当前页面的url只是分享url的其中一个参数,所有那里面有参数就会有歧义,这也就是分享异常的原因,如果把把url参数换成域名就ok了,所以最后还是保持原样,后来发现貌似很少有商城网做了分享到qq好友的功能,有知道解决办法的可以告诉本胖先谢谢了。
注意上面的encodeURIComponent()函数,如果不进行字符串编码,你会发现这些参数是不能被传输的。js里面主要又3种字符串编码分别是: escape,encodeURI,encodeURIComponent。

1 escape()函数

定义和用法
escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
语法
escape(string)
参数 描述
string 必需。要被转义或编码的字符串。
返回值
已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。

2 encodeURI()函数
定义和用法
encodeURI() 函数可把字符串作为 URI 进行编码。
语法
encodeURI(URIstring)
参数 描述
URIstring 必需。一个字符串,含有 URI 或其他要编码的文本。
返回值
URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。
说明
该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: – _ . ! ~ * ‘ ( ) 。
该方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:;/?:@&=+$,#

3 encodeURIComponent() 函数
定义和用法
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
语法
encodeURIComponent(URIstring)
参数 描述
URIstring 必需。一个字符串,含有 URI 组件或其他要编码的文本。
返回值
URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。
说明
该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: – . ! ~ * ‘ ( ) 。
其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。
提示和注释
提示:请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处,前者假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。
说明
该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: –
. ! ~ * ‘ ( ) 。其他所有的字符都会被转义序列替换。

通过对三个函数的分析,我们可以知道:escape()除了 ASCII 字母、数字和特定的符号外,对传进来的字符串全部进行转义编码,因此如果想对URL编码,最好不要使用此方法。而encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。encodeURIComponent方法在编码单个URIComponent(指请求参 数)应当是最常用的,它可以讲参数中的中文、特殊字符进行转义,而不会影响整个URL

2.复制url

这个功能就是点击一个复制按钮,让用户复制到当前页面的url,也是一种特殊的分享。(其实很多移动端浏览器都有复制url这个自带的功能)
html 代码

<script type=”text/javascript”>
    function copyUrl2() {
        var Url2 = document.getElementById(“biao1”);
        Url2.select(); // 选择对象
        document.execCommand(“Copy”); // 执行浏览器复制命令
        alert(“已复制好,可贴粘。”);
    }
</script>
<textarea cols=”20″ rows=”10″ id=”biao1″>用户定义的代码区域</textarea>
<input type=”button” onClick=”copyUrl2()” value=”点击复制代码” />

网上有很多复制url的代码,这段就是其中之一,这么简单就实现了,在pc模拟器里面也是可以的,可是在手机实体机上面一运行,竟然没有反应,这可不行。于是老办法去看看其他商城怎么实现的,找了京东,淘宝,天猫竟然都没有这个功能,最后产品唯品会有这个功能,我去看一下,原来人家是在浏览器兼容execCommand的情况下,一键复制,不兼容显示当前url,引导用户自己长按复制。。。这优雅降级,我给满分,合理利用了移动端浏览器的优势(长按选中)。于是最后的解决代码如下
javascript 代码

// 复制URL功能
$(document).on(‘click’, ‘.link’, function () {
    var url = window.location.href;
    Url2 = document.getElementById(“url”);
    $(‘#url’).val(url);
    $(‘#url1’).text(url);
    if (document.execCommand(‘Copy’)) {
        Url2.select(); // 选择对象
        document.execCommand(“Copy”); // 执行浏览器复制命令
        $.customTips({
            msg: ‘复制成功’
        });
        $(‘.share-main’).removeClass(‘show’);
        setTimeout(function () {
            $(‘.share-box’).hide();
        }, 100);
    } else {
        $(‘.share-main’).removeClass(‘show’);
        $(‘.link-main’).show();
    }
});

3.无痕模式下localstorage报错

无痕模式指不留下上网浏览记录的互联网浏览方式,在隐私浏览过程中,浏览器不会保存任何浏览历史、搜索历史、下载历史、表单历史、cookie 或者 Internet临时文件。
搜索页面用了localstrorage保持用户的最近10条搜索记录,当浏览器调节到无痕模式时候,发现搜索页面连热搜词这种接口直出的数据都没有显示,很明显有代码错误了。一番调试发现是移动端浏览器无痕模式不支持localstorage,pc模拟器无痕模式竟然支持本地存储。
手机Safari浏览器中具体表现是:
localStorage对象仍然存在
但是setItem会报异常:QuotaExceededError
getItem和removeItem直接忽略
这也就是为什么移动端手机代码报错
于是要加一个判断支不支持本地存储的方法或者干脆提示用户关闭无痕模式。
javascript 代码

// 判断是不是无痕模式
storageTest: function (storage) {
    if (!!storage) {
        try {
            storage.setItem(“key”, “value”);
            storage.removeItem(“key”);
            return true;
        } catch (e) {
            return false;
        }
    } else {
        return false;
    }
},

这是一篇关于无痕模式的文章 无痕模式

4.vuejs 后台接口有完全一样的数据报错。

这个问题很特殊,一开始搜索页面的按键精灵是正常的,有一次我无意间按了2个mm,控制台竟然报错-Cannot read property ‘removeChild’ of null,对于这种框架报错本胖一般的做法就是换成开发环境的vuejs版本,果然,出现了一个警告提示接口返回的数据里面有完全一样的数据接着就报错了,原来是后天接口问题,再往下差,发现是数据库数据问题,数据库里面竟然有2个完全一样的数据!
接下来需要做的就是去重,就算vuejs不报错这也是不允许的重复。
下面是后来在网上百度到的数组去重的多种现代方法
1、Set实现
第一种方法就是使用es6新增的Array.from()和new Set()。如果现在你还不了解es6,那你可真是out了。建议阅读ECMAScript 6 入门或者learn-es2015。
javascript 代码

Array.prototype.unique = function () {
    return Array.from(new Set(this));
}

2、结合{}实现
这种方法的关键点就是:判断是否相同的时候,不要忽略对元素类型的判断。
javascript 代码

Array.prototype.unique = function () {
    var json = {};
    var result = [];
    this.forEach(function (value) {
        var type = Object.prototype.toString.call(value).match(/\s(\w+)/)[1].toLowerCase();
        if (!((type + ‘-‘ + value) in json)) {
            json[type + ‘-‘ + value] = true;
            result.push(value);
        }
    })
    return result;
}

3、利用Array.prototype.filter实现
filter是es5中新增的数组的一个方法。不了解的同请阅读Array.prototype.filter()
javascript 代码

Array.prototype.unique = function () {
    var sortArr = this.sort();
    return sortArr.filter(function (v, i, context) {
        return v !== context[i + 1];
    })
}

4、利用Array.prototype.forEach实现
includes也是es6新增的方法。不了解的同请阅读Array.prototype.includes()
javascript 代码

Array.prototype.unique = function () {
    var result = [];
    this.forEach(function (v) {
        if (!result.includes(v)) {
            result.push(v);
        }
    })
    return result;
}

5、利用Array.prototype.splice()实现
这个方法是一个很常规的方法,关键点就是在splice一个元素之后,i要自减1。
javascript 代码

Array.prototype.unique = function () {
    var sortArr = this.sort(),
        i = 0;
    for (; i < sortArr.length; i++) {
        if (sortArr[i] === sortArr[i + 1]) {
            sortArr.splice(i, 1);
            i–;
        }
    }
    return sortArr;
}

6、利用Array.prototype.reduce()实现
reduce是es5中新增的数组的一个方法。不了解的同学请阅读Array.prototype.reduce()。
javascript 代码

Array.prototype.unique = function () {
    var sortArr = this.sort(),
        result = [];
    sortArr.reduce((v1, v2) => {
        if (v1 !== v2) {
            result.push(v1);
        }
        return v2;
    })
    result.push(sortArr[sortArr.length – 1]);
    return result;
}

5.2个关于vuejs的细节优化

A.watch
既然用了vuejs在监听数据变化时候比如这里的搜索词变化就没有必要去监听用户事件了直接用vuejs的wacth就行了,就像下面的代码,vuejs貌似没有change事件,百度了很久,有知道的同学可以告诉本胖先谢谢了。

B.track-by
无track-by情况:数据修改时,无论值是否被修改,dom都被重新渲染(控制台可以看到)
加入track-by属性:数据修改时,不变数据所在的dom不被重新渲染,已改变的数据所在dom才被重新渲染

重庆前端开发面试问题|web前端开发需要考研吗|学前端开发需要掌握

» 本文来自:前端开发者 » 《前端开发项目实战经验(1)》
» 本文链接地址:https://www.rokub.com/4209.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!