到DOM中,你可以利用JavaScript来控制该节点并且赋予样式,尽管它从未出现在你的HTML中。
这里提供了一个简单的例子,通过JavaScript是如何改变某个DOM元素里的内容来展示基本的JavaScript与DOM树的交互,首先需要选择到对应DOM节点
var container = document.getElementById(“container”);
然后使用该DOM节点的属性来改变其内容
container.innerHTML = 'New Content!';
这只是一个简单的例子,你还可以用JavaScript DOM API干更多的事情,你可以阅读以下的MDN的教程来进行了解, The Document Object Model.
Events
使用DOM进行Web与XML开发示例
怎么创建一个DOM树
DOM介绍
利用选择器来定位DOM节点
老生常谈了,不能舍本逐末,还是要专注于理解概念而不是简单地表达式使用,要在心中默问自己几个问题:
DOM是什么鬼?
怎么查询元素?
怎么进行事件监听?
怎么改变DOM节点的属性?
对于常见的JavaScript与DOM之间的交互, 可以参考PlainJS出品的 JavaScript Functions and Helpers 。这个站点会给你提供很多的例子,譬如 如何操作DOM元素样式 或者 怎么添加键盘事件响应等等。如果你希望再深入一点,同样推荐Eloquent JavaScript中的DOM介绍的章节。
Inspector
在浏览器中,我们可以用开发者工具来调试客户端运行的JavaScript代码,譬如Firefox的Firebug和Chrome的开发者工具,可以帮你审视网页源代码,追踪JavaScript的执行过程和结果,打印出调试语句,还能瞅瞅譬如网络请求、Cookie等等资源。这个 tutorial 是关于如何使用Chrome的开发者工具,如果你是火狐的话,瞅瞅这个 tutorial。
Practicing the basics
上面聊完了基础的语法和交互操作,但是对于不知道有多少个坑的JS而言不过沧海一粟,不过我把一些新的东西放到了最后一节介绍,这边先放松放松,做点小实验玩玩。
Experiment 1
实验1里让我们把目光投向 AirBnB, 打开你浏览器的 page inspector, 然后点击 console tab。这样你就可以在页面上执行一些JavaScript脚本了,你可以尝试着控制一些界面元素,改个字体样式啥的。
我选用airbnb的网站作为介绍是因为它的CSS类命名比较直接,并且没有被编译器混淆过,当然,你也可以看看百度啊之类的调试。
如果你在那边卡住了,别忘了去看看JavaScript Functions and Helpers 指南,我在这边也给一个小小的例子:
var header = document.querySelector(‘.text-branding’)
header.innerText = ‘Boop'
这个实验的主要目的就是回顾下你学到的JavaScript的基本语法以及一些DOM操作的知识。
Experiment 2
第二个实验使用 CodePen-JonathanZWhite编写一个较大较复杂的JavaScript交互项目,会用到一些programmatic logic 。这个实验的关注点会综合你在前端攻略-从路人甲到英雄无敌中学到的关于HTML与CSS的知识,这边有几个参考项目:
More JavaScript
看过了基础知识,动手做了几个小实验,下面我们会进入一些更有难度的概念的学习。这边的列举的概念可能之间并么有什么必然的练习,不过我还是把它们放在了一起是因为它们能有助于你通往专家的道路,并且也能有助于你理解下面关于框架部分的讲解。
Language
实际上JavaScript并不是一门浅薄的语言,虽然它只用了短短一周时间就创建出来了,它包含了很多高级的概念与用法(并且因为历史版本问题存在着大量的Polyfill)。这里是列举出了常见的概念,同样地 Eloquent JavaScript也攘括了这些点:
原型与继承
作用域
闭包
回环
事件冒泡
Apply, call, and bind
Callbacks and promises
变量与提升
Currying
Imperative vs. Declarative(命令式VS声明式)
就如同常见的两种编程方式,JavaScript与DOM交互的方式也分为命令式与声明式。一般来说,声明式编程关注于发生了啥,而命令式则同时关注与咋发生的。
var hero = document.querySelector('.hero')
hero.addEventListener(‘click’, function() {
var newChild = document.createElement(‘p’)
newChild.appendChild(document.createTextNode(‘Hello world!’))
newChild.setAttribute(‘class’, ‘text’)
newChild.setAttribute(‘data-info’, ‘header’)
hero.appendChild(newChild)
})
}
上面这个小例子就是典型的命令式编程,我们手动地查找到某个元素,然后将UI状态存储在DOM中,换言之,就是关注于如何达成某个目标。命令式编程的优势在于很直观,不过缺点也很明显,整个程序的健壮性很差,也不易于扩展。譬如如果某人把那个元素的类名从hero
变成了villain
,那么事件监听器就永远不会被调用了。
声明式编程可以较好地解决这个问题,刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理,这样就能让开发者专注于发生了啥,这里推荐一波 The State Of JavaScript — A Shift From Imperative To Declarative 与 Three D’s of Web Development #1: Declarative vs. Imperative。本指南并没有一上来先给你看Angular或者React的HelloWord,而是告诉你命令式的做法和声明式的区别在哪,这样你就能更好地理解为啥我们会需要框架。
响应式与声明式也可以看看笔者在我的前端之路里面提到的从以DOM操作为核心到数据流驱动的页面,关注发生了啥本质上就是关注状态与数据,而不是额外的操作。
Ajax
虽然已经有了很多关于Ajax的教程指南,还是建议你阅读下官方的Ajax 介绍。Ajax即是一个允许Web页面通过JavaScript与服务端完成交互的技术,Ajax也是前后端分离的一个基石。
譬如,如果你要去提交一个表单,那么就要先收集下输入的内容然后通过HTTP请求发送到服务端。你在发Twitter的时候,就是Twitter客户端发送HTTP请求到Twitter的服务器,然后根据服务端响应来修正页面状态。推荐阅读下 What is Ajax来深入理解Ajax,如果还是觉得有些疑惑,那可以看看 Explain it like i’m 5, what is Ajax,要是还不够,那就回到eloquentjavascript chapter 关于HTTP的章节吧。
早期,笔者是习惯用jQuery的$.ajax来进行Ajax操作,不过现在已经慢慢统一到了标准的 Fetch,你可以看看由 Dan Walsh写的文章来多了解下Fetch,它涵盖了Fetch的工作原理与基本的用法。因为Fetch在部分低版本浏览器上还不能使用,因此我们会选择一些Fetch polyfill ,文档是 这里。
jQuery
一些jQuery使用技巧
也需要你压根用不到jQuery
到这里,咱们一直是用单纯的JavaScript来进行节点操作,怪麻烦的说,而且在不同的浏览器里还有写不同的Polyfill。实际上,已经有了大量的DOM节点的操作库来帮我们简化常用代码,其中最著名的就是jQuery,一个当年前端程序猿的标配。要记住,jQuery是一个典型的命令式的操作库,它编写与前端井喷之前,在那个年代有着无可比拟的先进行。虽然今天,我们应该用像Angular、React这样的声明式编程的框架来进行复杂UI界面的编写,但是仍然是推荐学习下jQuery,毕竟还有大量的项目仍然是基于jQuery的。
jQuery官方提供了一个Learning Center,是不错的基础学习的教程,它会一步一步带你学习重要的概念,譬如animations 与 event handling。如果你想要更多的学习资源,那么可以参考Codecademy的 jQuery course。
不过一定要记住,jQuery并不是唯一的进行DOM操作的库, PlainJS 和 You Might Not Need jQuery 也提供了基于原本的JavaScript代码怎么实现常见的jQuery中的操作。
ES5 vs. ES6
在现代的前端开发中,另一个绕不过去的概念就是 ECMAScript。现在主要有两个常用的JavaScript版本,分布是ES5和ES6,它们呢都是JavaScript使用的ECMAScript标准。你可以把它们看做不同版本的JavaScript,ES5是在2009年定稿,然后使用至今。而ES6, 也叫作ES2015,是一个新的标准,它提供了很多譬如常量, 类, 以及 模板字符串等等特性。ES6是兼容ES5的,不像Python3和Python2,并且很多ES6带来的语法特性都是在ES5的封装的基础上,譬如ES6中的类是基于JavaScript prototypal inheritance的syntactical sugar。
这里推荐一个不错的ES6的教程ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning 以及Dan Wahlin的Getting Started with ES6 — The Next Version of JavaScript.。看完了这些,你也可以看看ES5和ES6特性的详细列表: ES6 Features以及 Github repository 。
More Practice
恭喜你,成功到达存档点,你已经学了不少关于JavaScript的知识了,下面让我们来温习一波。
Experiment 3
Experiment 3 着重于如何利用jQuery进行常见的DOM节点操作,本实验中,我们会以一种更加结构化的方式。我是选择了Flipboard的主页作为范本,你可以参考下Codecademy的Flipboard’s home page and add interactivity with JavaScript 教程。
Experiment 4
按照惯例,实验4呢又把你学过的HTML和CSS的知识跟JavaScript的知识混杂到了一起进行锻炼,这是一个关于钟的实验,各种各样的钟。在动手之前推荐你看看 Decoupling Your HTML, CSS, and JavaScript来了解下JavaScript混入的情况下基本的CSS类名命名规范。同样的,我也准备了一系列的CodePen来当做你的教材:
Flat Clock
jQuery Wall Clock
Fancy Clock
Retro Clock
Simple JavaScript Clock
如果你要更多的例子,请在CodePen上搜索 clock 。你可以选择先写基本的HTML与CSS样式然后再加上JavaScript逻辑,也可以先写JavaScript逻辑代码然后再放入到样式中。你可以选择用jQuery,不过尽量还是用纯粹的JavaScript代码吧。
JavaScript Frameworks
小怪清完了,下面开始刷BOSS了,拿起你的剑吧勇士,美丽的公主就在前方。我们在这一章节会开始介绍常用的JavaScript框架。我们不提倡重复造轮子,但是一定要理解轮子并且能给它上上油或者换换螺丝钉,这些JavaScript框架可以帮你更好地组织你的代码。它们为前端开发者提供了可复用的解决方案,就好像所谓的设计模式一样,它可以用来解决状态管理、路由以及性能优化等等,正是因为有了这些框架,我们才能更好地构建web apps。
贪多嚼不烂,我不打算介绍所有的JavaScript框架,不过还是列个目录下来,这些框架包括但不限于 Angular, React + Flux, Ember, Aurelia,Vue, 以及 Meteor。你并不需要学习所有的框架,选择一个然后深入,最合适自己的才是最好的。
便如译者在文首所说,我们并不能盲目地追赶框架,而是要理解框架背后的思想与原则。另一个在译者自己的实践中,会尽可能的基于ES6进行抽象,这样保证了即使换框架也能有很好地兼容于复用。
Architectural Patterns
在学习框架之前,首先要了解下常用的架构模式:
model-view-controller
model-view-viewmodel
model–view–presenter
这些模式可以用来创建清晰的多层应用关注分离 。关注分离是一个设计原则,即是讲一个巨石型应用切分到不同的领域专注层,譬如前面我们都是在HTML中保留应用状态,而你可以使用一个JavaScript对象,或者说是Model层来存储应用状态。如果你想要了解地更多,可以先看下Chrome Developers里对于MVC的讲解,然后阅读Understanding MVC And MVP (For JavaScript And Backbone Developers)。阅读这篇文章的时候不要在意有没有学过Backbone,只要关注MVC与MVP比较的部分。 Addy Osman也写了另一篇关于MVVM的文章Understanding MVVM — A Guide For JavaScript Developers。如果你想了解MVC的源起,可以参考Martin Fowler的 GUI Architectures。最后,阅读这篇JavaScript MV* Patterns, Learning JavaScript Design Patterns也是个很不错的在线免费电子书。
Design Patterns
JavaScript的框架也并没有重复造轮子,很多还是基于已有的设计模式,你可以认为设计模式是在软件开发中用于解决通用问题的可复用的方法。尽管理解设计模式并不是学习一个框架的前提,不过我还是建议你可以先了解一些:
Decorator
Factory
Singleton
Revealing module
Facade
Observer
理解这些设计模式不仅会让你变成一个更好地设计师,也能有助于你更好地理解这些框架。
AngularJS
AngularJS 是一个 JavaScript MVC框架,不过有时候也是一个 MVVM框架。它由在2010年由Google进行维护并且迅速在社区刮起了一波浪潮。
Angular是一个典型的声明式框架,这里推荐一个阅读,可以帮你理解命令式编程到声明式编程的转变: How is AngularJS different from jQuery。如果你希望了解更多关于Angular的知识,可以参考Angulardocumentation。还有一个叫做 Angular Cat 的渐进教程。 angular2-education 是一个由 Tim Jacobi.整理的完整的关于angular2的教程,另外,还有John Papa编写的 最佳实践指南 。
React + Flux
Angular帮助开发者解决了很多前端系统构建中遇到的问题,不过Angular 1存在着极大的性能问题。今年才出的Angular 2也是组件化思维,不过太过庞大。另一个常用的小而美的工具就是 React,专注于用户交互的构建。React可以认为是MVC层中的View层,React只是一个Library,通常与 Flux或者Redux一起结合起来使用。
Facebook最早设计React与Flux是为了解决MVC中的一些缺陷与扩展问题,可以参考著名的Hacker Way: Rethinking Web App Development at Facebook演讲,这里介绍了Flux的起源。首先,我们来学习React,推荐是直接看React 官方文档,然后看看React.js Introduction For People Who Know Just Enough jQuery To Get By 来帮你从jQuery思维转移到React思维。
可以参照译者的React Introduction来获取更多关于React参考资料的东东
在你对React有了基本的了解之后,下面就可以开始学习Flux了,同样的首先推荐官方Flux文档。然后你可以看看Awesome React, 这里包含了很多你可以慢慢咀嚼的内容。
Practicing with Frameworks
又到了实践环节了,现在你已经对于JavaScript框架与架构模式有了基本的了解,是时候带一波节奏了。在这两个实验中,注意体会架构设计的理念,首先要保证 DRY, 然后有一个 清晰的分层概念, 最后要注意 单一职责原则.
Experiment 5
实验5是不用框架重构著名的TodoMVC,换言之,就是用最基础的JavaScript代码来实现一个TodoMVC。本实验的目的就是为了向你展示在没有框架介入的情况下怎么构建一个完整的MVC应用
你可以参考 TodoMVC,第一步就是创建一个新的本地项目然后建立三个基本的组件,你可以参考Github repository这里的完整代码。如果你觉得现在的自己能力还不足以Hold住整个项目,表担心,先把它们下载下来,然后慢慢实践。
Experiment 6
Experiment 6 就是跟着Scotch.io的教程来实现一个下面这样的站点:
Build an Etsy Clone with Angular and Stamplay 会教你怎么基于Angular来构建一个网站,提供APIs并且在一个大型的项目中进行架构组织。学完了这些之后,你要能理解以下这些问题:
啥是web app?
怎么用Angular实践 MVC/MVVM?
API是啥,肿么用?
怎么组织与管理一个大型的CodeBase?
将一个UI切分为声明式组件的好处在哪?
如果这个教程还不够,那还可以看看Build a Real-Time Status Update App with AngularJS & Firebase。
Experiment 7
第7个实验是将React与Flux综合使用,即利用React来构建一个TODOMVC。你可以参考Facebook’s Flux documentation site这个教程,它会教你一步一步地从零开始构建界面然后将Flux应用到整个Web项目中。通过了第一关,就可以移步到 怎么利用React、Redux与Immutable.js构建一个TodoMVC 以及 利用Flux与React构建一个微博客。
Stay current
就像前端一样,JavaScript也永远不会停下前进的步伐。
下面列举了一系列博客,多读读,能够随时了解最新的发展与消息:
Smashing Magazine
JavaScript Weekly
Ng Weekly
Reddit JavaScript
JavaScript Jabber
Learn by example
Styleguides
Codebases
Lodash
Underscore
Babel
Ghost
NodeBB
KeystoneJS
Further Reading
你可能感兴趣的:(redux,react.js,frontend,javascript)
移动端城市区县二级联动选择功能实现包
good2know
本文还有配套的精品资源,点击获取简介:本项目是一套为移动端设计的jQuery实现方案,用于简化用户在选择城市和区县时的流程。它包括所有必需文件:HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项,实现城市到区县的联动效果,支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用,并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
用代码生成艺术字:设计个性化海报的秘密
本文围绕“用代码生成艺术字:设计个性化海报的秘密”展开,先概述代码生成艺术字在海报设计中的独特价值,接着介绍常用的代码工具(如HTML、CSS、JavaScript等),详细阐述从构思到实现的完整流程,包括字体样式设计、动态效果添加等,还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势,为设计师提供打造个性化海报的实用指南,助力提升海报设计的独特性与吸引力,符合搜索引擎SEO标准
为什么学习Web前端一定要掌握JavaScript?
web前端学习指南
为什么学习Web前端一定要掌握JavaScript?在前端的世界里,没有什么是JavaScript实现不了的,关于JS有一句话:凡是可以用JavaScript来写的应用,最终都会用JavaScript,JavaScript可运行在所有主要平台的所有主流浏览器上,也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
Vue CSR 到 Nuxt 3 SSR 迁移:技术实现与问题解决实录
二倍速播放
前端 vue.js
1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于:搜索引擎优化(SEO):初始HTML响应仅包含一个根div元素,实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎(如Google)能够执行部分JavaScript,但其抓取效率和稳定性不如直接获取完整HTML。非
12. 什么是事件委托
yqcoder
前端面试-CSS css 面试
总结事件委托(EventDelegation)是JavaScript中一种重要的事件处理机制,它利用了事件冒泡的特性,将事件的处理程序绑定到父元素或祖先元素上,而不是直接绑定到具体的子元素上。什么是事件委托?事件冒泡:在DOM中,事件通常会从触发元素开始,然后逐级向上冒泡到其父元素、祖先元素,直到window对象。核心思想:事件委托的核心思想是利用事件冒泡机制,在父元素上监听事件,而不是在每个子元
Ubuntu安装LAMP
L_h1
测试 ubuntu linux
在安装vim时遇到了一个问题:E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend),是否有其他进程正占用它?解决办法:强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud
关于前端的性能优化
性能优化主要涵盖了以下四个方面:(tip:仅代表个人总结,如有不当,还希望看到的大佬多多指示)减少网络请求:合并文件、使用CDN、启用缓存。优化资源加载:代码分割、懒加载、图片压缩。提升渲染性能:减少重绘回流、防抖节流、使用WebWorker。监控和迭代:定期使用工具检测性能,持续优化。一、网络层面优化减少HTTP请求合并文件:将多个CSS或JavaScript文件合并成一个,减少请求次数。使用C
时间组件库Day.js那些事
前端小白花
javascript 开发语言 ecmascript
一、简介1.什么是Day.jsDay.js是一个轻量级,易于使用的JavaScript日期库,提供了强大的日期和时间处理功能,与Moment.js的API设计相似,但具有更高的性能和更小的体积。Day.js官网https://day.js.org/docs/zh-CN/installation/installation2.优势a.特点轻量级:Dayjs的压缩后大小只有2KB左右,远小于Moment
JavaScript正则表达式去除括号但保留内容与去除括号与内容
Selicens
javascript 正则表达式
项目上碰到一个需求,是取多个递增文件的文件名,类似于test(1).txt、test(2).txt,但是不需要括号,只要test1、test2这种格式,最开始想到的办法就是js里的replace替换,先上一个比较笨但是也能实现效果的例子letname="test(1).txt"letdata=name.split('.')[0].replace('(','').replace(')','')con
网络安全第14集
不灭锦鲤
web安全 安全
前言:小迪安全14集,这集重点内容:0、什么是js渗透测试?在javascript中也存在变量和函数,存在可控变量和函数就有可能存在在漏洞,js开发的web应用和php、java开发的区别是,js能看得到的源代码,php看不到,但是风险就是未授权访问、配置信息泄露(加密算法、key秘钥等),源代码看得到,存在更多的url泄露,从而可能会出现未授权访问,从url,前提:web应用可以采用前端语言或后
25年不倒的“犀牛书“:为什么《JavaScript权威指南第7版》仍是程序员的案头圣经?
阿蒙Armon
javascript 开发语言 ecmascript
25年不倒的"犀牛书":为什么《JavaScript权威指南第7版》仍是程序员的案头圣经?当一本技术书能连续畅销25年,历经7次迭代仍稳坐领域第一梯队,它必然藏着超越时代的硬实力。《JavaScript权威指南(原书第7版)》就是这样一部传奇——豆瓣9.4分的封神之作,程序员口中的"犀牛书",从网景时代到ES2020,它始终是JavaScript开发者的终极参考书。如果你还在为原型链、闭包、异步编
redux 中的 hooks
改了一个昵称
react.js react.js
文章目录redux中的hooksuseSelector基础使用第二个参数shallowEqualReselectReselect的核心API:`createSelector`结合`shallowEqual`高级用法:组合选择器多层选择器带参数的选择器深入解析:Reselect的工作原理(1)输入选择器的顺序(2)缓存的生命周期(3)深层嵌套状态的处理总结useDispatch获取dispatch函
什么是JSON,如何与Java对象转化
doublez234
java json spring spring boot
JSON概念JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它易于人阅读和编写,同时也易于机器解析和生成。JSON基于JavaScript(ECMAScript(欧洲计算机协会制定的js规范))编程语言的一个子集,但它是一种独立于语言的数据格式,被广泛应用于各种编程语言和平台之间的数据交换。JSON的主要特点:轻量级:JSON格式非常简洁,只包含必要的数据信
APP开发入门:了解主流的编程语言
agi大模型
Python 职业与职场 程序员 开发语言 数据分析 编程语言
前言在过去的几年里,有许多程序员开始学习和使用编程语言。这其中包括C、C++、Java和Python。尽管有许多语言可供选择,但大多数程序员都会选择最容易学习的编程语言。如今,有很多编程语言供选择。程序员们在学习这些语言时可以自由地选择他们喜欢的方式,因为他们的目标是构建任何软件,而不仅仅是创建一个应用程序。你可以在Linux上学习C/C++、Java、Python、C#或JavaScript,你
探秘CommonJS:Node.js模块化核心解析
CommonJS是JavaScript的模块化规范,主要应用于服务器端环境(尤其是Node.js),其核心目标是解决代码组织、依赖管理和作用域隔离问题。以下是其核心要点:一、核心特性同步加载模块通过require()同步加载并执行,后续代码需等待模块加载完成后执行,适用于I/O快速的服务器环境(如本地文件读取)。作用域隔离每个文件视为独立模块,模块内定义的变量、函数默认私有(不污染全局作用域),仅
壹脉销客AI电子名片源码核心架构
为什么选择源码部署AI电子名片?在数字化转型浪潮中,越来越多的企业意识到拥有自主可控的电子名片系统的重要性。源码部署相比SaaS服务具有三大核心优势:数据完全自主-客户信息存储在企业自有服务器深度定制自由-可根据业务需求二次开发长期成本优化-一次部署永久使用壹脉销客AI电子名片源码核心架构壹脉销客提供的企业级电子名片解决方案采用前后端分离架构:前端技术栈(小程序端)javascript//小程序a
vue 进入一个页面,然后离开这个页面他就重新加载
Java&Develop
vue vue
vue进入一个页面,然后离开这个页面他就重新加载这个代码导致的注释即可window.location.reload();window.location.reload()是JavaScript中的一个方法,用于强制刷新当前页面(重新加载页面内容)。其作用类似于用户手动点击浏览器的刷新按钮,但可以通过代码精确触发。核心作用:刷新页面重新加载当前显示的文档(即重新请求当前URL的资源)。可选参数控制缓存
[python][flask]flask静态资源
在Flask中,静态资源(如图片、CSS文件、JavaScript文件等)通常存储在项目的static文件夹中。Flask会自动为静态资源提供服务,使得你可以通过URL访问这些文件。以下是关于Flask中静态资源的使用方法和一些高级配置。1.默认静态文件夹Flask默认会将项目根目录下的static文件夹作为静态资源目录。例如,如果你的项目结构如下:my_flask_app/│├──app.py├
JavaScript对象与Math对象完全指南
hui函数
Javascript javascript 前端 开发语言
JavaScript对象与Math对象完全指南对象基础概念与操作对象是什么?数据集合:包含相关数据和功能的容器结构组成:属性:描述对象特征的变量(名词性)方法:对象可执行的操作(动词性,本质是函数)对象创建与访问//创建对象letperson={ //属性 name:"张三", age:28, profession:"软件工程师", //方法 introduce(){ return`大家好,我
深入理解JavaScript作用域与编译过程
君子心理
作用域 编译 JavaScript 变量提升 闭包
背景简介在编程领域,作用域和编译过程是理解语言机制的关键概念。JavaScript作为一种广泛使用的语言,其作用域规则和编译机制尤其值得我们深入探讨。本文将基于《你不懂JS》系列书籍中的相关内容,解析JavaScript的作用域系统、函数闭包以及编译过程,帮助读者获得更深层次的理解。作用域是什么?在JavaScript中,作用域定义了变量和函数的可访问范围。编写程序时,我们会频繁使用变量来存储和操
掌握JavaScript对象与函数:深入理解原型与作用域
土城三富
JavaScript 对象 原型链 函数 作用域
掌握JavaScript对象与函数:深入理解原型与作用域背景简介在探索JavaScript的世界时,我们经常遇到对象和函数这两个核心概念。对象是JavaScript中最为基本的结构之一,而函数则是实现代码复用、封装和模块化的主要工具。本文将基于给定的书籍章节内容,深入探讨对象的更新机制、原型继承以及函数的多样性及其调用模式,同时分享对全局变量使用的思考。更新对象在JavaScript中,对象的属性
JavaScript函数使用模式与作用域的深入解析
JavaScript函数使用模式与作用域的深入解析JavaScript作为一门灵活且功能强大的编程语言,其函数的使用和作用域的特性是学习和开发中的关键点。本篇博客将深入解析JavaScript函数的几种使用模式,以及作用域的重要概念。构造器模式在JavaScript中,函数可以作为构造器(constructor)使用,当用new关键字调用时,函数会返回一个新对象。为了区分构造器函数和其他普通函数,
掌握JavaScript函数和作用域:提高代码复用性
捕风捉你
javascript 开发语言 ecmascript
在JavaScript编程中,函数是一个核心概念,它不仅能帮助我们将代码组织得更加清晰,还能提高代码的复用性。理解函数的定义与调用、掌握作用域的概念,对于编写高效和可维护的代码至关重要。本文将通过创建一个计时器应用的案例,帮助你全面掌握JavaScript中的函数和作用域知识。任务目标通过本教程,你将学习并掌握:函数的声明与调用函数表达式的使用作用域的概念及其在函数中的应用闭包的原理及实践学习内容
JavaScript 函数与作用域
前端人类学
JavaScript - 行为 javascript 函数 作用域 闭包 递归 作用域链
Hi,我是布兰妮甜!JavaScript是一种动态类型语言,它支持面向对象编程和函数式编程。函数是JavaScript的核心组成部分之一,而作用域则决定了变量的可见性和生命周期。本文将详细介绍JavaScript中的函数定义、调用、参数传递、闭包、递归以及作用域链的概念。文章目录一、函数基础二、作用域基础三、闭包四、递归五、作用域链六、总结一、函数基础1.定义函数函数声明函数可以通过函数声明的方式
深入理解作用域【JavaScript】
陆仟
Web前端开发 javascript
一、作用域的内部原理JavaScript的作用域机制是理解变量如何被访问和存储的重要概念。下面详细介绍作用域的内部原理,包括编译、执行、查询、嵌套和异常处理这五个步骤。1.编译在JavaScript的执行过程中,首要的步骤是编译。尽管JavaScript是解释性语言,但现代JavaScript引擎(如V8)在执行代码前会先进行编译。编译阶段主要完成以下几项工作:词法分析:将源代码分解成语法单元(t
即便你已经在浏览器中启用了 JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由 JavaScript 冲突
即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干
技术文章大纲:Anaconda插件开发挑战赛引言介绍Anaconda在数据科学和PythonUH开发中的重要性
aadwje
eclipse ide
即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干
深入分析 Node.js 的 V8 引擎如何在内部处理 JavaScript 代码,包括内存管理和垃圾回收机制。
海派程序猿
node.js javascript 开发语言
各位观众老爷们,晚上好!今天咱们就来聊聊Node.js的大心脏——V8引擎,看看它到底是怎么把咱们写的JavaScript代码给“消化”掉的。别害怕,今天咱不搞那些生涩难懂的学院派理论,尽量用大白话,外加一些“栗子”,保证让你听得津津有味。V8引擎:JavaScript的超级翻译官首先,简单介绍一下V8。V8是Google开发的高性能JavaScript和WebAssembly引擎,用C++写的。
Tailwind CSS 响应式设计实战指南
qcidyu
用户体验 代码优化 移动优先 网站布局 前端开发 Tailwind CSS 响应式设计
title:TailwindCSS响应式设计实战指南date:2024/6/13updated:2024/6/13author:cmdragonexcerpt:这篇文章介绍了如何运用TailwindCSS框架创建响应式网页设计,涵盖博客、电商网站及企业官网的布局实例,包括头部导航、内容区域、侧边栏、页脚及轮播图等组件的响应式实现。同时,探讨了与JavaScript框架集成、CSS预处理器配合、设计
JavaScript核心概念全解析
目录1.作用域(1)局部作用域(2)全局作用域2.垃圾回收(1)引用计数法(2)标记清除法3.闭包(1)作用(2)风险4.变量提升(1)var(2)let和const(3)const5.函数提升(1)函数声明(2)函数表达式6.函数参数(1)动态参数(2)剩余参数(3)展开运算符7.必须加分号的两种情况(1)立即执行函数(2)使用数组的时候8.箭头函数(1)特点9.Symbol10.生成器函数11
html
周华华
html
js
1,数组的排列
var arr=[1,4,234,43,52,];
for(var x=0;x<arr.length;x++){
for(var y=x-1;y<arr.length;y++){
if(arr[x]<arr[y]){
&
【Struts2 四】Struts2拦截器
bit1129
struts2拦截器
Struts2框架是基于拦截器实现的,可以对某个Action进行拦截,然后某些逻辑处理,拦截器相当于AOP里面的环绕通知,即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上,即使struts.xml没有任何关于拦截器的配置,Struts2也会为我们添加一组默认的拦截器,最常见的是,请求参数自动绑定到Action对应的字段上。
Struts2中自定义拦截器的步骤是:
make:cc 命令未找到解决方法
daizj
linux 命令未知 make cc
安装rz sz程序时,报下面错误:
[root@slave2 src]# make posix
cc -O -DPOSIX -DMD=2 rz.c -o rz
make: cc:命令未找到
make: *** [posix] 错误 127
系统:centos 6.6
环境:虚拟机
错误原因:系统未安装gcc,这个是由于在安
Oracle之Job应用
周凡杨
oracle job
最近写服务,服务上线后,需要写一个定时执行的SQL脚本,清理并更新数据库表里的数据,应用到了Oracle 的 Job的相关知识。在此总结一下。
一:查看相关job信息
1、相关视图
dba_jobs
all_jobs
user_jobs
dba_jobs_running 包含正在运行
多线程机制
朱辉辉33
多线程
转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx
程序、进程和线程:
程序是一段静态的代码,它是应用程序执行的蓝本。进程是程序的一次动态执行过程,它对应了从代码加载、执行至执行完毕的一个完整过程,这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位,一个进程执行过程中可以产生多个线程,每个线程有自身的
web报表工具FineReport使用中遇到的常见报错及解决办法(一)
老A不折腾
web报表 finereport java报表 报表工具
FineReport使用中遇到的常见报错及解决办法(一)
这里写点抛砖引玉,希望大家能把自己整理的问题及解决方法晾出来,Mark一下,利人利己。
出现问题先搜一下文档上有没有,再看看度娘有没有,再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题,大多文档上都有提到的。
1、address pool is full:
含义:地址池满,连接数超过并发数上
mysql rpm安装后没有my.cnf
林鹤霄
没有my.cnf
Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的,
至于为什么没有这个文件而MySQL却也能正常启动和作用,在这儿有两个说法,
第一种说法,my.cnf只是MySQL启动时的一个参数文件,可以没有它,这时MySQL会用内置的默认参数启动,
第二种说法,MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件,这种说法仅限于r
Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题
aigo
root
原文:http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/
Step 4: Run ADB command from your PC
On the PC, you need install Amazon Fire ADB driver and instal
javascript 中var提升的典型实例
alxw4616
JavaScript
// 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧
myname = 'global';
var fn = function () {
console.log(myname); // undefined
var myname = 'local';
console.log(myname); // local
};
fn()
// 上述代码实际上等同于以下代码
m
定时器和获取时间的使用
百合不是茶
时间的转换 定时器
定时器:定时创建任务在游戏设计的时候用的比较多
Timer();定时器
TImerTask();Timer的子类 由 Timer 安排为一次执行或重复执行的任务。
定时器类Timer在java.util包中。使用时,先实例化,然后使用实例的schedule(TimerTask task, long delay)方法,设定
JDK1.5 Queue
bijian1013
java thread java多线程 Queue
JDK1.5 Queue
LinkedList:
LinkedList不是同步的。如果多个线程同时访问列表,而其中至少一个线程从结构上修改了该列表,则它必须 保持外部同步。(结构修改指添加或删除一个或多个元素的任何操作;仅设置元素的值不是结构修改。)这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象,则应该使用 Collections.synchronizedList 方
http认证原理和https
bijian1013
http https
一.基础介绍
在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。
Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。
http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后
【Java范型五】范型继承
bit1129
java
定义如下一个抽象的范型类,其中定义了两个范型参数,T1,T2
package com.tom.lang.generics;
public abstract class SuperGenerics<T1, T2> {
private T1 t1;
private T2 t2;
public abstract void doIt(T
【Nginx六】nginx.conf常用指令(Directive)
bit1129
Directive
1. worker_processes 8;
表示Nginx将启动8个工作者进程,通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行
nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
lua 遍历Header头部
ronin47
lua header 遍历
local headers = ngx.req.get_headers()
ngx.say("headers begin", "<br/>")
ngx.say("Host : ", he
java-32.通过交换a,b中的元素,使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。
bylijinnan
java
import java.util.Arrays;
public class MinSumASumB {
/**
* Q32.有两个序列a,b,大小都为n,序列元素的值任意整数,无序.
*
* 要求:通过交换a,b中的元素,使[序列a元素的和]与[序列b元素的和]之间的差最小。
* 例如:
* int[] a = {100,99,98,1,2,3
redis
开窍的石头
redis
在redis的redis.conf配置文件中找到# requirepass foobared
把它替换成requirepass 12356789 后边的12356789就是你的密码
打开redis客户端输入config get requirepass
返回
redis 127.0.0.1:6379> config get requirepass
1) "require
[JAVA图像与图形]现有的GPU架构支持JAVA语言吗?
comsci
java语言
无论是opengl还是cuda,都是建立在C语言体系架构基础上的,在未来,图像图形处理业务快速发展,相关领域市场不断扩大的情况下,我们JAVA语言系统怎么从这么庞大,且还在不断扩大的市场上分到一块蛋糕,是值得每个JAVAER认真思考和行动的事情
安装ubuntu14.04登录后花屏了怎么办
cuiyadll
ubuntu
这个情况,一般属于显卡驱动问题。
可以先尝试安装显卡的官方闭源驱动。
按键盘三个键:CTRL + ALT + F1
进入终端,输入用户名和密码登录终端:
安装amd的显卡驱动
sudo
apt-get
install
fglrx
安装nvidia显卡驱动
sudo
ap
SSL 与 数字证书 的基本概念和工作原理
darrenzhu
加密 ssl 证书 密钥 签名
SSL 与 数字证书 的基本概念和工作原理
http://www.linuxde.net/2012/03/8301.html
SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥,握手协议本身是基于非对称加密机制的,之后就使用共同的密钥基于对称加密机制进行信息交换。
http://www.ibm.com/developerworks/cn/webspher
Ubuntu设置ip的步骤
dcj3sjt126com
ubuntu
在单位的一台机器完全装了Ubuntu Server,但回家只能在XP上VM一个,装的时候网卡是DHCP的,用ifconfig查了一下ip是192.168.92.128,可以ping通。
转载不是错:
Ubuntu命令行修改网络配置方法
/etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0,让网卡开机自动挂载.
1. 以D
php包管理工具推荐
dcj3sjt126com
PHP Composer
http://www.phpcomposer.com/
Composer是 PHP 用来管理依赖(dependency)关系的工具。你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖的库文件。
中文文档
入门指南
下载
安装包列表
Composer 中国镜像
Gson使用四(TypeAdapter)
eksliang
json gson Gson自定义转换器 gsonTypeAdapter
转载请出自出处:http://eksliang.iteye.com/blog/2175595 一.概述
Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例
例如我们通常去注册时(那些外国网站),会让我们输入firstName,lastName,但是转到我们都
JQM控件之Navbar和Tabs
gundumw100
html xml css
在JQM中使用导航栏Navbar是简单的。
只需要将data-role="navbar"赋给div即可:
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active&qu
利用归并排序算法对大文件进行排序
iwindyforest
java 归并排序 大文件 分治法 Merge sort
归并排序算法介绍,请参照Wikipeida
zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F
基本思想:
大文件分割成行数相等的两个子文件,递归(归并排序)两个子文件,直到递归到分割成的子文件低于限制行数
低于限制行数的子文件直接排序
两个排序好的子文件归并到父文件
直到最后所有排序好的父文件归并到输入
iOS UIWebView URL拦截
啸笑天
UIWebView
本文译者:candeladiao,原文:URL filtering for UIWebView on the iPhone说明:译者在做app开发时,因为页面的javascript文件比较大导致加载速度很慢,所以想把javascript文件打包在app里,当UIWebView需要加载该脚本时就从app本地读取,但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法,第一次翻译,难免有
索引的碎片整理SQL语句
macroli
sql
SET NOCOUNT ON
DECLARE @tablename VARCHAR (128)
DECLARE @execstr VARCHAR (255)
DECLARE @objectid INT
DECLARE @indexid INT
DECLARE @frag DECIMAL
DECLARE @maxfrag DECIMAL
--设置最大允许的碎片数量,超过则对索引进行碎片
Angularjs同步操作http请求with $promise
qiaolevip
每天进步一点点 学习永无止境 AngularJS 纵观千象
// Define a factory
app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) {
var deferred = $q.defer();
AccountService.getProfile().then(function(res) {
hibernate联合查询问题
sxj19881213
sql Hibernate HQL 联合查询
最近在用hibernate做项目,遇到了联合查询的问题,以及联合查询中的N+1问题。
针对无外键关联的联合查询,我做了HQL和SQL的实验,希望能帮助到大家。(我使用的版本是hibernate3.3.2)
1 几个常识:
(1)hql中的几种join查询,只有在外键关联、并且作了相应配置时才能使用。
(2)hql的默认查询策略,在进行联合查询时,会产
struts2.xml
wuai
struts
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache