js良好代码
一、滚动到指定距离
offset: 某元素滚动到指定位置的scrollTop
duration: 完成滚动花费的时间
interval: 间隔
scrollTo(offset, duration, interval) { function locate() { return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; }; let current = locate(); let scrollHeight = current - offset; let step = scrollHeight / duration * interval; let cancellable = window.setInterval(function() { let threshold = (scrollHeight > 0) ? current - locate() - scrollHeight : locate() - current + scrollHeight; if (threshold < 0) { window.scrollBy(0, -step); } else { window.clearInterval(cancellable); } }, interval); },
二、文字溢出时显示省略号
text-overflow:ellipsis; // 设置文本溢出的样式，ellipsis为省略号,clip表示剪切 overflow:hidden; //溢出内容为隐藏 white-space:nowrap; //强制文本在一行内显示
word-wrap ：也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。normal表示控制连续文本换行，break-word表示内容将在边界内换行。
三、文本阴影text-shadow
语法：
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
四、遍历一个对象的所有自身属性
在看开源项目的过程中，经常会看到类似如下的源码。for...in循环对象的所有枚举属性，然后再使用hasOwnProperty()方法来忽略继承属性。
var buz = { fog: 'stack' }; for (var name in buz) { if (buz.hasOwnProperty(name)) { alert("this is fog (" + name + ") for sure. Value: " + buz[name]); } else { alert(name); // toString or something else } }
五、格式日期格式
export function formatDate(date, type = 'yyyy/MM/dd') { date = (typeof date === 'object') ? date : new Date(date); let y = date.getFullYear(); let m = ('0' + (date.getMonth() + 1)).slice(-2); let d = ('0' + date.getDate()).slice(-2); if (type === 'yyyy/MM/dd') { return y + '/' + m + '/' + d; } else if (type === 'yyyy-MM-dd') { return y + '-' + m + '-' + d; } else if (type === 'yyyy年MM月dd日') { return y + '年' + m + '月' + d + '日'; } }
六、隐藏横向滚动条
{ white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-backface-visibility: hidden; &::-webkit-scrollbar { //去除滚动条，设置滚动条的背景颜色为透明 background-color: transparent; display:none; } }
CSS3其他效果： http://www.thinkphp.cn/topic/48508.html
七、clientHeight、offsetHeight等
链接：https://www.cnblogs.com/layaling/p/6223372.html
七、vue自定义指令
前提知识：
两种情况
1、注册一个全局自定义指令：
// 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } })
2、注册局部指令
directives: { focus: { // 指令的定义--- } }
使用：
<input v-focus>
钩子函数：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。
钩子函数参数：
- el: 指令所绑定的元素，可以用来直接操作 DOM 。
- vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
- oldVnode: 上一个虚拟节点，仅在
update和componentUpdated钩子中可用。 - binding: 一个对象，包含以下属性：
- name: 指令名，不包括
v-前缀。 - value: 指令的绑定值， 例如：
v-my-directive="1 + 1", value 的值是2。 - oldValue: 指令绑定的前一个值，仅在
update和componentUpdated钩子中可用。无论值是否改变都可用。 - expression: 绑定值的字符串形式。 例如
v-my-directive="1 + 1"， expression 的值是"1 + 1"。 - arg: 传给指令的参数。例如
v-my-directive:foo， arg 的值是"foo"。 - modifiers: 一个包含修饰符的对象。 例如：
v-my-directive.foo.bar, 修饰符对象 modifiers 的值是{ foo: true, bar: true }const generalBlurContext = '@@generalBlurContext'; export default { bind(el, binding, vnode) { const documentHandler = function(e) { if (vnode.context && !el.contains(e.target)) { vnode.context[el[generalBlurContext].methodName](); } }; el[generalBlurContext] = { documentHandler: documentHandler, methodName: binding.expression, arg: binding.arg || 'click' }; document.addEventListener(el[generalBlurContext].arg, el[generalBlurContext].documentHandler); }, update(el, binding) { el[generalBlurContext].methodName = binding.expression; }, unbind(el) { document.removeEventListener(el[generalBlurContext].arg, el[generalBlurContext].documentHandler); } };
- name: 指令名，不包括
