首页 > 编程知识 正文

代码之神js实战,狂神javascript笔记

时间:2024-04-24 11:43:24 阅读:334201 作者:UZLM

本文目录一览:

请js大神帮我注释,想自学,详细点,谢谢!代码如下

很抱歉,图中的try catch我研究了一下,是有意义的,我已更改文中内容

如果看不清图片,就右键保存查看

话说你是从哪找的,这代码可以称得上是工业级的了ヽ(ー_ー)ノ

如果图片看不清,这是源代码:

/*函数后的(window, document);表示要执行这个函数。所以要求(window, document)前面必须是一个表达式,而 !正是这个作用。也就意味着这是自调用函数*/

! function (e, t, a) {//这的参数a可能已被弃用

function n() {

c(".love{width: 20px;height: 20px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.love:after,.love:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.love:after{top: -10px;}.love:before{left: -10px;}"), o(), r()

//上面是调用c()并传入了一串css样式与过渡动画,并一起调用o()r()

}

function r() {

/*下面这个for就是遍历整个d,因为与执行代码写在了一行,所以省略{},后面的 ? : 为三元运算符  而后面大意为:判断绘画的图像是否透明,如果是,将其移除,如果不是再传入参数绘画*/

for (var e = 0; e  d.length; e++) d[e].alpha = 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");

requestAnimationFrame(r)

//requestAnimationFrame()是一个请求动画的API,而其中的 r 就是指调用r()

}

function o() {

//这里的=是赋值,==是判断,而是逻辑运算符,而typeof返回的是数据类型 注:这的e应指window对象

var t = "function" == typeof e.onclick  e.onclick;

e.onclick = function (e) {

t  t(), i(e)

}

}

//创建div并添加class为love,再向d中添加一串对象(用于r()的绘画)

function i(e) {

var a = t.createElement("div");

a.className = "love", d.push({

el: a,

x: e.clientX - 5,//注:这的e应指window对象

y: e.clientY - 5,

scale: 1,

alpha: 1,

color: s()

}), t.body.appendChild(a)//添加了a这个子节点

}

function c(e) {

var a = t.createElement("style");//简化代码

a.type = "text/css";

try {

a.appendChild(t.createTextNode(e)/*添加了一个内容为e的文本节点*/)//并作为a的子节点

} catch (t) {//这里的t纯属需要,无实意

a.styleSheet.cssText = e

}

//这的try catch语句意义为如果上文的e无法添加,则会将a.styleSheet.cssText赋值为e

t.getElementsByTagName("head")[0].appendChild(a)

//getElementsByTagName("head")[0].appendChild(a) 表在第一个head处添加子节点a

}

function s() {

return "#cc2a5d"//这只返回一个颜色=RGB(204,42,93)

}

var d = [];

//下面这个是对requestAnimationFrame方法进行了一个全面兼容 ||也是个逻辑运算符

e.requestAnimationFrame = function () {

return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {

setTimeout(e, 1e3 / 60)//这的e应指是window对象

}

}(), n()

}(window, document);//这的window对应参数e,document对应参数t

// rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")

//顺便说一下上面应是生成随机颜色

《AngularJS实战》epub下载在线阅读全文,求百度网盘云资源

《AngularJS实战》(陶国荣)电子书网盘下载免费在线阅读

资源链接:

链接:

提取码: j82i  

书名:AngularJS实战

作者:陶国荣

豆瓣评分:6.3

出版社:机械工业出版社

出版年份:2015-9-1

页数:251

内容简介:

近来,国内开发者对Angular的学习越来越热,有一个非常重要的原因在于Angular框架与以往任何一套前端框架都不同,它的主旨是克服HTML在构建应用上的不足,并补足这些应用的缺陷,如使用大括号语法进行数据绑定、使用DOM控制结构来实现对页面元素的控制等一系列的方法,同时,Angular又是一个完整的端对端的解决方案,可以非常轻松地构建一个CRUD应用,并非常方便地实现测试、发布的功能。

本书通过理论与实践相结合的方式,精选了92个简洁、实用的实例,用由浅入深、逐层推进的方式,详细地展示了Angular作为前端Web页面开发新利器的方方面面。通过本书的学习,读者不仅可以全面了解并掌握整个Angular框架的详实内容,而且还能体会到Angular框架强大功能所带来的代码的优化,快速、高效地开发出受人喜爱的Web应用。

本书主要内容:

1.对Angular特点、适用范围、开发环境进行讲解,并开发简单的Angular页面应用;

2.对Angular表达式、控制器、模板中的过滤器、过滤器的应用的详细讲解;

3.对Angular数据绑定与作用域功能的详细讲解;

4.对依赖注入、注入标记、场景的详细讲解;

5.对Angular中的MVC各个组成部分Model、Controller、View组件进行讲解;

6.介绍了Angular服务的概念,并讲解服务的创建、管理和在控制器中注入服务;

7.对Angular于服务端的交互、单元测试和交互安全进行了详细的讲解;

8.开发Angular应用时的注意事项和最佳实践;

《Node.js实战》pdf下载在线阅读,求百度网盘云资源

《Node.js实战》([美] Mike Cantelon)电子书网盘下载免费在线阅读

链接:

提取码:1234  

书名:Node.js实战

作者:[美] Mike Cantelon

译者:吴海星

豆瓣评分:8.1

出版社:人民邮电出版社

出版年份:2014-5

页数:356

内容简介:

服务器端JavaScript?没错。Node.js是一个JavaScript服务器,支持可伸缩的高性能Web应用。借助异步I/O,这个服务器可以同时做很多事情,能满足聊天、游戏和实时统计等应用的需求。并且既然是JavaScript,那你就可以全栈使用一种语言。

本书向读者展示了如何构建产品级应用,对关键概念的介绍清晰明了,贴近实际的例子,涵盖从安装到部署的各个环节,是一部讲解与实践并重的优秀著作。通过学习本书,读者将深入异步编程、数据存储、输出模板、读写文件系统,掌握创建TCP/IP服务器和命令行工具等非HTTP程序的技术。本书同样非常适合熟悉Rails、Django或PHP开发的读者阅读学习。

本书主要内容:

Node.js及其扩展的安装配置;

全面理解异步编程和事件循环;

学会开发微博、聊天和游戏等热门应用。

作者简介:

作者简介:

Mike Cantelon

Node.js核心框架贡献者、Node社区活跃分子、资深培训师和演讲人。

Marc Harter

Node.js核心框架贡献者。

T.J. Holowaychuk

参与开发了很多Node.js模块,包括流行的Express框架。

Nathan Rajlich

大名鼎鼎的TooTallNate,Node.js核心代码提交者。

译者简介:

吴海星

2001年毕业于南京理工大学。编程数载代码不过几十万,翻译几年码字不过几百万。项目不过十几个,带队不到五十人。年过而立,惴惴不安,愈加发奋,孜孜求学,愿凭绵薄之力,贡献于IT社区。

JS好学吗?

js并不难学。

Js给人那种感觉的原因多半是因为它如下的特点:

A:本身知识很抽象、晦涩难懂,如:闭包、内置对象、DOM。

B:本身内容很多,如函数库、对象库就一大堆。

C:混合多种编程思想。它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不大一样。就好像又是新的一样,让你对曾经学的面向对象产生了怀疑......

D:辛苦学习后又看似和实际应用脱节。通常学了很久的js基础之后,变量、函数、对象你也都略知一二,但一到公司开发项目的时候,却又难以下手。因为公司在开发实际项目的时候通常都是直接用它的衍生库,如:jquery,angular,boostrap,amaze,layui,ueditor等,而这些库又多如牛毛,同时还有自己的难点。让你都不知道该学哪个好,甚至都怀疑自己学的是不是js了,好像有多个版本的js一样,总是学不完......

那么,怎么才能在js领域内学的轻松甚至游刃有余呢?我总结了一些实战意义的js学习经验:

1.首先要紧紧抓住它的地位

时刻都不能忘记,否则很容易犯“一叶障目不见泰山”的错误。不要学了很久就知道js是编程语言,就是写代码,而且特点就是乱七八糟就完了,那样是学不好js的。要时时抓住它的地位,确切的说是它在整个Web中的地位:它属于前端的核心,主要用来操控和重新调整DOM,通过修改DOM结构,从而来达到修改页面效果的目的。要用这个中心思想去指导后续的一切js的学习,并且形成条件反射。

2.要有一条清晰的学习路线

这个只能是过来人给你提供参考了。我的学习路线如下:

A:js基础部分,如:定义变量、函数、数组、字符串等的处理,内置函数、内置对象等;

B:js面向过程编程思想,封装出各个函数,试着用这些去做一些常见的小功能,如:选项卡、自定义多选按钮、自定义播放器、3D幻灯片;

C:js面向对象编程思想,试着去封装一些你自己的对象,提供出有意义的接口出来;

D:学了上述的内容,然后学常用的库,这里必须学jquery;

E:学基于jquery之上的常见插件,如:bootstrap,Layer,富文本编辑器等;

F:综合应用上面的多种库写实际项目的模板,多写几套。

3.从多角度去学习和领悟

充分调动你所学的东西,从多角度去做某一功能,如:以前你是从面向过程角度做的,现在改为从面向对象的角度再来做,或者继续做成可以直接使用的插件,提供属性、方法等出来。争取让你做的这个功能逐渐能使用到实际项目中来。这样的好处:既综合应用了你的所学,又能有实际意义。

4.注意培养信心

此时的你,不适合一来就看很复杂很炫的网页效果的源代码,也不适合一来就学jquery,angular,vue,bootstrap这些东西。这些内容包含了很多深奥的知识在里面,在没有任何基础的情况下直接学这些,会严重打击你的自信心。而此时你是弱小的,你需要的是培养信心,而不是反过来,否则结局很可能是“夭折”,离学有所成也就遥遥无期了。

5. 多写总结

这种总结不但包括源代码、显示效果截图,还应该很容易犯的错误和对应的解决方法以及最后一两句精简的结论性语句。对自己写的总结不是写完了就了事了,要多回顾、多改进、多精简。到做项目的时候,应该是看里面的一两句话就知道是讲什么了,而不要再去看长篇大论了。

6.构建知识导图

这个可以让你越学越清晰,你可以按你喜欢的任何形式去做,只要自己印象深刻就行。

注意:知识导图也应该是经常修改、修正,让它更合理、更清晰。

学习编程知识,就来北京尚学堂,优秀的师资和多年的编程教育经验,会让你在学习的道路上快人一步。

如何做一名js原生代码高手 不用jq 自己可以封装函数写框架 求大神指条路

看来阁下是做前端的好材料啊

至于人家要不要,那也要看人家对js的需求大不大啊,比如,如果人家只是偶尔使用一下js,那你说会不会要呢?

例外,站长网站优化这个角度来说,并不是js越多、越丰富就越好

优惠的规律是(特别是对于搜索引擎):

能不用flash就尽量别用flash,能不用js就尽量别用js,能不用图片,就尽量别使用图片

按照这么说,你觉得,单会js,平台有多广大了吧?

例外,一个页面js太多,对浏览器的执行负担也越重

总的来说,js要遵循尽量少用的原则

况且,看了一下你做的那个特效,挺漂亮,也挺完善的,但似乎没有什么实际意义,网站是工具,而不是花姑娘,如果工具没有什么实际使用意义,那打扮得再花姑娘,也是废品一个

怎么学好js?

页面要想实现好的互动性Java是必不可少的,特别是在一些网站专题页面对于互动性要求更高,中级和高级web前端工程师js是必须要掌握的,下面为大家详细介绍一下Java。

虽然仍有一些人对 Java 的批评特别是对Java 用于后端任务心存疑虑,但这些并不妨碍Java成为广泛用于客户端的语言,成为前端开发必不可缺少的工具。Java和html一样都是客户端(浏览器执行)的语言,通常Java脚本是通过嵌入在HTML中来实现功能的。

下面为大家介绍java的特点:

1、java是一种解释性脚本语言不进行预编译,而c、c++等编程语言都是先编译后执行,java是逐行解释运行的。

2、基于对象的语言,它不仅可以创建对象,也能使用现有的对象。

3、以嵌入HTML页面,也可写成单独的js文件。

4、多平台运行,在大部分浏览器浏览器的支持下,可以在多种平台下运行比如Android、iOS等。

那么,怎么才能在js领域内学的轻松甚至游刃有余呢?我总结了一些实战意义的js学习经验:

首先要紧紧抓住它的地位

时刻都不能忘记,否则很容易犯“一叶障目不见泰山”的错误。

不要学了很久就知道js是编程语言,就是写代码、而且特点就是乱七八糟就完了,那样是学不好js的。

要时时抓住它的地位,确切的说是它在整个WEB中的地位:它属于前端的核心,主要用来操控和重新调整DOM,通过修改DOM结构,从而来达到修改页面效果的目的。

要用这个中心思想去指导后续的一切js的学习,并且形成条件反射。

要有一条清晰的学习路线

这个只能是过来人给你提供参考了。

我的学习路线如下:

A:js基础部分,如:定义变量、函数、数组、字符串等的处理,内置函数、内置对象等。

B:js面向过程编程思想,封装出各个函数,试着用这些去做一些常见的小功能,如:选项卡,自定义多选按钮,自定义播放器,3D幻灯片;

C:js面向对象编程思想,试着去封装一些你自己的对象,提供出有意义的接口出来;

D:学了上述的内容,然后学常用的库,这里必须学jquery;

E:学基于Jquery之上的常见插件,如:bootstrap,Layer,富文本编辑器等。

F:综合应用上面的多种库写实际项目的模板,多写几套。

注意学习方法

我的学习方法总结如下:

A:多买几本国外的js书籍,不要购买那种20天精通之类的书。

否则你是很难学通的,更怕的是:本来你买本好书自学3个月可能学会的,它们硬是能折腾你两年......

书籍推荐(仅供参考)

《Java DOM编程艺术》

《Java权威指南》

《java DOM高级程序设计》

《Java设计模式》

《锋利的jquery》

争取把书上的功能都自己练习多次,不是一次。书读百篇,其义自见。

B:从多角度去学习和领悟

充分调动你所学的东西,从多角度的去做某一功能,如:以前你是从面向过程角度做的,

现在改为从面向对象的角度再来做,或者继续做成可以直接使用的插件,提供属性、方法等出来。争取让你做的这个功能逐渐能使用到实际项目中来。

这样的好处:既综合应用了你的所学,又能有实际意义。

C:一定不要好高骛远

不要放过哪怕很小的动手机会,如做一个选项卡。

千万不要认为有了类似的甚至更好的插件就不需要自己写了,知识是别人的,不是你的,你即使会用了也对你的技术技能水平没有任何提升。

你要多问自己,如果要我来做,我该怎么做?

D:脚踏实地的同时,也不要脱离实际

多看现在网上已经出现的效果好的功能,让它去激发你的学习热情,尽量去学着模拟,调动你的知识去和实际相结合。

E:多写总结

这种总结不但包括源代码、显示效果截图,还应该很容易犯的错误和对应的解决方法以及最后一两句精简的结论性语句。

对自己写的总结不是写完了就了事了,要多回顾,多改进,多精简。到做项目的时候,应该是看里面的一两句话就知道是讲什么了,而不要再去看长篇大论了。

F:构建知识导图

这个可以让你越学越清晰,比如:,你可以按你喜欢的任何形式去做,只要自己印象深刻就行。

注意:知识导图也应该是经常修改、修正,让它更合理、更清晰。

注意事项

A:充分利用一切手段

很多人总感觉时间紧,没有大块的时间学习。我要说你不会学了,你不应该只是抱怨,而是要利用一切手段去学习,要知道,不一定只有看书才叫学习。

当你冷静的坐在某个地方,思考了一下,总结了一下,你也都叫学习,但凡有灵感,就可以记录下来,比如:记录在手机上,等方便了再记录在专门的地方。这都叫学习。

B:贵在坚持

要沉的下心。没有一蹴而就的成功,否则那也不是成功,只能叫“侥幸”。

不但要老老实实的把每个功能都试着去实现,而且要精益求精的不断去修正,这个过程是漫长的,也是考验一个人是否是人才的标准。

C:注意培养信心

此时的你,不适合一来就看很复杂很炫的网页效果的源代码,也不适合一来就学jquery,angular,vue,bootstrap这些东西。

这些内容包含了很多深奥的知识在里面,在没有任何基础的情况下直接学这些,会严重打击你的自信心。

而此时你是弱小的,你需要的是培养信心,而不是反过来,否则结局很可能是“夭折”,离学有所成也就遥遥无期了。

D:多跟学的好的过来人学习

站在巨人的肩上,才能看的更远。

E:不要浪费在工具的不停选择上

js的编辑工具很多,如果无从下手,建议使用:sublime,或者使用Hbuilder;很多公司里的技术人员都用这些,你直接用这个也减少了和别人之间的沟通问题。

我也是用这个,感觉很好。

总结

感觉js学起来“杂而乱”的原因是因为你太“聪明”了,一开始就管的太宽,利害得失也计算的太精细。

要求太完美则心里承受能力下降,很容易出现“障”。此时,你应该“笨”一些,不要考利那么长远,“傻人有傻福”,只要做好今天就够了。

一些不合理的学习方法和心态也让你迷失了自我:如:心浮气躁、眼高手低、好高骛远,这些都会让你在“乱七八糟”的js面前深陷迷雾、不能自拔。

此时,你应该重新定位自己的位置,重新去认识js,放下包袱,方能轻松上阵。把杯子先倒空,才能灌新水......

其实,js是前端的核心。影响越来越深的互联网+会渴求越来越多的js人才,只有经历过真正刻骨铭心的学习经历,才能造就出赢得未来的真正精英。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。