奇舞js笔记——第0课——如何写好原生js代码
摘要
1.好的代码职责要清晰,javscript不要用来操作样式;
2.API要设计的合理:通用性,适度的抽象(数据抽象,过程抽象),可扩展性;
3.效率问题:用好的、合适的算法(前端程序员要把自己当程序员)。
注:
1.学习视频地址
2.ppt地址
3.个人感想:
是我hin厉害的师父推荐我看的月影大大的视频,感觉对于我这个小白来说,真的是一遍又一遍的刷新知识面。我觉得像月影大大这种大佬的思路,我接触之后真的是受益匪浅。
所以我总结出来不仅是自己记笔记,也是想分享给想要成为真正的前端“工程师”的前端er。
真的很珍惜这种知识面被刷新的感觉——越学习,越感到自己无知,共勉。
目录
版本3:数据抽象,封装(七八十分)(一定要会)(中规中矩)(项目中用起来不错)
正文
1.问题一:操作DOM
做一个列表单选
版本1,初级工程师:
优点:
在ul上添加事件句柄,由于事件可以冒泡,在点击事件中筛选event.target来处理就可以
问题:
js负责的是“行为”
在js中定义样式,若需求改动后,会导致不灵活
js:不操作DOM样式,操作DOM状态
版本2,中规中矩:
分清职责:
css中添加样式类
js来操作状态(类属性)
版本3,专业版:
这样实现,充分利用html标准,更具有语义性,灵活
操作DOM问题的总结:
1.写 JavaScript 操作 DOM 要注意什么
不要操作DOM样式
(很多wvvm框架禁止直接在js中操作DOM的原因就是这个,害怕写出版本1那种代码)
2. JavaScript 与 HTML、CSS 的职责如何分离
html负责内容,语义
css负责样式
js负责状态,不负责样式
3. 把复杂性放在哪一头,为什么?
4. 框架?原生?:
框架帮你解决了代码写的不好的问题,一旦用惯了,再换框架,会写出问题很多的代码;
写原生的更能意识到自己的问题;
2.问题二:API的设计
三个状态用红(stop)、绿(pass)、黄(wait)表示
要求用 JavaScript 让三个状态轮流切换
每个状态的停留时间是 2 秒
版本1:
css:
优点:
html,css中把三个状态类”stop”,”wait”,”pass”放在父元素上,然后在css中直接用:nth-child操作父元素的某个子元素,这样灵活性很高
缺点:
如果需求增加到 5 盏、10 盏灯?
const traffic = document.getElementById('traffic'); (function reset(){ traffic.className = 'wait'; setTimeout(function(){ traffic.className = 'stop'; setTimeout(function(){ traffic.className = 'pass'; setTimeout(function(){ ... ... ... ... setTimeout(reset, 2000) ... ... ... ... }, 2000) }, 2000) }, 2000); })();
过程耦合 + Callback Hell…… 差评!!!:
代码中,三个状态有顺序,必须先1再2再3,过程耦合;
Callback Hell难以维护
版本2:
优点:
把状态抽取出来,通过数组的下标去操作,更改数据很方便
把数据/状态抽象出来
缺点!!:
依赖于外部变量 stateList、currentStateIndex
封装性不好……差评!!
版本3:封装好(七八十分)(一定要会)(中规中矩)
优点:
把currentStateIndex分装进函数,因为使用者使用不到;
把state的数组和dom元素暴露出来,以便更改;
很重要:::::什么该暴露,什么该封装
缺点:
可复用性差,只有当前的能用到
版本4:(过程抽象)(版本2和3是数据抽象)
抽象出来了一个poll 函数是一个高阶函数(偏函数),返回值是function,说明做了一个过程抽象。
它的参数是一系列函数,返回值也是函数,它的功能是按顺序调用参数中的函数。
小王去开门:person类,是数据抽象;开门,开xx,是过程抽象
bind函数也是一个高阶函数(偏函数),它也返回一个函数,
优点:poll函数可复用,很通用。
例如:
版本5:改需求:改时间
版本2.3.4做了抽象反而不能改时间,版本1可以改,要回去???
promise(是es6里面很重要的概念)
不用promise的版本:
版本6:(高级程序员写的)
内部实现很复杂,但是外部API很好用;可以随意向状态列表添加状态,且每个状态里面可以做很多种事情;
API设计问题总结:
1.写原生的js有很多方向可以写,但是用框架类库模式会很固定
2.避免过程耦合,即上下两个过程有关联(例如版本1中,必须先实现状态1,再状态2...)
3.要知道什么数据该封装,什么不该封装(例如例子中的currentIndex该封装,因为只有在内部实现时要用到它,而状态列表,元素,不该封装,因为与具体的过程实现没关系,而是与外部接口有关系)
4.可复用的过程可以抽象出来(例如例子中的按顺序执行几个行为)
5.与过程无关的数据可以抽象出来(例如例子中的三个状态,等待时间)
3.问题三:效率/性能问题:
版本1:两层循环
效率:两层循环,时间复杂度是O(n^2),效率很低
版本2:利用数组的排序方法sort,先排序,再遍历
效率:
排序时间复杂度n*log(n),遍历复杂度是O(n)
总的就是O(n*logn+n)
如果数组很大的话,效率高很多,比如n=10000
n^2=100000000,n*logn+n=50000
版本3:空间复杂度换时间复杂度
(大致思路就是将1和9中的1放在key上,另一个放在value上)
效率问题总结:
1.程序优化本质上是要用好的算法,要重视算法问题,尤其是在js不止被用在浏览器上时(例如用在服务端时,比如处理图片就要处理大量的像素点,所以算法很重要,可以在leetcode刷题,前端在程序员比鄙视链上,要正式这个问题,别把自己不当程序员)
2.其他优化要了解:http协议特点,资源请求特点,图片格式
4.总结:
1.好的代码职责要清晰,javscript不要用来操作样式
2.API要设计的合理:通用性,适度的抽象,可扩展性
3.用好的、合适的算法(前端程序员要把自己当程序员)
奇舞js笔记——第0课——如何写好原生js代码的更多相关文章
- html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...
- Js笔记-第11课
// 第11课 作用域精解 运行期上下文,当函数执行时,会创建一个成为执行期上下文的内部对象.一个执行期上下文定义了一个函数执行时的环境,函数每次执行时对应的执行期上下文都是独 ...
- Js笔记-第17课
课 // 作业 //深度拷贝 var obj = { name:'rong', age:'25', card:['visa','alipay'], nam :['1','2','3','4','4'] ...
- vue.js笔记1.0
事件: 事件冒泡行为: 1.@click="show($event)" show:function (ev) { ev.cancelBubble=true; } 2.@click. ...
- Pandas进阶笔记 (0)为什么写这个系列
使用Pandas数年之久了,从最早的0.17版本开始接触Pandas,到现在0.25版本,踩过不少坑,面对各种稀奇古怪的bug抓耳挠腮.每每想要解决bug,或者想要实现一个特定的数据操作需求,首先想到 ...
- JavaScript学习笔记:你必须要懂的原生JS(二)
11.如何正确地判断this?箭头函数的this是什么? this是 JavaScript 语言的一个关键字.它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用. this的绑定规则 ...
- JavaScript学习笔记:你必须要懂的原生JS(一)
1.原始类型有哪几种?null是对象吗?原始数据类型和复杂数据类型存储有什么区别? 原始类型有6种,分别是undefined,null,bool,string,number,symbol(ES6新增) ...
- JS面向对象方法(一): 使用原生JS 实现导航栏下多级分类弹出效果
利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...
- HiShop2.x版本中的上传插件分析,得出所用的模板语言为Underscore.js 1.6.0且自己已修改
效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下: <script type="text/j-template" id="tpl_popb ...
随机推荐
- Python 随机生成有效手机号码及身份证
中国那么大,人那么多,几乎人手一部手机.手机号码已经作为各大互联网站的注册账户.同样,身份证更是如此.以下是生成有效手机号码和身份证号. 身份证需要下载districtcode.txt这个文件:htt ...
- 使用redis做mybaties的二级缓存(2)-Mybatis 二级缓存小心使用
Mybatis默认对二级缓存是关闭的,一级缓存默认开启: 下面就说说为什么使用二级缓存需要注意: 二级缓存是建立在同一个namespace下的,如果对表的操作查询可能有多个namespace,那么得到 ...
- Ultimus BPM 金融与证券行业应用解决方案
Ultimus BPM 金融与证券行业应用解决方案 行业应用需求 金融服务业的整合与全球化发展,带来高度竞争的国际市场,所牵涉的产业包括了商业.贷款.投资银行,以及保险公司和许多其它为企业和消费者提供 ...
- EM算法原理总结
EM算法也称期望最大化(Expectation-Maximum,简称EM)算法,它是一个基础算法,是很多机器学习领域算法的基础,比如隐式马尔科夫算法(HMM), LDA主题模型的变分推断等等.本文就对 ...
- (转+原创)java的枚举类型Enum解释
原文:http://www.cnblogs.com/mxmbk/articles/5091999.html 下文中还添加了个人的一些补充和理解. 在Java SE5之前,我们要使用枚举类型时,通常会使 ...
- python基础操作_方法(函数)
#函数,方法#普通方法def hello(): print('hello')hello()#带形参的方法def hello1(name): print('hello%s'%name)hello1('布 ...
- dedecms搜索提示"关键字不能小于2个字节!"
在测试自己制作的搜索页模板时,如果遇到搜索时提示"关键字不能小于2个字节!"!打开plus/search.php把 if(($keyword=='' || strlen($keyword)< ...
- angularjs应用prerender.io 搜索引擎优化实践
上一篇博文(http://www.cnblogs.com/ideal-lx/p/5625428.html)介绍了单页面搜索引擎优化的原理,以及介绍了两个开源框架的优劣.prerender框架的工作原理 ...
- cpio用法详细说明
1.1 cpio基本介绍 cpio是一个非常古老的归档工具.已逐渐被tar替代,但是有些功能是tar不存在的,所以还是分享下它的用法. cpio - copy files to and from ar ...
- 10亿美元融资腾讯跟头,Grail要用基因测序做癌症早期筛查
癌症超早期筛查:"在干草堆中寻找缝衣针"癌症是人类的噩梦,尤其是中晚期癌症,但很多时候,当患者感觉到身体不适而去医院检查时,病情都已经到了中晚期,很难治愈.而有研究表明,早期癌症患 ...