明媚呀

第六届360前端星计划_JavaScript 从入门到放弃

主讲人：月影

思考：如何写“好” JavaScript

——前端工程师的最佳实践套路模式
什么才是好的 JS 代码？

一、各司其职

JavaScript ：行为
CSS ：表现
HTML：结构
尽量做到职责分离

关灯吃面：版本1
黑夜与白天的切换
HTML代码：

<div id="main">
  <div class="pic">
    <img src="https://p4.ssl.qhimg.com/t01e932bf06236f564f.jpg">
  </div>
  <div class="content">
    <pre>
今天回到家，
煮了点面吃，
一边吃面一边哭，
泪水滴落在碗里，
没有开灯。
    </pre>
  </div>
  <a id="light" href="###"> </a>
</div>

CSS代码：

html,body {
  margin: 0;
  padding: 20px;
  width: 100%;
  height: 100%;
}

#main {
  position: relative;
}

.pic {
  float: left;
  margin-right: 20px;
}

.content {
  font-weight: bold;
  font-size: 1.5em;
}

a#light {
  border: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: 10px;
  cursor: pointer;
  background: red;
}

light.onclick = function(evt) {
  if(light.style.backgroundColor !== 'green'){
    document.body.style.backgroundColor = '#000';
    document.body.style.color = '#fff';
    light.style.backgroundColor = 'green';
  }else{
    document.body.style.backgroundColor = '';
    document.body.style.color = '';
    light.style.backgroundColor = '';    
  }
}

运行效果：

点击红色按钮后：

讨论：这个版本有哪些问题？
违反了各司其职的原则。
用JS做了本该CSS负责的事情。
关灯吃面：版本2

<div id="main" class="light-on">          /*添加了calss*/
  <div class="pic">
    <img src="https://p4.ssl.qhimg.com/t01e932bf06236f564f.jpg">
  </div>
  <div class="content">
    <pre>
今天回到家，
煮了点面吃，
一边吃面一边哭，
泪水滴落在碗里，
没有开灯。
    </pre>
  </div>
  <a id="lightButton" href="###"> </a>
</div>

html,body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#main {
  position: relative;
  padding: 20px;
  width: 100%;
  height: 100%;
  transition: all .5s;           /*添加了过渡动画*/
}

#main.light-off {                 /*添加了开关灯的样式*/
  background-color: #000;
  color: #fff;
}

#main.light-on {                 
  background-color: #fff;
  color: #000;
}

.pic {
  float: left;
  margin-right: 20px;
}

.content {
  font-weight: bold;
  font-size: 1.5em;
}

#lightButton {
  border: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: absolute;
  left: 30px;
  top: 30px;
  cursor: pointer;
  background: red;
}

#main.light-off #lightButton {
  background: green;
}

lightButton.onclick = function(evt) {
  if(main.className === 'light-on'){
    main.className = 'light-off';
  }else{
    main.className = 'light-on';
  }
}

讨论：这个版本做了哪些改进？
各司其职：
1）HTML代码添加了class=“light-on”
2）CSS代码添加了开关灯的样式、过渡动画。
3）JS代码变简单，易理解。
还有其他思路？
由于此案例是纯展示的，可以用纯CSS实现效果，不用写JS代码。
HTML:

<input id="light" type="checkbox"></input>    /*CSS中隐藏了*/
<div id="main">
  <div class="pic">
    <img src="https://p4.ssl.qhimg.com/t01e932bf06236f564f.jpg">
  </div>
  <div class="content">
    <pre>
今天回到家，
煮了点面吃，
一边吃面一边哭，
泪水滴落在碗里，
没有开灯。
    </pre>
  </div>
  <label for="light">                          /*for指定ID元素*/
    <span id="lightButton"> </span>
  <label>
</div>

css

html,body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#light {
  display: none;
}

#main {
  position: relative;
  padding: 20px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #000;
  transition: all .5s;
}

#light:checked + #main {              /*兄弟节点选择器*/
  background-color: #000;
  color: #fff;
}

.pic {
  float: left;
  margin-right: 20px;
}

.content {
  font-weight: bold;
  font-size: 1.5em;
}

#lightButton {
  border: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: absolute;
  left: 30px;
  top: 30px;
  cursor: pointer;
  background: red;
}

#light:checked+#main #lightButton {
  background: green;
}

讨论：二、三两版什么时候用？
考虑到浏览器版本比较老的时候，用方案二好。
移动端的话用方案三好，易维护。

二、复杂 UI 组件的设计

例子：京东轮播图
特点：图片定时轮换，点击小圆点和左右按钮，图片会按顺序轮换。
讨论：这样的 UI 组件如何去写？

步骤1：结构设计
HTML：

<div id="my-slider" class="slider-list">
  <ul>
    <li class="slider-list__item--selected">         /*选中*/
      <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png"/>
    </li>
    <li class="slider-list__item">
      <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg"/>
    </li>
    <li class="slider-list__item">
      <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg"/>
    </li>
    <li class="slider-list__item">
      <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg"/>
    </li>
  </ul>
</div>

CSS:

#my-slider{
  position: relative;          /*绝对定位*/
  width: 790px;
}

.slider-list ul{
  list-style-type:none;
  position: relative;
  padding: 0;
  margin: 0;
}

.slider-list__item,
.slider-list__item--selected{
  position: absolute;
  transition: opacity 1s;
  opacity: 0;
  text-align: center;
}

.slider-list__item--selected{
  transition: opacity 1s;        /*切换的过渡效果*/
  opacity: 1;
}

思考
1）图片结构是一个列表型结构，所以主体用 ul
2）使用 css 绝对定位将图片重叠在同一个位置
3）轮播图切换的状态使用修饰符（modifier）
4）轮播图的切换动画使用 css transition

步骤2：API 设计
getSelectedItem()：获得选中的元素
getSelectedItem()：获得选中的元素是列表中第几个元素
slide TO() ：解决鼠标移动到小圆点时跳转到哪一页
slide Next()：鼠标点击跳转到上一页
slide Previous()：鼠标点击跳转到下一页

具体实现：

class Slider{
  constructor(id){
    this.container = document.getElementById(id);
    this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
  }
  getSelectedItem(){
    const selected = this.container.querySelector('.slider-list__item--selected');
    return selected
  }
  getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem());
  }
  slideTo(idx){
    const selected = this.getSelectedItem();
    if(selected){ 
      selected.className = 'slider-list__item';
    }
    const item = this.items[idx];
    if(item){
      item.className = 'slider-list__item--selected';
    }
  }
  slideNext(){
    const currentIdx = this.getSelectedItemIndex();
    const nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
  }
  slidePrevious(){
    const currentIdx = this.getSelectedItemIndex();
    const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
    this.slideTo(previousIdx);  
  }
}

const slider = new Slider('my-slider');
setInterval(() => {        /*定时轮播*/
  slider.slideNext()
}, 3000)

步骤3：控制流设计
控制结构

<a class="slide-list__next"></a>
  <a class="slide-list__previous"></a>
  <div class="slide-list__control">
    <span class="slide-list__control-buttons--selected"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
  </div>

自定义事件

const detail = {index: idx}
    const event = new CustomEvent('slide', {bubbles:true, detail})
    this.container.dispatchEvent(event)

具体实现
HTML：

<div id="my-slider" class="slider-list">
  <ul>
    <li class="slider-list__item--selected">
      <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png"/>
    </li>
    <li class="slider-list__item">
      <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg"/>
    </li>
    <li class="slider-list__item">
      <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg"/>
    </li>
    <li class="slider-list__item">
      <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg"/>
    </li>
  </ul>
  <a class="slide-list__next"></a>
  <a class="slide-list__previous"></a>
  <div class="slide-list__control">
 //4个小圆点
    <span class="slide-list__control-buttons--selected"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
  </div>
</div>

CSS:

#my-slider{
  position: relative;
  width: 790px;
  height: 340px;
}

.slider-list ul{
  list-style-type:none;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.slider-list__item,
.slider-list__item--selected{
  position: absolute;
  transition: opacity 1s;
  opacity: 0;
  text-align: center;
}

.slider-list__item--selected{
  transition: opacity 1s;
  opacity: 1;
}

.slide-list__control{
  position: relative;
  display: table;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 5px;
  border-radius: 12px;
  bottom: 30px;
  margin: auto;
}

.slide-list__next,
.slide-list__previous{
  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  width: 30px;
  height:50px;
  text-align: center;
  font-size: 24px;
  line-height: 50px;
  overflow: hidden;
  border: none;
  background: transparent;
  color: white;
  background: rgba(0,0,0,0.2);
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s;
}

.slide-list__previous {
  left: 0;
}

.slide-list__next {
  right: 0;
}

#my-slider:hover .slide-list__previous {
  opacity: 1;
}


#my-slider:hover .slide-list__next {
  opacity: 1;
}

.slide-list__previous:after {
  content: '<';
}

.slide-list__next:after {
  content: '>';
}

.slide-list__control-buttons,
.slide-list__control-buttons--selected{
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin: 0 5px;
  background-color: white;
  cursor: pointer;
}

.slide-list__control-buttons--selected {
  background-color: red;
}

JS：

  constructor(id, cycle = 3000){
    this.container = document.getElementById(id);
    this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
    this.cycle = cycle;

    const controller = this.container.querySelector('.slide-list__control');
    if(controller){
      const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
      controller.addEventListener('mouseover', evt=>{
        const idx = Array.from(buttons).indexOf(evt.target);
        if(idx >= 0){
          this.slideTo(idx);
          this.stop();
        }
      });
      
      controller.addEventListener('mouseout', evt=>{
        this.start();
      });
      
      this.container.addEventListener('slide', evt => {
        const idx = evt.detail.index
        const selected = controller.querySelector('.slide-list__control-buttons--selected');
        if(selected) selected.className = 'slide-list__control-buttons';
        buttons[idx].className = 'slide-list__control-buttons--selected';
      })
    }
    
    const previous = this.container.querySelector('.slide-list__previous');
    if(previous){
      previous.addEventListener('click', evt => {
        this.stop();
        this.slidePrevious();
        this.start();
        evt.preventDefault();
      });
    }
    
    const next = this.container.querySelector('.slide-list__next');
    if(next){
      next.addEventListener('click', evt => {
        this.stop();
        this.slideNext();
        this.start();
        evt.preventDefault();
      });
    }
  }
  getSelectedItem(){
    let selected = this.container.querySelector('.slider-list__item--selected');
    return selected
  }
  getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem());
  }
  slideTo(idx){
    let selected = this.getSelectedItem();
    if(selected){ 
      selected.className = 'slider-list__item';
    }
    let item = this.items[idx];
    if(item){
      item.className = 'slider-list__item--selected';
    }
  
    const detail = {index: idx}
    const event = new CustomEvent('slide', {bubbles:true, detail})
    this.container.dispatchEvent(event)
  }
  slideNext(){
    let currentIdx = this.getSelectedItemIndex();
    let nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
  }
  slidePrevious(){
    let currentIdx = this.getSelectedItemIndex();
    let previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
    this.slideTo(previousIdx);  
  }
  start(){
    this.stop();
    this._timer = setInterval(()=>this.slideNext(), this.cycle);
  }
  stop(){
    clearInterval(this._timer);
  }
}

const slider = new Slider('my-slider');
slider.start();

优化1：插件/依赖注入
避免插件和组件的强耦合，降低耦合度。
比如：不想要小圆点的行为，可以直接把这个插件去掉，修改地方很少，但是还会显示小圆点，只不过失去了交互。
具体实现

class Slider{
  constructor(id, cycle = 3000){
    this.container = document.getElementById(id);
    this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
    this.cycle = cycle;
  }
  registerPlugins(...plugins){
    plugins.forEach(plugin => plugin(this));
  }
  getSelectedItem(){
    const selected = this.container.querySelector('.slider-list__item--selected');
    return selected
  }
  getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem());
  }
  slideTo(idx){
    const selected = this.getSelectedItem();
    if(selected){ 
      selected.className = 'slider-list__item';
    }
    const item = this.items[idx];
    if(item){
      item.className = 'slider-list__item--selected';
    }

    const detail = {index: idx}
    const event = new CustomEvent('slide', {bubbles:true, detail})
    this.container.dispatchEvent(event)
  }
  slideNext(){
    const currentIdx = this.getSelectedItemIndex();
    const nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
  }
  slidePrevious(){
    const currentIdx = this.getSelectedItemIndex();
    const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
    this.slideTo(previousIdx);  
  }
  addEventListener(type, handler){
    this.container.addEventListener(type, handler)
  }
  start(){
    this.stop();
    this._timer = setInterval(()=>this.slideNext(), this.cycle);
  }
  stop(){
    clearInterval(this._timer);
  }
}

function pluginController(slider){
  const controller = slider.container.querySelector('.slide-list__control');
  if(controller){
    const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
    controller.addEventListener('mouseover', evt=>{
      const idx = Array.from(buttons).indexOf(evt.target);
      if(idx >= 0){
        slider.slideTo(idx);
        slider.stop();
      }
    });

    controller.addEventListener('mouseout', evt=>{
      slider.start();
    });

    slider.addEventListener('slide', evt => {
      const idx = evt.detail.index
      const selected = controller.querySelector('.slide-list__control-buttons--selected');
      if(selected) selected.className = 'slide-list__control-buttons';
      buttons[idx].className = 'slide-list__control-buttons--selected';
    });
  }  
}

function pluginPrevious(slider){
  const previous = slider.container.querySelector('.slide-list__previous');
  if(previous){
    previous.addEventListener('click', evt => {
      slider.stop();
      slider.slidePrevious();
      slider.start();
      evt.preventDefault();
    });
  }  
}

function pluginNext(slider){
  const next = slider.container.querySelector('.slide-list__next');
  if(next){
    next.addEventListener('click', evt => {
      slider.stop();
      slider.slideNext();
      slider.start();
      evt.preventDefault();
    });
  }  
}

const slider = new Slider('my-slider');
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();

优化2：改进插件/模板化（可维护性大大提升）
HTNL模板化，利于维护。

具体实现：
标准的组件封装方式
不需要小圆点的时候直接在js就可以全部去掉。

class Slider{
  constructor(id, opts = {images:[], cycle: 3000}){
    this.container = document.getElementById(id);
    this.options = opts;
    this.container.innerHTML = this.render();
    this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
    this.cycle = opts.cycle || 3000;
    this.slideTo(0);
  }
  render(){
    const images = this.options.images;
    const content = images.map(image => '
      <li class="slider-list__item">
        <img src="${image}"/>
      </li>    
    '.trim());
    
    return `${content.join('')}
`;
  }
  registerPlugins(...plugins){
    plugins.forEach(plugin => {
      const pluginContainer = document.createElement('div');
      pluginContainer.className = '.slider-list__plugin';
      pluginContainer.innerHTML = plugin.render(this.options.images);
      this.container.appendChild(pluginContainer);
      
      plugin.action(this);
    });
  }
  getSelectedItem(){
    const selected = this.container.querySelector('.slider-list__item--selected');
    return selected
  }
  getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem());
  }
  slideTo(idx){
    const selected = this.getSelectedItem();
    if(selected){ 
      selected.className = 'slider-list__item';
    }
    let item = this.items[idx];
    if(item){
      item.className = 'slider-list__item--selected';
    }
    
    const detail = {index: idx}
    const event = new CustomEvent('slide', {bubbles:true, detail})
    this.container.dispatchEvent(event)
  }
  slideNext(){
    const currentIdx = this.getSelectedItemIndex();
    const nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
  }
  slidePrevious(){
    const currentIdx = this.getSelectedItemIndex();
    const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
    this.slideTo(previousIdx);  
  }
  addEventListener(type, handler){
    this.container.addEventListener(type, handler);
  }
  start(){
    this.stop();
    this._timer = setInterval(()=>this.slideNext(), this.cycle);
  }
  stop(){
    clearInterval(this._timer);
  }
}

const pluginController = {
  render(images){
    return '
      <div class="slide-list__control">
        ${images.map((image, i) => `
            ${i===0?'--selected':''}">
         `).join('')}
      </div>    
    '.trim();
  },
  action(slider){
    const controller = slider.container.querySelector('.slide-list__control');
    
    if(controller){
      const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected ');
      controller.addEventListener('mouseover', evt => {
        const idx = Array.from(buttons).indexOf(evt.target);
        if(idx >= 0){
          slider.slideTo(idx);
          slider.stop();
        }
      });

      controller.addEventListener('mouseout', evt => {
        slider.start();
      });

      slider.addEventListener('slide', evt => {
        const idx = evt.detail.index
        const selected = controller.querySelector('.slide-list__control-buttons--selected');
        if(selected) selected.className = 'slide-list__control-buttons';
        buttons[idx].className = 'slide-list__control-buttons--selected';
      });
    }    
  }
};

const pluginPrevious = {
  render(){
    return ``;
  },
  action(slider){
    const previous = slider.container.querySelector('.slide-list__previous');
    if(previous){
      previous.addEventListener('click', evt => {
        slider.stop();
        slider.slidePrevious();
        slider.start();
        evt.preventDefault();
      });
    }  
  }
};

const pluginNext = {
  render(){
    return ``;
  },
  action(slider){
    const previous = slider.container.querySelector('.slide-list__next');
    if(previous){
      previous.addEventListener('click', evt => {
        slider.stop();
        slider.slideNext();
        slider.start();
        evt.preventDefault();
      });
    }  
  }
};

const slider = new Slider('my-slider', {images: ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
     'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
     'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
     'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'], cycle:3000});

slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();

优化3：组件模型抽象

UI组件框架的雏形

具体实现

class Component{
  constructor(id, opts = {name, data:[]}){
    this.container = document.getElementById(id);
    this.options = opts;
    this.container.innerHTML = this.render(opts.data);
  }
  registerPlugins(...plugins){
    plugins.forEach(plugin => {
      const pluginContainer = document.createElement('div');
      pluginContainer.className = `.${name}__plugin`;
      pluginContainer.innerHTML = plugin.render(this.options.data);
      this.container.appendChild(pluginContainer);
      
      plugin.action(this);
    });
  }
  render(data) {
    /* abstract */
    return ''
  }
}

class Slider extends Component{
  constructor(id, opts = {name: 'slider-list', data:[], cycle: 3000}){
    super(id, opts);
    this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
    this.cycle = opts.cycle || 3000;
    this.slideTo(0);
  }
  render(data){
    const content = data.map(image => `
      
        ${image}"/>
          
    `.trim());
    
    return `${content.join('')}
`;
  }
  getSelectedItem(){
    const selected = this.container.querySelector('.slider-list__item--selected');
    return selected
  }
  getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem());
  }
  slideTo(idx){
    const selected = this.getSelectedItem();
    if(selected){ 
      selected.className = 'slider-list__item';
    }
    const item = this.items[idx];
    if(item){
      item.className = 'slider-list__item--selected';
    }

    const detail = {index: idx}
    const event = new CustomEvent('slide', {bubbles:true, detail})
    this.container.dispatchEvent(event)
  }
  slideNext(){
    const currentIdx = this.getSelectedItemIndex();
    const nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
  }
  slidePrevious(){
    const currentIdx = this.getSelectedItemIndex();
    const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
    this.slideTo(previousIdx);  
  }
  addEventListener(type, handler){
    this.container.addEventListener(type, handler);
  }
  start(){
    this.stop();
    this._timer = setInterval(()=>this.slideNext(), this.cycle);
  }
  stop(){
    clearInterval(this._timer);
  }
}

const pluginController = {
  render(images){
    return '
      <div class="slide-list__control">
        ${images.map((image, i) => `
            ${i===0?'--selected':''}">
         `).join('')}
      </div>    
    '.trim();
  },
  action(slider){
    let controller = slider.container.querySelector('.slide-list__control');
    
    if(controller){
      let buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
      controller.addEventListener('mouseover', evt=>{
        var idx = Array.from(buttons).indexOf(evt.target);
        if(idx >= 0){
          slider.slideTo(idx);
          slider.stop();
        }
      });

      controller.addEventListener('mouseout', evt=>{
        slider.start();
      });

      slider.addEventListener('slide', evt => {
        const idx = evt.detail.index;
        let selected = controller.querySelector('.slide-list__control-buttons--selected');
        if(selected) selected.className = 'slide-list__control-buttons';
        buttons[idx].className = 'slide-list__control-buttons--selected';
      });
    }    
  }
};

const pluginPrevious = {
  render(){
    return ``;
  },
  action(slider){
    let previous = slider.container.querySelector('.slide-list__previous');
    if(previous){
      previous.addEventListener('click', evt => {
        slider.stop();
        slider.slidePrevious();
        slider.start();
        evt.preventDefault();
      });
    }  
  }
};

const pluginNext = {
  render(){
    return ``;
  },
  action(slider){
    let previous = slider.container.querySelector('.slide-list__next');
    if(previous){
      previous.addEventListener('click', evt => {
        slider.stop();
        slider.slideNext();
        slider.start();
        evt.preventDefault();
      });
    }  
  }
};

const slider = new Slider('my-slider', {name: 'slide-list', data: ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
     'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
     'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
     'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'], cycle:3000});

slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();

三、局部细节控制

使用Function处理局部细节

逐渐消失的方块

HTML：

<div id="block" class="large">Click Me</div>
<p>文字内容文字内容文字内容文字内容文
  字内容文字内容文字内容文字内容文字内
  容文字内容文字内容文字内容文字内容文字
  内容文字内容文字内容文字内容文字内容文
  字内容文字内容文字内容文字内容文
  字内容文字内容文字内容文字内容文字内
  容文字内容文字内容文字内容文字内容文字
  内容文字内容文字内容文字内容文字内容文
  字内容文字内容文字内容文字内容文
  字内容文字内容文字内容文字内容文字内
  容文字内容文字内容文字内容文字内容文字
  内容文字内容文字内容文字内容文字内容</p>

CSS：

#block {
  float: left;
  color: white; 
  text-align: center;
  width: 150px;
  height: 150px;
  line-height: 150px;
  background-color: #37f;
  transition: opacity 2s; 
}

#block.hide{
  opacity: 0;
}

JS：

block.onclick = function(evt){
  console.log('hide');
  evt.target.className = 'hide';
  setTimeout(function(){
    document.body.removeChild(block);
  }, 2000);
};

运行效果：

点击后：

讨论：此处有 bug？
不停的点击以后，报错：

应该限制响应函数被点击只能执行一次：

block.onclick = function(evt){
  console.log('hide');
  evt.target.className = 'hide';
  setTimeout(function(){
    document.body.removeChild(block);
  }, 2000);
};

异步请求获取数据
HTML：

<script src="//lib.baomitu.com/axios/0.16.2/axios.js"></script>
<div>
<input id="t" name="t" value="hello" type="text"></input>
<input id="submitBtn" type="submit"></input>
</div>
<img id="gaobai" alt="未加载图片"></img>

JS：

const api = 'https://test.h5jun.com/index/gaobai?text=';

submitBtn.onclick = async function(evt){
  evt.preventDefault();
  
  let {data} = await axios.get(api + t.value);
  gaobai.src = 'data:image/jpeg;base64,' + data.data;
  console.log('data:image/jpeg;base64,' + data.data)
}

讨论：此处有 bug？
点击应该只能执行一次：

const api = 'https://test.h5jun.com/index/gaobai?text=';

submitBtn.onclick = async function(evt){
  evt.preventDefault();
  
  let {data} = await axios.get(api + t.value);
  gaobai.src = 'data:image/jpeg;base64,' + data.data;
  console.log('data:image/jpeg;base64,' + data.data)
}

讨论：处理“只能执行一次”
有很多“只允许执行一次”的函数操作，如何进行统一的抽象？

过程抽象
抽象出一个函数：once
只调用一次：

function once(fn){
  return function(...args){
    if(fn){
      let ret = fn.apply(this, args);
      fn = null;
      return ret;
    }
  }
}

function foo(idx){
  console.log(`I'm called:${idx}`);
}

foo(0);
foo(1);
foo(2);

foo = once(foo);

foo(3);
foo(4);
foo(5);

执行效果：

点击一次

function once(fn){
  return function(...args){
    if(fn){
      let ret = fn.apply(this, args);
      fn = null;
      return ret;
    }
  }
}

block.onclick = once(function(evt){
  console.log('hide');
  evt.target.className = 'hide';
  setTimeout(function(){
    document.body.removeChild(block);
  }, 2000);
});

提交一次

function once(fn){
  return function(...args){
    if(fn){
      let ret = fn.apply(this, args);
      fn = null;
      return ret;
    }
  }
}

const api = 'https://test.h5jun.com/index/gaobai?text=';

submitBtn.onclick = once(async function(evt){
  evt.preventDefault();
  
  let {data} = await axios.get(api + t.value);
  gaobai.src = 'data:image/jpeg;base64,' + data.data;
  console.log('data:image/jpeg;base64,' + data.data)
})

节流：控制点击间隔时间
HTML：

每500毫秒可记录一次

<button id="btn">点我</button>

<div id="circle">0</div>

CSS：

#circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  line-height: 50px;
  text-align: center;
  color: white;
  opacity: 1.0;
  transition: opacity .25s;
}

#circle.fade {
  opacity: 0.0;
  transition: opacity .25s;
}

JS：

function throttle(fn, time = 500){
  let timer;
  return function(...args){
    if(timer == null){
      fn.apply(this,  args);
      timer = setTimeout(() => {
        timer = null;
      }, time)
    }
  }
}

btn.onclick = throttle(function(e){
  circle.innerHTML = parseInt(circle.innerHTML) + 1;
  circle.className = 'fade';
  setTimeout(() => circle.className = '', 250);
});

运行效果：

呆萌的小鸟：debounce

随着鼠标移动的最终位置变动，小鸟飞行路径改变，鼠标停下来的时候，小鸟才会动。
HTML：

<script src="https://s1.ssl.qhres.com/!bd39e7fb/animator-0.2.0.min.js"></script>
<div id="bird" class="sprite bird1"></div>

CSS:

html, body {
  margin:0;
  padding:0;
}

.sprite {
  display:inline-block; overflow:hidden; 
  background-repeat: no-repeat;
  background-image:url(https://p1.ssl.qhimg.com/d/inn/0f86ff2a/8PQEganHkhynPxk-CUyDcJEk.png);
}

.bird0 {width:86px; height:60px; background-position: -178px -2px}
.bird1 {width:86px; height:60px; background-position: -90px -2px}
.bird2 {width:86px; height:60px; background-position: -2px -2px}

#bird{
  position: absolute;
  left: 100px;
  top: 100px;
  transform: scale(0.5);
  transform-origin: -50% -50%;
}

JS：

var i = 0;
setInterval(function(){
  bird.className = "sprite " + 'bird' + ((i++) % 3);
}, 1000/10);

function debounce(fn, dur){
  dur = dur || 100;
  var timer;
  return function(){
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, dur);
  }
}

document.addEventListener('mousemove', debounce(function(evt){
  var x = evt.clientX,
      y = evt.clientY,
      x0 = bird.offsetLeft,
      y0 = bird.offsetTop;
  
  console.log(x, y);
  
  var a1 = new Animator(1000, function(ep){
    bird.style.top = y0 + ep * (y - y0) + 'px';
    bird.style.left = x0 + ep * (x - x0) + 'px';
  }, p => p * p);
  
  a1.animate();
}, 100));

运行效果：

debounce：避免用户重复提交
HTML：

<script src="//lib.baomitu.com/axios/0.16.2/axios.js"></script>
<div>
<input id="t" name="t" value="hello" type="text"></input>
<input id="submitBtn" type="submit"></input>
</div>
<img id="gaobai" alt="未加载图片"></img>

JS：

function debounce(fn){
  let timer = null
  return function(...args){
    if(timer != null) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, args)
      timer = null
    }, 300)
  }
}

const api = 'https://test.h5jun.com/index/gaobai?text=';

submitBtn.onclick = debounce(async function(evt){
  evt.preventDefault();
  
  let {data} = await axios.get(api + t.value);
  gaobai.src = 'data:image/jpeg;base64,' + data.data;
  console.log('data:image/jpeg;base64,' + data.data)
})

消费者

function consumer(fn, time){
  let tasks = [],
      timer;
  
  return function(...args){
    tasks.push(fn.bind(this, ...args));
    if(timer == null){
      timer = setInterval(() => {
        tasks.shift().call(this)
        if(tasks.length <= 0){
          clearInterval(timer);
          timer = null;
        }
      }, time)
    }
  }
}

function add(x, y){
  let sum = x + y;
  console.log(sum);
  return sum;
}

let consumerAdd = consumer(add, 1000);

let sum = 0;
for(let i = 0; i < 10; i++){
  consumerAdd(sum, i);
}

运行效果：

连击
HTML：

<div id="main">
  <button id="btn">Hit</button>
  <span id="count">+0</span>
</div>

CSS：

#main {
  padding-top: 20px;
  font-size: 26px;
}

#btn {
  font-size: 30px;
  border-radius: 15px;
  border: solid 3px #fa0;
}

#count {
  position: absolute;
  margin-left: 6px;
  opacity: 1.0;
  transform: translate(0, 10px);
}

#count.hit {
  opacity: 0.1;
  transform: translate(0, -20px);
  transition: all .5s;
}

JS:

function consumer(fn, time){
  let tasks = [],
      timer;
  
  return function(...args){
    tasks.push(fn.bind(this, ...args));
    if(timer == null){
      timer = setInterval(() => {
        tasks.shift().call(this)
        if(tasks.length <= 0){
          clearInterval(timer);
          timer = null;
        }
      }, time)
    }
  }
}

btn.onclick = consumer((evt)=>{
  let t = parseInt(count.innerHTML.slice(1)) + 1;
  count.innerHTML = `+${t}`;
  count.className = 'hit';
  let r = t * 7 % 256,
      g = t * 17 % 128,
      b = t * 31 % 128;
  
  count.style.color = `rgb(${r},${g},${b})`.trim();
  setTimeout(()=>{
    count.className = 'hide';
  }, 500);
}, 800)

运行效果：

Declarative（声明式） v.s. Imperative（指令式）

Imperative（指令式）：How to do?
怎么做

let list = [1, 2, 3, 4];

let map1 = [];
for(let i = 0; i < list.length; i++){
  map1.push(list[i] * 2);
}

Declarative（声明式）：What to do?
不关心怎么做，关心做什么。

let list = [1, 2, 3, 4];

const double = x => x * 2;

list.map(double);

reduce方法

function add(x, y){
  return x + y;
}

function sub(x, y){
  return x - y;
}

console.log(add(add(add(1,2),3),4));  //不好！！
console.log([1, 2, 3, 4].reduce(add));
console.log([1, 2, 3, 4].reduce(sub));

运行结果：

-**Many方法

function add(x, y){
  return x + y;
}

function sub(x, y){
  return x - y;
}

function addMany(...args){
  return args.reduce(add);
}

function subMany(...args){
  return args.reduce(sub);
}

console.log(addMany(1,2,3,4));
console.log(subMany(1,2,3,4));

运行结果：

iterative方法

function iterative(fn){
  return function(...args){
    return args.reduce(fn.bind(this));
  }
}

const add = iterative((x, y) => x + y);
const sub = iterative((x, y) => x - y);

console.log(add(1,2,3,4));
console.log(sub(1,2,3,4));

High-ordered functions（高阶函数）
once、throttle、debounced、consumer、iterative

它们自身输入函数或返回函数，被称为高阶函数

toggle (imperative)
HTML：

<div id="switcher" class="on"></div>

CSS：

#switcher {
  display: inline-block;
  background-color: black;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}

#switcher.on {
  background-color: green;
}

#switcher.off {
  background-color: red;
}

#switcher.on:after {
  content: 'on';
  color: white;
}

#switcher.off:after {
  content: 'off';
  color: white;
}

JS:

switcher.onclick = function(evt){
  if(evt.target.className === 'on'){
    evt.target.className = 'off';
  }else{
    evt.target.className = 'on';
  }
}

toggle (declarative)
方便扩展，不需要改逻辑
CSS：

#switcher {
  display: inline-block;
  background-color: black;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}

#switcher.on {
  background-color: green;
}

#switcher.off {
  background-color: red;
}

#switcher.on:after {
  content: 'on';
  color: white;
}

#switcher.off:after {
  content: 'off';
  color: white;
}

JS：

function toggle(...actions){
  return function(...args){
    let action = actions.shift();
    actions.push(action);
    return action.apply(this, args);
  }
}

switcher.onclick = toggle(
  evt => evt.target.className = 'off',
  evt => evt.target.className = 'on'
);

三态
CSS:

#switcher {
  display: inline-block;
  background-color: black;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}

#switcher.on {
  background-color: green;
}

#switcher.warn {
  background-color: yellow;
}

#switcher.off {
  background-color: red;
}

#switcher.on:after {
  content: 'on';
  color: white;
}

#switcher.warn:after {
  content: 'warn';
  color: black;
}

#switcher.off:after {
  content: 'off';
  color: white;
}

JS:

function toggle(...actions){
  return function(...args){
    let action = actions.shift();
    actions.push(action);
    return action.apply(this, args);
  }
}

switcher.onclick = toggle(
  evt => evt.target.className = 'warn',
  evt => evt.target.className = 'off',
  evt => evt.target.className = 'on'
);

使用生成器

function * loop(list, max = Infinity){
  let i = 0;
  
  //noprotect
  while(i < max){
    yield list[i++ % list.length];
  }
}


function toggle(...actions){
  let action = loop(actions);
  return function(...args){
    return action.next().value.apply(this, args);
  }
}

switcher.onclick = toggle(
  evt => evt.target.className = 'warn',
  evt => evt.target.className = 'off',
  evt => evt.target.className = 'on'
);

四、总结

如何写好 JavaScript？

各司其职：JavaScript 尽量只做状态管理
结构、API、控制流分离设计 UI 组件
插件和模板化，并抽象出组件模型
运用过程抽象的技巧来抽象并优化局部 API

你可能感兴趣的:(第六届360前端星计划)

第六届360前端星计划_web标准：前端的原力 lhang_91ad
主讲人李松风360前端技术专家奇舞团主要内容：web标准概述web标准介绍web标准概述Web是WorldWideWeb（万维网）的简称。WorldWideWeb由TimBerners-Lee在1989年发明。Web标准是构成Web基础、运行和发展的一系列标准的总称。Web标准并不是由一家标准组织制定。Web标准介绍http发展：IETFInternetEngineringTaskForceIT成
第六届360前端星计划_前端工程化 lhang_91ad
前端工程化主讲人田东东360前端技术专家奇舞团一、什么是前端工程化？目标技术原因目标：在前端领域，利用不断进步经验积累带来的各种方案，来解决在项目中的开发测试维护阶段遇到的种种抵消和繁琐的问题各种工具如下：⼯程化里的技术⼯程化是⼀种思想，技术是⼀种实践。技术会随着时代进步不断地演进和改变，在不同的时期，都会有不同的技术来承载和践⾏着⼯程化思想。思想的落地离不开⾏动和实践，技术虽然会过时，但是实践必
第六届360前端星计划_前端代码的自我修养明媚呀第六届360前端星计划
主讲人：孙磊一、如何衡量代码质量的好坏衡量代码质量的唯一有效标准：WTF/min——RobertC.Martin代码的自我修养代码规范格式流程化二、代码规范yarnglobaladdeslint{"extends":"eslint:recommended","rules":{//enableadditionalrules"indent":["error",4],"linebreak-style":
第六届360前端星计划_Web前端点播直播入门明媚呀第六届360前端星计划前端 360前端星计划 2020 web
主讲人：胡尊杰一、什么是视频了解媒体数据存储和应用的基础原理。格式与内容文件扩展名≈媒体封装格式(媒体容器类型)媒体封装格式≠音视频编码格式(使用了谁家的编码器)文件内容：1)头信息(格式、时长、帧率、码率、分辨率…)2)索引信息3)视频数据4)音频数据5)附加增强数据…视频数据显示器颜色呈现基于RGB(红绿蓝)颜色空间模型视频领域大多基于YUV颜色空间做抽样存储帧内预测&帧间预测复用进一步有效的
第六届360前端星计划_JS 动画原理与实现明媚呀第六届360前端星计划 JS 动画原理与实现 js 360前端星计划暑期实习
主讲人：吴亮一、动画动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类JavaScript动画操作DOMCanvasCSS动画transitionanimationSVG动画SMILJS动画的优缺点优点：灵活度、可控
第六届360前端星计划_前端性能优化明媚呀第六届360前端星计划
主讲人饶占平360大前端团队奇舞团前端工程师一、RALL模型使用RALL模型评估性能RALL模型：以用户为中心的性能模型，每个网络应用都具有与生命周期有关的四个方面，而且这些方面以不同的方式影响着性能。延迟与用户反应响应：50ms处理事件目标：在100ms内响应用户输入指导50ms内处理用户输入事件，确保100ms内反馈用户可视的响应。对于开销大的任务可分隔任务处理，或放到worker进程中执行，
第六届360前端星计划_小程序，大世界明媚呀第六届360前端星计划
主讲人刘观宇360奇舞团PC小程序框架一、简介⼩程序解决了什么问题H5：开发速度较快，各个平台的一致性较好，执行起来会有较长的白屏时间，对于系统接口访问有局限。APP：体验上优势较大，开发成本较高，各个平台会有较大的差异。小程序：相对于H5，小程序除第一次加载，小程序的layout和资源均从本地运行，不经过网络，大大提高了启动速度，减少了白屏加载时间，小程序代码经过审核，宿主APP可以比较放心的把
第六届360前端星计划_Node.js 基础入门明媚呀第六届360前端星计划
主讲人：李喆明一、什么是Node.jsNode.js：Node.js®isaJavaScriptruntimebuiltonChrome’sV8JavaScriptengine.https://nodejs.org与JavaScript的区别基于异步I/O相关接口基于node_modules和require的模块依赖提供C++addonAPI与系统交互Node.js可以干什么？Web服务端：Web
第六届360前端星计划_前端常用的 HTTP 知识明媚呀第六届360前端星计划 http 360前端星计划前端
主讲人：李成银一、HTTPHTTP在浏览器网络中的位置HTTP是应用层协议联网细节交给了通用的传输协议：TCP/UDP3.请求/响应报文请求：返回：请求类型状态码常见状态码URL受限字符：%/.#?;:$+@&=以及非US-ASCⅡ字符集字符://:@:/;?#http://:/?#ftp://:@:/;Header分类1）通用Date:Tue,3Oct201902:16:00GMTConnect
第六届360前端星计划_前端工程化浅析明媚呀第六届360前端星计划
主讲人田东东燕山大学硕士研究生360搜索前端团队首届前端星计划毕业生一、什么是前端工程化？⼯程化的目标在前端领域，利用技术不断进步和经验逐步积累带来的各种⽅案，来解决在项目的开发、测试、维护阶段中遇到的种种低效和繁琐的问题。⼯程化里的技术⼯程化是⼀种思想，技术是⼀种实践。技术会随着时代进步不断地演进和改变，在不同的时期，都会有不同的技术来承载和践⾏着⼯程化思想。思想的落地离不开⾏动和实践，技术虽然
第六届360前端星计划_Web标准：前端的原力明媚呀第六届360前端星计划
主讲人：李松峰一、Web标准概述Web是WorldWideWeb（万维网）的简称。WorldWideWeb由TimBerners-Lee在1989年发明。Web标准：是构成Web基础、运行和发展的一系列标准的总称。Web标准并不是由一家标准组织制定。二、Web标准介绍IETF（互联网工程任务组）：HTTP/0.9：最简单的通信协议，只有GET方法；https://www.w3.org/Protoc
第六届360前端星计划_正则的三个应用场景明媚呀第六届360前端星计划第六届360前端星计划前端正则表达式
主讲人：王峰一、正则表达式的创建和使用创建正则表达式的两种方式1）使用正则表达式字面量[a-z]：小写字母a-z；\d：0-9+：限定符，限定\d重复一次到多次；i：修饰符，忽略大小写；constreg=/[a-z]\d+[a-z]/i;优点简单方便不需要考虑二次转义缺点子内容无法重复使用（[a-z]用两次写两次）过长的正则导致可读性差2）使用RegExp构造函数constalphabet='[a
第六届360前端星计划_深入CSS 明媚呀第六届360前端星计划
主讲人赵文博360前端技术专家奇舞团一、选择器的特异度(Specificity)提出问题：哪条规则生效？拉森火山国家公园.title{color:blue;}articleh1{color:red;}解决问题：选择器的特异度(Specificity)可以看成122>22，所以第一个选择器的优先级更高。高优先级选择器会覆盖低优先级选择器相同属性的值，可以利用此特性实现CSS代码的复用。公共的样式复用
第六届360前端星计划_HTML与前端明媚呀第六届360前端星计划
主讲人赵文博360前端技术专家奇舞团一、什么是前端解决GUI人机交互问题跨终端PC/移动浏览器客户端VR/AR等Web技术栈二、前端技术栈JavaScript（行为）CSS（样式）HTML（内容）JavaScript、CSS、HTML运行在浏览器中，通过http协议与服务器端通信，获取前端代码渲染页面，浏览器也可以把用户填写的内容通过HTTP协议，提交到服务器。三、前端应该关注哪些方面？功能（核心
第六届360前端星计划_JavaScript 从入门到放弃明媚呀第六届360前端星计划
主讲人：月影思考：如何写“好”JavaScript——前端工程师的最佳实践套路模式什么才是好的JS代码？一、各司其职JavaScript：行为CSS：表现HTML：结构尽量做到职责分离关灯吃面：版本1黑夜与白天的切换HTML代码：今天回到家，煮了点面吃，一边吃面一边哭，泪水滴落在碗里，没有开灯。CSS代码：html,body{margin:0;padding:20px;width:100%;hei
第六届360前端星计划_了解CSS 明媚呀第六届360前端星计划
主讲人赵文博360前端技术专家奇舞团一、CSS是什么CascadingStyleSheets用来定义页面元素的样式设置字体和颜色设置位置和大小添加动画效果h1{/*选择器*/color:white;/*color：属性white：属性值*/font-size:14px;/*font-size:14px;声明（Declaration）*/}二、在页面中使用CSS外链（推荐）：利于维护。嵌入内联（不推
第六届360前端星计划_CSS进阶明媚呀第六届360前端星计划
主讲人赵文博360前端技术专家奇舞团一、transform变形对元素进行平移、旋转、缩放、倾斜translaterotatescaleskewtransform不会对其它元素布局产生影响transform：translate实现旋转：rotate缩放：scaletransform：skewX3D变形：近大远小二、transition过渡指定从一个状态到另一个状态时如何过渡动画的意义：告诉用户发生了
奇舞团面试官被群面，这里的17道面试题你也遇到过吗？奇舞周刊
你体验过群面前端大佬吗？你有群面前端牛人的机会吗？不要怀疑，星计划的同学经历过！第六届360前端星计划上上周在云端顺利完成！受疫情影响，今年的星计划只能在线上进行，参加星计划的学生在线上课，所有课程均已录制好在奇舞学院学习。为了更好的帮助星计划的同学，我们每天都有线上班会，班会内容主要是学生提问，讲师(月影、文博等)解答。刚开始大家还有点拘谨，后来熟悉之后便开始用他们遇到的各种各样的面试题来提问讲
前端星计划优秀笔记[HTML&CSS] 奇舞周刊
第六届360前端星计划已经在线开课啦！！！小编今天看到了星计划同学们昨天的学习笔记，想把看到的部分比较优秀的笔记分享给大家，希望我们能不断进步，在前端学习的道路上一起（手拉手[想啥呢]）向前走。同时呢，欢迎大家来奇舞学院（https://study.qiyun.360.cn）跟前端星的同学一起学习，一起成长为前端届最靓的崽，当快乐可爱的FEer～前端星计划优秀作业月亮不睡我不睡组吴静https:/
第六届360前端星计划汇总明媚呀第六届360前端星计划 css html js 360前端星计划第六届
Day1第六届360前端星计划_HTML与前端第六届360前端星计划_了解CSS第六届360前端星计划_深入CSS第六届360前端星计划_CSS进阶Day2第六届360前端星计划_JavaScript从入门到放弃第六届360前端星计划_Web标准：前端的原力第六届360前端星计划_前端常用的HTTP知识Day3第六届360前端星计划_正则的三个应用场景第六届360前端星计划_Node.js基础入门
第六届360前端星计划_前端常用的 HTTP 知识 lhang_91ad
主讲人李成银360前端技术专家奇舞团浏览器在网页中的位置http在浏览网页中位值.PNG请求过程http协议.PNGHTTP是应用层协议联网细节交给了通用的传输协议：TCP/UDPhttp格式：头信息，请求头和响应头response：页面内容格式简单请求格式：响应格式请求类型：请求类型描述GET获取一个资源内容POST新增一个资源PUT更新资源内容DELETE删除资源OPTIONS根据返回判断是否
第六届360前端星计划_前端性能优化 lhang_91ad
前端性能优化主讲人饶占平360前端技术专家奇舞团分为三部分：RAIL模型定义标准工具篇实践篇RAIL模型评估性能以用户为中心的性能模型，每个网络应用语气声明周期有关的四个部分，而且这些方面以不同的方式影响性能。responseanimationidleload评估影响用户体验因素也是这4个rail模型从内容上分为：指导推荐的性能评估标准；性能评估标准，往往依赖于硬件，随时间改变目标倾向恒定指标，人
第六届360前端星计划_JS 动画原理与实现 lhang_91ad
JS动画原理与实现主讲人吴亮360前端技术专家奇舞团动画动画的基本原理:定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类:JavaScript动画操作DOMCanvasCSS动画transitionanimationSVG动画S
第六届360前端星计划_正则的三个应用场景 lhang_91ad
正则的三个应用场景主讲人王峰360前端技术专家奇舞团正则表达式的创建和使用三个应用场景正则与数值正则与颜色正则与URL正则表达式的创建和使用正则表达式的表示：使用正则表达式字面量constreg=/[a-z]\d+[a-z]/i;优点简单方便不需要考虑二次转义缺点子内容无法重复使用过长的正则导致可读性差使用RegExp构造函数constalphabet='[a-z]';constreg=newRe
第六届360前端星计划_JavaScript 从入门到放弃 lhang_91ad
主讲人月影360前端技术专家奇舞团各司其职关灯吃面例子：版本一light.onclick=function(evt){if(light.style.backgroundColor!=='green'){document.body.style.backgroundColor='#000';document.body.style.color='#fff';light.style.backgroundC
Spring4.1新特性——综述 jinnianshilongnian spring 4.1
目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
Schema与数据类型优化 annan211 数据结构 mysql
目前商城的数据库设计真是一塌糊涂，表堆叠让人不忍直视，无脑的架构师，说了也不听。在数据库设计之初，就应该仔细揣摩可能会有哪些查询，有没有更复杂的查询，而不是仅仅突出很表面的业务需求，这样做会让你的数据库性能成倍提高，当然，丑陋的架构师是不会这样去考虑问题的。选择优化的数据类型 1 更小的通常更好更小的数据类型通常更快，因为他们占用更少的磁盘、内存和cpu缓存，
第一节 HTML概要学习 chenke html Web css
第一节 HTML概要学习 1. 什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。打开记事本输入一下内
MyEclipse里部分习惯的更改 Array_06 eclipse
继续补充中---------------------- 1.更改自己合适快捷键windows-->prefences-->java-->editor-->Content Assist--> Activation triggers for java的右侧“.”就可以改变常用的快捷键选中 Text
近一个月的面试总结 cugfy 面试
本文是在学习中的总结，欢迎转载但请注明出处：http://blog.csdn.net/pistolove/article/details/46753275 前言打算换个工作，近一个月面试了不少的公司，下面将一些面试经验和思考分享给大家。另外校招也快要开始了，为在校的学生提供一些经验供参考，希望都能找到满意的工作。
HTML5一个小迷宫游戏 357029540 html5
通过《HTML5游戏开发》摘抄了一个小迷宫游戏，感觉还不错，可以画画，写字，把摘抄的代码放上来分享下，喜欢的同学可以拿来玩玩！ <html> <head> <title>创建运行迷宫</title> <script type="text/javascript"
10步教你上传githib数据张亚雄 git
官方的教学还有其他博客里教的都是给懂的人说得，对已我们这样对我大菜鸟只能这么来锻炼，下面先不玩什么深奥的，先暂时用着10步干净利索。等玩顺溜了再用其他的方法。操作过程（查看本目录下有哪些文件NO.1）ls （跳转到子目录NO.2）cd+空格+目录（继续NO.3）ls （匹配到子目录NO.4）cd+ 目录首写字母+tab键+（首写字母“直到你所用文件根就不再按TAB键了”）（查看文件
MongoDB常用操作命令大全 adminjun mongodb 操作命令
成功启动MongoDB后，再打开一个命令行窗口输入mongo，就可以进行数据库的一些操作。输入help可以看到基本操作命令，只是MongoDB没有创建数据库的命令，但有类似的命令如：如果你想创建一个“myTest”的数据库，先运行use myTest命令，之后就做一些操作（如：db.createCollection('user')）,这样就可以创建一个名叫“myTest”的数据库。一
bat调用jar包并传入多个参数 aijuans
下面的主程序是通过eclipse写的： 1.在Main函数接收bat文件传递的参数（String[] args）如： String ip =args[0]; String user=args[1]; &nbs
Java中对类的主动引用和被动引用 ayaoxinchao java 主动引用对类的引用被动引用类初始化
在Java代码中，有些类看上去初始化了，但其实没有。例如定义一定长度某一类型的数组，看上去数组中所有的元素已经被初始化，实际上一个都没有。对于类的初始化，虚拟机规范严格规定了只有对该类进行主动引用时，才会触发。而除此之外的所有引用方式称之为对类的被动引用，不会触发类的初始化。虚拟机规范严格地规定了有且仅有四种情况是对类的主动引用，即必须立即对类进行初始化。四种情况如下：1.遇到ne
导出数据库提示 outfile disabled BigBird2012 mysql
在windows控制台下，登陆mysql，备份数据库： mysql>mysqldump -u root -p test test > D:\test.sql 使用命令 mysqldump 格式如下： mysqldump -u root -p *** DBNAME > E:\\test.sql。注意：执行该命令的时候不要进入mysql的控制台再使用，这样会报
Javascript 中的 && 和 || bijian1013 JavaScript &&||
准备两个对象用于下面的讨论 var alice = { name: "alice", toString: function () { return this.name; } } var smith = { name: "smith",
[Zookeeper学习笔记之四]Zookeeper Client Library会话重建 bit1129 zookeeper
为了说明问题，先来看个简单的示例代码： package com.tom.zookeeper.book; import com.tom.Host; import org.apache.zookeeper.WatchedEvent; import org.apache.zookeeper.ZooKeeper; import org.apache.zookeeper.Wat
【Scala十一】Scala核心五：case模式匹配 bit1129 scala
package spark.examples.scala.grammars.caseclasses object CaseClass_Test00 { def simpleMatch(arg: Any) = arg match { case v: Int => "This is an Int" case v: (Int, String)
运维的一些面试题 yuxianhua linux
1、Linux挂载Winodws共享文件夹 mount -t cifs //1.1.1.254/ok /var/tmp/share/ -o username=administrator,password=yourpass 或 mount -t cifs -o username=xxx,password=xxxx //1.1.1.1/a /win
Java lang包-Boolean BrokenDreams boolean
Boolean类是Java中基本类型boolean的包装类。这个类比较简单，直接看源代码吧。 public final class Boolean implements java.io.Serializable,
读《研磨设计模式》-代码笔记-命令模式-Command bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.Collection; import java.util.List; /** * GOF 在《设计模式》一书中阐述命令模式的意图：“将一个请求封装
matlab下GPU编程笔记 cherishLC matlab
不多说，直接上代码 gpuDevice % 查看系统中的gpu,,其中的DeviceSupported会给出matlab支持的GPU个数。 g=gpuDevice(1); %会清空 GPU 1中的所有数据,,将GPU1 设为当前GPU reset(g) %也可以清空GPU中数据。 a=1; a=gpuArray(a); %将a从CPU移到GPU中 onGP
SVN安装过程 crabdave SVN
SVN安装过程 subversion-1.6.12 ./configure --prefix=/usr/local/subversion --with-apxs=/usr/local/apache2/bin/apxs --with-apr=/usr/local/apr --with-apr-util=/usr/local/apr --with-openssl=/
sql　行列转换 daizj sql 行列转换行转列列转行
行转列的思想是通过case when 来实现列转行的思想是通过union all 来实现下面具体例子：假设有张学生成绩表(tb)如下: Name Subject Result 张三语文　　74 张三数学　　83 张三物理　　93 李四语文　　74 李四数学　　84 李四物理　　94 */ /* 想变成姓名 &
MySQL--主从配置 dcj3sjt126com mysql
linux下的mysql主从配置：说明：由于MySQL不同版本之间的(二进制日志)binlog格式可能会不一样，因此最好的搭配组合是Master的MySQL版本和Slave的版本相同或者更低， Master的版本肯定不能高于Slave版本。（版本向下兼容） mysql1 : 192.168.100.1 //master mysq
关于yii 数据库添加新字段之后model类的修改 dcj3sjt126com Model
rules: array('新字段','safe','on'=>'search') 1、array('新字段', 'safe')//这个如果是要用户输入的话，要加一下， 2、array('新字段', 'numerical'),//如果是数字的话 3、array('新字段', 'length', 'max'=>100),//如果是文本 1、2、3适当的最少要加一条，新字段才会被
sublime text3 中文乱码解决 dyy_gusi Sublime Text
sublime text3中文乱码解决原因：缺少转换为UTF-8的插件目的：安装ConvertToUTF8插件包第一步：安装能自动安装插件的插件，百度“Codecs33”，然后按照步骤可以得到以下一段代码： import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a30980927
概念了解：CGI，FastCGI，PHP-CGI与PHP-FPM geeksun PHP
CGI CGI全称是“公共网关接口”(Common Gateway Interface)，HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上。 CGI可以用任何一种语言编写，只要这种语言具有标准输入、输出和环境变量。如php,perl,tcl等。 FastCGI FastCGI像是一个常驻(long-live)型的CGI，它可以一直执行着，只要激活后，不
Git push 报错 "error: failed to push some refs to " 解决 hongtoushizi git
Git push 报错 "error: failed to push some refs to " . 此问题出现的原因是：由于远程仓库中代码版本与本地不一致冲突导致的。由于我在第一次git pull --rebase 代码后，准备push的时候，有别人往线上又提交了代码。所以出现此问题。解决方案： 1： git pull 2：
第四章 Lua模块开发 jinnianshilongnian nginx lua
在实际开发中，不可能把所有代码写到一个大而全的lua文件中，需要进行分模块开发；而且模块化是高性能Lua应用的关键。使用require第一次导入模块后，所有Nginx 进程全局共享模块的数据和代码，每个Worker进程需要时会得到此模块的一个副本（Copy-On-Write），即模块可以认为是每Worker进程共享而不是每Nginx Server共享；另外注意之前我们使用init_by_lua中初
java.lang.reflect.Proxy liyonghui160com
1.简介 Proxy 提供用于创建动态代理类和实例的静态方法（1）动态代理类的属性代理类是公共的、最终的，而不是抽象的未指定代理类的非限定名称。但是，以字符串 "$Proxy" 开头的类名空间应该为代理类保留代理类扩展 java.lang.reflect.Proxy 代理类会按同一顺序准确地实现其创建时指定的接口
Java中getResourceAsStream的用法 pda158 java
1.Java中的getResourceAsStream有以下几种： 1. Class.getResourceAsStream(String path) ： path 不以’/'开头时默认是从此类所在的包下取资源，以’/'开头则是从ClassPath根下获取。其只是通过path构造一个绝对路径，最终还是由ClassLoader获取资源。　　2. Class.getClassLoader.get
spring 包官方下载地址（非maven） sinnk spring
SPRING官方网站改版后，建议都是通过 Maven和Gradle下载，对不使用Maven和Gradle开发项目的，下载就非常麻烦，下给出Spring Framework jar官方直接下载路径: http://repo.springsource.org/libs-release-local/org/springframework/spring/ s
Oracle学习笔记(7) 开发PLSQL子程序和包 vipbooks oracle sql 编程
哈哈，清明节放假回去了一下，真是太好了，回家的感觉真好啊！现在又开始出差之旅了，又好久没有来了，今天继续Oracle的学习！这是第七章的学习笔记，学习完第六章的动态SQL之后，开始要学习子程序和包的使用了……，希望大家能多给俺一些支持啊！编程时使用的工具是PLSQL