// 此变量只会在此区域生效,使用完之后垃圾回收机制自动回收
// 不会污染全局变量
let jquery = {};
})(window)
- 命名空间的细粒度划分
// 在 jquery.js 中
let jquery = (function () {
// some code here
}());
// 在 jquery.dom.js 中
let jquery.dom= (function () {
// some code here
}());
// 在 jquery.css.js 中
let jquery.css = (function () {
// some code here
}());
4.1 什么叫耦合?
-
指一程序中,模块及模块之间信息或参数依赖的程度(官方解释)
-
举个例子:
-
多个零件在一起,组成了一辆车,各零件之间存在耦合
-
电脑主机与显示屏,存在耦合
-
在程序语言中,也会有耦合,比如A模块依赖于B模块
-
我们通常是不需要耦合度很高的,除非特定组件,这样才可以达到高复用
-
举个例子,比如布加迪的轮胎,是找米其林高度定制的,只能适用于布加迪车型,其它品牌车型是用不了的(耦合度越高,复用性越低)
-
-
而电脑主机与显示器,一般耦合度就很低了,A品牌电脑主机可以用B,C,D品牌各型号的显示器,所以复用性高,可以自由组合。
-
4.2 松耦合
-
当修改一个组件而不需要更改其他组件时,就做到了松耦合
-
耦合度视情况而定,复用性组件必须低耦合
如何松耦合?
- 将JS从CSS中抽离:不要使用CSS表达式
//不好的做法
.box{width: expression(document.body.offsetWidth + ’px’)}
- 将CSS从JS中抽离:通过JS修改CSS样式时,使用className或classList,不要逐条修改style样式
//不好的做法一
ele.style.color = ‘red’;
ele.style.left= ‘10px’;
//不好的做法二
ele.style.cssText =‘color:red;left:10px;’;
.reveal{color:red;left:10px;}
//好的做法一
ele.className += ‘reveal’;
//好的做法二
ele.classList.add(‘reveal’);
-
将JS从HTML中抽离:从JS文件放入外置文件中
-
将HTML从JS中抽离:不要在innerHTML中拼接DOM结构,而是使用字符串模板,如handlerbars
5.1 提炼函数
-
在javascript开发中,大部分时间都在与函数打交道,所以希望这些函数有着良好的命名,函数体内包含的逻辑清晰明了。
-
如果一个函数过长,不得不加上若干注释才能让这个函数显得易读一些,那这些函数就很有必要进行重构
-
如果在函数中有一段代码可以被独立出来,那最好把这些代码放进另外一个独立的函数中,这是一种很常见的优化工作。
-
项目越大,必须拆分得越细,好维护(函数也是如此)
-
千万不要一个函数从奶奶家写到外婆家去了
这样做的好处主要有以下几点:
-
避免出现超大函数
-
独立出来的函数有助于代码复用
-
独立出来的函数更容易被覆写
-
独立出来的函数如果拥有一个良好的命名,它本身就起到了注释的作用
比如在一个负责取得用户信息的函数里面,还需要打印跟用户信息有关的信息,那么打印的语句就可以被封装在一个独立的函数里:
let getUserInfo = function(){
ajax( ‘http:// xxx.com/userInfo’, function( data ){
console.log( 'userId: ’ + data.userId );
console.log( 'userName: ’ + data.userName );
console.log( 'nickName: ’ + data.nickName );
});
};
//改成:
let getUserInfo = function(){
ajax( ‘http:// xxx.com/userInfo’, function( data ){
printDetails( data );
});
};
let printDetails = function( data ){
console.log( 'userId: ’ + data.userId );
console.log( 'userName: ’ + data.userName );
console.log( 'nickName: ’ + data.nickName );
};
5.2 尽量减少参数
-
调用一个函数时需要传入多个参数,那这个函数是让人望而生畏的(甚至调用起来还会骂娘~)
-
必须搞清楚这些参数代表的含义,必须小心翼翼地把它们按照顺序传入该函数。
-
在实际开发中,向函数传递参数不可避免,但应该尽量减少函数接收的参数数量
比如我们需要封装一个CSS操作库:
- 第一版的代码
function cssTransform(ele, attr, val){
// ele 要操作的元素
// attr 运动属性 缩放,旋转
// val 具体值
if(!ele.transform){
ele.transform = {};
}
if(typeof val === “undefined”){
// 取值阶段
// 取不到 设置默认值
if(typeof ele.transform[attr] === “undefined”){
switch(attr){
case “scale”:
case “scaleX”:
case “scaleY”:
case “scaleZ”:
// attr是scale 默认值是1 其它都是0
ele.transform[attr] = 1;
break;
default:
ele.transform[attr] = 0;
}
}
// 取值完毕 返回该值
return ele.transform[attr];
}else{
// 赋值阶段
ele.transform[attr] = val; // 设置属性 方便取值
let transformVal = “”;
for(var s in ele.transform){
switch(s){
case “scale”:
case “scaleX”:
case “scaleY”:
case “scaleZ”:
transformVal += " " + s + “(”+(ele.transform[s])+“)”;
break;
case “rotate”:
case “rotateX”:
case “rotateY”:
case “rotateZ”:
case “skewX”:
case “skewY”:
transformVal += " " + s + “(”+(ele.transform[s])+“deg)”;
break;
default:
transformVal += " " + s + “(”+(ele.transform[s])+“px)”;
}
ele.style.WebkitTransform = ele.style.transform = transformVal;
}
}
}
-
我们需要传入三个参数,这就导致了传参的复杂性
-
可以将它绑定到HTML元素上,减少传参
HTMLElement.prototype.cssTransform = function (prop, value){
var transform,
transformValue = “”;
if(this.transform === undefined) {
this.transform = transform = Object.create(null);
}
if(value !== undefined){
// 赋值阶段
this.transform[prop] = value;
transform = this.transform;
for(var name in transform){
switch(name){
case “scale”:
case “scaleX”:
case “scaleY”:
case “scaleZ”:
transformValue += " " + name + “(”+ transform[name]+“)”;
break;
case “rotate”:
case “rotateX”:
case “rotateY”:
case “rotateZ”:
case “skewX”:
case “skewY”:
transformValue += " " + name + “(”+ transform[name] + “deg)”;
break;
default:
transformValue += " " + name + “(”+ transform[name] + “px)”;
}
this.style.WebkitTransform = this.style.transform = transformValue;
}
}else{
// 取值
return this.transform[prop];
}
}
-
现在就只需要两个参数了
-
核心代码没变,事件直接绑定在元素上,每一个html都拥有这个原型方法
-
调用更加方便,传参更加简单
6.1 合并条件判断
-
如果一个函数体内有一些条件分支语句,而这些条件分支语句内部散布了一些重复的代码,那么就有必要进行合并去重工作。
-
假如有一个分页函数paging(),该函数接收一个参数currPage,currPage表示即将跳转的页码。
-
在跳转之前,为防止currPage传入过小或者过大的数字,要手动对它的值进行修正,详见如下代码
let paging = function( currPage ){
if ( currPage == 0 ){
currPage = 0;
jump( currPage ); // 跳转
}else if ( currPage == totalPage ){
currPage = totalPage;
jump( currPage ); // 跳转
}else{
jump( currPage ); // 跳转
}
};
- 可以看到,负责跳转的代码jump(currPage)在每个条件分支内都出现了,所以完全可以把这句代码独立出来
let paging = function( currPage ){
if ( currPage == 0 ){
currPage = 0;
}else if ( currPage == totalPage ){
currPage = totalPage;
}
jump( currPage ); // 把jump 函数独立出来
};
6.2 条件语句过多,提炼成函数
-
在程序设计中,复杂的条件分支语句是导致程序难以阅读和理解的重要原因,而且容易导致一个庞大的函数
-
假设现在有一个需求是编写一个计算商品价格的 getPrice(),商品的计算只有一个规则:如果当前正处于夏季,那么所有冬装将以5折出售
let getPrice = function( price ){
let date = new Date();
if ( date.getMonth() > 6 && date.getMonth() < 10 ){ // 冬天
return price * 0.5;
}
return price;
};
- 判断是否处于夏季
if ( date.getMonth() > 6 && date.getMonth() < 10 )
-
这句代码要表达的意思很简单,就是判断当前是否正处于夏天(7 - 9月)。
-
尽管这句代码很短小,但代码表达的意图和代码自身还存在一些距离,阅读代码的人必须要多花一些精力才能明白它传达的意图。
-
其实可以把这句代码提炼成一个单独的函数,既能更准确地表达代码的意思,函数名本身又能起到注释的作用
let isSummer = function(){
let date = new Date();
return date.getMonth() > 6 && date.getMonth() < 10;
};
let getPrice = function( price ){
if ( isSummer() ){ // 夏天
return price * 0.5;
}
return price;
};
7.1 高效循环
-
在函数体内,如果有些代码实际上负责的是一些重复性的工作
-
合理利用循环不仅可以完成同样的功能,还可以使代码量更少
-
以for循环为例,最常规写法
for (let i = 0; i < arr.length; i++) {
// do something…
}
-
大多数人都是这种写法,这种写法的缺点在于,每次循环都要去读取一次数组的长度,性能上并不友好
-
变量情况的优化写法
for (let i = 0, j = arr.length; i < j; i++) {
// do something…
}
-
将长度进行存储,之后循环无需再去读取长度
-
这只是上面写法的一种变体,另一种写法而已,谈不上优化。因为无块级作用域,所以和上面的效果是一样的
-
优化版
for (let i = arr.length - 1; i >= 0; i–) {
// do something…
}
- 推荐的写法,它在第上面的基础上节约了一个变量
8.1 性能至关重要
-
性能是创建网页或应用程序时最重要的一个方面,特别是加载性能,如果让用户等久了,别人干脆不等了,会造成用户流失
-
用户对于应用的体验普遍要求提高了(现在来说,2s 内打不开网页的都是不合格的网站)
-
应用的性能瓶颈,依然是在js上
8.2 优化方向
1. 删除未使用的js代码
-
未使用的功能性代码以及与之相关的代码(它一样的会编译,运行)
-
多余的依赖(不需要的及时删除)
2. 数组与对象避免使用构造函数
-
构造函数是啥?
-
new Array(), new Object()等
demoObj = () => {
let obj = new Object()
obj.name = ‘朱小明’
obj.age = 10
obj.sex = ‘男’
return obj
}
- 推荐写法
demoObj = () => {
let obj = {
name: ‘朱小明’,
age: 10,
sex: ‘男’
}
return obj
}
3. 避免全局变量
-
js 的垃圾回收机制是不会销毁全局变量的
-
所以它会常驻内存
4. 合理使用闭包
-
闭包可以提供面向对象编程的便利,有私有属性和方法
-
由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存
-
过度使用闭包可能会导致内存占用过多的问题。
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
bj
}
3. 避免全局变量
-
js 的垃圾回收机制是不会销毁全局变量的
-
所以它会常驻内存
4. 合理使用闭包
-
闭包可以提供面向对象编程的便利,有私有属性和方法
-
由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存
-
过度使用闭包可能会导致内存占用过多的问题。
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-RqEXOmce-1715229894757)]
[外链图片转存中…(img-34s1jnEg-1715229894757)]
[外链图片转存中…(img-I8DbWZ3S-1715229894758)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!