太原网站建设外包,中国做乱的小说网站,如何做一个论坛网站,wordpress 制作网站我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注小歌谣一起学习前后端知识 运行效果
首先我们来看一下原生js实现的效果 下面就开始直接上代码了
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#my-tab {width: 500px;height: 500px;border: 1px solid #000;margin: 50px auto;}.tab-wrapper {height: 50px;border-bottom: 1px solid #000;}.tab-item {float: left;width: 33.33%;height: 50px;text-align: center;line-height: 50px;}.tab-item.current {background-color: #000;color: #fff;}.page-wrapper {position: relative;height: 450px;}.page-item {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 450px;text-align: center;line-height: 450px;}.page-item.current {display: block;}/style
/head
bodydiv idmy-tab data[{tab: 选项1,page: 页面1},{tab: 选项2,page: 页面2},{tab: 选项3,page: 页面3}]!-- div...tab按钮/divdiv...页面/div --/divscript srcjs/utils.js/scriptscript srcjs/tpl.js/scriptscript srcjs/myTab.js/scriptscriptnew MyTab(#my-tab);/script
/body
/htmlutil.js
var tools (function () {function tplReplace (tpl, replaceObj) {return tpl.replace(/\{\{(.*?)\}\}/g, function (node, key) {return replaceObj[key.trim()];})}return {tplReplace: tplReplace}
})();tpl.js
var tpl (function () {function tab (field) {switch (field) {case tab:return (div classtab-item {{ current }}{{ tab }}/div);case page:return (div classpage-item {{ current }}{{ page }}/div);default:break;}}return {tab: tab}
})();Mytab.js
;(function (doc, tpl, tools) {function MyTab (el) {this.el doc.querySelector(el);this.data JSON.parse(this.el.getAttribute(data));this._index 0;this.init();}MyTab.prototype.init function () {this._render();this._bindEvent();}MyTab.prototype._render function () {var tabWrapper doc.createElement(div);var pageWrapper doc.createElement(div);var oFrag doc.createDocumentFragment();tabWrapper.className tab-wrapper;pageWrapper.className page-wrapper;this.data.forEach(function (item, index) {tabWrapper.innerHTML tools.tplReplace(tpl.tab(tab), {tab: item.tab,current: !index ? current : });pageWrapper.innerHTML tools.tplReplace(tpl.tab(page), {page: item.page,current: !index ? current : });});oFrag.appendChild(tabWrapper);oFrag.appendChild(pageWrapper);this.el.appendChild(oFrag);}MyTab.prototype._bindEvent function () {var doms {oTabItems: doc.querySelectorAll(.tab-item),oPageItems: doc.querySelectorAll(.page-item)}this.el.addEventListener(click, this._handleTabClick.bind(this, doms), false);}MyTab.prototype._handleTabClick function () {var _doms arguments[0],tar arguments[1].target,className tar.className.trim();if (className tab-item) {_doms.oTabItems[this._index].className tab-item;_doms.oPageItems[this._index].className page-item;this._index [].indexOf.call(_doms.oTabItems, tar);tar.className current;_doms.oPageItems[this._index].className current;}}window.MyTab MyTab;
})(document, tpl, tools);index.js
// 立即执行函数
// IIFE Immediately Invoked Function Expression
// 立即地 调用 函数 表达式// 函数声明 ! 函数表达式
// function test1 () {
// console.log(Function Declaration);
// }// // 把一个匿名函数函数声明式赋值给一个变量的形式 函数表达式
// var test2 function () {
// console.log(Function Expression);
// }// // () 对于函数名后面的括号叫做执行符号
// test1();
// test2();// 语法错误执行符号只能跟在函数表达式后面
// function test () {
// console.log(Function Declaration);
// }();// 立即地 调用 函数 表达式
// 当一个函数需要立即执行的情况该函数比较形成表达式形式// 1
//(1)//1
//!1// ~1// W3C推荐的立即执行函数的编写规范
// (function () {
// console.log(Function Expression);
// }());// 实践中
// ;(function () {
// console.log(Function Expression);
// })()// ;(function () {
// console.log(Function Expression);
// })()(function test (a, b, c, d) {// 1. 可以创建一个与外界没有任何关联的作用域独立作用域// 2. 执行完成以后自动销毁// 3. ES3 ES5 立场上是没有模块概念立即执行函数来模拟模块化// 封闭作用域、抛出接口// 向外部抛出一系列属性和方法// window上保存属性和方法console.log(test);console.log(test.length);console.log(arguments.length);console.log(Hello);
})(1,2,3);我是歌谣 放弃很容易 但是坚持一定很酷
