写了一个非常通俗易懂的造轮子的方法

<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
function cake($c) {
this.c = $c;
this.init();
}
cake.prototype = { // 也可以var p = cake.prototype,后边都是p.init=function(){}; p.w1=function(){}
  constructor: cake,
init: function() {
this.w1();
this.w2();
this.w3();
},
w1: function() {
this.c.css('width', '200');
},
w2: function() {
this.c.css('height', '200');
},
w3: function() {
this.c.css('border', '1px solid red');
}
}
$('.wrap').each(function() {
new cake($(this));
})

补充一个

.active {
color:red;
}
<button class="btn">cilck</button>
<p class="active">aaaaaa</p>
<script src="js/main.js"></script>
<script>
let line = new Line();
</script>

main.js

class Line {
constructor () {
this.btn = this.$('.btn');
this.pTxt = this.$('p');
this.init();
}
init () {
this.btnEvent(); }
// 选择器
$ (select) {
return document.querySelector(select);
} // btn点击事件
btnEvent () {
/*this.btn.addEventListener('click', e => {
e.preventDefault();
this.pTxt.innerHTML = 'bbbbbbbbb'
});*/
this.btn.addEventListener('click', function(e) {
e.preventDefault();
this.pTxt.classList.toggle('active');
}.bind(this));
}
}

  

如何用js造轮子的更多相关文章

  1. 原生js造轮子之模仿JQ的slideDown()与slideUp()

    代码如下: const slider = (function() { var Slider = {}; // the constructed function,timeManager,as such ...

  2. h5engine造轮子

    基于学习的造轮子,这是一个最简单,最基础的一个canvas渲染引擎,通过这个引擎架构,可以很快的学习canvas渲染模式! 地址:https://github.com/RichLiu1023/h5en ...

  3. 第27篇 重复造轮子---模拟IIS服务器

    在写程序的时候,重复造轮子是程序员的一个大忌,很多人对重复造轮子持有反对的态度,但是我觉得这个造轮子的过程,是对于现有的知识的一个深入的探索的过程,虽然我们不可能把轮子造的那么的完善,对于现在有的东西 ...

  4. 除非你是BAT,前端开发中最好少造轮子

    站在前人的肩膀上 HTML.CSS.JavaScript是前端的根基,这是无可否认的事实.正如一辆车当然都是由一堆钢板和螺钉组成的,但是现在还有人拎着个锤子敲敲打打的造车吗?李书福说过,“汽车不过是四 ...

  5. 一起学习造轮子(二):从零开始写一个Redux

    本文是一起学习造轮子系列的第二篇,本篇我们将从零开始写一个小巧完整的Redux,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Promises/A+,Red ...

  6. 一起学习造轮子(一):从零开始写一个符合Promises/A+规范的promise

    本文是一起学习造轮子系列的第一篇,本篇我们将从零开始写一个符合Promises/A+规范的promise,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Pr ...

  7. 一起学习造轮子(三):从零开始写一个React-Redux

    本文是一起学习造轮子系列的第三篇,本篇我们将从零开始写一个React-Redux,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Promises/A+,Re ...

  8. React造轮子:拖拽排序组件「Dragact」

    先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...

  9. 避免重复造轮子的UI自动化测试框架开发

    一懒起来就好久没更新文章了,其实懒也还是因为忙,今年上半年的加班赶上了去年一年的加班,加班不息啊,好了吐槽完就写写一直打算继续的自动化开发 目前各种UI测试框架层出不穷,但是万变不离其宗,驱动PC浏览 ...

随机推荐

  1. csps模拟93序列,二叉搜索树,走路题解

    题面: 模拟93考得并不理想,二维偏序没看出来,然而看出来了也不会打 序列: 对a,b数列求前缀和,那么题意转化为了满足$suma[i]>=suma[j]$且$sumb[i]>=sumb[ ...

  2. 0922CSP-S模拟测试赛后总结

    连发三篇爆炸实录我的心态竟然还这么好…… 昨天题目的D2.稍难. 这也不是我连续拿倒数第一的理由. T1不会.赛时硬写了一个30分的三次方暴力.还有一个地方写挂了.如果不是数据足够水我就爆零了. 也就 ...

  3. sprintf、fprintf和printf这三个函数有什么区别?

    都是把格式好的字符串输出,只是输出的目标不一样:1 printf,是把格式字符串输出到标准输出(一般是屏幕,可以重定向).2 sprintf,是把格式字符串输出到指定字符串中,所以参数比printf多 ...

  4. VS2010-MFC(对话框:消息对话框)

    转自:http://www.jizhuomi.com/software/171.html 前面几节讲了属性页对话框,我们可以根据所讲内容方便的建立自己的属性页对话框.本节讲解Windows系统中最常用 ...

  5. System.Web.Mvc.ControllerBase.cs

    ylbtech-System.Web.Mvc.ControllerBase.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Pub ...

  6. 1.RCC of STM32F103

    开发板用的是8Mhz晶振,即HSE=8,000,000 f103最大支持72Mhz,即SYSCLK=PLLCLK=72Mhz,HSE=8M,所以PLLM=9即可. /* HCLK = SYSCLK * ...

  7. Mysql优化系列之表设计规范和优化

    一.范式 如果详细的讲范式,要写大大大篇文章来讲,这里假设大家知道一些基本的范式规则,我用简洁的语句和例子说明 第一范式:列不可再分,譬如地址字段,可以再细分为省市区门牌号等等(其实还是看需求怎么整) ...

  8. 按指定规则统计list中数据,groupby用法

    有的情况下,只是想要简单地对list中数据,进行分组,查看,可以考虑使用groupby 代码: # groupby需要排序后才能使用 def gb(num): if 0 <= num < ...

  9. DNS配置-BIND安装配置全过程

    下载地址:ftp://ftp.isc.org/isc/ 下载bind,我下载的是bind-9.11.13.tar.gz 我下载的文件放在/root目录下进入目录解压缩 [root@localhost ...

  10. mysql commond record

    CREATE DATABASE IF NOT EXISTS codex_gm DEFAULT CHARACTER SET utf8; service mysqld stop screen -dmS m ...