JavaScript提升,对JS的一点理解
写好JS的原则 各司其职
HTML,CSS,JS职能分离
好的UI组件具备正确性,扩展性,复用性
过程抽象
应用函数式编程思想
案列一 各司其职 深夜食堂
写一段JS,控制一个网页,让它支持浅色和深色两种浏览模式。
第一版代码
const btn = document.getElementById('modeBtn');btn.addEventListener('click', (e) => {const body = document.body;if(e.target.innerHTML === '') {body.style.backgroundColor = 'black';body.style.color = 'white';e.target.innerHTML = '';} else {body.style.backgroundColor = 'white';body.style.color = 'black';e.target.innerHTML = '';}});
代码看懂了,JS是这么写的吗,基本语法学过一点但没这么用过,即是用JS来控制CSS,没有职能分离。其实也用
第二版代码
const btn = document.getElementById('modeBtn');btn.addEventListener('click', (e) => {const body = document.body;if(body.className !== 'night') {body.className = 'night';} else {body.className = '';}});
专业一点的,实现了一些职能分离,让人一眼看懂,其实第一版也能看懂吧。。。个人认为。。。不过写得确实漂亮!
第三版
不用JS,通过CSS和HTML实现
CSS伪类选择器,修改状态,匹配HTML中id,实现,隐藏,在label里赋值的状态,即绑定状态。就不贴代码了,有点牛!直接避免了写JS代码。
总结 HTML/CSS/JS各司其责应当避免不必要的由JS直接操作样式可以用class来表示状态纯展示类交互寻求零JS方案 案列二 组件封装
经典轮播图
定义HTML结构,无序列表
div嵌套ul再嵌套li
CSS
行为:JS 定义API
主要是这些函数。命名挺好的,见名知意,驼峰命名YYDS。
()
()
()
()
()
实现的代码就不贴了,还是比较简单的(大概。。)
主要是代码细节和一些函数没学过比较难理解,看着简单,真自己从零写还是挺难的。
() 根据指定的id属性值得到对象
语法:
obj= . ( sID )
参数:
sID :必选项。字符串()。
返回值:
obj:对象()。
()
获取文档中 class=“” 的所有元素:
var x = .(“.”);
返回 对象。
对象表示节点的集合。可以通过索引访问,索引值从 0 开始。
提示: 你可以使用 对象的 属性来获取匹配选择器的元素属性,然后你可以遍历所有元素,从而获取你想要的信息。
()
() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。
JS事件流
实现状态,小圆点,自定义事件解耦,比较复杂,也不贴全部代码了,CV也没太多意义
const detail = {index: idx}const event = new CustomEvent('slide', {bubbles:true, detail})this.container.dispatchEvent(event)
JS组件封装的基本过程
尽量不要让HTML,CSS,JS绑定,让组件插件化。
要添加新功能,实现对应代码后依赖注入,不用修改其他代码,把组件注入JS就行了
HTML模板化
甚至能够让HTML模板化,解耦 与JS的差不多,通过方法去生成HTML代码,将代码写入HTML,这样插入图片的时候,不用修改HTML CSS
class Slider{constructor(id, opts = {images:[], cycle: 3000}){this.container = document.getElementById(id);this.options = opts;this.container.innerHTML = this.render();this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');this.cycle = opts.cycle || 3000;this.slideTo(0);}render(){const images = this.options.images;const content = images.map(image => `${image}"> `.trim());return `
${content.join('')}`;}...}
() 方法用于在提供的容器参数 里渲染一个 React 元素 。
() 方法返回对该组件的引用(或者针对无状态组件返回 null)。
就是在JS里面写HTML代码并插入,跟我学JAVA 的.print()方法差不多,写起来挺折磨,毕竟JS里面没有HTML的代码补全,其中还用到了表达式取值EI,这个到好理解一点。
trim() 方法用于删除字符串的头尾空白符,空白符包括:空格、制表符 tab、换行符等其他空白符等。
其他函数百度把,见名知意硬理解也行hhh
抽象
相当于手写一个小框架?继承出其他插件,注册给组件,再渲染,实现最后的封装。
总结
实现封装的原则
还可以改进
比如 :CSS组件化。
让各个部分各司其职,虽然写在了同一个文件里。
案列三 过程抽象
例如:
const list = document.querySelector('ul');const buttons = list.querySelectorAll('button');buttons.forEach((button) => {button.addEventListener('click', (evt) => {const target = evt.target;target.parentNode.className = 'completed';setTimeout(() => {list.removeChild(target.parentNode);}, 2000);});});
用户2秒内点击多次,因为child已经被移除了,调试工具会报错。提示已经移除,但其实不影响使用。。。确实,还是有影响的,因为例子很单一,实际开发中非常复杂,一个小BUG引发的错误有时候挺离谱的。
为了能够让“只执行一次“的需求覆盖不同的事件处理,我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
手动实现once方法
function once(fn) {return function(...args) {if(fn) {const ret = fn.apply(this, args);fn = null;return ret;}}}
高阶函数
HOF
function HOF0(fn) {return function(...args) {return fn.apply(this, args);}}
这个函数就是等价高阶函数,不论怎么给args,fn最终都会调用这个函数,等价。
常用的高阶函数
纯函数,行为造成的结果永远可以预期,输入确定,输出即确定。
在工程中,纯函数比较好调试。
编程范式 命令式
注重怎么做