JavaScript笔记

2017-11-21  本文已影响0人  本大少_

代码笔记

JavaScript

封装自己的log函数

log(`(${变量})`)

测试函数（套路）

var ensure = function(condition,message) {
    if (!condition) {
        log(message)
    }
}
// 增强版
var ensureEqual = function(a,b,message) {
    if(a !== b){
        log(`测试失败,a：${a}和b：${b}不相等，${message}`)
    }
}

var testSum = function() {
    let numbers = [1,2,3,4]
    let value = 10
    ensure(value === sum(numbers),'sum 错误')
    ensure(1 === sum([1]),'sum 1 错误')
}

对象（字典）

eg :var op = {'fuck':1}

log(op.fuck) ==> 1

log(op['fuck']) ==> 1

DOM（文档对象模型）

document.querySelector(选择器)    // 查找一个元素
document.querySelectorAll(选择器) // 查找全部元素

事件

// 给多个元素挂上同一个事件
// 选择多个元素使用函数 querySelectorAll

var buttons = document.querySelectorAll('.radio-button')

// 循环遍历每个元素, 并且绑定点击事件
for (var i = 0; i < buttons.length; i++) {
    var buttonFuck = buttons[i]
    buttonFuck.addEventListener('click', function(event){
        // 注意, 这次我们直接定义了函数作为参数传递, 这样做是合法的
        // 另外, 我们增加了一个 event 参数
        // 浏览器会给事件响应函f数传递一个参数, 它代表了事件本身 （指buttonFuck的click）
        // 我们可以用 event.target 取出响应事件的元素 (buttonFuck)
        var self = event.target
        // clearActive 函数是我们自己定义的
        // 目的是删除其他元素的 active class 
        clearActive()
        // add 可以增加一个 class
        self.classList.add('active')
    })
}

var clearActive = function() {
    var active = document.querySelector('.active')
    if (active != null) {
        // 使用 classList 可以访问一个元素的所有 class
        // remove 可以删除一个 class
        active.classList.remove("active")
    }
}

样式开关函数的套路

// 样式开关函数套路
var toggleClass = (element,className) =>{
    if(element.classList.contains(className)) {
        element.classList.remove(className)
    } else {
        element.classList.add(className)
    }
}

序列化和反序列化

// 序列化和反序列化套路
var infoList = ['b','f','q']
var s = JSON.stringify(infoList)
log('序列化之后的s ',typeof s ,s)
var a = JSON.parse(s)
log('反序列化之后的s ',typeof a ,a)

时间标准库

// 时间标准库
// ===
// 常用用法如下
var d = new Date()
d.getFullYear()
年份, 2016
d.getMonth()
月份, 0-11
d.getDate()
日期, 1-31
d.getHours()
小时, 0-23
d.getMinutes()
分钟, 0-59
d.getSeconds()
秒数, 0-59
d.getMilliseconds()
毫秒, 0-999
d.getDay()
星期几, 0-6

事件取消

event.preventDefault()

老javascript类

var Student = function(name,sex){
    this.name = name
    this.sex = sex
    this.say=()=>{
        log('我是一个类')
    }
}
// 创建一个类的实例
var s = new Student('g','man')
s.say() -> 我是一个类
// prototype可以给所有实例加上一个值，函数尽量在这里定义
Student.prototype.get = ()=>{
    log('所有的实例都能拥有这个函数 ',this.name)
}
s.get() -> 所有的实例都能拥有这个函数 g

String.prototype.say = ()=>{
    log('你敢用我吗？ ')
}
''.say() -> 你敢用我吗？

拆分函数的依据

编码

jquery

高级一点的东西

es6

let iterable = [10, 20, 30];

for (let idx in iterable){
  console.log(idx)   // 依次输出：0, 1, 2
}

for (let value of iterable){
  console.log(value)   // 依次输出：10, 20, 30
}

if的条件一定不要是隐含条件

HTML

HTML5

* 游戏库 phaser

普通HTML

CSS

CSS写在哪里

<h1 style="color:red;" > hello gua </h1>

选择器

h1 {
    background:blue;
}

.gua-title {
    background: :blue;
}

#id-h1 {
    background: yellow;
}

CSS命名规矩 -- （ 属性名-元素名-名称 ）

样式优先级（从高到低）

h1 {
    color:white !important;
}

选择器优先级

盒模型

元素定位(position)

display

伪类选择器

a::hover {
    样式
}

使得一个元素屏幕居中

.类 {
    top: 50%;
    position: relative;
    transform: translateX(-50%)
}

改变元素的样式可以通过改变class来完成

事件委托-子元素的事件，可以绑定在父级元素

<html>
<head>
    <meta charset="utf-8">
    <style>
        .done {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <input id="id-input-value" type="text">
    <button id="id-button-add">add</button>
    <div id="id-div-Cell" class="cell">
        <div>
            <button class="overClass">over</button>
            <button class="delClass">del</button>
            <span contenteditable="true">test</span>
        </div>
    </div>
</body>

JavaScript

<script>
var log = function() {
    console.log.apply(console,arguments)
}
let divCell = document.querySelector('#id-div-Cell')
divCell.addEventListener('click',(event)=>{
    log('父元素调用这个函数了 ')
    var item = event.target
    if(item.classList.contains('overClass')) {
        item.parentElement.classList.add('done')
    } else if(item.classList.contains('delClass')) {
        item.parentElement.remove()
    }
})
var testButton = document.querySelector('.overClass')
testButton.addEventListener('click',()=>{
    log('子元素调函数')
})
var addButton = document.querySelector('#id-button-add')
addButton.addEventListener('click',(event)=>{
    log('event ',event.target)
    let input_ = document.querySelector('#id-input-value')
    let todo = input_.value
    var t = newDiv(todo)
    divCell.insertAdjacentHTML('beforeend',t)
})
var newDiv = (todo)=>{
    t = `
        <div>
            <button class="overClass">over</button>
            <button class="delClass">del</button>
            <span contenteditable="true">${todo}</span>
        </div>
    `
    return t
}
</script>
</html>
// 当点击overButton的时候，会输出 父元素调用和子元素调用

http协议

掌握http有什么用？

浏览器安全问题

ajax

Github

Bootstrap

Pure

上一篇 下一篇

猜你喜欢

热点阅读