第五章:
1. 题外话:首先大声疾呼,"js 无罪",有罪的是滥用 js 的那些人。js 的 father 布兰登 - 艾克,当初为了应付工作,10 天就赶出了这个 js,事后还说人家 js 是 c 语言和 self 语言 "约" 的产物,(百度百科说的,这些)。。。。。一个可怜的孩子 - js。然后命运弄 "人",js 此时已世人皆知。可能是因为 js 的毁誉参半,它老爸才不想承认它吧。如果 js 会说话,它可能会给它布兰登 - 艾克说,"你当初怎么不把 ******* 在墙上"。这让我想起了,一个老故事:老木匠干了一辈子,退休前,领导说,你再最后建一座房子,老木匠心里只想着辞职,房子建的着急,也不好。房子完工以后,老板把房子钥匙给了老木匠,说是送给他的。。人呐,还是认真工作,认真生活的好。事情永远总是猜不到的。
2. 题外话:大家都在赶潮流,而不问实际需求,我们公司的客户就是这样的滴:"这个人家的网站有,我们也要有。"
3.1) 平稳退化:①含义:让禁用了 js 的用户,以让可以访问网站。(网上大部分人说,没有人会去特意关闭 js。还有还有 -'"关闭 js 的那些刁民,是不配享受这高大上的技术的呢")
②这么做,虽然让禁用了 js 的用户体验不如没有禁用之前的好,但总比不能访问的好。
③平稳退化的:有利于 seo,因为搜索机器人大都不认识 js。
④说实话,除了书中例举的这个 href 的实例,我还没有想到其它的平稳退化的例子。。。。。。。。。。
3.2)渐进增强:①含义:分离内容(html),样式(CSS),行为 (js)
②打个 "碧玉":一颗糖,报上糖纸(样式)很漂亮,去掉糖纸依然,可以食用(内容)
3.3)向后兼容:①含义:铺好退路,做好预防 ---- 如果网页中,没有了正在使用的元素或者无法获取需要使用的元素怎么办。
②常用技术 - 对象检测技术(现在常用方法。使用时记得去掉括号,否则测试的将是结果。效果相当于对浏览器的一个警示牌:如果没有这个方法,请你离开)
- 浏览器嗅探技术(随着浏览器的五花八门,这种技术多少显的有气无力)
4. 小知识点:①获取当前链接的 href 属性 - this.href
1
这里同时采用了一下书中提及的平稳退化的技术 - 即使用户关闭了 js,js 链接以前可以跳转。
③return 后面的代码不会执行(一般为了阅读性也写作 return false),但是只对当前函数有效:
- 1(function() {
- 2
- if (1 == 2) {
- 3 console.log("1");
- 4
- return false;
- 5
- }
- 6
- for (var i = 0; i < 1; i++) {
- 7 console.log("2");
- 8
- return false;
- 9
- }
- 10 console.log("3");
- 11
- })();
- 12 console.log("4");
最后会打印出 2 和 4
5. 题外话:网站不过是文档和数据的结合,图片不过是像素点的组成。万物归于简单,由简单又幻化出复杂。
6. 题外话:前端收集用户数据 --- 数据存入数据库 ---- 生成模型 ---- 用于决策等
决策 ---- 生成模型 ----- 数据库生成数据 --- 前端展示数据
7. 题外话:这本书还是挺适合刚刚工作的人的。可以说是一种查漏补缺把
8. 性能优化:①尽量少去访问 dom:
工作的时候,会偷懒,写如下的代码:
1 if(document.getElementById("imgShow")){2 alert() 3 }
但是这样写:a,每次判断,都会搜索整个 dom 树。效率低下,不如搜索一次,存在变量中的方法效率高。
前几天,网站轮播需要修改,我想的是增加一个 div+js 去实现效果。而项目经理的意思是通过 css 去实现
③合并和放置脚本:
④压缩脚本:
除了书中提及的三个工具,还可以使用 grunt。
第六章:
1. 此章,主要是把上一张的思想,结合到实例中。
2. 结构化程序设计:
工作中,会写出如下代码:
- 1
- if (222) {
- 2
- if (111) {
- 3
- if (3333) {
- 4 5
- }
- 6
- }
- 7
- }
这些写,会对后期的修改带来很多不便。并且阅读不方便。
这样的思路是:如果正确就这行。可以修改一下思路为,如果错误就停止。则代码变成了:
- if (222) {
- return false;
- }
- if (111) {
- return false;
- }
- if (333) {
- return false;
- }
也可以用 if else-if 结构去代替结构化的写法:
- if (222) {}
- else if (111) {}
- else if (333) {}
3. 小知识点:①for 循环中经常用到 i,变量命名为 i 是一种传统做法:i 的含义是 "increment"(递增)
②可以使用三元运算去代替 if-else,使得代码简短,不过逻辑关系表达不明显。用哪个,看你心情喽
③onclick 事件对于键盘的访问的支持已经不错了(ps:在所有浏览器里,用 tab 键移动到某个链接以后,然后按下回车都会出发 onclick 事件),所以无需特意去绑定一次键盘事件。
④如何让 ul 里面的 li 横向排列,并且居中呢?ul 设置为 text-align:center;li 设置 - display-inline 即可。网上好多使用 postion:relative 的方法。好麻烦的说。
4. 题外话:人生就好像在网上查东西,查着查着就跑偏了,你得经常问一下自己:"我在干嘛"。
5. 题外话:有一种小时候记录流水账的感觉。不过能说出,看书的想法也是一种不错的感觉。
6. 题外话:网上的太多东西都是抄袭,抄书(一字不差),抄百度百科,抄抄抄,换个背景就说自己是自己写的。。。。
来源: