原生Javascript的N个开发技巧

web前端开发流行插件
chorme插件前端开发
sublime 前端开发插件

NO.1、Javascript返回按ID检索的元素对象
javascript 代码

function g(id) {
    return !id ? null : document.getElementById(id)
}
//还有一种是:
function g(id) {
    return typeof id == ‘string’ ? document.getElementById(id) : id
}
//大家有兴趣可以比较下两者的异同!

No.2、getElementsByClassName方法的兼容
javascript 代码

function getClass(node, cln) {
    if (node.getElementsByClassName) {
        return node.getElementsByClassName(cln)
    } else {
        var results = new Array()
        var eles = document.getElementsByTagName(‘*’)
        for (var i = 0; i < eles.length; i++) {
            if (eles[i].className.indexOf(cln) != -1) {
                results[results.length] = eles[i]
            }
        }
        return results
    }
}

No.3、获取元素当前具体样式javascript 代码

function getStyle(obj, style) {
    return window.getComputedStyle
        ? window.getComputedStyle(obj, null)[style]
        : obj.currentStyle[style]
}

No.4、兼容性绑定元素事件
javascript 代码

//普通
function addEvt(obj, evt, handle) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, handle, false)
    } else if (obj.attachEvent) {
        obj.attachEvent(‘on’ + evt, handle)
    } else {
        obj[‘on’ + evt] = handle
    }
}

No.5、页面加载完毕,执行多个函数时,比window.onload=function(){}更有弹性的解决方案
javascript 代码

function addLoadEvent(func) {
    var oldonload = window.onload
    if (typeof window.onload != ‘function’) {
        window.onload = func
    } else {
        window.onload = function() {
            oldonload()
            func()
        }
    }
}

//这将把页面加载完毕时所要执行的函数创建为一个队列,用法为: addLoadEvent(func1); addLoadEvent(func2);

NO.6、向某字符串中已知字符串后插入新字符
javascript 代码

/* 第一部分- 初始值设定 */
var ori = ‘poiuuyytreiversonasddv vsuyytreiversonasdyyt’
var search = ‘iverson’
var inset = 2001
/* 第二部分- 具体函数 */
function insertStr(o, key, ins) {
    if (typeof o != ‘string’) return
    key = typeof key == ‘number’ ? ” + key : key
    if (typeof key != ‘string’) return
    var newStr = ”
    var len = key.length
    var flag = 1
    for (var i = 0; i < o.length; ) {
        var mark
        if (flag) {
            mark = o.indexOf(key) + len
            flag = 0
        } else {
            var newLen = o.substring(i).indexOf(key)
            mark = newLen != -1 ? newLen + len : o.length + 1
        }
        var tmp = o.substring(i, i + mark)
        if (tmp.indexOf(key) != -1) {
            newStr += tmp + ins
        } else {
            newStr += tmp
        }
        i += mark
    }
    return newStr
}
var ns = insertStr(ori, search, inset)
console.log(‘原始字符串:’ + ori)
console.log(‘新字符串:’ + ns)

NO.7、获取窗口可见区域宽度和高度
javascript 代码

function getViewSize() {
    var de = document.documentElement
    var db = document.body
    var viewW = de.clientWidth == 0 ? db.clientWidth : de.clientWidth
    var viewH = de.clientHeight == 0 ? db.clientHeight : de.clientHeight
    return Array(viewW, viewH)
}
var wh = getViewSize()
console.log(‘clientWidth: ‘ + wh[0] + ‘; clientHeight: ‘ + wh[1] + ‘.’)
console.log(
    ‘window.innerWidth: ‘ +
        window.innerWidth +
        ‘; window.innerHeight: ‘ +
        window.innerHeight +
        ‘.’,
)

NO.8、正则去除字符串空格
javascript 代码

//正则去除字符串开头空格
function ltrim(s) {
    return s.replace(/^(\s*| *)/, ”)
}
//正则去除字符串结尾空格
function rtrim(s) {
    return s.replace(/(\s*| *)$/, ”)
}
//正则去除首尾空格
function trim(s) {
    return s.replace(/(^\s*)|(\s*$)/g, ”)
}
//正则去除空格(换种写法)
String.prototype.trim = function() {
    return this.replace(/(^\s*)|(\s*)|(\s*$)/g, ”)
}
//示例
var str = ‘ s t r ‘
var ltm = ltrim(str),
    rtm = rtrim(str),
    tm = trim(str),
    atm = str.trim()
console.log(ltm)
console.log(rtm)
console.log(tm)
console.log(atm)

NO.9、字符串返序
javascript 代码

function reversed(str) {
    return str
        .split(”)
        .reverse()
        .join(”)
}
//示例
var s = ‘abc’
console.log(reversed(s))

No.10、阻止事件冒泡
javascript 代码

function preventBubble(e) {
    e && e.stopPropagation
        ? e.stopPropagation()
        : (window.event.cancelBubble = true)
}
//这里参数 e 必须是一个事件,如
//obj.onclick = function(e){ //codes };

No.11、阻止浏览器默认事件
javascript 代码

function preventDefault(e) {
    e && e.preventDefault
        ? e.preventDefault()
        : (window.event.returnValue = false)
}
//e 为某一事件

//16-05-20更新
No.12、
javascript 代码

/* —– 将NodeList转化为数组 —– */
var els = document.querySelectorAll(‘a’)
console.log(els instanceof Array) //false
//方法一
var arr1 = [].slice.call(els)
console.log(arr1 instanceof Array)
var arr1_1 = Array.prototype.slice.call(els)
console.log(arr1_1 instanceof Array)
//方法二
var arr2 = Array.from(els)
console.log(arr2 instanceof Array)

No.13、
javascript 代码

/* —— 数组元素洗牌 —— */
var list = [1, 2, 3, 4]
var arr = list.sort(function() {
    return Math.random() – 0.5
})
console.log(arr)

NO.14、
javascript 代码

/* —— replace替换单个和所有字符串 —— */
var string = ‘Allen Allen’
//单个
console.log(string.replace(/en/, ”)) //”All Allen”
//单个
console.log(string.replace(/en/g, ”)) //”All All”

NO.15、
javascript 代码

/* —— 提高数组循环性能,缓存array.length —— */
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
for (var i = 0, len = array.length; i < len; i++) {
    console.log(array[i])
}

NO.16、
javascript 代码

/* —— ||运算符的使用:将默认值作为第二个参数传入 —— */
function User(name, age) {
    this.name = name || ‘Oliver Queen’
    this.age = age || 27
}
var u1 = new User()
console.log(u1.name + ‘ / ‘ + u1.age)
var u2 = new User(‘Barry Allen’, 25)
console.log(u2.name + ‘ / ‘ + u2.age)

NO.17、
javascript 代码

/* —— &&运算符的运用 —— */
function test() {
    console.log(‘run’)
}
if (1) {
    test()
}
//上述式子可以简写为:
1 && test()
//如果条件为false的情况
0 && test()
//”run”会被输出几次?

NO.18、
javascript 代码

/* —— !!操作符的运用 —— */
function Account(cash) {
    this.cash = cash
    this.hasMoney = !!cash
}
var account = new Account(100)
console.log(account.hasMoney) //true
var emptyAccount = new Account(0)
console.log(emptyAccount.hasMoney) //false

NO.19、函数自执行的三种方式:
javascript 代码

1.()();
2.!function() { } ();
3. + function () { }();
firefox前端开发插件
前端开发常用谷歌插件
前端插件如何开发
» 本文来自:前端开发者 » 《原生Javascript的N个开发技巧》
» 本文链接地址:https://www.rokub.com/6353.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!