摘要:总结主要是前端的基础不准吐槽我把总结写在前面特别感谢超级好用的编辑器碰到的所有坑都放在前面。
总结: 主要是前端 JS 的基础 (╯‵□′)╯︵┻━┻不准吐槽我把总结写在前面
1. 碰到的所有坑都放在前面 (。・・)ノ特别感谢超级好用的MarkDown编辑器(づ ̄ 3 ̄)づStackEdit
JS的函数定义时有3个参数, 使用时传入5个实参, 则前3个实参由定义的3个参数获得, 剩下的参数可以通过arguments获取, arguments是一个伪数组, 在这个例子里, 共有5个元素.
2. 小tips== != === !==的区别: 关于JS的 undefined null 还有 === 和 ==
标签内的JS代码用wrap起来, 是因为有的浏览器如果没有这个会无法识别js代码(当然现在大部分浏览器都是没问题的)
使用+来连接多行字符串
跟css相反, 不要使用省略的小数写法
3.2 行间格式不要省略花括号
不要用with语句
不要使用for-in语句来遍历数组
不推荐使用==和!=, 推荐使用===和!==
3.3 JS代码样例 3.3.1 对象定义// case 1: // 对象的定义: var book = { title: "markdown", author: "me" };3.3.2 数组定义
// case 2: // 数组的定义: var color = [ "red", "green" ] ;3.3.3 注释格式
// case 3: // 注释的推荐格式 // 1. 类似这样的单行注释, 用来说明一行代码的功能, 前面加一个空格, 缩进跟代码一致 console.log("我是代码"); /* * 2. 使用这样的格式来作为 * 多行注释 */ console.log(true); // 3. 像这样的提醒类注释跟代码之间隔一个空格 /** 4. 如果要生成文档, 就使用这样的注释 @method 函数的动作 @param {Object} 说明 @return {Object} 说明 **/3.3.4 循环
// case 4: // 如果要使用for-in循环, 最好先使用hasOwnProperty()方法 var p; for (p in object) { if (object.hasOwnProperty(p)) { console.log("p name is " + p); console.log("p value is " + object[p]); } }4. JS工具
JSHint
JSLint
5. JS编写规范 5.1 js和css分离// case 5: // js和css分离, 这个函数支持所有浏览器中给元素添加方法 function addListener(target, type, handler) { if (target.addEventListener) { target.addEventListener(type, handler, false); } else if (target.attachEvent) { target.attachEvent("on" + type, handler); } else { target["on" + type] = handler; } } // 这个函数做*, 加在onclick上 function doSomething() { // do something } var btn = document.getElementById("action-btn"); addListener(btn, "click", doSomething);5.2 js和html分离
不要直接在html里面引用js
5.3 js的全局变量尽量不要使用全局变量
小心不要创建意外的全局变量
5.4 js单一职责主要是为了可扩展性
var MyApplication = { // 这个方法专门处理鼠标点击 handleClick: function(event) { this.showPopup(event); }, // 然后这个方法专门处理鼠标点击产生的动作 showPopup: function(event) { var popup = document.getElementById("popup"); popup.style.left = event.clickX + "px"; popup.style.top = event.clickY + "px"; popup.className = "reveal"; } }; // 将popup加到鼠标点击动作里去的实际应用 addListener (element, "click", function(event) { MyApplication.handleClick(event); });5.5 js的判断 5.5.1 检测引用值, 使用instanceof, 而不要使用!==和=== 5.5.2 数组检测
// 这个函数的作用是判断value是不是数组 function isArray(value) { if (typeof Array.isArray === "function") { return Array.isArray(value); } else { return Object.prototype.toString.call(value) === "[object Array]"; } } // 使用函数判断x是不是数组 isArray(x); // 一般来说, 还可以这样判断 Array.isArray(x) === "[object Array]"5.5.3 属性检测
// 对象的定义, 下面我们要检测这个对象的属性 var object = { count: 0; related: null; }; // 检测对象的count属性 if ("count" in object) { // code here } // 或者可以这样 if (object.hasOwnProperty("related")) { // code } // 或者更详细一点 if ("hasOwnProperty" in Object && object.hasOwnProperty("related")) { // code }5.6 js配置数据和代码分离
把配置数据多带带放在一个对象的属性值中
把配置数据放在Java属性文件中
读取的时候: 使用JSON/JSONP/js
5.7 js抛出自定义错误// 常见的抛出错误方法 throw new Error("error description"); // 定义自己的错误类型 function MyError(message) { this.message = message; } MyError.prototype = new Error();5.8 js阻止修改的3个层次
Object.preventExtension(object);
Object.seal(object);
Object.freeze(person);
5.9 浏览器嗅探首先使用特性检测判断某个属性是否存在
不行再使用用户代理检测检测用户代理字符串
6. JS样例 6.1 使用js实现c语言的sprintf// case 1: // 这个函数, 达到了跟c语言的sprintf一样的效果 function sprintf(text) { // text可以获取传入sprintf里面的第一个参数, args获取包括text在内的所有参数 var i=1, args=arguments; /* * 在这里, 将替换text中的所有replace * 匿名函数将被调用2次, 第一次返回args[1], 第二次返回args[2] * args[0] 等于 text */ return text.replace(/%s/g, function() { return (i < args.length) ? args[i++] : ""; }); } // 使用sprintf函数 var result = sprintf("
./js/hello.js
define(function(){ var moving = function() { $("#btn").addClass("btn-move-class"); }; return { moving: moving } });6.2.4 js文件的requireJS引用
./hello.html
6.2.5 css动画Click
./css/hello.css
@charset "utf-8"; .container {font-family:"Microsoft YaHei","Hiragino Sans GB",Arial,"Lucida Grande",Verdana;} div { height: 60px; width: 90%; margin: auto; font-size: 50px; color: #fff; font-weight: bolder; text-align: center; border-radius: 9999px; background: #338559; } .btn-move-class { -webkit-animation:moving 5s linear infinite; animation:moving 5s linear infinite; } @keyframes moving{ 0%,100% {height:60px;} 50% {height:200px;} } @-moz-keyframes moving /* Firefox */{ 0%,100% {height:0px;} 50% {height:200px;} } @-webkit-keyframes moving /* Safari 和 Chrome */{ 0%,100% {height:0px;} 50% {height:200px;} } @-o-keyframes moving /* Opera */{ 0%,100% {height:0px;} 50% {height:200px;} }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/85919.html
摘要:总结主要是前端的基础不准吐槽我把总结写在前面特别感谢超级好用的编辑器碰到的所有坑都放在前面。 总结: 主要是前端HTML+CSS的基础 (╯‵□′)╯︵┻━┻不准吐槽我把总结写在前面 特别感谢超级好用的MarkDown编辑器(づ ̄ 3 ̄)づStackEdit 1. 碰到的所有坑都放在前面 (。・・)ノ firefox太坑了!css不能实时更新!(╯‵□′)╯︵┻━┻ 用bef...
摘要:关于自己届毕业生一本双非学校,非科班可能和很多人一样,因为小时候喜欢打游戏,所以大学一直想学编程,但因为种种原因,自己来到了一个硬件相关专业,但由于现实和兴趣,自己又从事了软件相关的工作。找实习实习对于之后的秋招来说,是非常非常重要的。 ...
阅读 3115·2021-11-04 16:09
阅读 3015·2021-09-23 11:49
阅读 3570·2021-09-09 09:33
阅读 3499·2021-08-18 10:22
阅读 2011·2019-08-30 15:55
阅读 3579·2019-08-30 15:53
阅读 2625·2019-08-28 18:08
阅读 857·2019-08-26 18:18