Skip to content

Instantly share code, notes, and snippets.

@Yang03

Yang03/index.html

Created October 30, 2017 03:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Yang03/b9be14403ff609d1a6e1e08a4184e977 to your computer and use it in GitHub Desktop.
Save Yang03/b9be14403ff609d1a6e1e08a4184e977 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/hewemotabe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#marquee {
height:120px;
overflow:hidden;
}
ul, li {
list-style:none;
}
span {
display:block;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<ul id ="marquee">
<li>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</li>
</ul>
</div>
<script id="jsbin-javascript">
function Marquee(id, speed){
var container = document.getElementById(id),
original = container.getElementsByTagName("li")[0],
clone = original.cloneNode(true);
container.appendChild(clone);
var run = function() {
if(container.scrollTop == clone.offsetTop){
container.scrollTop = 0;
}else{
container.scrollTop++;
}
}
var timer = setInterval(run, speed)
}
window.onload = function() {
Marquee('marquee', 10)
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">function Marquee(id, speed){
var container = document.getElementById(id),
original = container.getElementsByTagName("li")[0],
clone = original.cloneNode(true);
container.appendChild(clone);
var run = function() {
if(container.scrollTop == clone.offsetTop){
container.scrollTop = 0;
}else{
container.scrollTop++;
}
}
var timer = setInterval(run, speed)
}
window.onload = function() {
Marquee('marquee', 10)
}</script></body>
</html>
Raw
jsbin.hewemotabe.js
function Marquee(id, speed){
var container = document.getElementById(id),
original = container.getElementsByTagName("li")[0],
clone = original.cloneNode(true);
container.appendChild(clone);
var run = function() {
if(container.scrollTop == clone.offsetTop){
container.scrollTop = 0;
}else{
container.scrollTop++;
}
}
var timer = setInterval(run, speed)
}
window.onload = function() {
Marquee('marquee', 10)
}
@Yang03
Copy link
Author

Yang03 commented Jan 4, 2018 •
edited

1. haojing 里面的 User 分组

haojing 里面 User 有 type 和 roles 两个属性区分用户。先看下它们的区别：

type 和 roles 的区别

  • type 是 User 的枚举属性，固定，一个用户只能只有一种type, 而 roles 是 User 的扩展属性，
    不固定，一个用户可以有多种 roles。
  • type 是数据库 User 表里面的字段，roles 是 User 的扩展字段里面的属性。

为什么会同时存在 type 和 roles?

从它们的区别，可以看出来，type 是枚举类型，固定的，实际应用中经常会为了某个业务而存在的用户
角色和多种角色的情况，我们不可能去添加 type 的枚举类型,此时，我就需要 roles 来扩展用户分组。

实际应用，我们熟悉的超人判断

先看代码：

    // 日常写法
    \Visitor::instance()->hasEmployeePermission();

    // 内部实现 MUserOperator.php  checkUserRole function
    $user && $user->type == \User::TYPE_SUPERMAN && 
    in_array(\Visitor::EMPLOYEE, $useRoles);

从上面的代码，可以看出超人的是判断 User 的 type 和 roles 的结果，但是 \Visitor::EMPLOYEE 并
没有存在数据库里的扩展字段的 roles 的属性里面，而是在格式化 roles 的时候，通过代码给 type 是
TYPE_SUPERMAN 和 \Visitor::MASTER 的 User 添加了 \Visitor::EMPLOYEE 的 roles 属性，
实际上只判断了 User 的 type。

2. php 的静态变量

通常，当一个函数执行完毕，它的局部变量的值就已经不存在，而且变量所占据的内存也被释放。当下一次
执行该过程时，它的所有局部变量将重新初始化。但是如果定义为静态的，则它的值不会在函数调用结束后
释放，而是继续保留变量的值。下次执行，静态变量的值依赖于上一次的执行结果。
我们来看这段代码:

    function a() {
        $a = 1;
        $a++;
        echo $a . ',';
    }

    function b() {
        static $b = 1;
        $b++;
        echo $b . ',';
    }

上面这段代码输出 2,2,2, 2,3,4从这个示例可以看出，$b 的值并没有在第二次调用的时候，重新初定义，
而是依赖了上一次函数执行的结果。

3. img 的 display 属性

通过浏览的控制台查看 computed style 你可以看到是 inline,
但是同时也具有 inline-block 的行为，可以设置 width, height, vertical-align，在 CSS 里面，img
是 replaced element, 展现不是由CSS来控制,外观渲染独立于 CSS, CSS 在某些情况下会对可替换元素做特
殊处理。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment