欢迎光临
我们一直在努力

使用原生 JS 实现一个类 Vue 的 v-show 指令

阅读(24)

Vue 作为最主流的前端框架,中文资料齐全、入门简单、生态活跃,可以说是工作中最常用的,如今对 Vue 原理的熟悉基本上是简历的标配了。之前参与了部分 2019 校园招聘的面试工作,发现很多简历上都写了:“精通 Vue”、“熟悉 Vue 原理和源码”、“熟悉 Vue 全家桶及其底层原理”、“熟悉 Vue 双向数据绑定” 等等,但是这么写你真的敢说熟悉 Vue 原理吗?

这样的简历描述看上去是很不错,熟悉框架原理非常难得,于是问到:“那你说一下 Vue 数据驱动的实现原理吧”!

大部分人的回答都差不多是:“首先通过 Object.defineProperty 遍历数据 data 劫持每个属性的 gettersetter 生成 Observer,通过一个 Depend 收集依赖,然后在数据发生变化时通知消息给 Watcher,触发相应监听回调,然后达到数据驱动视图的目的……” 其实描述的都非常正确,但是不禁让人怀疑这是真的熟悉还是背的熟悉?

于是进一步再问:如何利用数据驱动的原理实现一个最简单的 v-show 指令?假如有一个 div 元素,怎样用原生 JS 实现一个 v-show,通过数据的变化去改变这个 div 的显示和隐藏?
(更多…)

让你效率翻倍的 VS Code 使用指南(快捷键、超好用的插件、新手教程)

阅读(160)

VS Code 使用指南

“VS Code 写代码是真好用、真爽。”

想必你也已经听过身边不止一个人这么说。最近的 JS 2019 报告中,VS Code 也是以压倒性的优势获胜第一,其他的编辑器只能被无情碾压在地上摩擦……

JS 2019 报告

但是呢,VS Code 并不是像 PyCharm/WebStorm 那样开箱即用的,需要额外安装一些插件、掌握一些快捷键和技巧,才能顺手的用起来。

我们花了一周的时间,为你整理了可能是最全的 VS Code 新手指南,分为快捷键速查表、10个超好用插件、新手使用教程三部分,让小白也能快速上手、效率加倍。

(更多…)

【可商用】2020年免费可商用中文字体最全合集

阅读(242)

2020年免费可商用中文字体

不知道大家有没有遇到过使用商用字体被举报的情况,我身边有一个做自媒体的朋友,做图时不慎使用了一款商用字体,被有心人举报罚款 2000 多。这种还是小损失,在设计项目中,设计师没有足够版权意识的话,轻则赔偿,重则直接开除。所以囤免费可商用字体是很有必要的。

以下是优设为大家整理的 2020 年最新的 58 款免费可商用中文字体(个人企业均可商用),所有字体资源都已详细分类,打包在字体包内,大家可自行前往下载~

在此也特别感谢无私免费分享出劳动成果的公司、团队、及个人。

温馨提示:打包下载链接在文末~

(更多…)

WEB端-数据可视化深色模式和自适应设计

阅读(626)

本文以近期改版上线的百度流量研究院为例。与大家共同探讨WEB端-数据可视化深色模式和自适应设计的应用。

设计亮点:

深色模式的设计,结合多样化的可视化图表,营造沉浸式的数据浏览体验。

采用响应式设计,为不同终端的用户提供更加舒适的界面和更好的用户体验。

(更多…)

10分钟学会CSS预处理语言Less

阅读(1241)

Less的LOGO

Less 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,将 CSS 赋予了动态语言的特性,如变量、继承、运算、函数等。

Less 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js在服务端运行。

(更多…)

js数组与字符串相互转换

阅读(2141)

toString() 数组转字符串

定义:
toString() 方法可把数组转换为字符串,并返回结果。

语法:
arrayObject.toString()

返回值:
arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。

说明:
当数组用于字符串环境时,JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下,需要显式地调用该方法。

注释:
数组中的元素之间用逗号分隔。

实例:把数组转字符串,以逗号分隔。

<script>
var arr1 = [ '百度', '阿里巴巴', '腾讯', '邦邦的小站' ];
var str1 = arr1.toString();
console.log(str1); //百度,阿里巴巴,腾讯,邦邦的小站
</script>

join() 把数组元素放入一个字符串

定义:
join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

语法:
arrayObject.join(separator)

参数:
separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

返回值:
返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。

实例:把数组转字符串,以||分隔。

<script>
var arr2 = [ '百度', '阿里巴巴', '腾讯', '邦邦的小站' ];
var str2 = arr2.join('||');
console.log(str2); //百度||阿里巴巴||腾讯||邦邦的小站
</script>

split() 把字符串分割为字符串数组。

定义:
split() 方法用于把一个字符串分割成字符串数组。

语法:
stringObject.split(separator,howmany)

参数:
separator 必需。字符串或正则表达式,从该参数指定的地方分割 stringObject。
howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。

返回值:
一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。
但是,如果 separator 是包含子表达式的正则表达式,那么返回的数组中包括与这些子表达式匹配的字串(但不包括与整个正则表达式匹配的文本)。

注释:
如果把空字符串 (“”) 用作 separator,那么 stringObject 中的每个字符之间都会被分割。
String.split() 执行的操作与 Array.join 执行的操作是相反的。

实例:以逗号分割字符串,返回数组。

<script>
var str3 = '小米8,小米MIX 2s,小米电源,小米之家';
var arr3 = str3.split(',');
console.log(arr3); //["小米8", "小米MIX 2s", "小米电源", "小米之家"]
</script>

截取location.search,转换为一个对象

阅读(2470)

Location 对象是 Window 对象的一个部分,包含有关当前 URL 的信息,可通过 window.location 属性来访问。

window.location.search 从问号 (?) 开始的 URL(查询部分)。

以下代码,将当前页面的location对象所请求的参数转化为对象形式

function formatSearch(se){  
    if (typeof se !== "undefined") {      
        se = se.substr(1);  //从起始索引号提取字符串中指定数目的字符
        var arr = se.split("&"),  //把字符串分割为字符串数组
            obj = {},   
            newarr = [];
        arr.forEach(function(v, i){ //数组遍历
        	console.log(v);
        	console.log(i);
        	newarr = v.split("=");
        	if(typeof obj[newarr[0]] === "undefined"){  
                obj[newarr[0]] = newarr[1];  
            }        	
        });
        return obj;
    };  
}
console.log( formatSearch(window.location.search) );

CORS跨域资源共享,实现ajax跨域请求(php简单案例)

阅读(3574)

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。目前,所有现代浏览器都支持该功能,IE浏览器需要IE11+。
CORS跨域资源共享,浏览器兼容性

ajax跨域请求的header设置和案例

和传统ajax请求相比,CORS跨域请求的偶尔工作量主要在数据接收方那一端,也就是在服务器端设置。

举个例子,假设我们服务端使用的是PHP语言,且ajax请求页面的名称是cors-ajax.php,那么,我们可以在此PHP页面进行如下header设置:

// 设置允许其他域名访问
header('Access-Control-Allow-Origin:*');  
// 设置允许的响应类型 
header('Access-Control-Allow-Methods:POST, GET');  
// 设置允许的响应头 
header('Access-Control-Allow-Headers:x-requested-with,content-type');

Access-Control-Allow-Origin:* 表示任何域名的请求,我都不会将别人拒之千里之外。通常实际项目中,我们这里会设置信任的域名,例如:
header('Access-Control-Allow-Origin:http://jmsbang.com');

如果是多个域名,可以使用英文逗号进行分隔,和上面Access-Control-Allow-Methods的书写格式一致。只要在PHP页面中进行了上面设置,剩下的工作就和传统的ajax请求基本上没有任何区别。

例如什么也不干,就随机返回一个图片地址:

<?php
// 刚出现的那些header... 

echo 'http://jmsbang.com/demo/img/w236_1'. rand(1,4) .'.png'; 
?>

此时我们随随便便建一个Html页面,写下下面这段极简的XMLHttpRequest请求JS代码:

// 请求方式随机
var method = Math.random() > 0.5 ? 'get' : 'post';
var xhr = new XMLHttpRequest();
xhr.open(method, 'http://jmsbang.com/demo/cors-ajax.php');
xhr.onload = function () {
	result.innerHTML = '<img src="'+ xhr.responseText +'" alt="" />';
};
xhr.send(null);

我们就能请求到cors-ajax.php随机返回的图片地址。眼见为实,您可以狠狠地点击这里:CORS ajax跨域请求测试demo

可以看到,我们的demo测试页面域名是www.ysichuan.com,而请求的php页面域名是jmsbang.com,典型的跨域请求场景,下面看看会发生什么:

点击demo页面上按钮,然后当当当当:

CORS ajax跨域请求测试demo

成功请求到了随机图片地址,并在页面上呈现图片出来。

与JSONP的比较

CORS与JSONP的使用目的相同,但是比JSONP更强大。

JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

CSS3过渡 transition

阅读(2311)

之前我们整理了CSS3中的动画属性 Transform 转换,今天我们接着一起来看看CSS3中的另一个动画属性 Transition 过渡。

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

CSS3 过渡

下面我们就从语法和属性值,开始来学习transition的具体使用

transition 语法:

transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
或
transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>][, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

[注意] IE9-不支持该属性,safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀;而其余高版本浏览器支持标准写法。

transition是一个复合属性, 适用于所有元素,包含伪对象:after:before。通过下面这四个子属性的配合来完成一个完整的过渡效果。

  • transition-property: 过渡的属性 (默认值为all)
  • transition-duration: 过渡的持续时间 (默认值为0s)
  • transiton-timing-function: 过渡的动画类型 (默认值为ease函数)
  • transition-delay: 过渡的延迟时间 (默认值为0s)

transition-property 过渡属性

语法:

transition-property: none | all | [ property ] [ ,property ]*

transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。
其主要值有:none(没有属性改变),all(所有属性改变)这个也是其默认值,property(元素属性名)。
当其值为none时,transition马上停止执行,当指定为all时,则元素产生任何属性值变化时都将执行transition效果,property是可以指定元素的某一个属性值。如果提供多个属性值,以逗号进行分隔。

实例:transition-property: width ,background;

CSS3 过渡

[注意] 请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

transition-duration 过渡持续时间

语法:

transition-duration: <time>[ ,<time> ]*

transition-duration是用来指定元素过渡的持续时间,取值:为数值,单位为s(秒)或者ms(毫秒)。其默认值是0s,也就是过渡时是即时的。如果提供多个属性值,以逗号进行分隔。

transition-timing-function 过渡的动画类型

语法:

transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
或
transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

取值:
transition-timing-function 的值允许你根据时间的推进去改变属性值的变换速率,它有6个可能值:

1、ease:平滑过渡(逐渐变慢)默认值,等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear:线性过渡(匀速),等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in:由慢到快(加速),等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out:由快到慢(减速),等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out:由慢到快再到慢(加速然后减速),等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

ease
linear
ease-in
ease-out
ease-in-out

其是cubic-bezier为通过贝赛尔曲线来计算“过渡”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.
贝赛尔曲线

其他几个属性的示意图:
transition-timing-function 过渡的动画类型

如果要凭脑子空写出贝赛尔函数的代码,可能比较困难。好在不用你自己去计算,可以到工具网站(如贝赛尔立方)上自动生成想要效果的代码。你也可以在该站点上,体验一把linear,ease,ease-in,ease-out,ease-in-out间的差异。

transition-delay 过渡的延迟时间

语法:

transition-delay: <time>[ ,<time> ]*

transition-delay 用来指定一个过渡动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:为数值,单位为s(秒)或者ms(毫秒),其使用和transition-duration极其相似。默认大小是”0s”,也就是变换立即执行,没有延迟。

触发过渡的方式

常见的就是伪类触发:hover,:active,:focus,:checked等。还有例如@media媒体查询,根据设备大小,横屏竖屏切换时触发。还有,如click,keydown等JS事件触发,页面加载也能触发就不一一列举了。

1、:hover 鼠标悬停触发,实例:

触发

2、:active 用户单击元素并按住鼠标时触发,实例:

触发

3、:focus 获得焦点时触发,实例:

4、@media触发 符合媒体查询条件时触发,实例:

触发

5、点击事件 用户点击元素时触发,实例:

触发

总之过渡的本质是在时间段内平滑过渡属性值,与怎么触发没有关系。

CSS3实现多行文本溢出显示省略号(…)

阅读(1517)

大家应该都知道用 text-overflow:ellipsis 属性,来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

实现方法:

{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

效果如图(或点击这里查看demo):

单行文本的溢出显示省略号

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

CSS3实现多行文本溢出显示省略号

接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

效果如图(或点击这里查看demo):
多行文本的溢出显示省略号

适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。

为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis; 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本