您现在的位置是：亿华云 > 应用开发
JavaScript写库前的准备工作
亿华云2025-10-04 02:41:23【应用开发】7人已围观
简介能够独立的书写一个库，是很多开发者或者HR认为区分技能的一个标志，而且还存在一个鄙视链：切图的<用JS<从网上趴代码<自己写简单js<自己写组件<自己数据交互<自己
能够独立的写库书写一个库，是准备很多开发者或者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.
【本文为专栏作者“面包理想学院”的原创稿件，转载请通过联系作者获取授权】
戳这里，亿华云看该作者更多好文
很赞哦!（4684）
