能够独立的书写一个库,是很多开发者或者HR认为区分技能的一个标志,而且还存在一个鄙视链
切图的<用JS<从网上趴代码<自己写简单js<自己写组件<自己数据交互<自己写库给别人用<写nodejs等后台js<自己写后台组件和数据库交互的,
虽然我觉得这个鄙视链很幼稚,但是不能不说很多人拿自己写库作为一个技能区分标准,不管怎样写库都是一个提升技能的好办法,然而并不难。
好,我们看看写库之前需要什么准备知识。
1.严格模式
很多库一开始就是这样子的,
(function(global){
//严格模式
'use strict'
})(window);
不墨迹直接说严格模式的好处,
1.更利于调试,当不定义变量直接用的时候如果不适用严格模式不会报错,而是结果不对。这个很难调试,因为大部分时间这种错误是你单词拼写错误,不报错。
2.防止出现低级错误 除了上面的问题,还有比如if里面定义函数造成问题的情况
3.修复了很多不利的bug和擅长无用功能 比如with
听不懂我上面那三条也没事记住一个字就够了,以后必须用!
2.初始化。
举个例子写一个jquery的css方法,简单点儿,只实现设置宽高颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大彬哥版权所有翻录必究</title>
<meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864">
<meta name="copyright" content="尼古拉斯·屌·大彬哥">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
</style>
<script>
function css(obj,width,height,color){
obj.style['width'] = width+'px';
obj.style['height'] = height+'px';;
obj.style['background'] = color;
}
document.addEventListener('DOMContentLoaded',function(){
var oDiv = document.querySelector('#div1');
css(oDiv,200,100,'red');
},false);
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
这样写至少有两问题,
1.参数多了我记不住顺序,就死翘翘了。
2.参数多了我忘写两个,就死翘翘了。
怎么解决用json的无序和增加默认值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大彬哥版权所有翻录必究</title>
<meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864">
<meta name="copyright" content="尼古拉斯·屌·大彬哥">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
</style>
<script>
function css(obj,json){
json.width = json.width||100;
json.height = json.height||100;
json.background = json.background||'#cccccc';
obj.style['width'] = json.width+'px';
obj.style['height'] = json.height+'px';;
obj.style['background'] = json.background;
}
document.addEventListener('DOMContentLoaded',function(){
var oDiv = document.querySelector('#div1');
// css(oDiv,{width:200,height:50,background:'red'});
css(oDiv,{background:'red'});
},false);
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
简单吧。
3.数据类型判断
我们有时候经常要判断用户输入的数据类型。上代码,重点是对象和数组的判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大彬哥版权所有翻录必究</title>
<meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864">
<meta name="copyright" content="尼古拉斯·屌·大彬哥">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
</style>
<script>
//usbnofunc
// undefine string boolean number
//这几个直接用typeof 不考虑new Number这些情况,神经病才这么用,这里不墨迹
// alert(typeof 'abc' === 'string');
//看看null,不要以为null类型是object 这孙子是一个bug
// alert(typeof null === 'object');
// 判断数组
var arr = [1,3];
function isArray(value){
if (typeof Array.isArray === "function") {
return Array.isArray(value);
}else{
return Object.prototype.toString.call(value) === "[object Array]";
}
}
alert(isArrayFn(arr));// true
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
知道你可能不了解数组的判断方式,但是我想告诉你,两件事:
1.看别人的库很有必要,因为你写的不周全人家已经很周全拿过去用就行了,前提是你知道原理。
2.不是每一个东西都会用到,不要为了学一个东西而去学,你一定是解决实际问题,比如很多人不会用call,bind,apply.其实是因为他们不知道用在哪,学以致用。
看别人库是最快的学习方法,推荐两个库,一个是loadash,一个是underscore.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。