brython | 初始化项目

简介: brython | 初始化项目

你可能很好奇,brython是什么? 有什么用? 如何快速初始化一个项目? 这篇文章可以告诉你哦。



brython是什么


brython是一个python 3项目,该项目的目的是让不熟悉javascript的小伙伴,也能够使用python来作为web浏览器的脚本语言。


该项目的github地址为: github.com/brython-dev…

作为当今的web,我们知晓,不仅会将服务器内容输出到页面,还会与用户进行交互,所以在使用python作为脚本语言的时候,会面临一个问题,我们如何获取页面对象的数据,换言之即如何操作DOM?



brython如何操作DOM


这里只是铺垫一下brython操作DOM的区别,无需实验,后续会做详细介绍。


在了解这个问题之前,我们不妨搜索一下javascript是如何操作DOM的呢?哦,原来在javascript中有一个对象叫做document


javascript中,我们获取id的元素,我们可以使用如下语句:

var userInfo = document.getElementById("userInput")


可惜python原生并没有给我们提供操作DOM的对象,但是brython给我们提供了browser包,即实现同样的功能,我们使用brython定义则如下:

import browser 
userInfo = browser.document["userInput"]


brython生态如何


不建议在生产环境中使用brython,容易蹚坑。遇到问题查询资料较少,需要自己查询源码或者做实验。 目前环境下,建议仅学习使用。哦,对了,如果你想写出不可维护的代码,那么恭喜你,这个非常适合你,届时如果上了生成环境,那么前端看不懂python代码,后端看不懂html/css代码,你就成为了公司的中流砥柱。



初始化项目


我们想编写brython,有如下途径:


  • 直接在html中引用brython.js
  • 使用【码上掘金】进行编写brython
  • 在本地安装brython

直接引用brython.js

我们直接新建一个demo.html键入如下代码即可


image.png


若要使用brython作为动态语言进行输出的话,我们需要在添加onload="brython()"

而python代码则应该用<script type="text/python"></script>标签包含。

具体python代码如下:

import browser
browser.document <= browser.html.H1("Hello Brython!")
browser.document <= browser.html.H3("by " + browser.html.A("juejin pdudo",href="https://juejin.cn/user/2981531267892856/posts"))


如上代码的意思是,向页面插入h1标签,内容为: "Hello Brython!" , 而后再插入h3标签,内容为:"by juejin pdudo",再次基础上"juejin pdudo",我们建立一个a标签,指向我的掘金地址。



使用【码上掘金】编写brython


这里要注意一下,所谓的使用【码上掘金】,严格来说是归纳于第一类,但是这里单独列出来。因为其可以快速的编写该项目。


如何在码上掘金引入brython,可以参考掘金发布的github地址: github.com/xitu/jcode-…

我们将上述代码在码上掘金编写,具体代码如下。


code.juejin.cn/pen/7153552…



在本地安装使用brython


在使用之前,请将python版本升级为3.10

使用pip install brython可以安装brython

使用brython-cli install可以初始化一个项目,产生的文件为:


image.png

直接引用本地的js就可以了,代码是一样的,这里暂不介绍了。



总结


brython也许对于前端大佬们来说是鸡肋,但是对于不熟悉javascript而又了解python的后端们来说,那就是香饽饽。 文章介绍了brython基本内容,以及和javascript的区别,最后讲述了如何初始化一个brython项目。


怎么样好玩么? 快动动你的小手指来试试吧。





相关文章
|
8月前
【Qt 学习笔记】使用QtCreator创建及运行项目 | 项目初始代码解释
【Qt 学习笔记】使用QtCreator创建及运行项目 | 项目初始代码解释
1170 1
|
8月前
|
存储 JavaScript 中间件
Nuxt3 实战 (一):初始化项目
这篇文章介绍了Nuxt框架的基本信息,包括什么是Nuxt以及Nuxt3的优点。文章还介绍了Nuxt3的一些特点,如服务端渲染和静态站点生成、模块化、文件系统路由等。此外,文章还提供了项目安装的步骤和目录结构。最后,文章提到了下一步计划,即配置 Eslint、Prettier、Husky、lint-staged、commitlit项目提交规范的过程。
225 3
Nuxt3 实战 (一):初始化项目
|
8月前
|
Perl
如何修改第三方库
如何修改第三方库
63 0
|
8月前
|
JavaScript
Mac 使用CLI脚手架创建 Vue项目、不同版本创建项目的项目结构差异
Mac 使用CLI脚手架创建 Vue项目、不同版本创建项目的项目结构差异
|
8月前
|
存储 缓存 算法
【Conan 入门教程】从零开始编写第一个自定义部署器
【Conan 入门教程】从零开始编写第一个自定义部署器
168 1
|
8月前
|
Python
【Python笔记】pip intall -e命令:让你的工程直接使用开源包的源码,可断点调试,修改源码!
【Python笔记】pip intall -e命令:让你的工程直接使用开源包的源码,可断点调试,修改源码!
283 0
|
8月前
|
C++
[项目配置] 配置Qt函数库和ui界面库的封装并调用的项目(二)
[项目配置] 配置Qt函数库和ui界面库的封装并调用的项目
122 0
|
缓存 Java 程序员
2023年最新无脑安装 Go lang 环境配置并编写、运行、打包第一个 Golang 程序详细步骤,附带图文教程
GO语言也称为Golang,由谷歌出品,随着云计算的发展而不断壮大,近年来,使用GO语言的程序员越来越多,GO程序员一般被称为GOpher。由于博主硬盘空间较为充足,不考虑移动软件安装目录,需要者请自行寻找方法,本文为无脑操作。
415 0
|
资源调度 监控 前端开发
React Native环境配置、初始化项目、打包安装到手机,以及开发小知识
React Native环境配置、初始化项目、打包安装到手机,以及开发小知识
471 1
React Native环境配置、初始化项目、打包安装到手机,以及开发小知识
|
Java Devops Linux
kkitDeploy功能介绍--一键初始化开发环境
kkitDeploy功能介绍--一键初始化开发环境

热门文章

最新文章

相关实验场景

更多
下一篇
开通oss服务