前言 最近一直重构项目的前端代码,也参考了各种前端代码的最佳实践,目的是让前端的HTML,CSS,JavaScript代码更符合标准,有更好的性能,更好的可维护性,尝到了重构后的甜头,也萌生了写这个系列博客的念头。前端代码有其固有的灵活性,这就导致了目前前端代码非常混乱的局面,本系列文章希望能起到抛砖引玉的作用,让更多的人重视前端代码的质量,编写更标准的前端代码。 本系列文章共有三篇,分别讨论HTML,CSS,Javascript,本篇将讨论Javascript。 目前,Javascript已广泛运用于前端
什么是JSON JSON(JavaScript Object Notation)是一种轻量级的数据交换语言,以文字为基础,且易于让人阅读。JSON是Javascript的一个子集,但JSON是独立于语
JSON概念很简单,JSON 是一种轻量级的数据格式,他基于 javascript 语法的子集,即数组和对象表示。由于使用的是 javascript 语法,因此JSON 定义可以包含在javascript 文件中,对其的访问无需通过基于 XML 的语言来额外解析。不过在使用 JSON 之前,很重要的一点是理解 javascript 中数组及对象字面量的特殊语法。
https://github.com/zhangyue0503/html5js/blob/master/singlepagewebapplications/spa1.html
1 1. 什么是JSX语法 2 2. jsx语法示例与渲染的VNode节点 3 3. jsx的渲染流程 4 4. jsx中的js和html的写法不同 5 a. js:{ js语法 } 6 i. 花括号里边一定要返回字符串才能渲染 7 ii. {{ 双花括号表示js语法里的对象格式 }} 8 iii. 花括号里可以写表达式、三元、有返回值且返回字符串的函数调用 9 iv. 花括号里直接放对象报错 10 v. 数组可以直接被渲染到页面中。 11 b. html:<html语法> 12 i. class等关键字不能用做html的属性(如class、for等不行,需要替换成别的) 13 1) class -> className 14 2) for -> htmlFor 15 c. a标签写了以后,必须写href属性 16 d. 组件根节点只能是一个标签,不能有并列标签。否则报错! 17 三种方法实现空白标签包裹:(就像小程序的block标签、又像vue的template标签) 18 i. <React.Fragment>空白标签1</React.Fragment> 19 ii. import { Fragment } from 'react';<Fragment>空白标签1</Fragment> 20 iii. <>空白标签2</> 21 e. 列表渲染 - 迭代的方法(没有for):利用数组进行渲染 22 f. key值唯一的绑定 23 g. 条件切换的使用(没有if else、简直反人类) 24 h. 动态样式的绑定 - style的值需要是一个js语法,包裹在对象里边。 25 i. v-html类似用法:dangerouslySetInnerHTML={ {__html: variableName} }【innerHTML容易造成xss攻击,避免使用】 26 j. jsx中的注释 27 i. 多行注释:{ /** js注释 **/ } 28 ii. 单行注释: 29 { 30 // 单行注释,花括号如果提上来就被注释了。所以换行 31 }
统一是指,对于同一个概念,在程序中用同一种表示方法,比如对于供应商,既可以用supplier,也可以用provider,但是我们只能选定一个使用,至少在一个项目中保持统一。统一是作为重要的,如果对同一概念有不同的表示方法,会使代码混乱难以理解。即使不能取得好的名称,但是只要统一,阅读起来也不会太困难,因为阅读者只要理解一次。
永远一致同一套编码规范,可以是这里列出的,也可以是你自己总结的。如果您发现本规范中有任何错误,敬请在问题中指正。
Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。这意味着它会实时运行你输入后的代码,并在编辑器中显示各种执行结果,建议亲自尝试一下。
此处注意一点:在export函数后面不要加逗号!虽然是在小程序里面,但是这是js文件,且不在page和component函数里面。
该 PHP 编码规范基本上是同 PSR 规范的。有一部分的编码规范 PSR 中是建议,此编码规范会强制要求。 此编码规范 是以 PSR-1 / PSR-2 / PSR-2扩展 为蓝本,并增加了相应的细节说明。
本规范希望通过制定一系列规范化 PHP 代码的规则,以减少在浏览不同作者的代码时,因代码风格的不同而造成不便。
编码过程中,尤其在我们使用js进行函数式编程时,代码里会有很多的花括号,想要保证它们对称十分困难,所以就出现了上面小粉同学的尴尬局面,相信很多人都遇到过类似的情况。
副作用:(side effects),一个文件只做一件事情,如果做了其他事情就是产生了副作用
在说啥是PSR-[0-4]规范的之前,我觉得我们有必要说下它的发明者和规范者:PHP-FIG。就是这个联盟组织发明和创造了PSR-[0-4]规范
这是典型好莱坞情节:分道扬镳的两位老朋友间的战斗。摩擦经常开始于一位对另一位不言而喻的领域感兴趣。这部电影的编程语言版本是Node.js的引入将好友情节变成一场旗鼓相当的比赛。PHP和JavaScript,两个曾经一起统治互联网的合作伙伴现在为了开发者心中的份额开始一决雌雄。
微信小程序的程序语法格式类似json格式,服务器也要采用结果以json的形式返回给小程序,这种格式需要对特殊字符进行编码,如下举例一个json字符串。
vue 采用双花括号{{}}绑定数据 react 采用单花括号{}绑定数据 angular 采用双花括号{{}}绑定数据
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。
我们先看上面的官方解释,也可以简单理解为过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。
此规范起到继承,扩展和替换 PSR-2 的作用, 同时编码风格遵守 PSR-1 这个基础编码标准。
本文实际只是翻译 .NET Core foundational libraries 官方文档的编码风格。
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。 不把require和import整清楚,会在未来的标准编程中死的很难看。 require时代的模块 node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能。模块化编程在js界流行,也是基于此,随后在浏览器端,requirejs
7. 如果小写字母开头,就将标签转化为 html 同名元素,如果 html 中无该标签对应的元素,就报错;如果是大写字母开头,react 就去渲染对应的组件,如果没有就报错
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格局。它基于ECMAScript的一个子集。JSON选用完全独立于言语的文本格局,但是也使用了类似于C言语宗族的习气(包含C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使json调试成为抱负的数据交换言语。易于人阅览和编写,同时也易于机器解析和生成(一般用于提高网络传输速率)。
如果你是一个人开发,当然不需要在意这些问题,但是如果你的代码需要展现给别人,或者你需要与别人协同开发,编码规范就非常有必要了。
方括号的[]在json中调试是一个数组,而花括号{}在json中表示一个对象,不过二者在PHP中基本上一个empty就可以判断为i空了,但在js里好像就有一些麻烦了,可能需要下面的判断方式。
parse:用于 json 转为 js 的对象 stringfy:用于将 js 对象转为 json
尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
控制流语句通过使用决策、循环和分支来分解执行流。JavaScript支持的决策语句(if、if-else、switch)、循环语句(for、while、do-while)和分支语句(break、continue、return)。
PSR 是PHP Standard Recommendation的简写,它其实应该叫PSRs,即系列推荐标准:目前通过的规范有PSR-0(Autoloading Standard)、PSR-1(Basic Coding Standard)、PSR-2(Coding Style Guide)、PSR-3(Logger Interface)、PSR-4(Improved Autoloading)。它不是PHP官方标准,而是从如Zend、Symfony2等知名PHP项目中提炼出来的一系列标准,目前有越来有
• 在方法中的局部变量(local variable)和第一条语句之间
正则表达式是编程语言处理字符串格式的一种逻辑式子,它利用若干保留字符定义了形形色色的匹配规则,从而通过一个式子来覆盖满足了上述规则的所有字符串。正则表达式的保留字符主要有:圆括号、方括号、花括号、竖线、横线、点号、加号、星号、反斜杆等等。
Prettier 和 ESLint 是两个互补的工具,它们共同确保代码的风格一致性和质量。Prettier 负责格式化代码,而 ESLint 则执行更复杂的静态分析和规则检查。
Filter过滤器:客户端在请求服务器资源前和返回响应,会通过过滤器,以拦截请求完成特殊功能。登录校验、统一编码校验等一些通用操作放置到过滤器。 定义类实现接口Filter(javax.servlet),复写方法(init(服务器启动调用),doFilter(写入FilterChain.doFilter进入方法放行,之后的代码为返回响应执行的信息),destory(服务器关闭前执行)),配置拦截路径(@WebFilter(/*为所有资源都拦截))。 web.xml配置(WEB_INF下),配置filter标签下的filter-name,filter-class。配置filter-mapping标签下url-pattern,filter-name。也可直接用注解@WebFilter配置即可。 配置详解:拦截路径配置(具体资源路径、目录/xxx/*、后缀*.jsp,所有资源/*等)。 配置符合请求方式访问资源前进行的拦截(REQUEST浏览器直接请求,FORWARD转发访问资源,INCLUDE包含访问资源,ERROR跳转资源,ASYNC异步访问资源),使用注解的dispatcherType(可传入数组)。 也可配置web.xml的dispatcher标签拦截符合条件的资源被访问方式。 过滤器链(多个过滤器),资源进入通过的过滤器和返回的顺序相反。使用注解:过滤器执行的先后使用类名字符串比较(如AFilter,BFilter等)顺序执行。使用web.xml:filter-mapping的先后顺序执行 设置登录校验,可以在Filter中对指定页面校验session值判断放行和跳转等。敏感词汇过滤:使用装饰模式、代理模式等来增强request。在代理模式中使用代理对象代理真实对象达到增强真实对象,代理中增强返回值为。 静态代理使用类文件描述代理模式,动态代理在内存中形成代理类。代理对象和真实对象实现相同接口,使用Proxy的newInstance获取代理对象(传入如:lenovo. getClass(). getClassLoader(), lenovo. getClass(). getInterfaces(), new InvocationHandler( ),然后重写invoke),使用代理对象获取真实。 proxy为代理对象,method为代理对象被调用的方法,args为被调用时传递的参数。invoke中写入Object obj=method.invoke(xxx,args);return obj方式增强真实对象。通过修改代理传入的参数,返回值,和方法体,进行增强和修改。
在本教程中,您将学习什么是JSON以及如何在JavaScript和Node.js中使用它。
Es6的模块功能几乎所有人都在用,而且实现的非常简单,可以说成为了通用的模块方案。主要就到处模块export和导入模块import。
需要注意的是,当在style对象上设置样式时,多单词属性诸如background-color 需要设置为驼峰样式。style属性的值被包装在两对花括号中。
JavaScript使用两种相等性操作符:===|!==和==|!=。通常认为做比较的最佳实践是使用前一组操作符。
JavaScript 可以分批地组合起来。作用是一并地执行语句序列。以左花括号开始,以右花括号结束。
原文链接:https://bobbyhadz.com/blog/react-inline-styles[1]
[TOC] (1) HTML编码规范 用两个空格来代替制表符(tab),嵌套元素应当缩进一次(即两个空格); 属性的定义确保全部使用双引号,绝不要使用单引号 不要省略可选的结束标签(closing tag),除了单标签还是需要注意在其尾部加上斜线; 尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。 HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。 #class 用于标识高度可复用组件,因此应该排在首位。 #id 用于标识具体组件,
ES6模块主要有两个功能:export和import export:用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 import:用于在一个模块中加载另一个含有export接口的模块。 在Javascript ES6中,export与export default均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export、import可以有多个,export d
概述 我们先看一下什么是json。 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。 JSON 语法规则 在javascript语言中,一切都是对象。因此,任何
参数展开 路径名展开 [root@senlong usr]# echo * bin etc games include lib lib64 libexec local man sbin share src tmp 为何echo不打印 * ?是因为shell把 * 展开成了另外的东西(在这种情况下,就是在当前工作目录下的文件名字) 这种通配符工作机制叫做路径名展开 [root@senlong usr]# echo l* lib lib64 libexec local 算术表达式展开 shell 允许算术表达式
领取专属 10元无门槛券
手把手带您无忧上云