前端如何用原生js开发？20个原生js技巧

前端如何用原生js开发？20个原生js技巧|前端开发者

1、原生JavaScript实现字符串长度截取
html 代码片段

function cutstr(str, len) {<br /><br /> var temp;<br /><br /> var icount = 0;<br /><br /> var patrn = /[^\x00-\xff]/;<br /><br /> var strre = “”;<br /><br /> for (var i = 0; i < str.length; i++) {<br /><br /> if (icount < len – 1) {<br /><br /> temp = str.substr(i, 1);<br /><br /> if (patrn.exec(temp) == null) {<br /><br /> icount = icount + 1<br /><br /> } else {<br /><br /> icount = icount + 2<br /><br /> }<br /><br /> strre += temp<br /><br /> } else {<br /><br /> break<br /><br /> }<br /><br /> }<br /><br /> return strre + “…”<br /><br /> }

2、原生JavaScript获取域名主机
html 代码片段

function getHost(url) {<br /><br /> var host = “null”;<br /><br /> if(typeof url == “undefined”|| null == url) {<br /><br /> url = window.location.href;<br /><br /> }<br /><br /> var regex = /^\w+\:\/\/([^\/]*).*/;<br /><br /> var match = url.match(regex);<br /><br /> if(typeof match != “undefined” && null != match) {<br /><br /> host = match[1];<br /><br /> }<br /><br /> return host;<br /><br /> }

3、原生JavaScript清除空格
html 代码片段

String.prototype.trim = function() {<br /><br /> var reExtraSpace = /^\s*(.*?)\s+$/;<br /><br /> return this.replace(reExtraSpace, “$1”)<br /><br /> }

4、原生JavaScript替换全部
html 代码片段

String.prototype.replaceAll = function(s1, s2) {<br /><br /> return this.replace(new RegExp(s1, “gm”), s2)<br /><br /> }

5、原生JavaScript转义html标签
html 代码片段

function HtmlEncode(text) {<br /><br /> return text.replace(/&/g, ‘&amp’).replace(/\”/g, ‘&quot;’).replace(/</g, ‘&lt;’).replace(/>/g, ‘&gt;’)<br /><br /> }

6、原生JavaScript还原html标签
html 代码片段

function HtmlDecode(text) {<br /><br /> return text.replace(/&amp;/g, ‘&’).replace(/&quot;/g, ‘\”‘).replace(/&lt;/g, ‘<‘).replace(/&gt;/g, ‘>’)<br /><br /> }

7、原生JavaScript时间日期格式转换
html 代码片段

Date.prototype.Format = function(formatStr) {<br /><br /> var str = formatStr;<br /><br /> var Week = [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’];<br /><br /> str = str.replace(/yyyy|YYYY/, this.getFullYear());<br /><br /> str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : ‘0’ + (this.getYear() % 100));<br /><br /> str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : ‘0’ + (this.getMonth() + 1));<br /><br /> str = str.replace(/M/g, (this.getMonth() + 1));<br /><br /> str = str.replace(/w|W/g, Week[this.getDay()]);<br /><br /> str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : ‘0’ + this.getDate());<br /><br /> str = str.replace(/d|D/g, this.getDate());<br /><br /> str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : ‘0’ + this.getHours());<br /><br /> str = str.replace(/h|H/g, this.getHours());<br /><br /> str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : ‘0’ + this.getMinutes());<br /><br /> str = str.replace(/m/g, this.getMinutes());<br /><br /> str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : ‘0’ + this.getSeconds());<br /><br /> str = str.replace(/s|S/g, this.getSeconds());<br /><br /> return str<br /><br /> } </p><br /> <p>8、原生JavaScript判断是否为数字类型<br /><br /> function isDigit(value) {<br /><br /> var patrn = /^[0-9]*$/;<br /><br /> if (patrn.exec(value) == null || value == “”) {<br /><br /> return false<br /><br /> } else {<br /><br /> return true<br /><br /> }<br /><br /> }

9、原生JavaScript设置cookie值
html 代码片段

function setCookie(name, value, Hours) {<br /><br /> var d = new Date();<br /><br /> var offset = 8;<br /><br /> var utc = d.getTime() + (d.getTimezoneOffset() * 60000);<br /><br /> var nd = utc + (3600000 * offset);<br /><br /> var exp = new Date(nd);<br /><br /> exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);<br /><br /> document.cookie = name + “=” + escape(value) + “;path=/;expires=” + exp.toGMTString() + “;domain=360doc.com;”<br /><br /> }

11、原生JavaScript加入收藏夹
html 代码片段

function AddFavorite(sURL, sTitle) {<br /><br /> try {<br /><br /> window.external.addFavorite(sURL, sTitle)<br /><br /> } catch(e) {<br /><br /> try {<br /><br /> window.sidebar.addPanel(sTitle, sURL, “”)<br /><br /> } catch(e) {<br /><br /> alert(“加入收藏失败，请使用Ctrl+D进行添加”)<br /><br /> }<br /><br /> }<br /><br /> }

12、原生JavaScript设为首页
html 代码片段

function setHomepage() {<br /><br /> if (document.all) {<br /><br /> document.body.style.behavior = ‘url(#default#homepage)’;<br /><br /> document.body.setHomePage(‘http://www.jq-school.com’)<br /><br /> } else if (window.sidebar) {<br /><br /> if (window.netscape) {<br /><br /> try {<br /><br /> netscape.security.PrivilegeManager.enablePrivilege(“UniversalXPConnect”)<br /><br /> } catch(e) {<br /><br /> alert(“该操作被浏览器拒绝，如果想启用该功能，请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true”)<br /><br /> }<br /><br /> }<br /><br /> var prefs = Components.classes[‘@mozilla.org/preferences-service;1’].getService(Components.interfaces.nsIPrefBranch);<br /><br /> prefs.setCharPref(‘browser.startup.homepage’, ‘http://www.jq-school.com’)<br /><br /> }<br /><br /> }

13、原生JavaScript判断IE6
html 代码片段

var ua = navigator.userAgent.toLowerCase(); var isIE6 = ua.indexOf(“msie 6”) > -1; if (isIE6) {<br /><br /> try {<br /><br /> document.execCommand(“BackgroundImageCache”, false, true)<br /><br /> } catch(e) {}<br /><br /> }

14、原生JavaScript加载样式文件
html 代码片段

function LoadStyle(url) {<br /><br /> try {<br /><br /> document.createStyleSheet(url)<br /><br /> } catch(e) {<br /><br /> var cssLink = document.createElement(‘link’);<br /><br /> cssLink.rel = ‘stylesheet’;<br /><br /> cssLink.type = ‘text/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a></span>’;<br /><br /> cssLink.href = url;<br /><br /> var head = document.getElementsByTagName(‘head’)[0];<br /><br /> head.appendChild(cssLink)<br /><br /> }<br /><br /> }

15、原生JavaScript返回脚本内容
html 代码片段

function evalscript(s) {<br /><br /> if(s.indexOf(‘<script’) == -1) return s;<br /><br /> var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;<br /><br /> var arr = [];<br /><br /> while(arr = p.exec(s)) {<br /><br /> var p1 = /<script[^\>]*?src=\”([^\>]*?)\”[^\>]*?(reload=\”1\”)?(?:charset=\”([\w\-]+?)\”)?><\/script>/i;<br /><br /> var arr1 = [];<br /><br /> arr1 = p1.exec(arr[0]);<br /><br /> if(arr1) {<br /><br /> appendscript(arr1[1], ”, arr1[2], arr1[3]);<br /><br /> } else {<br /><br /> p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;<br /><br /> arr1 = p1.exec(arr[0]);<br /><br /> appendscript(”, arr1[2], arr1[1].indexOf(‘reload=’) != -1);<br /><br /> }<br /><br /> }<br /><br /> return s;<br /><br /> }

16、原生JavaScript清除脚本内容
html 代码片段

function stripscript(s) {<br /><br /> return s.replace(/<script.*?>.*?<\/script>/ig, ”);<br /><br /> }

17、原生JavaScript动态加载脚本文件
html 代码片段

function appendscript(src, text, reload, charset) {<br /><br /> var id = hash(src + text);<br /><br /> if(!reload && in_array(id, evalscripts)) return;<br /><br /> if(reload && $(id)) {<br /><br /> $(id).parentNode.removeChild($(id));<br /><br /> } </p><br /> <p> evalscripts.push(id);<br /><br /> var scriptNode = document.createElement(“script”);<br /><br /> scriptNode.type = “text/javascript”;<br /><br /> scriptNode.id = id;<br /><br /> scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset);<br /><br /> try {<br /><br /> if(src) {<br /><br /> scriptNode.src = src;<br /><br /> scriptNode.onloadDone = false;<br /><br /> scriptNode.onload = function () {<br /><br /> scriptNode.onloadDone = true;<br /><br /> JSLOADED[src] = 1;<br /><br /> };<br /><br /> scriptNode.onreadystatechange = function () {<br /><br /> if((scriptNode.readyState == ‘loaded’ || scriptNode.readyState == ‘complete’) && !scriptNode.onloadDone) {<br /><br /> scriptNode.onloadDone = true;<br /><br /> JSLOADED[src] = 1;<br /><br /> }<br /><br /> };<br /><br /> } else if(text){<br /><br /> scriptNode.text = text;<br /><br /> }<br /><br /> document.getElementsByTagName(‘head’)[0].appendChild(scriptNode);<br /><br /> } catch(e) {} </p><br /> <p>}

18、原生JavaScript返回按ID检索的元素对象
html 代码片段

function $(id) {<br /><br /> return !id ? null : document.getElementById(id);<br /><br /> }

19、原生JavaScript返回浏览器版本内容
html 代码片段

function browserVersion(types) {<br /><br /> var other = 1;<br /><br /> for(i in types) {<br /><br /> var v = types<i> ? types<i> : i;<br /><br /> if(USERAGENT.indexOf(v) != -1) {<br /><br /> var re = new RegExp(v + ‘(\\/|\\s)([\\d\\.]+)’, ‘ig’);<br /><br /> var matches = re.exec(USERAGENT);<br /><br /> var ver = matches != null ? matches[2] : 0;<br /><br /> other = ver !== 0 && v != ‘mozilla’ ? 0 : other;<br /><br /> }else {<br /><br /> var ver = 0;<br /><br /> }<br /><br /> eval(‘BROWSER.’ + i + ‘= ver’);<br /><br /> }<br /><br /> BROWSER.other = other;<br /><br /> }

20、原生JavaScript元素显示的通用方法
html 代码片段

function $(id) {<br /><br /> return !id ? null : document.getElementById(id); } function display(id) {<br /><br /> var obj = $(id);<br /><br /> if(obj.style.visibility) {<br /><br /> obj.style.visibility = obj.style.visibility == ‘visible’ ? ‘hidden’ : ‘visible’;<br /><br /> } else {<br /><br /> obj.style.display = obj.style.display == ” ? ‘none’ : ”;<br /><br /> }<br /><br /> }<br /><br />

前端如何用原生js开发？20个原生js技巧|网站前端开发

https://www.rokub.com