GithubHelp home page GithubHelp logo

blog's Introduction

抽风的脚本 👋

blog's People

Contributors

fxxkscript avatar

Watchers

avatar

blog's Issues

HTML AND CSS TIPS

HTML

Doctype

<!DOCTYPE html>

Accessibility

https://www.w3.org/WAI/

Provide equal access and equal opportunity to people with disabilities

<noscript>

CSS - Cascading Style Sheets

Selector

  • ID #idName
  • Class .className
  • Type div
  • Universal selector *
  • Attribute selector [type="input"]

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Specificity | Precedence

If two CSS selectors apply to the same element, the one with higher specificity wins.

image

Pseudo-elements

:after :before

It won’t be accessible to some screen readers.
It won’t be selectable.
If generated content uses superfluous content for the sake of decoration, screen readers that do support CSS generated content will read it out loud, thus making the UX even worse.

div:after {
  content: 'hello'
}

Pseudo-classes

LOVE HATE

div:hover {
  background-color: #F89B4D;
}

https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/

Box Model

image

box-sizing: border-box;

Margin Collapse

https://codepen.io/rayqian/pen/opGoxZ

Float - Must Clear Float!!!

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

Containing Block

The size and position of an element are often impacted by its containing block. Most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case.

Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

BEM - BLOCK ELEMENT MODIFIER

http://getbem.com/

JavaScript Tips

This

In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind method to set the value of a function's this regardless of how it's called, and ES2015 introduced arrow functions which don't provide their own this binding.

console.log(this);

function magic() {
  console.log(this);
}

var someObj = {
  someProperty: magic
};
var anotherObj = {};

magic();

someObj.someProperty();

anotherObj.anotherMagic = magic.bind(someObj);
anotherObj.anotherMagic();

new magic();

magic.call(anotherObj);
magic.apply(anotherObj);


function magic2() {
  'use strict';
  console.log(this);
}
var magic2Obj = {
  magicKey: magic2
}

magic2();
magic2Obj.magicKey();

Variable Scope And Hoisting

global scope and local scope

var scope = 'global'; // global
function check() {
  var scope = 'local'; // local
  if (true) {
    var guess = 'block scope?';
  }
  console.log(guess);
  return scope;
}
check(); 
check();
console.log(scope);
haha();
var scope = 'global'; // global
function check() {
  var scope = 'local'; // local
  return scope;
}
var haha = function() {
  console.log('hhh');
}

Scope Chain

check();
var scope = 'global'; // global
function check() {
  console.log(scope);
  nobody = 1000;
}
console.log(nobody);

Prototype Chain

function ClassA() {
  
}

ClassA.prototype.sayHi = function() {
  console.log('hi');
}

var objA = new ClassA();
objA.sayHi();

function ClassB() {
  
}

ClassB.prototype = new ClassA();
ClassB.prototype.constructor = ClassB;

ClassB.prototype.sayTwiceHi = function() {
  console.log('start');
  console.log(this);
  this.sayHi();
  this.sayHi();
  console.log('end');
}

var obj = new ClassB();
obj.sayTwiceHi();

image

Lexical scope

“This means that functions are executed using the variable scope that was in effect when they were defined, not the variable scope that is in effect when they are invoked. ”
“In order to implement lexical scoping, the internal state of a JavaScript function object must include not only the code of the function but also a reference to the current scope chain. ”

Closure

A closure is the combination of a function and the lexical environment within which that function was declared.
“JavaScript functions are executed using the scope chain that was in effect when they were defined. ”

var scope = 'global';
function check() {
  var scope  = 'local';
  function f() {return scope;}
  return f();
}
check();



function counter(n) {
  return {
    get count() {return n++;},
    set count(m) {
      if (m >= n) n = m;
      else throw Error('count can only be set to a larger valu');
    }
  }
}

var c = counter(1000);

c.count;
c.count;
c.count = 2000;
c.count;
c.count = 2000;

Vue.js

INIT

    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm) // focus on this one
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

Object.defineProperty

function Archiver() {
  var temperature = null;
  var archive = [];

  Object.defineProperty(this, 'temperature', {
    get: function() {
      console.log('get!');
      return temperature;
    },
    set: function(value) {
      temperature = value;
      archive.push({ val: temperature });
    }
  });

  this.getArchive = function() { return archive; };
}

var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]

DESIGN PATTERN

设计模式

常见的设计模式

简单工厂模式 Simple Factory

单例模式 Singleton

观察者模式 Observer

适配器模式 Adapter

装饰器模式 Decorator

策略模式 Strategy

命令模式 Command

迭代器模式 Iterator

JavaScript 中的设计模式

React 中的设计模式

Vue 中的设计模式

资源

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.